@smwb/ui-mcp-solid

A Model Context Protocol (MCP) stdio server that exposes the @smwb/ui-solid component catalog and customization guide to AI coding assistants (Cursor, Claude Desktop/Code, Copilot, …).

Tools

| Tool | Purpose | | --- | --- | | search_components | Find components by name, id, description, or prop keywords | | get_component_props | Full metadata for one component: props (types, required, descriptions), SSR classification (ssr.safe / ssr.rendering / ssr.note) + required LESS imports (styles.base / styles.entries / styles.dependencies / styles.importExample) | | search_customization | Global theming options and per-component customization approaches | | get_customization | What and how to customize a component or a global topic |

Run

npx -y @smwb/ui-mcp-solid

Communicates over stdio only (no HTTP port); startup log goes to stderr.

Cursor (.cursor/mcp.json) / Claude Desktop config

{
  "mcpServers": {
    "smwb-ui-solid": {
      "command": "npx",
      "args": ["-y", "@smwb/ui-mcp-solid"]
    }
  }
}

Example flow

1. search_components → { "query": "text field", "limit": 5 }
2. get_component_props → { "nameOrId": "TextField" } (or id inputs/textField/textField) — read styles.entries / styles.dependencies / styles.importExample for a minimal LESS bundle
3. get_customization → { "nameOrId": "Button" } or { "nameOrId": "global/runtime-css" }

Component ids follow the metadata path, e.g. dataDisplay/chat/chat.

SSR

Every component carries an ssr field (also surfaced in search_components results):

• safe — always true: nothing in @smwb/ui-solid touches a browser global at module load or during render, so renderToString never throws.
• rendering — "universal" (emits meaningful static HTML on the server and hydrates) or "client" (a pure overlay such as Modal/Sheet that renders nothing on the server and mounts through a portal after hydration).
• note — optional hint, e.g. that a picker's input renders on the server while its popup is client-only.

How the catalog is built

Component metadata is generated from the @smwb/ui-solid TypeScript prop interfaces (npm run build:meta) and shipped inside this package under component-meta/. LESS import hints reference @smwb/ui-styles.

License

MIT