MCP Integration

Connect framingui with Claude Code, Cursor, Windsurf, and other MCP-compatible tools.

What is MCP?

MCP (Model Context Protocol) is a standard for connecting AI tools with external data sources and capabilities. framingui provides an MCP server that gives AI agents access to design tokens, components, and theme information.

Supported Tools

Claude Code

✅ Full Support

Cursor

✅ Full Support

Windsurf

✅ Full Support

OpenAI Codex

🔄 Coming Soon

Setup

1. Run the init command

npx @framingui/mcp-server init

This creates a .mcp.json file in your project root.

2. Restart your AI tool

The MCP server will be automatically loaded on restart.

3. Verify connection

Ask your AI: "List available FramingUI themes" — it should return 7 themes.

Available MCP Tools

The FramingUI MCP server exposes 16 tools:

Tool	Description
list-themes	List all available themes
preview-theme	Get theme tokens and CSS variables
list-components	Browse 30+ UI components
generate-blueprint	Create UI from natural language
export-production	Generate production-ready code

Example Prompts

"Create a login page using the pebble theme"

"Build a dashboard with the square-minimalism design tokens"

"Add a pricing section with 3 tiers, editorial-tech style"

"Generate a contact form using neutral-workspace colors"