Custom Branding

Match the MCP Studio widget to your application's design with custom colors, fonts, and layout.

Colors

Customize the widget's appearance with 10 color options. Pass hex color values for any combination:

MCPStudio.init({
  clientId: "YOUR_CLIENT_ID",
  container: "#mcp-studio-widget",
  colors: {
    primary: "#6366f1",
    primaryForeground: "#ffffff",
    background: "#fafafa",
    accent: "#f59e0b",
  },
});

Color Reference

Key	Default	Description
background	#fefdf8	Page background color
foreground	#1a1410	Primary text color
primary	#2d8a54	Primary action buttons and links
primaryForeground	#ffffff	Text on primary buttons
secondary	#f5e6c8	Secondary elements and highlights
card	#ffffff	Card and panel backgrounds
cardBorder	#f5e6c8	Card and panel borders
stepperActive	#40b06f	Active step indicator
stepperComplete	#2d8a54	Completed step indicator
accent	#FFB4A2	Accent highlights and badges

tip

Use the visual configurator to preview color changes in real time before copying the snippet.

Layout

Choose between two wizard step orientations:

• horizontal (default) — Steps displayed across the top, content below. Best for wide containers (360px+).
• vertical — Steps displayed on the left, content to the right. Best for narrower or sidebar-style containers (300px+).

MCPStudio.init({
  clientId: "YOUR_CLIENT_ID",
  container: "#mcp-studio-widget",
  layout: "vertical",
});

Font

Set any of the supported Google Font families. The SDK automatically loads the font:

MCPStudio.init({
  clientId: "YOUR_CLIENT_ID",
  container: "#mcp-studio-widget",
  font: "Plus Jakarta Sans",
});

Supported Fonts

Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Raleway, Source Sans 3, Work Sans, DM Sans, Plus Jakarta Sans, Outfit, Space Grotesk, Manrope

Custom Domain

By default, MCP server endpoints use appatools.com. Set a custom domain if you want endpoints served from your own domain:

MCPStudio.init({
  clientId: "YOUR_CLIENT_ID",
  container: "#mcp-studio-widget",
  domain: "yourdomain.com",
});

info

Custom domain setup requires DNS configuration. Contact zair@appatools.com for instructions.