How do I install the design systems mcp server?

Use a recorded configuration for your client, replace example credential values and paths, and verify the documented runtime. Restart or reconnect the client, then inspect the available tools.

What credentials does it need?

It reads `OPENAI_API_KEY`, `SUPABASE_URL`, `SUPABASE_SERVICE_KEY`, `SUPABASE_ANON_KEY` from the environment. Store these in your client's env block or a secrets manager — never commit them to a repository — and grant the narrowest scope that still covers your use case.

SSyncDev

Start a project

Design Systems MCP Server

An AI-powered Model Context Protocol (MCP) server providing intelligent access to authoritative design systems knowledge. Powered by Supabase vector

Remote serverstreamable-httpTypeScript

What is the Design Systems MCP Server?

Design Systems MCP connects Design Systems MCP to AI assistants that speak the Model Context Protocol. An AI-powered Model Context Protocol (MCP) server providing intelligent access to authoritative design systems knowledge. Powered by Supabase vector search with 200+ curated entries including W3C standards, WCAG guidelines, and design system best practices.

What Design Systems MCP does

An AI-powered Model Context Protocol (MCP) server providing intelligent access to authoritative design systems knowledge. Powered by Supabase vector search with 200+ curated entries including W3C standards, WCAG guidelines, and design system best practices.

Practical notes

Maintained by southleft, written in TypeScript.

More MCP options

Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.

Maintainer setup documentation.

Recorded tools

Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.

Tool	What it does
search_design_knowledge	Search the complete knowledge base with semantic understanding.
search_chunks	Find specific information within content chunks for detailed answers.
browse_by_category
get_all_tags	Get all available content tags for filtering and exploration.

How to install the Design Systems MCP Server

claude mcp add design-systems --env OPENAI_API_KEY=your-value --env SUPABASE_URL=your-value --env SUPABASE_SERVICE_KEY=your-value --env SUPABASE_ANON_KEY=your-value -- npx -y wrangler

Configuration

Variable	Description	Required
OPENAI_API_KEY	Credential the server authenticates with.	Yes
SUPABASE_URL	Endpoint or connection string the server talks to.	Yes
SUPABASE_SERVICE_KEY	Credential the server authenticates with.	Yes
SUPABASE_ANON_KEY	Credential the server authenticates with.	Yes

Example prompts to try

“Use Design Systems MCP to search design knowledge.”
“Use Design Systems MCP to search chunks.”
“Use Design Systems MCP to browse by category.”

Frequently asked questions

An AI-powered Model Context Protocol (MCP) server providing intelligent access to authoritative design systems knowledge. Powered by Supabase vector search with Confirm the tools offered by your installed version in the connected client. Tool availability and permissions depend on the server and account configuration.