Fragments MCP Tools for Your Local Design System
Use the standalone @usefragments/cli local MCP tools to inspect a contract, find components and tokens, and check saved files.
Updated 8 October 2026. This guide covers the standalone @usefragments/cli integration. The Fragments desktop app manages its own agent tools. Its setup is separate from this CLI workflow.
The published CLI includes a local stdio MCP server that reads the repository configuration.
Set up the local integration
Run from your existing React project:
npx @usefragments/cli@latest init --install --metadata-onlyReview the generated config and selected components. Restart your coding-agent session and approve its project integration when prompted. The installer configures the native project files for supported, selected agents; use the local MCP guide to verify the connection.
The underlying server command is:
npx @usefragments/cli mcp --stdioThe local tools
| Tool | Purpose |
|---|---|
contract | Summarize the resolved authority and its component and token counts; this does not check compliance. |
search | Find approved primitives or patterns by intent. |
get | Read one primitive or pattern, including guidance and source information. |
tokens | Search the token vocabulary and available source details. |
check | Check a saved repository file and return findings. |
An agent can inspect the contract, find a suitable component, read its API, choose tokens, implement the change and check the saved file. A tool result is evidence for its covered inputs, not a guarantee that the whole application is correct.
Next steps
Use the local MCP reference for setup and tool behavior. For the app workflow, start with the desktop guide.
Keep exploring
- MCP Tools for Design Systems: Practical Workflows for React TeamsA local package workflow for finding approved components and tokens, checking saved UI files, and reviewing the result with your coding agent.
- Explore FragmentsJoin the desktop beta waitlist. Paid plans coming soon.