Open source · zero dependencies

One app.Two intelligences.

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/framework
clank.run / overview
WORKSPACE / OVERVIEWGood morning.
New project +
Projects4All healthy
Requests82.4k+12.8%
P95 latency34msHealthy
Projects Updated now
Private Todoprivate-todo.apps.clank.run
online42k
Design Studiodesign.clank.run
online31k
Documentationdocs.clank.run
online9.4k
Live revision 142Synced across 3 clients
Agent connected · OAuth scoped
Server actions discovered

The MCP contract stays in lockstep with your typed queries and mutations.

✓ todos.create({ title })
↳ revision 143 published
Your idea. A working app.

Build with your agent

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 →

Make it your app
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.
0runtime dependencies
39headless UI families
1:1UI and agent contracts
SQLiteisolated data per app
The complete stack

Less assembly.
More product.

Clank owns the seams that usually slow an application down: rendering, data, identity, realtime coordination, agent access, and release safety.

Fine-grained reactivity

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.

Auth and owned data

Secure defaults are part of the framework.

Sessions, CSRF protection, roles, ownership, immutable migrations, isolated SQLite, backups, and live queries arrive as one coherent system.

Agent-native by construction

Your backend already knows how to explain itself.

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 →
// generated from the server action
{
  name: "todos.create",
  input: {
    title: string,
    dueAt: string?
  },
  scope: "agent:write",
  destructive: false
}
One application contract

Built for both sides
of the screen.

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.

H Human interface

Reactive TSX that stays small.

Use native HTML, Tailwind, routing, forms, and the complete headless UI library.

src/todos.tsx TypeScript
const todos = liveQuery(api.todos.list); export function TodoList() { return <For each={todos}> {(todo) => <Todo item={todo} />} </For>; }
A Agent interface

Every action is discoverable.

Point a compatible client at the app URL, approve access, and use the current contract.

MCP · tools/list OAuth + PKCE
{ "name": "todos.list", "description": "List my todos", "annotations": { "readOnlyHint": true } } → 4 todos · live revision 143
From prompt to production

A paved road
all the way out.

The CLI exposes the same deterministic workflow to a person, a coding agent, or CI. Every artifact is checksummed before it becomes a release.

01 / CREATE

Start with a product

Choose a complete authenticated template or the minimal foundation.

02 / BUILD

Develop with live state

TSX, Tailwind, server actions, local SQLite, and browser reloads work together.

03 / VERIFY

Check the contract

Doctor validates migrations, health, UI actions, and agent parity before upload.

04 / DEPLOY

Activate safely

Back up, migrate, health-check, and switch traffic while preserving rollback.

Make the whole app
the intelligent interface.

Start with a secure full-stack foundation, then give people and agents the same power to get real work done.