CLI, MCP server, and dev tools for Fragments design system
npm install @fragments-sdk/cliCLI, MCP server, and dev tools for the Fragments design system. This is the single tool package — it includes the CLI commands, the MCP server for AI agents, the dev viewer, screenshot capture, visual diffing, and migration tools.
``bash`
npm install @fragments-sdk/cli
`bashStart the dev server
fragments dev
MCP Server
The MCP server gives AI agents (Claude Code, Claude Desktop, etc.) access to your design system.
$3
Add to your Claude Code MCP settings (
~/.claude/settings.json):`json
{
"mcpServers": {
"fragments": {
"command": "npx",
"args": ["@fragments-sdk/cli", "mcp"]
}
}
}
`Or run the dedicated binary:
`bash
npx fragments-mcp
`Options:
`
-p, --project-root Project root directory (default: cwd)
-u, --viewer-url Viewer URL (default: http://localhost:6006)
`$3
1. Install a component library that ships
fragments.json (e.g., npm install @fragments-sdk/ui)
2. Add the MCP server to your AI tool
3. The server reads fragments.json from the installed package and exposes component data to the AI agentThe server searches for
fragments.json in two places:
- Your project directory (walks upward from cwd) — for library authors running fragments build
- Your package.json dependencies — for consumers who installed a fragments-enabled package$3
| Tool | Description |
|------|-------------|
|
fragments_discover | List components, suggest by use case, find alternatives, or get a full context summary |
| fragments_inspect | Get detailed component info: props, usage guidelines, code examples — all in one call |
| fragments_blocks | Search composition blocks (e.g., "Login Form", "Settings Page") |
| fragments_render | Render a component screenshot, verify against baseline, or compare to Figma |
| fragments_fix | Generate patches to fix token compliance issues |$3
The
render and fix tools require Playwright. Install it separately if you need visual tools:`bash
npm install playwright
`These tools are optional. All other tools work without Playwright.
Programmatic Usage
`typescript
import { createMcpServer, startMcpServer } from '@fragments-sdk/cli/mcp';// Start with stdio transport (default)
await startMcpServer({ projectRoot: process.cwd() });
// Or create the server instance for custom transports
const server = createMcpServer({ projectRoot: process.cwd() });
``MIT