Model Context Protocol

AI Agents Meet Your
Design System

A custom MCP server that gives Claude Code, Cursor, and other AI agents instant access to every component, prop, token, and story in the SLI Design System.

96 Components
209 Design Tokens
8 Tools
0 Hallucinated Props
The Problem

AI Agents Can't Read Your Design System

Storybook's official MCP server only supports React. Our Vue + Blade components were invisible to AI assistants — leading to hallucinated props, wrong syntax, and missed patterns. This server fixes that.

Before: Guessing

AI reads your Vue files one at a time. It guesses prop names, invents variants that don't exist, and doesn't know about your Blade equivalents.

MCP Bridge

The MCP server parses all 96 components on startup and serves structured metadata — typed props, emits, slots, tokens — on demand.

After: Knowing

AI queries exact props, checks real story variants, uses correct tokens, and generates Blade syntax — all verified against the source.

8 Tools

Everything AI Agents Need

Each tool is a focused query into the design system. Agents call them via the MCP protocol to get structured, accurate data.

Component Discovery
list_components
List and filter all 96 components by tier, framework, domain, or search term. Returns name, tier, prop count, and availability flags.
tier? framework? domain? search?
get_component
Full metadata for a single component: typed props with defaults, emits with payloads, slots with scoped props, companion types, and Blade equivalent.
name framework?
Stories & Documentation
list_stories
List all Storybook stories with variant names and counts. Backed by the pre-built index.json for speed.
component? search?
get_story
Full story details: argType descriptions, variant args objects, and render template examples that show real usage patterns.
component variant?
get_documentation
Consolidated markdown docs: props table with descriptions, events, slots, Blade usage syntax, design notes, and all story variants.
component
Design System Intelligence
get_design_tokens
All 209 CSS custom properties organized by category — colors, spacing, radius, shadows, typography, transitions, and more.
category? search?
get_audit_report
UX audit findings: accessibility scores, quality grades, and specific recommendations for components and page templates.
component? template?
rebuild_manifest
Force re-scan of all source files after adding or modifying components. Reports what changed.
force?
Under the Hood

How It Works

On startup, the server parses 7 data sources into a unified manifest. Tools query this manifest to serve structured metadata over stdio.

Data Sources
96 Vue SFCs
83 Stories
43 Blade Files
209 Tokens
Audit Reports
index.json
PHP Classes
SLI Design System MCP Server
Node.js • stdio transport • 8 tools • in-memory manifest
AI Agents
Claude Code
Cursor
VS Code Copilot
Any MCP Client
.mcp.json 
{
  "mcpServers": {
    "sli-design-system": {
      "command": "npx",
      "args": ["tsx", "mcp-server/src/index.ts"],
      "cwd": "/path/to/sli-skel"
    }
  }
}
Get Started

Up and Running in 3 Steps

The server is already built and configured. Just install, restart, and go.

1

Install Dependencies

Run npm install inside the mcp-server directory to pull in the MCP SDK, Vue compiler, and other dependencies.

cd mcp-server && npm install
2

Restart Your AI Agent

The .mcp.json at the project root is already configured. Restart Claude Code (or your MCP client) to pick up the new server.

claude
3

Verify It Works

Run /mcp in Claude Code — you should see sli-design-system with 8 tools. Try asking: "What props does AdminDataTable accept?"

/mcp
Keeping Data Fresh

When to Rebuild

After Adding Components

Call rebuild_manifest from any MCP client, or simply restart Claude Code. The manifest regenerates on startup.

After Rebuilding Storybook

Run npm run build-storybook to update index.json, then rebuild_manifest to pick up the new story index.

After Changing Tokens

If you modify _tokens.scss, the changes are picked up on the next server restart or rebuild_manifest call.