MCP

Solar UI ships a Model Context Protocol  (MCP) server built directly into the Next.js application. It exposes components, color tokens, and design system rules to AI assistants — so they generate correct code on the first try.

Why it’s useful

Without this server, an AI generating Solar UI code is likely to:

• Use non-existent variants — variant="danger" instead of "destructive"
• Use default shadcn tokens — text-muted-foreground, bg-background — which don’t exist in Solar UI
• Add dark: classes when dark mode is handled automatically
• Pick the wrong component for a given use case

With the MCP, the AI queries the documentation directly for exact variants, correct tokens, and design rules.

Setup

npm run dev

{
  "mcpServers": {
    "solar-ui": {
      "type": "http",
      "url": "https://solar-ui.com/api/mcp"
    }
  }
}

{
  "mcpServers": {
    "solar-ui": {
      "type": "http",
      "url": "https://solar-ui.com/api/mcp"
    }
  }
}

{
  "servers": {
    "solar-ui": {
      "type": "http",
      "url": "https://solar-ui.com/api/mcp"
    }
  }
}

List the available Solar UI components

Production

Deploy Solar UI to your hosting provider (Vercel, etc.) and replace the URL in your config with the production domain:

{
  "mcpServers": {
    "solar-ui": {
      "type": "http",
      "url": "https://your-domain.com/api/mcp"
    }
  }
}

No need to run Solar UI locally — the AI assistant queries the deployed server directly.

Usage

Once configured, you can guide the AI with natural language instructions. The server answers questions about components, colors, and design system rules.

Example prompts

Find the right component:

Which Solar UI component should I use to confirm before deleting an item?

→ The AI queries find_component and recommends alert-dialog.

Get exact variants:

What variants are available for the Button component?

→ The AI queries get_component and lists: default, primary, outline, secondary, ghost, destructive, link.

Generate a component correctly:

Create a login form with Solar UI. Use the correct color tokens and variants.

→ The AI consults get_guidelines and get_component to generate design-system-compliant code.

Understand the color system:

Which token should I use for secondary text in Solar UI?

→ The AI queries get_color_token and responds text-default-11.

Recommendations

For best results, explicitly tell the AI to use Solar UI:

I'm working with Solar UI. Check the MCP before generating code to make sure
you're using the right components and tokens.

Reference

Tools

Resources

Resources are static data that the AI can read directly to load context at the start of a session.