Shadcn Theme MCP

An MCP server that generates Shadcn/UI theme tokens from seeds or presets. It merges tweakcn-style theme presets with color-scheme generation utilities, presents curated preset lists, and can be invoked via stdout or SSE (HTTP). A Docker image can be used for remote calls.

Highlights

• Preset-aware: 42 curated presets with tags and brief color/style descriptions
• Generate from one or multiple seed colors (monochrome/analogic/complement/triad/quad)
• Returns complete Shadcn theme tokens (light and dark) suitable for CSS variables
• Transports: stdout (stdio) and SSE (HTTP)
• Docker support for remote invocation

Exports

• Export Tailwind v3 config, Tailwind v4 @theme CSS, or a shadcn registry item via tool params. See docs/exports.md.

See docs in docs/ for setup, tools, and usage examples.

Docker Quick Start

• Build image: bash scripts/docker-build.sh
• Run server (SSE on port 3333): bash scripts/docker-run.sh
• Connect your MCP SSE client to http://localhost:3333/mcp

Equivalent raw commands

• docker build -t shadcn-theme-mcp .
• docker run --rm -p 3333:3333 --name shadcn-theme-mcp shadcn-theme-mcp

MCP 客户端配置（SSE）

• 以支持 MCP 配置文件的客户端为例（如部分编辑器/桌面客户端），可直接声明 SSE 传输与 URL：

{
  "mcpServers": {
    "local-mcp": {
      "transport": "sse",
      "url": "http://localhost:3333/mcp"
    }
  }
}

将 url 换成你的线上部署地址即可，例如 https://your-domain.com/mcp。

Post‑Deploy MCP Call Example (SSE)

• 部署后（或本地通过 Docker 暴露 http://localhost:3333/mcp）可以用 @modelcontextprotocol/sdk 的 SSE 客户端直连并调用工具。
• 本服务当前实现的是 MCP 的 SSE 传输；请将基地址指向 .../mcp。

Example (Node.js, ESM)

// client.mjs
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";

// 例如：本地 Docker 为 http://localhost:3333/mcp
// 线上部署后改为你的地址，例如 https://your-domain.com/mcp
const MCP_URL = process.env.MCP_URL || "http://localhost:3333/mcp";

const client = new Client({ name: "shadcn-theme-mcp-client", version: "1.0.0" });
await client.connect(new SSEClientTransport(new URL(MCP_URL)));

// 1) 列出基础预设家族（示例限制 5 条）
const presets = await client.callTool({
  name: "list_base_presets",
  arguments: { limit: 5 }
});
console.log("base presets:", JSON.stringify(presets, null, 2));

// 2) 从自定义颜色构建主题（可按需导出）
const themeResult = await client.callTool({
  name: "build_theme_from_colors",
  arguments: {
    colors: ["#7839ee", "#14b8a6"],
    strategy: "analogic",          // monochrome|analogic|complement|triad|quad
    background: "light",           // 或 "dark"
    export_as: "tailwind_v4",      // tailwind_v3|tailwind_v4|shadcn_registry
    name: "my-brand-theme"
  }
});
console.log("theme (with export):", JSON.stringify(themeResult, null, 2));

Run

• node client.mjs（或设置 MCP_URL=https://your-domain.com/mcp node client.mjs）

Notes

• 若本地调试请先启动服务：PORT=3333 node build/index.js --transport sse --port 3333
• SSE 客户端会通过 GET 连接 .../mcp 并使用 POST .../messages?sessionId=... 发送 JSON‑RPC 消息，示例中由 SDK 处理，无需手写协议。