Skip to content
Vy logo
Guides

Spor MCP Server

The Spor MCP Server is a Model Context Protocol server that gives AI assistants (like GitHub Copilot, VS Code MCP clients, and Amazon Q Developer) access to the Spor design system.

It enables AI agents to understand and work with:

  • Spor components and documentation
  • Usage guidelines and best practices
  • Code examples and props
  • Design tokens
  • @vygruppen/spor-react exports

The server runs over stdio and is designed for seamless integration with modern AI developer tools.

Spor to MCP AI

Tools

The Spor MCP server exposes the following tools to AI agents:

Component Tools

  • list_components
    Get a complete list of all documented Spor components
  • get_component_docs
    Retrieve full documentation for a component (by slug)
  • get_component_examples
    Get code examples and usage patterns for a component
  • get_component_guidelines
    Access usage guidelines and best practices
  • search_components
    Perform keyword search across all component documentation
  • get_component_props
    Retrieve prop tables for a component and its sub-components

Design System Tools

  • get_spor_tokens
    Retrieve design tokens from @vygruppen/spor-design-tokens Supports filtering by:
    • theme (vyDigital, vyUtvikling, cargonet)
    • category (color, size, font, depth, time, palette)
    • color mode (light, dark)

React API Tools

  • list_spor_react_exports
    List all available exports from @vygruppen/spor-react

Setup

The MCP server currently supports stdio transport and is published as:

@vygruppen/spor-mcp-server

Editor Integrations

Visual Studio Code

Make sure you have GitHub Copilot installed.

Add to .vscode/mcp.json:

{
  "servers": {
    "spor": {
      "command": "npx",
      "args": ["-y", "@vygruppen/spor-mcp-server"]
    }
  }
}


Claude Desktop

To use the Spor MCP server with Claude Desktop, you need to configure it manually via Claude’s MCP settings file.

1. Open MCP Configuration

Locate (or create) the Claude Desktop config file:

  • macOS: ~/Library/Application Support/Claude/mcp.json
  • Windows: %APPDATA%/Claude/mcp.json

2. Add the Spor MCP Server

Add the following configuration:

{
  "mcpServers": {
    "spor": {
      "command": "npx",
      "args": ["-y", "@vygruppen/spor-mcp-server"]
    }
  }
}