Skip to main content

Examples

Direct Import​

Use this when the MCP Core server and the widget package run in the same process.

import { getHTML } from "@interopio/workspace-widget";
import { IoIntelMCPCoreFactory } from "@interopio/mcp-core";

const mcpApi = await IoIntelMCPCoreFactory(io, {
    licenseKey,
    transport: { type: "web" },
    server: {
        name: "my-mcp-server",
        tools: {
            system: {
                getWorkspaceWidget: {
                    resource: getHTML,
                },
            },
        },
    },
});

Served Over HTTP​

Use this when the widget is built and deployed separately from the MCP Core server, for example behind a static file host or a small dedicated server.

// server.js — hosts the built widget
import { getHTML } from "@interopio/workspace-widget";
import http from "node:http";

const html = await getHTML();

http.createServer((_, res) => res.end(html)).listen(4101);
// mcp-core server — fetches the widget over HTTP
server: {
  tools: {
    system: {
      getWorkspaceWidget: {
        resource: async () => (await fetch("http://localhost:4101/")).text(),
      },
    },
  },
}

Both approaches satisfy the same contract, resource: () => string | Promise<string>. Use whichever matches how the widget is built and deployed in your environment.

  • Overview for installation and the package's single getHTML() export
  • MCP Core: System Tools for the getWorkspaceWidget tool configuration
  • Workspace Widget for the full widget behavior: modes, interaction workflow, and custom notifications