AI tools

MCP server

doticca-ui ships a real Model Context Protocol server at /mcp. Point an AI assistant at it and the model can answer "how do I use component X" questions from the actual component API — not from guesswork. Every answer is derived from a single source of truth, so the docs the AI reads never drift from the shipped code.

What it does

The server exposes the whole suite — components, options, methods, events, examples, and the theming system — as structured, machine-readable data over the MCP Streamable HTTP transport (JSON-RPC), implemented with Vercel's mcp-handler. Once connected, an assistant in your editor can:

• discover which components exist and what they do;
• look up exact constructor options (type, default, allowed values), methods, and events;
• pull runnable, copy-paste examples;
• get a recommended configuration for a specific intent (e.g. a searchable multi-select);
• read the design-token theming contract for light/dark and custom themes.

Available tools

These are the callable tools the server advertises to a connected client:

The endpoint

The production server lives at the URL below. This single URL is all a client needs — it speaks Streamable HTTP and falls back to SSE automatically.

https://ui.doticca.com/mcp

Connect a client

Add the server to your tool of choice. The configuration differs slightly per client; the most common ones are below.

VS Code (GitHub Copilot, agent mode)

Create a .vscode/mcp.json file in your workspace (or run “MCP: Open User Configuration” from the Command Palette for a global setup). VS Code requires the root key servers and an explicit "type": "http" — it does not infer the transport.

{
  "servers": {
    "doticca-ui": {
      "type": "http",
      "url": "https://ui.doticca.com/mcp"
    }
  }
}

Cursor

Create .cursor/mcp.json in your project (or the global ~/.cursor/mcp.json). Cursor uses the mcpServers root key.

{
  "mcpServers": {
    "doticca-ui": {
      "url": "https://ui.doticca.com/mcp"
    }
  }
}

Enable the server under Settings → MCP; a green dot means it connected and the tools are ready.

Claude Desktop

Claude Desktop currently launches MCP servers over stdio, so bridge to the HTTP endpoint with mcp-remote. Edit claude_desktop_config.json (via Settings → Developer → Edit Config) and restart the app.

{
  "mcpServers": {
    "doticca-ui": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://ui.doticca.com/mcp"]
    }
  }
}

Any stdio-only client

The same mcp-remote bridge works for any client that only supports stdio transports (older MCP integrations, some CLI agents). The command is identical — just place it wherever that client declares its servers.

Verify the connection

Once connected, ask the assistant something that forces a tool call, for example:

"Using the doticca-ui tools, what options does SelectPicker take
 for a searchable multi-select, and give me the code."

The assistant should call recommend_usage (or get_component_api) and answer with real option names like multiple, searchable, and clearable.

Browsable REST mirror

The same data is also served as plain JSON, which is handy for a quick curl sanity check without an MCP client, or for non-MCP crawlers.

curl "https://ui.doticca.com/mcp/usage?component=SelectPicker&intent=multi-select"
# => { "recommended": { "multiple": true, "searchable": true, "clearable": true }, ... }

Local development

Running the project locally? The server is available at your dev origin, so point any client at it while you work:

http://localhost:3000/mcp