A local generative-UI playground driven by the Claude Code CLI. Each workspace maps to a folder of plain HTML / CSS / JS files under ./workspaces/<name>/. You describe UI changes in natural language, and Claude generates or updates the files in real time with a live in-browser preview powered by Sandpack.
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS v4 |
| Preview | @codesandbox/sandpack-react |
| Runtime | Node.js ≥ 20 |
- Node.js 20+ — download
- npm 10+ (bundled with Node 20)
- Claude Code CLI installed and authenticated — docs
Copy .env.example to .env.local and fill in any values you need:
cp .env.example .env.localThe app spawns the claude CLI as a subprocess, so there are no required API keys in .env.local. Authenticate the CLI once with:
claude auth loginAlternatively, set ANTHROPIC_API_KEY in .env.local and the CLI will pick it up automatically.
.env.localis gitignored and never committed.
make setup # install dependencies
make dev # start the dev server → http://localhost:3000Run make help (or just make) at any time to see this summary.
Installs all npm dependencies.
make setupEquivalent to npm install. Run this once after cloning, and again whenever package.json changes.
Starts the Next.js development server with hot-reload.
make devOpens at http://localhost:3000 by default. The server watches for file changes and refreshes automatically.
Runs all static quality checks: ESLint (next lint) and TypeScript type checking (tsc --noEmit). There is no runtime test suite — tests are enforced at the type and lint level.
make testYou can also run checks individually:
make lint # ESLint only
make type-check # TypeScript onlyRemoves build artifacts and node_modules.
make cleanUse this for a full reset. Run make setup afterwards to reinstall dependencies.
If you only want to delete the build output without removing node_modules, use:
make clean-buildBuild and serve the production bundle locally:
make build # compiles and optimises for production → .next/
make start # starts the production server on http://localhost:3000make start requires a successful make build first.
.
├── app/ # Next.js App Router
│ ├── api/ # API routes (chat, workspaces, files, design-system)
│ ├── w/[workspace]/ # Per-workspace UI page
│ ├── layout.tsx # Root HTML shell + theme bootstrap
│ └── page.tsx # Home – workspace list
├── components/ # Shared React components
├── data/
│ └── design-system.json
├── lib/ # Utility modules and custom hooks
├── workspaces/ # User-generated workspace folders (gitignored)
├── Makefile
└── README.md
Each workspace is a named folder inside ./workspaces/. The app creates and manages these via the /api/workspaces routes. Workspace contents are gitignored (only workspaces/.gitkeep is tracked).
Private — all rights reserved.