Skip to content
Panda CSS MCP Server

Panda CSS MCP Server

by Panda CSS (Chakra UI)
Released
6 views
v1.12.0
MIT
Repository Docs npm
Developer Tools

Summary

Official Panda CSS MCP server that exposes your design system - tokens, recipes, patterns, breakpoints and the resolved config - so an agent styles components with real values.

Features

  • Expose design tokens, semantic tokens and the colour palette to an agent
  • Read component recipes and layout patterns with their variants
  • Report breakpoints, pseudo-classes and colour-mode conditions
  • Return the resolved Panda configuration
  • Generate a usage report across the codebase
  • One-command client config via panda-mcp init --client

Installation

Set up this MCP server in your favorite AI agent — copy a ready-made configuration below.

Any MCP-compatible agent

Most agents (Claude, Cursor, Windsurf, VS Code, and more) read a standard mcpServers configuration.

  1. Open your agent's MCP configuration file.
  2. Merge the snippet below into it.
  3. Restart the agent — the "Panda CSS MCP Server" tools will be available.
{
  "mcpServers": {
    "panda-css-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@pandacss/mcp"
      ]
    }
  }
}

Description

Panda CSS is a build-time CSS-in-JS framework, and its MCP server solves a specific problem: an AI assistant writing components for a Panda project has no way to know your design tokens, so it invents hex codes and spacing values that do not exist in the theme. This server reads the resolved Panda configuration and hands the agent the real thing.

Tools
  • get_tokens - all design tokens with values, CSS variables and usage examples
  • get_semantic_tokens - semantic tokens with their conditional values across responsive breakpoints and colour modes
  • get_recipes - component recipes with variants, defaults and usage examples
  • get_patterns - layout patterns with their properties and usage examples
  • get_conditions - breakpoints, pseudo-classes and colour modes with their CSS values
  • get_color_palette - the full colour palette
  • get_text_styles, get_layer_styles, get_animation_styles - typography, visual and animation style compositions
  • get_keyframes - keyframe animations defined in the theme
  • get_config - the resolved Panda configuration including paths, JSX settings and output options
  • get_usage_report - how the design system is actually being used across the codebase
Running it
npx -y @pandacss/mcp

There is also a one-shot config generator:

npx -y @pandacss/mcp init --client cursor

The MCP server is deliberately published as a separate package rather than being folded into @pandacss/dev, so that installing Panda does not pull the MCP SDK and Hono into every project that only wants the CSS framework.

MIT licensed, maintained in the chakra-ui/panda monorepo by the Panda CSS team.

Related MCP Servers

MCP: Engram

by Gentleman Programming

New

Persistent memory for coding agents as a single Go binary — SQLite and FTS5 behind MCP, an HTTP API, a CLI and a TUI, with no Node, Python or Docker required.

Developer Tools
1 views

MCP: agent-device

by Callstack

New

Give a coding agent a live feedback loop on real mobile, TV and desktop apps — inspect, tap, type and capture evidence on iOS, Android and HarmonyOS over MCP or a CLI.

Developer Tools
3 views

MCP: Weights & Biases MCP Server

by Weights & Biases

New

The official W&B MCP server: query experiment runs, Weave LLM traces, artifacts and registries in natural language, and write findings back as a W&B report.

Developer Tools
3 views

MCP: Replicate MCP Server

by Replicate

Featured

Replicate's official MCP server: search thousands of hosted models, read their schemas, and run predictions on image, video, audio and language models from inside an agent.

Developer Tools
4 views
Browse all MCP servers →