Model Context Protocol (MCP)

Access the official Pepulux UI component specs and code examples directly in your AI coding assistant.

What is MCP?

The Model Context Protocol (MCP) is an open standard for connecting AI assistants to real, trusted sources of documentation and code. For Pepulux UI users this means your AI assistant gets answers that are accurate, grounded in the actual Figma V8.0 spec, and directly reference published component APIs.

Accurate answers

Prop names, variants, and sizes come from the actual Figma V8.0 source — not hallucinated.

Direct source links

Responses reference specific component pages on playbook.pepulux.com — no broken links.

Context-aware generation

AI generates correct Pepulux UI code from the first try instead of guessing MUI equivalents.

Using the Playbook as AI context

The simplest way — paste the playbook.pepulux.com URL into your AI assistant context, or add the following rule to your project:

.claude/CLAUDE.md or .cursorrules

## Pepulux UI component library

When generating UI code for this project, use @pepulux/ui components.
Reference the Pepulux Playbook at https://playbook.pepulux.com for:
- All available components and props
- Correct prop names (they match Figma V8.0 property names exactly)
- Variants: hierarchy, destructive, size, state

Key conventions:
- variant prop = Figma "Hierarchy" (primary | secondary | tertiary | link-color | link-gray | destructive)
- size prop = Figma "Size" (sm | md | lg)
- destructive={true} = Figma "Destructive=True" boolean
- leadingIcon / trailingIcon = Figma "Icon=True" slot
- All imports from "@pepulux/ui"
- CSS tokens: --brand, --brand-hover, --brand-subtle, --brand-text

Claude Code

Claude Code is Anthropic's agentic coding tool that runs in your terminal. Add the Pepulux Playbook as project context with a CLAUDE.md file:

CLAUDE.md (project root)

# UI Library
This project uses @pepulux/ui — the Pepulux Design System.

Import components from "@pepulux/ui", never from "@/components/ui".
All prop names match Figma V8.0 property names.
Full docs: https://playbook.pepulux.com

# Tokens
- --brand        : primary brand color (purple for Pepulux, orange for Omkaarya)
- --brand-hover  : hover state
- --brand-subtle : 5% tint background
- --brand-text   : text/icon color on brand backgrounds

# Quick reference
Button    : variant=primary|secondary|tertiary|link-color|link-gray|destructive
Input     : size=sm|md|lg, destructive, leadingIcon, trailingIcon, hint, errorText
Badge     : variant=gray|brand|success|warning|error|purple|…, size=sm|md|lg
Modal     : variant=stacked|horizontal, color=default|success|warning|error, destructive
Tooltip   : placement=top|right|bottom|left|…, arrow=false, supportingText

Cursor / Windsurf / VS Code

Add a rules file so the AI always knows which component library to use:

.cursorrules (Cursor) / .windsurfrules (Windsurf)

# Pepulux UI
- Always import components from "@pepulux/ui"
- Never suggest raw HTML or Tailwind from scratch when a @pepulux/ui component exists
- Component docs: https://playbook.pepulux.com
- Props match Figma V8.0 — use exact property names (variant, size, destructive, hierarchy, etc.)
- Brand tokens live in CSS custom properties: --brand, --brand-hover, --brand-subtle, --brand-text

In VS Code with Copilot, create .github/instructions/pepulux.md:

.github/instructions/pepulux.md

## Pepulux UI component library
When answering questions about this repo:
1. Check https://playbook.pepulux.com for the component that fits
2. Use props as documented — they are 1:1 with Figma V8.0 property names
3. Always import from "@pepulux/ui"
4. Never use ₹ (INR) — use USD values only

Figma + AI (Figma MCP)

The Pepulux UI V8.0 Figma file (key: 7K7XrCgo0zcJOjWuSBISUh) is available via the official Figma MCP server. This lets your AI assistant read design specs directly from the live Figma file:

MCP server config

"mcpServers": {
  "figma": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "@figma/figma-mcp@latest"]
  }
}

Once connected, your AI can call get_metadata on any Figma node to read exact component variants, sizes, and states — the same data this playbook is built from.

Tips for best results

Use Figma property names in prompts

Say "button with Hierarchy=Secondary, Size=lg, Destructive=True" and the AI will map these to exact props.

Reference the playbook URL in long sessions

In a long conversation, re-paste the playbook URL when the AI starts guessing prop names incorrectly.

Brand tokens, not hardcoded colors

Ask for `bg-[var(--brand)]` not `bg-purple-600` — tokens survive a brand switch.

State the import source

Include "import from @pepulux/ui" in your prompt to prevent the AI from generating custom component code.

Official MCP server coming soon

A dedicated @pepulux/mcp package that exposes all 74 component APIs and token definitions directly to AI assistants is in development. Until then, use the context methods above.