Smithy
A proof of concept built using Claude Code with Claude API providing code generation and here.now hosting the resulting sites
Demo
Why I built this?
I tried one of the popular well funded 'app builder' tools and I wondered how hard is it to actually make one. Here.now had just been released so I thought of building one with Claude API as the backend and Here.now as the hosting provider.
Honestly, I didnt expect this to work. The first version built on Claude chat (yep, not Claude code) looked ridiculously promising for me to pursue.
I didnt really give this project much thought in terms of design, but I attempted to mimic Plan mode by adding a short intro wizard which would help narrow down what you want to build. This approach would be useful for new folks who have no prior experience building on the internet.
How it works
Here's what actually happens when you click Deploy:
- Your browser sends the generated HTML to the Smithy server
- The server makes a simple API call to here.now (a free hosting service) to reserve a URL
- The server uploads your HTML file to that URL
- The server tells here.now "all done, make it live"
That's it. Three HTTP requests.
What I learned
- It's funny, but the very first version that Claude came up with was 'Dark IDE aesthetic with Neon colors', it shows the bias in the system of existing app builders. I don't think developers are their true target audiences but somehow they still seem to retain the aesthetic. So I asked it to make the style inviting for teenagers and it instantly over-indexed on making it pink and unicorny. I finally got it to reach a warm color scheme which you see in the video.
- Each generation using Claude APi cost me about 20-30 cents. That made me realize that there's a fair amount of margin that these app builder tools are playing with, thus justifying their large funding valuations. But honestly nothing beats working with a base model like Claude or Codex. It's far superior and far cheaper.
The stack
- Frontend: React with Vite
- Backend: Express (Node.js)
- AI: Claude API via Anthropic's SDK — used only for generating the site code
- Hosting: here.now — used for deploying the finished sites
- Storage: localStorage for now (project history, chat threads)
The whole thing runs as two processes — a Vite dev server for the frontend and an Express server that handles the Claude API calls and deployment.