Text-to-diagram MCP server

Easiest path, one terminal command, nothing to create by hand: run the CLI command below from your project folder. Verify it worked: run claude mcp list; you should see capci listed. If you'd rather manage config as a file instead, the second tab does the same thing manually: create a file named exactly .mcp.json (all lowercase, starts with a dot, in your project's root folder) with that content.

claude mcp add --transport http capci https://mcp.capci.app/mcp \
  --header "x-api-key: YOUR_KEY"

1. Open the config. Claude Desktop → Settings → Developer → Edit Config. That opens claude_desktop_config.json. 2. Paste the config below. Because Capci authenticates with an x-api-key header (not OAuth), the connection goes through the mcp-remote bridge, which forwards the header for you: no separate install, npx fetches it on first run (Node.js required). 3. Restart Claude Desktop. The Capci tools appear under the 🔌 connectors menu in a new chat.

{
  "mcpServers": {
    "capci": {
      "command": "npx",
      "args": [
        "-y", "mcp-remote", "https://mcp.capci.app/mcp",
        "--header", "x-api-key:YOUR_KEY"
      ]
    }
  }
}

1. Open connectors. claude.ai → Settings → Connectors → Add custom connector (custom connectors are available on Pro, Max, Team, and Enterprise plans). 2. Paste the URL below as the Remote MCP server URL, replacing YOUR_KEY with your key. Unlike the desktop apps, the web connector UI can't attach a custom x-api-key header, so Capci accepts the key as an ?api_key= query parameter instead — the server treats it exactly like the header. 3. Connect, then enable Capci in the chat's tools menu. Images render inline in the tool result as usual. Treat this URL like a password — anyone who has it has your key. Rotate it in Dashboard → Account → API & MCP if it leaks.

https://mcp.capci.app/mcp?api_key=YOUR_KEY

1. Create the file. In your project's root folder, make a folder named exactly .vscode (all lowercase, starts with a dot, not .VSCode or .Vscode, this matters on Linux/macOS where file names are case-sensitive). Inside it, create a file named exactly mcp.json (all lowercase). Full path: .vscode/mcp.json. 2. Paste the config below into it. Note the top-level key is servers, not mcpServers (different from Claude Code/Cursor, easy to copy the wrong one by mistake). 3. Save the file. VS Code detects it automatically; it'll prompt you to enter the API key the first time a tool runs (that's what the inputs block is for: keeps your key out of the file itself). 4. Verify: Command Palette (Cmd/Ctrl+Shift+P) → "MCP: List Servers" → should show capci as running. Prefer a single config for every project instead of per-project files? Command Palette → "MCP: Open User Configuration" and paste the same JSON there.

{
  "servers": {
    "capci": {
      "type": "http",
      "url": "https://mcp.capci.app/mcp",
      "headers": { "x-api-key": "${input:capci-api-key}" }
    }
  },
  "inputs": [
    { "type": "promptString", "id": "capci-api-key", "description": "Capci API key", "password": true }
  ]
}

1. Create the file. For one project only: in that project's root folder, make a folder named exactly .cursor (all lowercase, starts with a dot), then a file named exactly mcp.json inside it: full path .cursor/mcp.json. For every project on your machine instead: the same file name, but under your home folder: ~/.cursor/mcp.json. 2. Paste the config below. Cursor figures out it's an HTTP server from the presence of url; no separate "type" field needed, unlike VS Code. 3. Verify: Cursor Settings → MCP: capci should show a green/active status.

{
  "mcpServers": {
    "capci": {
      "url": "https://mcp.capci.app/mcp",
      "headers": { "x-api-key": "YOUR_KEY" }
    }
  }
}

1. Open the config. Edit ~/.gemini/config/mcp_config.json (or use Antigravity's MCP settings panel). 2. Paste the config below. Antigravity uses serverUrl for a remote Streamable-HTTP server, not url (the field name differs from VS Code and Cursor: an easy one to get wrong). Auth goes in the headers object. 3. Reload MCP servers. The agent can then generate diagrams inside your Antigravity workflow. Images come back as a right-sized inline preview automatically (plus a full-res viewUrl / downloadUrl) — no extra header needed.

{
  "mcpServers": {
    "capci": {
      "serverUrl": "https://mcp.capci.app/mcp",
      "headers": { "x-api-key": "YOUR_KEY" }
    }
  }
}

1. Open the config. Edit ~/.gemini/settings.json (global), or .gemini/settings.json in a project folder for that project only. 2. Paste the config below. Gemini CLI uses httpUrl for a remote Streamable-HTTP server, not url (which it treats as an SSE endpoint) or serverUrl (that's Antigravity): the field name matters. 3. Verify: run /mcp inside Gemini CLI; capci should list as connected. Images come back as a right-sized inline preview plus a full-res viewUrl / downloadUrl — no extra header needed.

{
  "mcpServers": {
    "capci": {
      "httpUrl": "https://mcp.capci.app/mcp",
      "headers": { "x-api-key": "YOUR_KEY" }
    }
  }
}

Unlike the clients above, this isn't a config file; it's a few lines in your own Python agent code. Prerequisite: pip install google-adk first. ADK's dev UI renders a markdown image from the model's text — not the tool-result image block — so tell the model to render the previewUrl (a right-sized inline copy), with a downloadUrl link below. Use previewUrl, not the full-res viewUrl — the latter overflows the pane. The User-Agent below tells the Capci server this is an ADK client, so it automatically skips the inline image block (which ADK can't show and would cost ~50K tokens of Gemini context per image) — no extra header needed. Use gemini-2.5-pro: gemini-2.5-flash tends to loop or write the tool call as code (UNEXPECTED_TOOL_CALL).

from google.adk.agents import Agent
from google.adk.tools.mcp_tool import McpToolset
from google.adk.tools.mcp_tool.mcp_session_manager import StreamableHTTPConnectionParams

capci_tools = McpToolset(
    connection_params=StreamableHTTPConnectionParams(
        url="https://mcp.capci.app/mcp",
        headers={
            "x-api-key": "YOUR_KEY",
            # Identifies the client as ADK — the Capci server sees this and returns a
            # URL preview instead of an inline block (which ADK can't render anyway).
            "User-Agent": "capci-adk-agent/1.0 (google-adk)",
        },
    ),
)

root_agent = Agent(
    model="gemini-2.5-pro",
    name="capci_agent",
    instruction=(
        "After a tool returns an image, display it as a markdown image using "
        "the previewUrl, then a [Download](downloadUrl) link below it."
    ),
    tools=[capci_tools],
)