An AI-powered Model Context Protocol (MCP) server providing intelligent access to authoritative design systems knowledge. Powered by Supabase vector
Design systems mcp mcp server 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.
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.
Once connected, the assistant can call these 4 tools directly:
search_design_knowledge — Search the complete knowledge base with semantic understandingsearch_chunks — Find specific information within content chunks for detailed answersbrowse_by_category — The browse_by_category tool exposed by this serverget_all_tags — Get all available content tags for filtering and explorationThe server is distributed via npm as wrangler, so most clients can run it without a manual build step. Add it to your MCP client's configuration and restart the client to pick it up — the copy-paste configs for Claude Desktop, Claude Code and Cursor are on this page.
Before the server will start you need to supply 4 environment variables: OPENAI_API_KEY, SUPABASE_URL, SUPABASE_SERVICE_KEY, SUPABASE_ANON_KEY. Keep credentials in your client's env block or a secrets manager rather than committing them.
Developer-tool servers are usually the first ones people connect, because they turn "help me with this code" into an assistant that can actually read the repo and act on it. Design Systems MCP sits in that group, and the shape of its toolset — search_design_knowledge, search_chunks, browse_by_category among others — tells you what it is really for. Worth comparing against the other developer tools servers in this directory before you commit to one, since several overlap in scope but differ sharply in setup cost and 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 | The browse_by_category tool exposed by this server. |
| get_all_tags | Get all available content tags for filtering and exploration. |
**Or manually edit `.mcp.json`:**
```json
{
"mcpServers": {
"design-systems": {
"type": "http",
"url": "https://design-systems-mcp.southleft.com/mcp"
}
}
}Configuration as documented by the project. Restart the client after saving.
| 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 |
Read-only SQL access to Postgres — let your assistant inspect schemas and answer questions from real data.
Manage your whole Supabase project in conversation — database, auth, storage, Edge Functions and branches.
Query, modify and analyse local SQLite databases in conversation — the fastest way to chat with a data file.
Metabase ships its own MCP endpoint — search your BI content, build and run queries, and save questions and dashboards without leaving the chat.
Official MongoDB server covering data, schemas and Atlas management — from find queries to spinning up clusters.
Serverless Postgres with database branching — point your assistant at Neon and let it work on disposable copies.