Connect UIworm to your AI tools

Two ways in. On Claude.ai, Claude Desktop, and mobile, add UIworm as a custom connector — just the URL, no key, you sign in and approve. Everywhere else you paste the URL plus an API key as a header.

1. A UIworm account and an API key from /dashboard/connect.
2. MCP URL: https://your-uiworm-host/mcp (path is always /mcp).
3. Header: Authorization: Bearer YOUR_KEY.

Replace YOUR_ORIGIN with your UIworm host (e.g. https://uiworm.com or http://localhost:3000) and YOUR_KEY with a key from Connect.

Most clients support remote HTTP + headers natively. If yours only supports local stdio, use the npx mcp-remote bridge (see Claude Desktop / Other).

Claude chat sessions usually cannot install MCP for you - you run the CLI or edit config yourself. Cursor, OpenCode, Devin, and similar tools can often apply config if you paste a setup prompt.

Copy–paste these into your agent. Replace YOUR_KEY with a key from Connect. URL below uses this site’s origin when you view the page in a browser.

1. Setup help - Claude (explain only)

Claude sessions cannot install MCP from inside the chat. Use this so Claude only walks you through the steps.

Explain how I add UIworm MCP myself (you cannot install MCP from inside this Claude session).

URL: https://your-uiworm-host/mcp
Header: Authorization: Bearer YOUR_KEY

Give exact steps for my Claude surface (CLI, Claude Code Desktop, or Claude Desktop). After setup I will fully quit, open a NEW session, and ask: Can you connect to the UIworm MCP and list the tools it exposes?

2. Setup help - Cursor, OpenCode, Devin, VS Code, etc.

For agents that can edit config or run install commands. Prefer they apply the setup; if not, they should give exact steps.

Help me add UIworm MCP to this environment.

URL: https://your-uiworm-host/mcp
Header: Authorization: Bearer YOUR_KEY

If you can configure MCP yourself (edit mcp.json, opencode.json, .vscode/mcp.json, run CLI, etc.), do it now. Otherwise give exact click-by-click or copy-paste steps for my client.

Then tell me to open a NEW session and test with: Can you connect to the UIworm MCP and list the tools it exposes?

3. Connection test (new session)

After config is saved and you opened a new chat/session:

Can you connect to the UIworm MCP and list the tools it exposes? If UIworm is not available, tell me exactly what is missing and how to fix the MCP setup.

4. First real use - build with UIworm

Once tools show up, use this so the agent actually calls UIworm and follows the design system (updates dashboard to Connected on first call).

Build a polished landing page for my product.

Hard requirements:
- Use the UIworm MCP before writing UI: call UIworm compose / design-system / components / review tools as needed.
- Follow every UIworm principle and anti-slop rule the tools return (layout, type, glass budget, motion, contrast, no generic AI layouts).
- Do not invent a parallel design system - stay loyal to the UIworm directive for this page.
- After drafting, run the UIworm review checklist / submit review flow and fix all failures before you stop.

Start by connecting to UIworm MCP tools, then compose the page, then implement.

5. Ongoing work (short)

For every later UI task, keep agents on rails:

Before writing any UI, use UIworm MCP for design direction (compose_page / create_section / redesign as appropriate). Follow the Directive and anti-slop rules. Fetch components as guides only - hand-write variants. Run UIworm review before you finish.

Order: setup (1 or 2) → new session → connection test (3) → build (4). Use (5) on day-to-day work.

The no-key path. UIworm is an OAuth authorization server, so Claude registers itself, sends you to UIworm to sign in, and stores the token for you. Nothing to paste but the URL.

https://your-uiworm-host/mcp

1. Claude → Settings → Connectors → Add custom connector. On Team and Enterprise plans an owner adds it under Admin settings → Connectors, then members click Connect.
2. Paste the URL above. Leave OAuth Client ID and Client Secret empty — filling them in is what breaks this flow.
3. Click Connect. A UIworm window opens: sign in, review what the connector gets, and Allow.
4. Back in Claude, enable UIworm from the + menu in a chat, then use the verify prompt at the bottom of this page.

Calls count against the same monthly plan limit as an API key. Revoke the connection any time from Connect — it appears in your key list labelled “Connector”.

Official CLI. Native Streamable HTTP transport. Run commands in your system terminal, not inside an open Claude session.

The key is optional here too: point Claude Code at https://your-uiworm-host/mcp with no header and it runs the same OAuth flow in your browser.

claude mcp add --transport http uiworm https://your-uiworm-host/mcp --header "Authorization: Bearer YOUR_KEY"

1. Paste your real key into the command and run it.
2. Check status: claude mcp list
3. Start a new claude session.
4. Use the verify prompt at the bottom of this page.

Optional: --scope user for all projects. Project scope writes .mcp.json.

Coding desktop app (separate from Claude Desktop chat). Prefer the same CLI command so headers are stored correctly; Desktop surfaces can share Claude Code MCP config.

claude mcp add --transport http uiworm https://your-uiworm-host/mcp --header "Authorization: Bearer YOUR_KEY"

1. Run the CLI add command once with your key.
2. Or use Desktop → Customize / Connectors → add a custom connector with URL https://your-uiworm-host/mcp and Authorization header if the UI supports it.
3. Fully quit and reopen Desktop, then a new session.

Consumer Claude Desktop app. Prefer the custom connector — this config-file route is the fallback for when you want a fixed API key instead of signing in. Local config is claude_desktop_config.json; remote HTTP + Bearer goes through mcp-remote (needs Node.js).

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Or: Settings → Developer → Edit Config.

{
  "mcpServers": {
    "uiworm": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://your-uiworm-host/mcp",
        "--header",
        "Authorization: Bearer YOUR_KEY"
      ]
    }
  }
}

