Connect the hosted MCP
How Claude, Cursor, Grok, and Codex edit your production Codelab apps.
The hosted MCP is how an AI client in your editor talks to Codelab. You connect Claude, Cursor, Grok, or Codex once with the same Clerk account as app.codelab.app. After that the client calls the same tools the builder uses — list_apps, add_element, update_props — and those writes land on the live canvas and published sites. There is no extra sync.
It is Streamable HTTP. On first connect the client gets a 401, reads OAuth metadata, and opens Clerk. Do not put an Authorization header or API key in the config. There is no static bearer token.
https://mcp.codelab.app/mcpTo use a model inside the builder instead of an external MCP client, open the AI rail on app.codelab.app. That path is not this MCP URL.
Hosted vs local
Which data a call hits is which URL you connected to — not a flag on the tool.
| Surface | URL | Data |
|---|---|---|
| Hosted | https://mcp.codelab.app/mcp | Production — the live builder and published sites |
| Local | http://localhost:3003/mcp | Local sandbox, only if you run Codelab on your own machine |
Public clients should add the hosted URL. A local client talks to the sandbox; do not point it at hosted to “write production from a local session.”
Client setup
Claude Code / Claude Desktop. Project .mcp.json (type must be http; a url with no type is skipped):
{
"mcpServers": {
"codelab": {
"type": "http",
"url": "https://mcp.codelab.app/mcp"
}
}
}Or:
claude mcp add --transport http codelab https://mcp.codelab.app/mcpComplete the Clerk OAuth prompt on first connect.
After connect
The MCP keeps a conversation-scoped active app. Tools that need it (list_pages, add_element, …) fail without it.
| Tool | What you use it for |
|---|---|
list_apps | Discover your apps (appId). If the list is empty, create_app first. |
set_context | Activate an app. Omit contextId on the first call; keep the id it returns. |
get_context | Confirm the active app. |
Pass contextId to every later app-scoped tool. After that, the canvas is the source of truth: inspect with load_page_outline / find_element_in_page, then add_element and update_props.
See the introduction for the tree those tools edit.