MCP Server Setup

Integrate your brand data directly into your IDE using the Model Context Protocol (MCP).

What is MCP?

The Model Context Protocol (MCP) allows your IDE to access your brand data in real-time. This means you can:

  • Access your brand colors, typography, and voice guidelines instantly
  • Generate AI-powered content that matches your brand personality
  • Ensure consistency across all your development work
  • Get contextual suggestions based on your brand identity

IDE Setup Instructions

VS Code Setup

Follow these steps to integrate BrandFolio with Visual Studio Code.

1Install the MCP Extension

Install the official Model Context Protocol extension from the VS Code marketplace.

ext install anthropic.mcp

2Copy Your MCP Server URL

Use the URL provided in Step 6 of the onboarding process. If you're here from Step 6, that's the URL you just saw!

3Configure VS Code Settings

Open your VS Code settings (JSON) and add the MCP server configuration:

{
  "mcp.servers": {
    "brandfolio": {
      "url": "YOUR_MCP_SERVER_URL_HERE",
      "name": "BrandFolio",
      "description": "Brand data and guidelines"
    }
  }
}

Replace YOUR_MCP_SERVER_URL_HERE with your actual MCP URL from Step 6.

4Restart VS Code

Close and reopen VS Code to load the MCP server configuration.

5Verify Installation

Open the MCP panel in VS Code and verify that "BrandFolio" appears in the list of connected servers.

Usage Tips

  • Ask Claude about your brand colors, fonts, or voice
  • Request AI-generated content that matches your brand personality
  • Access brand guidelines without leaving your IDE

Available Endpoints

Your MCP server provides access to the following brand data endpoints:

/api/mcp/brand

Complete brand data (all sections combined)

/api/mcp/colors

Brand color palette with CSS variables

/api/mcp/typography

Font settings with Google Fonts URL

/api/mcp/voice

Brand voice and tone guidelines

/api/mcp/identity

Brand identity and personality information

/api/mcp/ui

UI component settings with CSS variables

Troubleshooting

MCP Server not showing up in IDE

Make sure you've added the server configuration to your IDE settings and restarted the IDE.

Authentication errors

Verify that your MCP token is correctly copied in the server URL. The token should be in the format: ?token=your-token-here

Lost your MCP URL?

Currently, MCP URLs cannot be regenerated. Please contact support if you've lost your URL.