MCP Server

Give your AI assistant accurate, up-to-date knowledge of the Staffbase Design System.

What is this?

When you ask an AI assistant — like GitHub Copilot or Claude — questions about the Staffbase Design System, it often makes things up. It doesn’t know which components exist, what props they accept, or which tokens to use, because it’s relying on general training data rather than the actual design system.

The Staffbase Design System MCP server fixes this. Once connected, your AI assistant can look up components, tokens, icons, and docs directly — so the answers it gives you are accurate and based on the real design system, not a guess.

Snapshots are baked in at publish time, so the server runs offline once installed.

What can I ask?

Once connected, you can ask your AI assistant things like:

• “What icons do we have related to notifications?”
• “Show me all the colour tokens for text”
• “How do I use the Avatar component?”
• “What’s the Figma link for the Button component?”
• “Are there any deprecated components I should avoid?”
• “Search for anything related to navigation”

How to connect it

The MCP server is a small program your AI assistant runs in the background to look up design system information. You register it by adding a few lines to a configuration file. Choose the guide for whichever AI tool you use.

The name staffbase-design used in the examples below is just a local label — you can change it to anything you like (e.g. design-system). Just make sure each server in your config has a unique name.

Claude Code

Open (or create) the file ~/.claude.json in your home directory and add the block below. If the file already has content, add the staffbase-design entry inside the existing mcpServers section.

{
  "mcpServers": {
    "staffbase-design": {
      "command": "npx",
      "args": ["-y", "@staffbase/design-mcp@latest"]
    }
  }
}

GitHub Copilot

Open (or create) ~/.copilot/mcp-config.json for a global setup, or .copilot/mcp-config.json inside your project folder for a project-only setup. Alternatively, type /mcp add in the Copilot chat to be guided through it interactively.

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

VS Code

Open (or create) .vscode/mcp.json inside your project folder and add the block below. Note that VS Code uses servers rather than mcpServers.

{
  "servers": {
    "staffbase-design": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@staffbase/design-mcp@latest"]
    }
  }
}

OpenCode

Open (or create) opencode.json in your project folder and add the block below inside the mcp section.

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "staffbase-design": {
      "type": "local",
      "command": ["npx", "-y", "@staffbase/design-mcp@latest"],
      "enabled": true
    }
  }
}

Internal Staffbase consumers

If you’re working within Staffbase and your setup resolves @staffbase packages from the internal GitHub Packages registry, no extra steps are needed — the same npx command above works as-is, provided your .npmrc is already configured with a GITHUB_TOKEN.

Available tools