• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
stevekrouse

stevekrouse

OpenTownie

AI assistant that can edit Val Town Projects
Remix of shouser/OpenTownie
Public
Like
4
OpenTownie
Home
Code
9
backend
3
components
1
frontend
3
routes
14
README.md
entry.client.tsx
entry.server.tsx
H
index.ts
server.tsx
Branches
2
Pull requests
1
Remixes
8
History
Environment variables
2
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
3/22/2025
Viewing readonly version of main branch: v759
View latest version
README.md

OpenTownie

OpenTownie is a Val Town Project that lets you edit other Val Town Projects with AI.

React Router 7 Refactoring

The app has been refactored to use React Router 7 with proper routing. The main changes include:

  • Server-side rendering (SSR) with client-side hydration
  • Proper URL-based routing with /login, /projects, and /projects/:name routes
  • State management through React Router loaders and actions
  • Cookie-based authentication instead of localStorage
  • Improved navigation between pages

Project Structure

├── server.tsx              # Main entry point
├── entry.server.tsx        # Server-side rendering
├── entry.client.tsx        # Client-side hydration
├── routes/                 # Route definitions
│   ├── index.ts            # Route configuration
│   ├── layout.tsx          # Main layout component
│   ├── layout.server.ts    # Server-side loader/action
│   ├── layout.client.ts    # Client-side loader/action
│   ├── home.tsx            # Home page
│   ├── login.tsx           # Login page
│   ├── login.server.ts     # Server-side login handler
│   ├── login.client.ts     # Client-side login handler
│   ├── projects.tsx        # Projects list page
│   ├── projects.server.ts  # Server-side projects loader
│   ├── projects.client.ts  # Client-side projects loader
│   ├── project.tsx         # Project detail page
│   ├── project.server.ts   # Server-side project loader/action
│   └── project.client.ts   # Client-side project loader/action
└── frontend/               # Frontend components
    ├── components/         # React components
    └── utils/              # Utility functions

Todos

  • Show reasoning in a detail
  • Consider asking it to write the minimum code possible
  • Add caching (post in the vercel ai discussion about how it's not working)
  • For login, have a button that reloads the page
  • Start a timer for messages
  • Add more indicators that it's "still working"
  • Require users supply their own Anthropic token?
  • Add cost indications on messages
  • Add a bell noise when the message is done to let us know
  • Launch!
  • Rebuild as React Router
  • Let it select the branch name from a dropdown
  • Consider giving it a tool to replace whole files
  • Consider giving it a tool to read all files and folders
  • Persistent threads?
  • Have it default to creating a new branch off main and then embedding and iframe to the resulting http val and give you a link to a pr opening url
  • prompt it to use the thinking tool
  • delete file command
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.