@fragments-sdk/mcp 0.2.2 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +91 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @fragments-sdk/mcp
|
|
2
|
+
|
|
3
|
+
MCP (Model Context Protocol) server that gives AI agents access to your design system. Agents can list components, get usage guidelines, view code examples, suggest components for use cases, and more.
|
|
4
|
+
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
### With Claude Code
|
|
8
|
+
|
|
9
|
+
Add to your Claude Code MCP settings (`~/.claude/settings.json`):
|
|
10
|
+
|
|
11
|
+
```json
|
|
12
|
+
{
|
|
13
|
+
"mcpServers": {
|
|
14
|
+
"fragments": {
|
|
15
|
+
"command": "npx",
|
|
16
|
+
"args": ["@fragments-sdk/mcp"]
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
The server automatically discovers `fragments.json` from any installed package that declares a `"fragments"` field in its `package.json` (e.g., `@fragments-sdk/ui`).
|
|
23
|
+
|
|
24
|
+
### With other MCP clients
|
|
25
|
+
|
|
26
|
+
Run the server directly:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npx @fragments-sdk/mcp
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Options:
|
|
33
|
+
|
|
34
|
+
```
|
|
35
|
+
-p, --project-root <path> Project root directory (default: cwd)
|
|
36
|
+
-u, --viewer-url <url> Viewer URL (default: http://localhost:6006)
|
|
37
|
+
-h, --help Show this help message
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## How It Works
|
|
41
|
+
|
|
42
|
+
1. Install a component library that ships `fragments.json` (e.g., `npm install @fragments-sdk/ui`)
|
|
43
|
+
2. Add this MCP server to your AI tool
|
|
44
|
+
3. The server reads `fragments.json` from the installed package and exposes component data to the AI agent
|
|
45
|
+
|
|
46
|
+
The server searches for `fragments.json` in two places:
|
|
47
|
+
- **Your project directory** (walks upward from cwd) — for library authors running `fragments build`
|
|
48
|
+
- **Your package.json dependencies** — for consumers who installed a fragments-enabled package
|
|
49
|
+
|
|
50
|
+
## Available Tools
|
|
51
|
+
|
|
52
|
+
| Tool | Description |
|
|
53
|
+
|------|-------------|
|
|
54
|
+
| `fragments_context` | Get full design system context in one call. Use this first. |
|
|
55
|
+
| `fragments_list` | List all components with names, categories, and variant counts |
|
|
56
|
+
| `fragments_get` | Get detailed component info: props, usage, variants |
|
|
57
|
+
| `fragments_suggest` | Suggest components for a use case (e.g., "form for email input") |
|
|
58
|
+
| `fragments_guidelines` | Get when/when-not-to-use guidelines and accessibility rules |
|
|
59
|
+
| `fragments_alternatives` | Find alternative or related components |
|
|
60
|
+
| `fragments_example` | Get ready-to-use code examples for component variants |
|
|
61
|
+
| `fragments_recipe` | Search composition recipes (e.g., "Login Form", "Settings Page") |
|
|
62
|
+
| `fragments_render` | Render a component with specific props and return a screenshot |
|
|
63
|
+
| `fragments_verify` | Verify a component render against the baseline screenshot |
|
|
64
|
+
| `fragments_compare` | Compare a rendered component against its Figma design |
|
|
65
|
+
| `fragments_fix` | Generate patches to fix token compliance issues |
|
|
66
|
+
|
|
67
|
+
### Visual tools
|
|
68
|
+
|
|
69
|
+
The `render`, `verify`, `compare`, and `fix` tools require [Playwright](https://playwright.dev/). Install it separately if you need visual tools:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npm install playwright
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
These tools are optional. All other tools work without Playwright.
|
|
76
|
+
|
|
77
|
+
## Programmatic Usage
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
import { createMcpServer, startMcpServer } from '@fragments-sdk/mcp';
|
|
81
|
+
|
|
82
|
+
// Start with stdio transport (default)
|
|
83
|
+
await startMcpServer({ projectRoot: process.cwd() });
|
|
84
|
+
|
|
85
|
+
// Or create the server instance for custom transports
|
|
86
|
+
const server = createMcpServer({ projectRoot: process.cwd() });
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## License
|
|
90
|
+
|
|
91
|
+
MIT
|