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.

Build your first app Open control plane

$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

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.

Explore Clank

Everything is
out in the open.

Read the contracts, inspect every component, review the source, or open a real app. Clank is MIT licensed and designed to be understood.

D_↗

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.

Read the getting started guide →Sign in to Clank

One app.Two intelligences.

Less assembly.
More product.

Update the value, not the entire tree.

Secure defaults are part of the framework.

Your backend already knows how to explain itself.

Built for both sides
of the screen.

Reactive TSX that stays small.

Every action is discoverable.

A paved road
all the way out.

Start with a product

Develop with live state

Check the contract

Activate safely

Everything is
out in the open.

Documentation

Design Studio

GitHub

npm package

Synth demo

Recipes

Make the whole app
the intelligent interface.

One app.Two intelligences.

Update the value, not the entire tree.

Secure defaults are part of the framework.

Your backend already knows how to explain itself.

Reactive TSX that stays small.

Every action is discoverable.

Start with a product

Develop with live state

Check the contract

Activate safely

Documentation

Design Studio

GitHub

npm package

Synth demo

Recipes

Make the whole app the intelligent interface.

Make the whole app
the intelligent interface.