Skip to main content
Three steps. By the end you’ll have a published block, rendered on your personal canvas. Connect a coding agent over MCP, or use the in-app editor.
1

Sign up

Go to chatblocks.ai and sign in with Google. We use Better Auth — magic link is also available where configured.On first signup you’ll go through /setup (pick a username), then a personal workspace is created automatically (${username}'s Workspace, slug = your username). Workspaces own all your blocks, canvases, connectors, BYOK keys, and audit log.A welcome canvas is seeded with two tutorial blocks so you have something to look at right away.
2

Pick your agent

Agent connection uses workspace API keys, which are available to every signed-in workspace. Prefer the in-app editor? Skip this step and open it from the canvas.After /setup, onboarding opens the agent connect overlay on your canvas (/canvas?connectAgent=1). The overlay is a 3-step wizard with first-party profiles for:
  • Claude Code — Anthropic’s CLI
  • Codex — OpenAI Codex
  • Cursor — the editor
  • Windsurf — Codeium’s editor
  • OpenClaw — agent platform
  • Poke — Kitchen recipe flow
  • Other — generic MCP client
Each option shows the exact config snippet to paste into your agent. The wire format is the same everywhere: an Authorization: Bearer cb_live_* header against https://chatblocks.ai/api/mcp/v1.
The first MCP call from your agent flips the live-sync badge in your canvas chrome from “empty” to “live” — that’s how you know the connection works.
3

Ask your agent to make a block

In your coding agent, say something like:
Make me a block that shows the weather in San Francisco.
The agent will walk through blocks.init → setFiles → build → publish over MCP. init scaffolds a single-file React app, setFiles writes your edits, build runs the Vercel Sandbox build, and publish lands a new published version. The published block lands on your canvas automatically.Refresh chatblocks.ai and the block is there. Click it to expand and inspect the source the agent wrote — the right rail shows the file list, recent edits, and a diff against the previous version.
Signed-in workspaces share flat resource caps: 1000 blocks, 100 canvases, and 1000 builds per 30-day window.
Building an agent integration where the agent starts first? Use agent-created canvases: the agent receives a temporary MCP key immediately, edits a canvas, and the human later claims the same workspace.

What’s next

Authoring → Via an agent

MCP → Setup

Per-client config, key rotation, and the complete tool reference.