Skip to content

Commit d323e82

Browse files
wangdicoderwangdicoder
committed
feat: add mcp doc
1 parent 5b4641d commit d323e82

6 files changed

Lines changed: 172 additions & 0 deletions

File tree

‎apps/docs/guides/mcp-server.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# MCP Server
2+
3+
`@tiny-design/mcp` is a [Model Context Protocol](https://modelcontextprotocol.io/) (MCP) server that gives AI assistants structured access to the Tiny Design component library, design tokens, and icon catalog.
4+
5+
With MCP, AI coding assistants like Claude Code, GitHub Copilot, and Cursor can look up component props, browse usage examples, query design tokens, and search icons — all without leaving your editor.
6+
7+
## What is MCP?
8+
9+
The Model Context Protocol (MCP) is an open standard that lets AI assistants connect to external data sources and tools. Instead of relying solely on training data, the AI can query live, accurate information about your design system on demand.
10+
11+
## Available Tools
12+
13+
| Tool | Description |
14+
|------|-------------|
15+
| `list_components` | List all 80+ components. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
16+
| `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. |
17+
| `get_component_example` | Get usage examples (demo code) for a component. |
18+
| `get_design_tokens` | Get design tokens (SCSS variables) — colors, typography, spacing, breakpoints, shadows. |
19+
| `list_icons` | List all 240+ icon names. Filter by search term. |
20+
| `get_icon` | Get details and usage example for a specific icon. |
21+
22+
## Setup
23+
24+
Install the MCP server by adding it to your AI assistant's configuration:
25+
26+
### Claude Code
27+
28+
```json
29+
// .claude/settings.json
30+
{
31+
"mcpServers": {
32+
"tiny-design": {
33+
"command": "npx",
34+
"args": ["@tiny-design/mcp"]
35+
}
36+
}
37+
}
38+
```
39+
40+
### VS Code (GitHub Copilot)
41+
42+
```json
43+
// .vscode/mcp.json
44+
{
45+
"mcpServers": {
46+
"tiny-design": {
47+
"command": "npx",
48+
"args": ["@tiny-design/mcp"]
49+
}
50+
}
51+
}
52+
```
53+
54+
### Cursor
55+
56+
```json
57+
// .cursor/mcp.json
58+
{
59+
"mcpServers": {
60+
"tiny-design": {
61+
"command": "npx",
62+
"args": ["@tiny-design/mcp"]
63+
}
64+
}
65+
}
66+
```
67+
68+
## Example Prompts
69+
70+
Once configured, try asking your AI assistant:
71+
72+
- "List all form components in Tiny Design"
73+
- "What props does the Modal component accept?"
74+
- "Show me an example of using the Select component"
75+
- "What colors are available in Tiny Design's design tokens?"
76+
- "Find icons related to arrows"
77+
78+
## How It Works
79+
80+
1. **Build time:** Extraction scripts parse component `types.ts` files (via `ts-morph`), SCSS token variables, and icon barrel exports to produce static JSON data.
81+
2. **Bundle time:** `tsup` bundles the server code with inlined JSON data into a single self-contained executable.
82+
3. **Runtime:** The MCP server loads the inlined data and serves it via 6 tools over stdio transport using `@modelcontextprotocol/sdk`.

‎apps/docs/guides/mcp-server.zh_CN.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# MCP Server
2+
3+
`@tiny-design/mcp` 是一个 [Model Context Protocol](https://modelcontextprotocol.io/)（MCP）服务器，为 AI 助手提供对 Tiny Design 组件库、设计令牌和图标目录的结构化访问。
4+
5+
通过 MCP，Claude Code、GitHub Copilot 和 Cursor 等 AI 编程助手可以查询组件属性、浏览使用示例、查询设计令牌和搜索图标——无需离开编辑器。
6+
7+
## 什么是 MCP？
8+
9+
Model Context Protocol（MCP）是一个开放标准，允许 AI 助手连接外部数据源和工具。AI 可以按需查询设计系统的实时准确信息，而不仅仅依赖训练数据。
10+
11+
## 可用工具
12+
13+
| 工具 | 描述 |
14+
|------|------|
15+
| `list_components` | 列出所有 80+ 个组件。可按分类筛选：基础、布局、导航、数据展示、表单、反馈、其他。 |
16+
| `get_component_props` | 获取组件的完整属性接口——类型、是否必填、描述。 |
17+
| `get_component_example` | 获取组件的使用示例（演示代码）。 |
18+
| `get_design_tokens` | 获取设计令牌（SCSS 变量）——颜色、排版、间距、断点、阴影。 |
19+
| `list_icons` | 列出所有 240+ 个图标名称。支持搜索过滤。 |
20+
| `get_icon` | 获取特定图标的详细信息和使用示例。 |
21+
22+
## 配置
23+
24+
将 MCP 服务器添加到你的 AI 助手配置中：
25+
26+
### Claude Code
27+
28+
```json
29+
// .claude/settings.json
30+
{
31+
"mcpServers": {
32+
"tiny-design": {
33+
"command": "npx",
34+
"args": ["@tiny-design/mcp"]
35+
}
36+
}
37+
}
38+
```
39+
40+
### VS Code (GitHub Copilot)
41+
42+
```json
43+
// .vscode/mcp.json
44+
{
45+
"mcpServers": {
46+
"tiny-design": {
47+
"command": "npx",
48+
"args": ["@tiny-design/mcp"]
49+
}
50+
}
51+
}
52+
```
53+
54+
### Cursor
55+
56+
```json
57+
// .cursor/mcp.json
58+
{
59+
"mcpServers": {
60+
"tiny-design": {
61+
"command": "npx",
62+
"args": ["@tiny-design/mcp"]
63+
}
64+
}
65+
}
66+
```
67+
68+
## 示例提示
69+
70+
配置完成后，可以尝试向 AI 助手提问：
71+
72+
- "列出 Tiny Design 的所有表单组件"
73+
- "Modal 组件接受哪些属性？"
74+
- "展示 Select 组件的使用示例"
75+
- "Tiny Design 的设计令牌中有哪些颜色？"
76+
- "查找与箭头相关的图标"
77+
78+
## 工作原理
79+
80+
1. **构建时：** 提取脚本通过 `ts-morph` 解析组件 `types.ts` 文件、SCSS 令牌变量和图标导出，生成静态 JSON 数据。
81+
2. **打包时：** `tsup` 将服务器代码与内联 JSON 数据打包为一个独立的可执行文件。
82+
3. **运行时：** MCP 服务器加载内联数据，通过 `@modelcontextprotocol/sdk` 以 stdio 传输方式提供 6 个工具。

‎apps/docs/src/locale/en_US.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ const en_US: SiteLocale = {
5858
useWithVite: 'Use with Vite',
5959
changelog: 'Changelog',
6060
faq: 'FAQ',
61+
mcpServer: 'MCP Server',
6162
},
6263
themeMenu: {
6364
customiseTheme: 'Customise Theme',

‎apps/docs/src/locale/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export type SiteLocale = {
5252
useWithVite: string;
5353
changelog: string;
5454
faq: string;
55+
mcpServer: string;
5556
};
5657
themeMenu: {
5758
customiseTheme: string;

‎apps/docs/src/locale/zh_CN.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const zh_CN: SiteLocale = {
5454
useWithVite: '在 Vite 中使用',
5555
changelog: '更新日志',
5656
faq: '常见问题',
57+
mcpServer: 'MCP Server',
5758
},
5859
themeMenu: {
5960
customiseTheme: '自定义主题',

‎apps/docs/src/routers.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@ const guide = {
4848
() => import('../guides/faq.md'),
4949
() => import('../guides/faq.zh_CN.md'),
5050
),
51+
mcpServer: ll(
52+
() => import('../guides/mcp-server.md'),
53+
() => import('../guides/mcp-server.zh_CN.md'),
54+
),
5155
themeEditor: ll(
5256
() => import('./containers/theme-editor'),
5357
() => import('./containers/theme-editor'),
@@ -147,6 +151,7 @@ export const getGuideMenu = (s: SiteLocale): RouterItem[] => {
147151
{ title: s.guideMenu.introduction, route: 'introduction', component: pick(guide.introduction, isZh) },
148152
{ title: s.guideMenu.getStarted, route: 'get-started', component: pick(guide.getStarted, isZh) },
149153
{ title: s.guideMenu.useWithVite, route: 'use-with-vite', component: pick(guide.useWithVite, isZh) },
154+
{ title: s.guideMenu.mcpServer, route: 'mcp-server', component: pick(guide.mcpServer, isZh) },
150155
{ title: s.guideMenu.changelog, route: 'changelog', component: pick(guide.changelog, isZh) },
151156
{ title: s.guideMenu.faq, route: 'faq', component: pick(guide.faq, isZh) },
152157
];

0 commit comments

Comments
 (0)