> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatblocks.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Sign up and ship your first block in under 5 minutes.

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.

<Steps>
  <Step title="Sign up">
    Go to [chatblocks.ai](https://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.
  </Step>

  <Step title="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`.

    <Tabs>
      <Tab title="Claude Code">
        ```json theme={null}
        {
          "mcpServers": {
            "chatblocks": {
              "url": "https://chatblocks.ai/api/mcp/v1",
              "headers": {
                "Authorization": "Bearer cb_live_..."
              }
            }
          }
        }
        ```
      </Tab>

      <Tab title="Cursor / Windsurf">
        Cursor's `mcp.json` and Windsurf's settings UI both accept the same shape — see [MCP setup](/mcp/setup) for the per-client paths.
      </Tab>

      <Tab title="OpenClaw / Poke">
        OpenClaw and Poke have top-level snippets in the connect overlay. See [MCP setup](/mcp/setup) for exact CLI examples.
      </Tab>

      <Tab title="Other (stdio)">
        If your client only speaks stdio, use the `chatblocks-mcp` proxy:

        ```bash theme={null}
        npx -y @chatblocks/cli chatblocks-mcp
        ```

        It bridges stdio to the hosted HTTPS endpoint. See [CLI → Install](/cli/install).
      </Tab>
    </Tabs>

    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.
  </Step>

  <Step title="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.
  </Step>
</Steps>

<Note>
  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](/concepts/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.
</Note>

<Tip>
  Building an agent integration where the agent starts first? Use [agent-created canvases](/mcp/agent-created-canvases): the agent receives a temporary MCP key immediately, edits a canvas, and the human later claims the same workspace.
</Tip>

## What's next

<CardGroup cols={2}>
  <Card title="Authoring → Via an agent" icon="wand-magic-sparkles" href="/authoring/via-agent">
    The full MCP authoring loop, manifest fields, and how to drive `blocks.create` for AI-generated drafts.
  </Card>

  <Card title="MCP → Setup" icon="terminal" href="/mcp/setup">
    Per-client config, key rotation, and the complete tool reference.
  </Card>
</CardGroup>