Quickstart - Chatblocks

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

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.

Pick your agent

Agent connection uses workspace API keys, which are free on every plan. 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.

Claude Code
Cursor / Windsurf
OpenClaw / Poke
Other (stdio)

{
  "mcpServers": {
    "chatblocks": {
      "url": "https://chatblocks.ai/api/mcp/v1",
      "headers": {
        "Authorization": "Bearer cb_live_..."
      }
    }
  }
}

Cursor’s mcp.json and Windsurf’s settings UI both accept the same shape — see MCP setup for the per-client paths.

If your client only speaks stdio, use the chatblocks-mcp proxy:

npx -y @chatblocks/cli chatblocks-mcp

It bridges stdio to the hosted HTTPS endpoint. See CLI → Install.

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.

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.

Free workspaces include 100 builds per month, 10 blocks, and 2 canvases, plus agent connection (API keys) and the MCP authoring loop. The full caps are on Plans and limits. Builder ($9/mo) lifts the caps and unlocks beta features: data sources, BYOK keys, AI-generated blocks, scheduled runs, stores, and cursor crowns.

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

The full MCP authoring loop, manifest fields, and how to drive blocks.create for AI-generated drafts.

MCP → Setup

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

​What’s next

Authoring → Via an agent

MCP → Setup

What’s next