Embed the Widget

Add MCP Studio to your application with a single code snippet. This guide covers HTML embedding, framework integration, and customization.

Basic Embed

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

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

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

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

React / Next.js

For React applications, load the SDK script dynamically and initialize after mount:

import { useEffect, useRef } from 'react';

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

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://sdk.appatools.com/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://sdk.appatools.com/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>