Skip to main content
Glama
Zoot01

coss-ui-mcp

by Zoot01
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Local

coss-ui-mcp

A design-context MCP server for the coss ui component system — the base you build your apps on.

It does for coss ui what Atlassian's ADS MCP does for their design system: instead of pasting the whole component library into every prompt (expensive, and it goes stale), your coding agent calls tools to fetch only the components, install commands, props, and design tokens it needs, on demand.

  • Zero dependencies. Pure JS, only node:* built-ins. No install step — runs on Node 18+, Bun, or Deno.

  • Always current. Re-run the sync script any time to re-snapshot the live docs from coss.com/ui.

  • Yours to own. Same spirit as coss ui itself — copy, paste, customize.

Why on-demand beats a static file

A single big DESIGN.md (or a pasted component list) loads everything, every time — high token cost, slower responses, and context truncation that hurts accuracy. An MCP server loads context on demand: the agent calls coss_plan("a settings page…") to get a shortlist, then coss_get_component("tabs") only for what it's actually building. That's the pattern Atlassian measured as materially cheaper and more accurate than a load-everything file.

Related MCP server: ds-mcp

Tools

Tool

What it does

coss_plan

Describe a screen/feature → ranked component shortlist + install commands + base setup. Start here.

coss_search

Find components/hooks by name, keyword, or use case ("date range picker", "toast").

coss_get_component

Full docs for one component/hook: install (CLI + manual npm deps + CSS tokens), usage, props/API reference, examples.

coss_get_doc

Overview guides: introduction, get-started, styling, roadmap.

coss_theme

The design-token + font system: shadcn-style CSS variables, the extra --info/--success/--warning/--destructive-foreground tokens, --font-*, and the full @theme block. Use to set up or rebrand.

coss_list_components

Cheap catalog of everything (components / hooks / overview).

Install

Requires a JS runtime with node:* built-in support — Node 18+, Bun, or Deno. No dependencies.

1. Get the files & snapshot the docs

cd coss-ui-mcp

# with npm (or swap in pnpm/yarn/bun's equivalent "run" syntax)
npm run sync      # downloads the coss ui docs into ./data (re-run to refresh)
npm run smoke     # optional: verifies the server end-to-end

# or invoke the scripts directly with any runtime, no package manager needed
node scripts/sync.mjs
node scripts/smoke.mjs
# bun scripts/sync.mjs / deno run --allow-read --allow-write --allow-net scripts/sync.mjs

pwd               # note this absolute path for the configs below

The package ships with a ./data snapshot already, so it works offline out of the box. Run sync whenever coss ui updates.

2. Point your agent at it (stdio)

Replace /ABS/PATH with the path from pwd.

Claude Code — .mcp.json (project root) or claude mcp add:

{
  "mcpServers": {
    "coss-ui": { "command": "node", "args": ["/ABS/PATH/coss-ui-mcp/server.mjs"] }
  }
}

Cursor — ~/.cursor/mcp.json (global) or .cursor/mcp.json (project):

{
  "mcpServers": {
    "coss-ui": { "command": "node", "args": ["/ABS/PATH/coss-ui-mcp/server.mjs"] }
  }
}

VS Code (GitHub Copilot) — .vscode/mcp.json:

{
  "servers": {
    "coss-ui": { "type": "stdio", "command": "node", "args": ["/ABS/PATH/coss-ui-mcp/server.mjs"] }
  }
}

Claude Desktop — claude_desktop_config.json (Settings → Developer → Edit Config): same mcpServers shape as Claude Code.

"command": "node" above is just the default — swap in "bun" or "deno" (with "args": ["run", "--allow-read", "/ABS/PATH/coss-ui-mcp/server.mjs"]) if that's your runtime of choice. No package manager is required to run the server itself. (sync.mjs additionally needs network + write access to re-snapshot the docs.)

Restart the client, and you should see the coss_* tools available.

3. Use it

Just prompt normally — the agent will call the tools:

"Build a billing settings page with coss ui. Plan the components first, then use the real props."

A good agent will call coss_plan → coss_get_component for each → coss_theme, and generate code that uses your actual components and tokens instead of generic "slop".

Keep it fresh

npm run sync
# or: node scripts/sync.mjs   (works with any package manager, or none at all)

Re-downloads coss.com/ui/llms.txt and every referenced .md, rebuilds data/index.json. Diff data/meta.json to see what changed. (Two upstream links — radix-shadcn-migration and sidebar — currently 404 and are skipped automatically.)

Make it your design system

