Configuration reference
Complete reference for all MCPStudio.init() options.
| Audience | Developers implementing or reviewing MCP Studio SDK configuration |
|---|---|
| Prerequisites | SDK Client ID and an understanding of which tools, source types, and analytics options your product should expose |
Init options
| Parameter | Type | Default | Required | Description |
|---|---|---|---|---|
clientId | string | — | Yes | Your Client ID from the developer portal. Public: it reaches the browser |
attributionToken | string | — | Yes | Short-lived token minted by your backend proving the session is yours. Without it, servers created in the session are not attributed to you. See Verify embed sessions |
container | string | Element | — | Yes | CSS selector or DOM element for the widget |
domain | string | appatools.com | No | Custom domain for MCP server endpoints |
layout | "horizontal" | "vertical" | horizontal | No | Wizard step layout direction |
font | string | Inter | No | Google Font family name |
tools | object | all enabled | No | Tool toggle overrides |
sources | object | all enabled | No | Source type toggle overrides |
colors | object | MCP Studio defaults | No | Color overrides for theming |
analytics | object | disabled | No | Analytics step and dashboard option overrides |
tools and sources are overrides, not allowlists: any key you leave out stays enabled. To offer only some tools or source types, set the others to false, or list every key so each one can be toggled in place.
Calling MCPStudio.init() again with the same container re-renders the wizard with the new options, so you can re-initialize whenever your configuration changes.
Full example
MCPStudio.init({
clientId: "YOUR_CLIENT_ID",
attributionToken: tokenFromYourBackend,
container: "#mcp-studio-widget",
domain: "yourdomain.com",
layout: "vertical",
font: "Plus Jakarta Sans",
tools: {
search_issues: false,
get_changelog: false,
},
sources: {
mcp: false,
},
colors: {
primary: "#6366f1",
primaryForeground: "#ffffff",
background: "#fafafa",
accent: "#f59e0b",
},
analytics: {
enabled: true,
tier: "core",
metrics: ["total_calls", "success_rate", "source_usage"],
},
});
Tools reference
| Tool Key | Category | Description |
|---|---|---|
search_docs | Search & Discovery | Full-text search across documentation sources |
query_source | Search & Discovery | Query a specific source URL for targeted info |
search_issues | Search & Discovery | Search for known issues, bugs, and solutions |
get_code_examples | Content Extraction | Extract code snippets from documentation |
extract_schema | Content Extraction | Extract data schemas and type definitions |
summarize_content | Analysis | Generate concise content summaries |
ask_question | Analysis | Natural language Q&A with synthesized answers |
find_api_reference | Reference & Guides | Locate API endpoints and method signatures |
get_changelog | Reference & Guides | Retrieve release notes and version updates |
get_quickstart | Reference & Guides | Extract setup and getting-started content |
Sources reference
| Source Key | Description |
|---|---|
website | Any public website or documentation site |
github | Public or private GitHub repositories |
docs | Structured documentation sites |
api | REST or GraphQL API documentation |
mcp | Connect to another MCP server |
The wizard lists the enabled source types and refuses a URL whose type is disabled, with a message naming the types that are allowed. GitHub repositories and MCP server endpoints are recognized from the URL and are always held to their toggle. A URL that only looks like documentation or an API reference is accepted as a website when website is enabled.
Analytics reference
| Key | Type | Description |
|---|---|---|
enabled | boolean | Shows the analytics step in the embedded wizard when set to true. |
tier | "core" | "action" | "predictive" | Selects the analytics dashboard tier to expose in the SDK portal. |
metrics | string[] | Controls which Core metrics are visible to end users. |
Supported Core metrics:
| Metric | Description |
|---|---|
total_calls | Total MCP calls |
success_rate | Successful call percentage |
avg_duration | Average latency |
active_sources | Active source count |
calls_over_time | Calls over time chart |
tool_usage | Tool usage breakdown |
source_usage | Source usage breakdown |
client_usage | MCP client usage |
recent_calls | Recent call history |
Colors 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 |
Fonts reference
The embed loads the family from Google Fonts and applies it to every part of the wizard, including inputs and buttons. If your site's Content Security Policy blocks fonts.googleapis.com or fonts.gstatic.com, the wizard falls back to the system font. Font names may contain letters, numbers, and spaces.
Supported Google Font families:
| Font | Style |
|---|---|
| Inter | Sans-serif, geometric |
| Roboto | Sans-serif, neo-grotesque |
| Open Sans | Sans-serif, humanist |
| Lato | Sans-serif, humanist |
| Montserrat | Sans-serif, geometric |
| Poppins | Sans-serif, geometric |
| Nunito | Sans-serif, rounded |
| Raleway | Sans-serif, elegant |
| Source Sans 3 | Sans-serif, code-friendly |
| Work Sans | Sans-serif, versatile |
| DM Sans | Sans-serif, low-contrast |
| Plus Jakarta Sans | Sans-serif, modern |
| Outfit | Sans-serif, geometric |
| Space Grotesk | Sans-serif, proportional |
| Manrope | Sans-serif, semi-condensed |