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>

Verifying the session

The snippets above render the wizard, but they are not a complete integration. Your Client ID ships to the browser, so anyone can read it in your page source, which means the ID alone does not prove a session came from you.

To prove it, your backend mints a short-lived token and passes it in:

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

This step is required for servers to be attributed to you. Without it the wizard still works, but the servers your users create are not yours: your plan does not apply to them and they do not appear in your usage. See Verify embed sessions for the backend half.

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