Configuration Reference
Complete reference for all MCPStudio.init() options.
Init Options
| Parameter | Type | Default | Required | Description |
|---|---|---|---|---|
clientId | string | — | Yes | Your Client ID from the developer portal |
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 |
Full Example
MCPStudio.init({
clientId: "YOUR_CLIENT_ID",
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",
},
});
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 (federation) |
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
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 |