Embed the widget

Add MCP Studio to your application with one code snippet. Your users can create MCP servers from trusted sources while your product controls the available tools, source types, branding, layout, and analytics.

Audience	Product engineers and frontend developers embedding MCP Studio SDK
Prerequisites	SDK Client ID, access to your web app, and a page or component where the widget should render

Basic embed

The simplest integration requires three elements: a container element, the SDK script, and an initialization call with your Client ID.

<!-- Container for the widget -->
<div id="mcp-studio-widget"></div>

<!-- Load the SDK -->
<script src="https://appatools.com/mcp-studio-sdk/embed.js"></script>

<!-- Initialize with your Client ID -->
<script>
  MCPStudio.init({
    clientId: "YOUR_CLIENT_ID",
    container: "#mcp-studio-widget",
  });
</script>

React and Next.js

For React applications, load the SDK script dynamically and initialize the widget after the component mounts:

import { useEffect, useRef } from 'react';

export function MCPStudioWidget() {
  const containerRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://appatools.com/mcp-studio-sdk/embed.js';
    script.async = true;
    script.onload = () => {
      window.MCPStudio.init({
        clientId: process.env.NEXT_PUBLIC_MCP_STUDIO_CLIENT_ID,
        container: containerRef.current,
      });
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div ref={containerRef} />;
}

Vue.js

<template>
  <div ref="mcpWidget" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const mcpWidget = ref(null);

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://appatools.com/mcp-studio-sdk/embed.js';
  script.async = true;
  script.onload = () => {
    window.MCPStudio.init({
      clientId: import.meta.env.VITE_MCP_STUDIO_CLIENT_ID,
      container: mcpWidget.value,
    });
  };
  document.body.appendChild(script);
});
</script>

Container options

The container parameter accepts a CSS selector string or a direct DOM element reference:

// CSS selector
MCPStudio.init({ clientId: "...", container: "#my-widget" });

// DOM element
const el = document.getElementById("my-widget");
MCPStudio.init({ clientId: "...", container: el });

Responsive behavior

The widget is responsive by default and adapts to the width of its container. For the best experience:

• Use a container at least 360px wide for horizontal layout
• Vertical layout works well in narrower sidebars (minimum 300px)
• The widget height adjusts automatically based on content

Loading states

The widget shows a branded loading skeleton while initializing. You can add custom placeholder content inside the container div — it will be replaced once the widget loads:

<div id="mcp-studio-widget">
  <p>Loading MCP Studio...</p>
</div>

Embed flow