Update the value, not the entire tree.
Signals bind directly to the text, attribute, or keyed region that uses them. Server-render first, then hydrate the existing DOM without throwing it away.
Clank is the AI-first full-stack TypeScript framework. Build a fast, reactive interface for people and a secure, discoverable MCP interface for agents—from the same typed server actions.
npm i -g @clank.run/frameworkThe MCP contract stays in lockstep with your typed queries and mutations.
Copy the complete setup prompt into your coding agent. It checks your environment, installs Clank, creates your app, and tests the first useful flow.
Replace the three bracketed values with your app name, directory, and idea before sending.
Read the setup walkthrough →Set up my development environment and start building an app with Clank.
App name: [My App]
Project directory: [my-app]
App idea and first useful user flow: [Describe who it is for and what they should be able to do.]
Do the setup and implementation, not just a plan. Use the published
@clank.run/framework npm package; the unscoped clank package is unrelated.
Do not clone the framework repository to build my application.
1. Inspect the environment.
Identify the OS, shell, working directory, and any existing application.
Read relevant README.md and AGENTS.md files and inspect existing changes.
Reuse an existing Clank app when present; do not overwrite unrelated work.
If my app idea is still a placeholder, ask what I want to build while
completing the environment checks that do not depend on that answer.
2. Install missing prerequisites.
Run node --version and npm --version. Prefer Node 24 LTS with npm 10+;
Clank supports Node >=22.16 and <27. Keep an existing supported version.
If Node/npm is missing or unsupported, use the existing version manager
or an official installer appropriate to this OS. Explain any step that
needs my administrator access, then resume after I complete it. Verify
the installed versions and PATH in the shell that will run the app.
SQLite and the TypeScript/TSX compiler are included. Do not install a
separate database server, Docker, or another framework toolchain for
the default starter.
3. Install and inspect Clank.
Run npm install --global @clank.run/framework@latest, then clank --version
and clank templates --json. If global installation is unavailable, use
npm exec --yes --package=@clank.run/framework@latest -- clank <arguments>
for these CLI commands instead of using sudo or installing unscoped clank.
Read https://docs.clank.run/llms.txt and the relevant current guides;
verify available commands with clank help --json rather than guessing APIs.
4. Create the application and install its dependencies.
For a new app, use auth-todo as the default authenticated full-stack
starter unless another listed template better fits my request:
clank create <project-directory> --template auth-todo --name "<app-name>" --json
Enter the generated directory and run npm install. This also installs
the starter's Tailwind build dependencies. Keep package-lock.json.
Run npm audit, review any findings, apply compatible fixes, and report
unresolved advisories. Do not force breaking dependency changes.
If this is an existing Clank app, follow its setup instructions instead
of scaffolding over it. Read its generated README.md and AGENTS.md.
5. Verify the starter before changing it.
Run npm test, npm run doctor, and npm run deploy:check. Fix local setup
failures first. These checks do not require a hosted Clank account;
report optional login/project-link notices separately from failures.
Keep this application separate from Clank's own source repository.
6. Build the first useful flow from my app idea.
Edit src/, not generated dist/. Put schemas, validation, permissions,
and trusted data operations in src/backend.ts; UI in src/view.tsx;
browser coordination in src/app.tsx; and routes/SSR in src/server.tsx.
Preserve authentication, user-owned data isolation, live updates, and
the shared typed browser/MCP action contract. Use explicit workspace
authorization for shared data. Add numbered migrations without changing
applied migrations. Keep secrets and local databases out of source control.
Add or update the app-owned tests for the behavior I asked for.
7. Run and test the actual app.
Run npm run dev -- --host=127.0.0.1 and verify its reported local URL
and /healthz. Use disposable local accounts to check registration/login,
the main user flow, and account isolation. Check browser errors and a
phone-width layout when browser tools are available; otherwise state
which browser checks you could not perform. If the app uses queued
jobs, run npm run jobs:worker in a separate terminal.
Re-run npm test, npm run doctor, and npm run deploy:check after changes.
8. Hand over a working development app.
Leave the development server available and report the project directory,
Node/npm/Clank versions, local URL, implemented flow, commands and results,
and any remaining blockers. Include how to restart the app and its worker.
Do not create cloud resources or deploy publicly unless I ask for that.Clank owns the seams that usually slow an application down: rendering, data, identity, realtime coordination, agent access, and release safety.
Signals bind directly to the text, attribute, or keyed region that uses them. Server-render first, then hydrate the existing DOM without throwing it away.
Sessions, CSRF protection, roles, ownership, immutable migrations, isolated SQLite, backups, and live queries arrive as one coherent system.
Eligible queries and mutations become authenticated MCP tools with JSON Schema, OAuth + PKCE, explicit side-effect metadata, and a revision that changes with the contract.
Explore per-app MCP →People get a polished, accessible application. Agents get a scoped, machine-readable interface. Both execute the same trusted logic and observe the same live state.
Use native HTML, Tailwind, routing, forms, and the complete headless UI library.
Point a compatible client at the app URL, approve access, and use the current contract.
The CLI exposes the same deterministic workflow to a person, a coding agent, or CI. Every artifact is checksummed before it becomes a release.
Choose a complete authenticated template or the minimal foundation.
TSX, Tailwind, server actions, local SQLite, and browser reloads work together.
Doctor validates migrations, health, UI actions, and agent parity before upload.
Back up, migrate, health-check, and switch traffic while preserving rollback.
Read the contracts, inspect every component, review the source, or open a real app. Clank is MIT licensed and designed to be understood.
Start here for the framework, CLI, deployment platform, data model, MCP, security, and operations.
↗Interact with all 39 headless UI families and compare ten complete theme systems.
↗Audit the source, follow development, and contribute.
↗Install the official framework and CLI.
↗See a touch-first Clank application in production.
↗Build practical full-stack application patterns.
Start with a secure full-stack foundation, then give people and agents the same power to get real work done.