MCP Connection

Connect AI clients to the hosted COCSO MCP endpoint and reuse @cocso-ui components.

Overview

The documentation site exposes a hosted MCP endpoint so AI clients can discover and reuse existing @cocso-ui components before generating custom UI.

Endpoint URL: https://www.cocso-ui.com/api/mcp

Official Client Guides

Client Setup by Tool

Claude Code supports direct MCP remote servers over HTTP. Add this to project .mcp.json or user ~/.claude.json.

{
  "mcpServers": {
    "cocso-ui": {
      "type": "http",
      "url": "https://www.cocso-ui.com/api/mcp"
    }
  }
}

Note: Claude Desktop uses claude_desktop_config.json with stdio-style server entries. Remote MCP in Desktop is handled through its extension flow, so direct HTTP setup differs from Claude Code.

Codex uses TOML config. Add this to ~/.codex/config.toml (or .codex/config.toml for project scope).

[mcp_servers.cocso_ui]
url = "https://www.cocso-ui.com/api/mcp"

OpenCode supports remote MCP directly. Add this to ~/.config/opencode/opencode.json (or opencode.json in your project).

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "cocso-ui": {
      "type": "remote",
      "url": "https://www.cocso-ui.com/api/mcp",
      "enabled": true
    }
  }
}

stdio-only clients

If a client only supports stdio transport, bridge to the hosted endpoint with mcp-remote.

{
  "cocso-ui": {
    "command": "npx",
    "args": ["-y", "mcp-remote", "https://www.cocso-ui.com/api/mcp"]
  }
}

Recommended Workflow

Call cocso_ui_mcp_search_components first with your page intent.
Use cocso_ui_mcp_get_component_spec for selected components before coding.
Import reusable UI from @cocso-ui/react instead of generating duplicate local components.