Skip to main content
Join the waitlist
All postsTutorial

Using Fragments MCP in Claude for Design System-Aware UI Workflows

Configure the standalone @usefragments/cli local MCP integration for Claude Code, then verify component and token context before checking saved UI changes.

· 2 min read · Updated

Updated 8 October 2026. This is the standalone package workflow for Claude Code. Start with the Fragments desktop app if you want to direct work in your running app; the desktop app manages its own agent integration.

Configure Claude Code

Run from the project root:

Terminal
npx @usefragments/cli@latest init --install --metadata-only --agents claude

Review the selected components and generated configuration. Restart Claude Code and approve the project integration when prompted. Setup can report action required when no canonical components have been selected; inspect the generated configuration and complete the selection before continuing.

The generated integration runs the local CLI MCP server. Its setup and failure behavior are documented in the MCP reference.

A practical agent workflow

  1. Inspect contract to understand the available authority.
  2. Use search and get to find a component and read its actual API.
  3. Use tokens to select values from the project vocabulary.
  4. Implement the change, then run check on the saved file and inspect any findings or coverage gaps.
Build a settings form using this project's approved components.
Inspect the contract, search for the form controls and read their guidance.
Use the project's tokens. Check the saved files and report anything unverified.

The project source remains necessary: tool context does not replace understanding the feature or reviewing the rendered result.

Verify the integration

Terminal
npx @usefragments/cli doctor

A successful synthetic probe confirms that the command runs. Live verification also needs the agent host to load the integration and deliver its events. Follow the local MCP guide and inspect a real saved-file check.

FAQ

Can Claude Code use MCP and repository context together?

Yes. MCP supplies structured component and token information; source inspection supplies implementation context. Review both and check the rendered change.

Does this require a paid plan?

No paid plan is needed for local CLI checks. Paid plans for Fragments are coming soon.

Keep exploring