build69 / Docs

Documentation

Everything you need to connect build69 to your AI agent and start writing on-brand components in minutes.

Quickstart

Three steps and your agent is writing build69 source into your project.

Create an API key from your account dashboard.
Add the MCP server to your agent (see below).
Prompt— “add a build69 data table” — and review the generated source.

terminal

$ npx @build69/connect --key b69_live_••••

MCP setup

Point any MCP-aware client at the hosted registry. Add this to your client's MCP config:

mcp.json

{
  "mcpServers": {
    "build69": {
      "url": "https://mcp.build69.com",
      "headers": { "Authorization": "Bearer b69_live_…" }
    }
  }
}

That shape is right for most clients — but not all of them. The exact file and key names for each major agent are below.

Per-client setup

Every client speaks the same protocol, but each spells the config differently — and a wrong key name fails silently: the server simply never appears, with no error. Copy the block for your client.

Claude Code

CLI

No file to edit — register it with the CLI. Use -s user to make it available in every project instead of just the current one.

terminal

claude mcp add --transport http build69 https://mcp.build69.com \
  --header "Authorization: Bearer b69_live_…" \
  -s user

# verify
claude mcp get build69

MCP servers are picked up when a session starts, so open a new session before looking for the tools.

Claude (desktop, web & mobile)

App

Settings → Connectors → Add → Add custom connector, then paste the registry URL.

connector URL

https://mcp.build69.com

Claude connects from Anthropic's cloud, not from your machine — the server must be reachable on the public internet. A registry on localhost will not work here; use Claude Code for that.

ChatGPT Codex

CLI

~/.codex/config.toml — TOML, not JSON. A project-local .codex/config.toml takes precedence over the global one.

~/.codex/config.toml

[mcp_servers.build69]
url = "https://mcp.build69.com"
bearer_token_env_var = "BUILD69_API_KEY"

Or skip the file: codex mcp add build69 --url https://mcp.build69.com. bearer_token_env_var names the env var to read — Codex sends it as Authorization: Bearer …, so the key never sits in the file.

Google Antigravity

IDE + CLI

~/.gemini/config/mcp_config.json, or per-workspace in .agents/mcp_config.json (which wins). The IDE, the CLI and the SDK share this one file. In the UI: Manage MCP Servers → View raw config.

mcp_config.json

{
  "mcpServers": {
    "build69": {
      "serverUrl": "https://mcp.build69.com",
      "headers": { "Authorization": "Bearer b69_live_…" }
    }
  }
}

Antigravity requires serverUrl for remote servers — url and httpUrl are rejected. Saving the file reloads the server automatically.

Cursor

IDE

.cursor/mcp.json in the project, or ~/.cursor/mcp.json for every project.

.cursor/mcp.json

{
  "mcpServers": {
    "build69": {
      "url": "https://mcp.build69.com",
      "headers": { "Authorization": "Bearer ${env:BUILD69_API_KEY}" }
    }
  }
}

${env:VAR} reads from your shell, so the key stays out of a file you might commit.

VS Code — Copilot agent mode

IDE

.vscode/mcp.json in the workspace.

.vscode/mcp.json

{
  "servers": {
    "build69": {
      "type": "http",
      "url": "https://mcp.build69.com",
      "headers": { "Authorization": "Bearer b69_live_…" }
    }
  }
}

Two VS Code specifics: the root key is servers, not mcpServers, and type is required. Tools only run in Agent mode — not Ask mode.

Windsurf

IDE

~/.codeium/windsurf/mcp_config.json (%USERPROFILE%\.codeium\windsurf\mcp_config.json on Windows).

mcp_config.json

{
  "mcpServers": {
    "build69": {
      "serverUrl": "https://mcp.build69.com",
      "headers": { "Authorization": "Bearer ${env:BUILD69_API_KEY}" }
    }
  }
}

Like Antigravity, Windsurf wants serverUrl rather than url.

The differences, side by side

If you are porting a config between clients, these are the three fields that change.

Client	Root key	URL field	Auth field
Claude Code	— (CLI)	positional arg	--header
Claude app	— (UI)	connector URL	OAuth / none
ChatGPT Codex	[mcp_servers.*]	url	bearer_token_env_var
Antigravity	mcpServers	serverUrl	headers
Cursor	mcpServers	url	headers
VS Code	servers	url (+ type)	headers
Windsurf	mcpServers	serverUrl	headers

Authentication

Every request is authenticated with your API key as a bearer token. Keys are shown once at creation and hashed at rest — rotate them anytime from the dashboard. Metered tools record usage and enforce your plan's quota; browsing and token reads are always free.

Keep keys server-side

If a key leaks, revoke it in the dashboard — active sessions stop immediately.

Fetching components

The core tool is get_registry_item. Pass a component name; you get back a resolved bundle — source, sub-components, and npm dependencies.

get_registry_item({ name: "DataTable" })
→ files: [ data-table.tsx, table.tsx, recipes.ts ]
→ deps: [ @tanstack/react-table ]
→ tokens: resolved

Pasted components are Vite-style; for the Next.js App Router add "use client" where needed. The agent handles this automatically.

Design tokens

All components read from one OKLCH token layer. Neutral surfaces are tinted with the active accent so a single variable re-colors the whole system.

--primary

--success

--warning

--danger

--info

Theming

Set data-theme on the root for one of five accents — orange, blue, green, violet, rose — and data-mode="dark" for dark mode. Try the switcher in the footer of this page; every surface re-tints live.

FAQ

Which agents are supported?

Any MCP-compatible client. Claude Code, the Claude apps, ChatGPT Codex, Antigravity, Cursor, VS Code and Windsurf each have a copy-paste config in per-client setup; anything else that speaks MCP works with the generic config above. The Agents page covers how tool-calling fits your workflow.

Do I need to install a package?

No. Components are pasted as source. The only dependencies are the npm packages a given component actually uses.

Where do I get support?

Reach us from the support page or email the team on Pro and Team plans.