Col MCP for agents
Connect once, find a component, then implement from its official documentation.
Set up the connection
Give this prompt to an agent that can configure your coding client. Setup is complete when the client connects and lists all four Col tools.
Set up Col MCP for the coding client I use.
Read https://collection-of-libs.vercel.app/mcp for client-specific instructions.
Ask which client and configuration scope I want if they are unclear.
Add a server named col using Streamable HTTP at https://collection-of-libs.vercel.app/api/mcp.
Inspect the current configuration first. Preserve all existing servers and settings.
If Col is already configured directly or through its plugin, reuse that connection.
No credentials or authentication headers are needed.
Tell me if I need to restart the client or enable the server myself.
Confirm the connection lists search_libraries, search_components, get_library, and get_component.
If you cannot access the client’s tools, explain how I can verify them; do not claim the connection was tested.Find a fit
Inspect the project’s framework, styling, and existing components first. Call search_libraries with the requirement and hard filters. Every stack filter must match; use-case filters match at least one selected use case.
{
"query": "command menu",
"stacks": [
"React",
"Tailwind CSS"
],
"limit": 5
}Use returned slugs for library lookups. Read matchedComponents and evidence.gaps before choosing a candidate. Search calls accept limit from 1 to 25 and a non-negative offset; use total to decide whether another page is needed.
Inspect the component
Call search_components with a documented name or alias. Optionally restrict the search to a library slug:
{
"query": "command palette",
"library": "shadcn-ui",
"limit": 5
}Pass the exact returned ID to get_component, then use get_library for official setup links, pricing, documentation, and recorded compatibility. Col records no install commands of its own: read the current official docs before installing. Libraries that request outbound-only listings omit setup links.
{
"id": "shadcn-ui/Command"
}{
"slug": "shadcn-ui"
}Component IDs are case-sensitive. Copy them from search results rather than constructing them. An unknown ID or invalid filter returns a tool error.
Render it in the chat
After choosing a component, call render_component with one TSX module whose default export shows it in the user’s own use case: their labels, layout, and theme. Import packages by npm name, optionally pinned; they load from esm.sh with React 19 shared. Import package CSS directly. Tailwind classes work.
{
"code": "import \"@mantine/core/styles.css\";\nimport { MantineProvider, Button } from \"@mantine/core@9.7.1\";\n\nexport default function Checkout() {\n return <MantineProvider><Button>Pay $42.00</Button></MantineProvider>;\n}"
}Relative and @/ imports fail: inline local files such as shadcn’s components/ui sources. Hosts that support MCP Apps render the module inline; terminal clients show nothing, so do not claim a render there. A compile or render error appears in the chat and comes back to you as model context. Use synthetic sample data only.
Use the evidence
- Keep
evidence.verificationandevidence.gapsin the recommendation. A verified component link does not verify every API, dependency, or variant. - A missing component means it has not been recorded. Do not infer support from generic tags or treat an empty result as proof of absence.
- Compatibility is supported, unsupported, or unknown. Keep unknown constraints explicit and verify them against official documentation.
- Deep documentation snapshots may be absent. Follow the returned source URLs for current installation, API, examples, versions, and licensing.
Implement in the project
- Read the chosen component’s official docs and confirm they fit the project’s versions and styling.
- Read the library’s own setup docs before installing anything. Install only what the selected component needs and follow the project’s conventions.
- Run the project’s relevant checks. Report the component, sources used, and anything that remains unverified.
Col supplies catalogue evidence. The coding agent performs project changes; the Col server does not read or modify the project.