You build off coss ui as a starting point — so extend this to encode your conventions:

  1. Rebrand tokens. Keep the CSS variable names, change their values in globals.css. Ask the agent: "call coss_theme, then give me a globals.css in a deep-navy brand palette." Every component updates at once.

  2. Add your own components. Drop extra .md files into data/docs/components/ (same frontmatter shape: title, description, an ## Installation block) and add matching entries to data/index.json. They'll show up in search/plan immediately — your in-house patterns become first-class context.

  3. Add house rules. Extend coss_get_doc (or add a coss_conventions tool in server.mjs) that returns your do/don't guidance — spacing scale, when to use Dialog vs Sheet, form patterns. This is where a generic system becomes your system.

  4. Ship a DESIGN.md too. For blue-sky prototyping in tools that don't speak MCP, generate a portable DESIGN.md from the same data. MCP for daily driving (cheap, on-demand); DESIGN.md for portability.

Files

coss-ui-mcp/
├─ server.mjs          # the MCP server (stdio, zero deps)
├─ scripts/
│  ├─ sync.mjs         # snapshot coss.com/ui docs -> ./data
│  └─ smoke.mjs        # drive the server like a real MCP client
├─ data/
│  ├─ index.json       # catalog: slug, name, description, install, tokens, keywords
│  ├─ meta.json        # sync timestamp + counts
│  └─ docs/**/*.md      # snapshotted component/hook/overview markdown
├─ package.json
└─ README.md

How it works (30s)

server.mjs speaks MCP's stdio transport directly — newline-delimited JSON-RPC 2.0 on stdin/stdout (initialize, tools/list, tools/call). It loads data/index.json at startup and reads individual markdown docs from disk only when a tool asks for them. That's the whole trick: cheap discovery, on-demand detail.

coss ui is Base UI + Tailwind CSS v4, shadcn-CLI compatible via the @coss/* registry. This server doesn't reimplement any of that — it just makes the official docs legible to your agent.

License

MIT — see LICENSE. The snapshotted docs in ./data are sourced from coss ui (apps/ui/), which is MIT-licensed (the parent monorepo defaults to AGPLv3, but apps/ui/ — where the docs and component registry live — is carved out as MIT).

Available Tools

6 tools
coss_get_componentA

Get the full docs for ONE coss ui component or hook: install (shadcn CLI + manual npm deps + CSS tokens), usage, full API/props reference, and examples. Fetch on demand after search/plan.

ParametersJSON Schema
NameRequiredDescriptionDefault
slugYesComponent/hook slug, e.g. "button", "dialog", "use-media-query".

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description bears full burden. It describes what is returned but does not disclose any side effects, network calls, caching, or permissions. Adequate for a read operation but lacks depth.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Extremely concise: two sentences with zero wasted words. First sentence defines purpose and content; second provides usage timing.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple single-parameter tool with no output schema, the description adequately covers what the tool does and when to use it. Could potentially mention return format, but not necessary given the simplicity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so baseline is 3. The description adds example values matching the schema, but does not provide additional semantic meaning beyond the schema description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states it retrieves full documentation for one component/hook, listing contents (install, usage, API/props, examples). It distinguishes from sibling tools like coss_list_components (which lists) and coss_plan (which plans).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly advises 'Fetch on demand after search/plan,' providing context on when to use. Does not explicitly mention when not to use or alternatives, but sibling names are provided for distinction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

coss_get_docA

Get an overview/guide doc: introduction, get-started, styling, or roadmap.

ParametersJSON Schema
NameRequiredDescriptionDefault
slugYesWhich guide.

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided. Description indicates a read operation but doesn't disclose potential side effects, permissions, or return details. Adequate for a simple getter.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Single concise sentence (10 words) that front-loads the purpose. No wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Simple tool with one parameter. Description covers what the tool does and what inputs are valid. Lacks return value info, but acceptable given low complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema covers 100% with enum and description. Description repeats the valid values, adding 'overview/guide doc' context, but doesn't extend beyond schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Clearly states the tool gets an overview/guide doc and lists the specific slugs (introduction, get-started, styling, roadmap). Distinguishes from sibling tools that handle components, planning, etc.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Implied usage: to retrieve a specific doc. The enum values provide clear context, but no explicit exclusions or comparisons to siblings are given.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

coss_list_componentsA

List the coss ui catalog (components, hooks, or overview docs) with one-line descriptions. Cheap overview — call before fetching full docs.

ParametersJSON Schema
NameRequiredDescriptionDefault
sectionNoWhich catalog section to list. Default: components.

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description must cover behavioral traits. It mentions 'cheap overview' indicating low cost, but does not disclose potential outcomes, pagination, or permissions. Adequate but not comprehensive.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two concise sentences. The first states purpose, the second provides usage guidance. No unnecessary words, front-loaded with key information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple list tool with one parameter and no output schema, the description is fairly complete. It covers purpose, parameter, and usage hint. It could mention return format explicitly, but 'one-line descriptions' implies it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% (parameter has enum and default described). The description adds context about listing sections (components, hooks, overview) and one-line descriptions, but does not significantly extend beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool lists the coss UI catalog (components, hooks, or overview docs) with one-line descriptions. It distinguishes from sibling tools like coss_get_component (detailed fetch) by noting it's a cheap overview.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description advises 'call before fetching full docs,' providing clear usage context. It implies when to use but does not explicitly mention when not to use or alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

coss_planA

Given a natural-language description of a screen or feature, return the recommended coss ui components (ranked, with install commands) plus base project setup. The token-efficient starting point — call this first, then coss_get_component for the ones you'll build with.

ParametersJSON Schema
NameRequiredDescriptionDefault
taskYesDescribe the screen/feature, e.g. "a settings page with tabs, a profile form, and a danger-zone delete dialog".
limitNoMax components to suggest (default 10).

TDQS

A4.7/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations exist, so description carries full burden. It discloses that the tool returns ranked recommendations with install commands and base project setup. However, it does not detail any behavioral traits like idempotency, data sources, or whether it modifies state. Still, the core behavior is clearly described, earning a 4.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, no wasted words. Front-loaded with the main action and result. Every sentence adds essential information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given only 2 params, no output schema, and no annotations, the description is remarkably complete. It explains what the tool returns, the order, and how to sequence with sibling tools.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%. The description adds meaning by framing 'task' as a natural-language description and noting that results are ranked and include install commands. For 'limit', it does not repeat the default but the context is clear. Overall, description adds value beyond the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose: given a natural-language description, it returns recommended UI components (ranked with install commands) plus base project setup. It distinguishes from sibling tools by explicitly saying 'call this first, then coss_get_component'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides explicit usage guidance: 'The token-efficient starting point — call this first, then coss_get_component for the ones you'll build with.' This tells when to use this tool and when to use the alternative sibling.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

coss_themeA

Get coss ui's design-token + font conventions and setup commands — the shadcn-style CSS variables (colors, sidebar, --info/--success/--warning/--destructive-foreground), font tokens, and the full @theme block. Use when setting up a project or rebranding the look. Pass format:"full" for the complete styling guide.

ParametersJSON Schema
NameRequiredDescriptionDefault
formatNo"summary" (default) or "full" styling doc.

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations provided, so description carries full burden. It accurately describes what the tool returns (design tokens, font conventions, @theme block, etc.). Does not mention side effects, but as a 'get' tool it is likely read-only. Provides sufficient detail for an agent to understand its behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with main purpose, then usage tips. Every sentence adds value with no redundancy or fluff.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

No output schema, but description details the content returned (design tokens, font conventions, setup commands, @theme block). Covers both format options. For a simple single-parameter tool, this is sufficiently complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100% with enum description. Description adds value by explaining the effect of the 'full' format ('complete styling guide'), which goes beyond the schema's generic description. Helps agent choose parameter value correctly.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description clearly states it retrieves design tokens, font conventions, setup commands, and specifically shadcn-style CSS variables. Distinguishes from sibling tools like coss_get_component and coss_get_doc by focusing on theme/styling.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Explicitly states when to use ('setting up a project or rebranding the look') and provides guidance on the format parameter ('Pass format:'full' for the complete styling guide'). No explicit alternatives but siblings are distinct, so context is clear.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 6 tool updatesv0.1.0
    • First observedcoss_get_component
    • First observedcoss_get_doc
    • First observedcoss_list_components
    • First observedcoss_plan
    • First observedcoss_search
    • First observedcoss_theme
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A4.3/5.0

Scored across 6 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: listing all components, searching for specific ones, getting detailed docs for a component, getting overview docs, planning a UI with recommendations, and fetching theme info. No overlap in functionality, and descriptions guide appropriate use.

Naming Consistency4/5

Tools follow a 'coss_<verb>_<noun>' pattern for most (get_component, get_doc, list_components), but three tools use a single verb without a noun (plan, search, theme). While readable and prefixed consistently, the lack of uniform verb-noun structure slightly reduces predictability.

Tool Count5/5

With 6 tools covering exploration, search, detailed documentation, planning, and theming, the count is well-scoped for a UI component library reference server. Each tool provides essential functionality without unnecessary redundancy.

Completeness5/5

The tool set covers the full lifecycle of using the component library: discovering (list, search), understanding (get_component, get_doc), planning (plan), and styling (theme). No obvious gaps for a read-only reference MCP server.

Maintenance

ActivityStale
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • ds-pilot

    lyse-labs
    A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.
    9 npm
    9
    MIT

  • ds-mcp

    aestheticfunction
    A
    license
    Not graded
    quality
    A
    maintenance
    A read-only MCP server that provides AI coding agents with a queryable contract for design system tokens, components, patterns, and anti-patterns.
    12 npm
    1
    Apache 2.0

  • Insider Design System MCP

    denizzeybek-fe
    F
    license
    B
    quality
    D
    maintenance
    Automated MCP server for the Insider Design System. Enables AI assistants to discover, understand, and generate code for over 60 Design System components with automated extraction from source code.
    14
    -