Save, fully quit Claude Desktop, reopen, start a new chat.

Settings → MCP, or edit ~/.cursor/mcp.json (global) / project .cursor/mcp.json.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Save, reload MCP / restart Cursor, open a new agent chat.

Workspace file .vscode/mcp.json (create the folder if needed).

{
  "servers": {
    "uiworm": {
      "type": "http",
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Reload the window, start a new agent session.

Cognition Devin: MCP Marketplace or CLI/config. HTTP + headers.

1. UI: Settings → Organization settings → MCP marketplace → Add your own. Name uiworm, URL https://your-uiworm-host/mcp, transport HTTP, Authorization Bearer key.
2. CLI: devin mcp add uiworm https://your-uiworm-host/mcp then ensure headers are set in config.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Some Devin surfaces use serverUrl instead of url:

{
  "mcpServers": {
    "uiworm": {
      "serverUrl": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Config paths: ~/.config/devin/config.json, .devin/config.json, secrets in .devin/config.local.json.

Config under mcp in opencode.json (project or ~/.config/opencode/opencode.json). Remote type supports headers; set oauth: false when using a static API key.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "uiworm": {
      "type": "remote",
      "url": "https://your-uiworm-host/mcp",
      "enabled": true,
      "oauth": false,
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

CLI helpers: opencode mcp list, opencode mcp add (interactive).

ByteDance TRAE: Settings → MCP (AI management). Marketplace or manual server. Project config is often .trae/mcp.json.

1. Settings (upper right) → MCP.
2. Add manually: HTTP/remote URL + Authorization header.
3. Or paste a standard mcpServers JSON if the manual editor accepts Cursor-style config.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Toggle the server on, restart if tools do not appear.

Config file: ~/.codeium/windsurf/mcp_config.json. Cascade → MCP / hammer icon → edit config. Some builds use serverUrl instead of url.

{
  "mcpServers": {
    "uiworm": {
      "serverUrl": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

If headers are ignored, use the mcp-remote bridge:

{
  "mcpServers": {
    "uiworm": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://your-uiworm-host/mcp",
        "--header",
        "Authorization: Bearer YOUR_KEY"
      ]
    }
  }
}

VS Code extensions. Open the Cline (or Roo) MCP settings panel in the sidebar → configure MCP servers (JSON). Same shape as Cursor in most versions.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

If remote auth fails, use mcp-remote stdio bridge (Claude Desktop snippet). Restart the extension host / VS Code after saving.

Place MCP JSON under .continue/mcpServers/ in the workspace (plural “Servers”), e.g. .continue/mcpServers/uiworm.json, or add via Continue config UI. Claude/Cursor-style JSON is accepted.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Agent settings → Model Context Protocol (MCP) Servers, or context_servers in Zed settings. Remote URL form:

{
  "context_servers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

Local/stdio servers use a command object instead of url. Fully restart Zed after edits.

Codex CLI registers MCP servers with codex mcp add. For remote HTTP with a header, prefer a documented remote form if available, or mcp-remote:

codex mcp add uiworm -- npx -y mcp-remote https://your-uiworm-host/mcp --header "Authorization: Bearer YOUR_KEY"

Confirm with your Codex version’s codex mcp list / help - flag names can vary slightly by release.

xAI’s product surface evolves quickly. Common patterns in 2026:

• Grok Build / agent UIs that accept remote MCP: add a server URL https://your-uiworm-host/mcp and an Authorization Bearer header with your UIworm key (same as Cursor).
• API remote MCP (xAI developer tools): server_url + label in the request tools array - use your UIworm /mcp URL when the runtime supports custom headers for auth.
• Do not confuse community “Grok MCP servers” (wrappers around the xAI API) with adding UIworm as a server to Grok. You want your agent to call UIworm’s endpoint, not host Grok as an MCP.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

If the Grok client only supports stdio MCP, use the mcp-remote bridge snippet under Claude Desktop.

Use this decision tree:

1. Native remote HTTP + headers → Cursor-style mcpServers.uiworm JSON.
2. Field is serverUrl (some Cascade/Devin UIs) → use the Windsurf/Devin alternate JSON.
3. Stdio only → mcp-remote bridge (Claude Desktop snippet). Requires Node.js.

{
  "mcpServers": {
    "uiworm": {
      "url": "https://your-uiworm-host/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_KEY"
      }
    }
  }
}

{
  "mcpServers": {
    "uiworm": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://your-uiworm-host/mcp",
        "--header",
        "Authorization: Bearer YOUR_KEY"
      ]
    }
  }
}

MCP tools almost always load at session start. After any config change: fully quit the client, open a new chat/session.

Connection test

Can you connect to the UIworm MCP and list the tools it exposes? If UIworm is not available, tell me exactly what is missing.

First build (uses UIworm)

Build a polished landing page.

Use the UIworm MCP before writing UI. Follow every UIworm principle and anti-slop rule from the tools. Stay loyal to the UIworm directive. Run UIworm review and fix all failures before you stop.

When the first successful tool call hits UIworm, Connect shows Connected and usage updates under Overview.

Troubleshooting: wrong URL path (must end with /mcp), revoked key, client not restarted, or headers not applied (try mcp-remote).