Set up Col MCP

#Connect your client

Col hosts a read-only MCP server over Streamable HTTP. You need an MCP client with remote HTTP support; no Col account, API key, or local server is required.

https://collection-of-libs.vercel.app/api/mcp

Choose your client below. Keep any servers already in its configuration.

• Claude CodeAdd Col from the terminal.
• CodexUse the CLI or your config file.
• CursorAdd Col to your MCP configuration.
• VS CodeConnect Col from the Command Palette.
• Let your agent set it upCopy the setup prompt.

#How Col answers

Col is read-only: it never touches your project, and never asks for an account, API key, or any credential. Its four tools search one curated catalogue — search_libraries, search_components, get_library, and get_component.

Every result is built to be checked, by the agent and by you:

• A canonical source link on every record — always the library's own documentation.
• Verification stated per part — page, compatibility, snapshot — so "verified" never means different things in different tools.
• Gaps stay explicit. A missing component means "not yet verified", never "this library lacks it", and unverified compatibility stays unknown.
• matchedOn says why a result matched: name, alias, tag, or description.
• Empty results explain themselves (indexStatus) and suggest close matches instead of returning silence.
• Documentation snapshots carry their fetch date and source revision, so anything quoted can be re-checked later.
• When Col recorded a story, get_component also returns a preview: a themed URL and a screenshot showing the component in a use-case scene, with the rendered source, applied theme, and its own explicit gaps. A missing preview is itself a gap — never evidence about the library.

This is a real result, exactly as an agent receives it:

{
  "id": "mantine/Spotlight",
  "kind": "full-pattern",
  "verifiedAt": "2026-10-10",
  "url": "https://mantine.dev/x/spotlight/",
  "matchedOn": ["name:spotlight"],
  "preview": {
    "url": "https://collection-of-libs.vercel.app/preview/mantine/spotlight/rapid-prototyping",
    "scene": "Rapid Prototyping",
    "renderedFrom": "story",
    "theme": "library default",
    "verification": "partial",
    "gaps": [
      "The preview renders one recorded story in a use-case scene, not the library's full variant set; the project render will differ once the component is adapted to its conventions.",
      "A preview shows fit, not proof: only the compatibility facts above are verified evidence."
    ],
    "screenshot": { "mimeType": "image/png", "alt": "Mantine Spotlight rendered in a Rapid Prototyping scene" }
  },
  "evidence": {
    "verification": {
      "page": "verified",
      "compatibility": "recorded",
      "snapshot": "ingested"
    },
    "gaps": []
  }
}

The agent sees exactly this, and you can verify any claim by following its link. Same evidence on both sides — that is what makes a recommendation checkable instead of a black box.

#Claude Code

With Claude Code installed, run this command to make Col available across your projects. Use --scope project instead of --scope user to save it in the current project’s .mcp.json.

claude mcp add --transport http --scope user col https://collection-of-libs.vercel.app/api/mcp

Start a new Claude Code session and run /mcp to check the connection. See the Claude Code MCP docs.

#Codex

With the Codex CLI installed, add Col and check that it is listed:

codex mcp add col --url https://collection-of-libs.vercel.app/api/mcp
codex mcp list

Alternatively, add this table to ~/.codex/config.toml:

[mcp_servers.col]
url = "https://collection-of-libs.vercel.app/api/mcp"

Start a new session and run /mcp to see active servers. See the Codex MCP docs.

#Cursor

Add the col entry to .cursor/mcp.json in your project, or ~/.cursor/mcp.json for all projects:

{
  "mcpServers": {
    "col": {
      "url": "https://collection-of-libs.vercel.app/api/mcp"
    }
  }
}

Open Cursor’s MCP settings and enable Col. Use it from an agent chat. See the Cursor MCP docs.

#VS Code

Run MCP: Add Server in the Command Palette, choose HTTP, paste the server URL, and name it col. Choose .mcp.json for the workspace, or a global configuration for all projects.

For a portable workspace configuration, add this entry to .mcp.json at the project root:

{
  "mcpServers": {
    "col": {
      "type": "http",
      "url": "https://collection-of-libs.vercel.app/api/mcp"
    }
  }
}

Run MCP: List Servers, select Col, and start it. Enable its tools in agent chat. See the VS Code MCP setup guide.

#Install the plugin

The optional Col plugin bundles the MCP connection with a UI component workflow skill. Choose the plugin or a direct connection to avoid adding Col twice.

For Claude Code, run:

claude plugin marketplace add https://git.cafe/screen/col.git
claude plugin install col@col

For Codex, run:

codex plugin marketplace add https://git.cafe/screen/col.git
codex plugin add col@col

See the plugin guide for package details.

#Try the connection

Start a new agent session and confirm Col exposes search_libraries, search_components, get_library, and get_component. Then try:

Use Col to find a React command menu for a Tailwind CSS project.
Inspect the exact component and its library’s setup.
Show me how it looks in my project’s theme.
Link the official docs and tell me what is unverified.

Use Col to find a React command menu for a Tailwind CSS project.
Inspect the exact component and its library’s setup.
Link the official docs and tell me what is unverified.

#Troubleshooting

• No tools listed: check the URL, enable Col in your client, and start a new session after changing configuration.
• Connection failed: select HTTP, not a local command or SSE. Check your client’s server logs and network access to the endpoint.
• A browser visit returns a method error: the endpoint expects MCP POST requests. Confirm the connection through your client instead.
• An empty search result: shorten the query or adjust filters, then check the library’s official docs. Coverage is partial.

• Agent guideTool arguments, setup prompt, and the component workflow.
• Other MCP serversConnect to individual UI libraries and design tools.