@cangdev/jtl-components

MCP server that exposes @jtl-software/platform-ui-react component metadata to AI agents. Agents can browse, inspect, search, and get recommendations for 70 components without scanning source files.

Install

npx @cangdev/jtl-components install <agent> [--local]

--local writes to the project directory instead of global config.

Supported Agents

Claude Code (Claude Code CLI)

# Global  → ~/.claude.json
npx @cangdev/jtl-components install claude-code

# Project → .mcp.json (current directory)
npx @cangdev/jtl-components install claude-code --local

Claude Desktop

# Global only
# macOS:   ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%\Claude\claude_desktop_config.json
npx @cangdev/jtl-components install claude

Cursor

# Global  → ~/.cursor/mcp.json
npx @cangdev/jtl-components install cursor

# Project → .cursor/mcp.json
npx @cangdev/jtl-components install cursor --local

Windsurf

# Global  → ~/.codeium/windsurf/mcp_config.json
npx @cangdev/jtl-components install windsurf

# Project → .windsurf/mcp.json
npx @cangdev/jtl-components install windsurf --local

Gemini CLI

# Global  → ~/.gemini/settings.json
npx @cangdev/jtl-components install gemini

# Project → .gemini/settings.json
npx @cangdev/jtl-components install gemini --local

Codex (OpenAI Codex CLI)

# Global  → ~/.codex/config.json
npx @cangdev/jtl-components install codex

# Project → .codex/config.json
npx @cangdev/jtl-components install codex --local

Cline (VS Code extension)

# Global  → VS Code extension global storage
npx @cangdev/jtl-components install cline

# Project → .vscode/mcp.json
npx @cangdev/jtl-components install cline --local

GitHub Copilot (VS Code)

Copilot only reads workspace config — --local is implicit.

# Project → .vscode/mcp.json
npx @cangdev/jtl-components install copilot

Kilo Code

# Global  → VS Code extension global storage
npx @cangdev/jtl-components install kilo

# Project → .vscode/mcp.json
npx @cangdev/jtl-components install kilo --local

Pi / Hermes / Google Antigravity

These agents read .mcp.json in the project root.

npx @cangdev/jtl-components install pi
npx @cangdev/jtl-components install hermes
npx @cangdev/jtl-components install antigravity

Manual config

If auto-install doesn't cover your agent, add this entry to its MCP config file:

{
  "mcpServers": {
    "jtl-components": {
      "command": "npx",
      "args": ["-y", "@cangdev/jtl-components", "stdio"]
    }
  }
}

For agents that require a type field (.mcp.json-based configs):

{
  "mcpServers": {
    "jtl-components": {
      "command": "npx",
      "args": ["-y", "@cangdev/jtl-components", "stdio"],
      "type": "stdio"
    }
  }
}

Tools

Recommended flow: get_minimal_context → list_components → search_components → get_component(name, fields?) → get_composition

| Tool | Input | Returns | | --------------------- | -------------------------------- | ----------------------------------------------------------------------- | | get_minimal_context | — | count, categories, suggested tool flow (~100 tokens) | | list_components | category?, limit?, offset? | paginated name/title/category/description (default 20 per page) | | get_component | name, fields? | sparse or full metadata; use fields to fetch only what you need | | get_components | names[], fields? | batch fetch up to 10 components — avoids N+1 get_component calls | | search_components | query, limit? | ranked hits with relevance scores (max 20) | | suggest_component | task, limit? | top recommendations with reasoning + import path | | get_composition | name | sub-exports + real JSX showing how compound parts nest | | init | — | install commands (npm/pnpm/yarn) + Tailwind v4 global CSS + setup steps | | map_native_html | tags | native HTML tag(s) → JTL replacement component(s) | | get_tokens | category?, search? | design tokens (CSS vars) for color, typography, border-radius |

Development (this repo)

# from repo root
pnpm install
pnpm generate-registry      # -> packages/mcp-server/registry.json

Run locally

# stdio
pnpm --filter @cangdev/jtl-components dev:stdio

# HTTP (listens on http://127.0.0.1:3030/mcp)
pnpm --filter @cangdev/jtl-components dev:http

Regenerate after component changes

pnpm generate-registry

Build

pnpm --filter @cangdev/jtl-components build

Publish

cd packages/mcp-server
npm publish --access public