Theme Protocol for MCP

A standard way for Model Context Protocol (MCP) servers to expose design tokens and themes, enabling agents to generate branded, consistent user interfaces.

Overview

The Theme Protocol allows MCP servers to expose their visual identity through standardized theme resources. When agents interact with your MCP server, they can automatically apply your brand colors, typography, and semantic design tokens to generated interfaces.

Quick Start

For MCP Server Developers

import { createTheme } from '@theme-protocol/mastra';
import { MCPServer } from '@mastra/mcp';

const themes = createTheme({
  light: {
    core: {
      colors: {
        primary: { value: '#0066cc' },
        background: { value: '#ffffff' },
        foreground: { value: '#000000' },
        positive: { value: '#28a745' },
        negative: { value: '#dc3545' },
        // ... other required colors
      },
      typography: {
        fontFamily: {
          default: { value: 'Inter, sans-serif' }
        },
        fontSize: {
          base: { value: '1rem', lineHeight: '1.5rem' }
        }
      }
    }
  },
  dark: {
    // ... dark theme
  }
});

const server = new MCPServer({
  name: 'my-branded-server',
  resources: {
    ...themes,
    // ... other resources
  }
});

For Agent Developers

import { MCPClient } from '@mastra/mcp';

const client = new MCPClient();
await client.connect('your-server-url');

// Fetch available themes
const manifest = await client.readResource('theme/manifest');

// Load user's preferred theme
const theme = await client.readResource('theme/light');

// Use theme when generating UI
const generateUI = (data, theme) => {
  return {
    style: {
      backgroundColor: theme.core.colors.background.value,
      color: theme.core.colors.foreground.value,
    }
  };
};

Packages

Package	Description	Status
@theme-protocol/core	Core types, schemas, and utilities	✅ Ready
@theme-protocol/mastra	Mastra framework adapter	✅ Ready
@theme-protocol/fastmcp	FastMCP adapter	🚧 Planned
@theme-protocol/sdk	Official MCP SDK adapter	🚧 Planned

Examples

• travel-server - Flight booking MCP server with themes
• travel-agent - Next.js agent that uses themes
• e-commerce-server - Shopping MCP server example

Key Features

🎨 Semantic Design Tokens

Map data states to visual styles:

{
  price: { value: 299, _semantic: 'positive' },  // Good deal!
  stock: { value: 2, _semantic: 'warning' }      // Low stock!
}

🌓 Built-in Dark Mode

Servers can expose multiple theme variants:

• /theme/light
• /theme/dark
• Custom variants

🔧 Framework Agnostic

Works with any MCP implementation:

• Mastra
• FastMCP
• Official MCP SDK
• Custom implementations

📐 Type Safe

Full TypeScript support with Zod validation:

import { ThemeResource, validateTheme } from '@theme-protocol/core';

const myTheme: ThemeResource = { /* ... */ };
validateTheme(myTheme); // Throws if invalid

Documentation

• RFC: Theme Protocol Specification
• Integration Guide
• API Reference
• Contributing

Why Theme Protocol?

1. Brand Consistency: Your visual identity travels with your API
2. Better UX: Users get familiar, branded interfaces automatically
3. Zero Config: Agents handle theming without manual setup
4. Future Proof: Based on open standards (MCP, Design Tokens)

Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

License

MIT © Theme Protocol Contributors