Skip to main content

Chapter 2: MCP Web Integration In io.Connect Browser

In Chapter 1, ACME Banking started with a working io.Connect Browser platform and two simple client applications. The Client List app already gets its data through the platform by invoking the getClients interop method.

In this chapter, you will extend the platform with MCP Web. This gives the platform an in-browser Model Context Protocol server and exposes the same getClients capability as an MCP tool named get_clients.

This is the first step toward making ACME Banking's application capabilities available to the assistant.

This chapter uses MCP Web as an in-browser MCP server and MCP Core static tool configuration:

Install MCP Web​

Open the starter frontend package:

cd io-assist-anywhere-start

Install MCP Web:

npm install --save-dev @interopio/mcp-web

If the platform build reports missing React type declarations, install the React type packages too:

npm install --save-dev @types/react @types/react-dom

The solution project includes these type packages so the platform can run a TypeScript build cleanly.

Confirm The License Key​

MCP Web uses the io.Intelligence license key from the frontend .env file:

io-assist-anywhere-start/.env
VITE_IO_INTELLIGENCE_LICENSE_KEY="your-io-intelligence-license-key"
VITE_LICENSE_KEY="your-io-connect-browser-license-key"

You already created this file in Chapter 1. The platform app copies these values into its local app environment before starting.

warning

Keep real license keys in local .env files only. Do not commit them.

Reuse The Existing Interop Method​

The platform plugin already registers the getClients method. It also exports the method name as GET_CLIENTS_METHOD, so the MCP Web configuration can reference the same method without duplicating the string.

The relevant lines in the starter file are:

apps/io-cb-home/src/app/plugin.ts
export const GET_CLIENTS_METHOD = "getClients";

// Later in guidePluginStart:
await io.interop.register(GET_CLIENTS_METHOD, () => ({
    clients
}));

You don't need to change the client data in this chapter. The important part is that the platform owns the data and returns this shape:

{
    clients: Client[];
}

The client applications do not need to know about MCP Web yet.

Create The MCP Web Configuration​

Create a new file for the MCP Web server configuration:

apps/io-cb-home/src/app/mcp.ts

Add the following configuration:

apps/io-cb-home/src/app/mcp.ts
import type { IoIntelMCPWeb } from "@interopio/mcp-web";
import { GET_CLIENTS_METHOD } from "./plugin";

const GET_CLIENTS_TOOL = "get_clients";

export const getMCPWebServerConfig = (): IoIntelMCPWeb.Server.Config => ({
    licenseKey: (import.meta as any).env.VITE_IO_INTELLIGENCE_LICENSE_KEY,
    mcpCoreServer: {
        tools: {
            static: {
                methods: [
                    {
                        availability: "constant",
                        name: GET_CLIENTS_TOOL,
                        config: {
                            title: "Get Clients",
                            description: "Returns the list of ACME Banking clients available in the platform.",
                            inputSchema: {
                                type: "object",
                                properties: {},
                                additionalProperties: false
                            },
                            outputSchema: {
                                type: "object",
                                properties: {
                                    clients: {
                                        type: "array",
                                        items: {
                                            type: "object",
                                            properties: {
                                                id: { type: "string" },
                                                portfolioId: { type: "string" },
                                                firstName: { type: "string" },
                                                lastName: { type: "string" },
                                                segment: { type: "string" },
                                                advisor: { type: "string" },
                                                riskProfile: { type: "string" }
                                            },
                                            required: ["id", "portfolioId", "firstName", "lastName", "segment", "advisor", "riskProfile"]
                                        }
                                    }
                                },
                                required: ["clients"]
                            }
                        },
                        interop: {
                            methodName: GET_CLIENTS_METHOD
                        }
                    }
                ]
            }
        }
    }
});

This configuration does three things:

  • reads the io.Intelligence license key from VITE_IO_INTELLIGENCE_LICENSE_KEY
  • defines one static MCP tool named get_clients
  • maps that tool to the platform's existing getClients interop method

The tool is marked with availability: "constant" because the platform registers getClients during startup and treats it as a stable platform capability.

Register MCP Web As A Platform Plugin​

Open the platform helper file:

apps/io-cb-home/src/app/helpers.ts

Import ServerFactory from MCP Web and the configuration factory you just created:

apps/io-cb-home/src/app/helpers.ts
import { ServerFactory } from "@interopio/mcp-web";
import { getMCPWebServerConfig } from "./mcp";

Then add MCP Web to the platform plugin definitions:

apps/io-cb-home/src/app/helpers.ts
const getPluginsDefinitions = (): IOConnectBrowserPlatform.Plugins.Config => {
    return {
        definitions: [
            {
                name: "guide-plugin",
                start: guidePluginStart,
                critical: true
            },
            {
                name: "io.MCPWeb",
                start: ServerFactory,
                critical: true,
                config: getMCPWebServerConfig()
            }
        ]
    };
};

The guide-plugin still registers ACME Banking's platform methods. The io.MCPWeb plugin starts the MCP Web server and turns configured platform capabilities into MCP tools.

Setting critical: true is useful in the guide because a missing license key or invalid MCP configuration should fail clearly during platform startup.

Run The Platform​

Start the frontend package:

npm start

Open:

http://localhost:4200

The platform should start as before. In the browser console, look for messages similar to:

Guide plugin started
MCP Web Server started
IO Connect Browser Platform initialized

You can also confirm that MCP Web registered its server method from the top window console:

window.io.interop.methods().some((method) => method.name === "io.mcp.web.server");

The result should be:

true

The original platform method should still be available:

const result = await window.io.interop.invoke("getClients");
console.log(result.returned.clients.length);

The result should be 5.

Check The Workspace Still Works​

Open the client-management workspace from the Launchpad.

Select a client in the Client List app. The Client Portfolio app should still react to the workspace context and load that client's portfolio.

This confirms that adding MCP Web did not change the user-facing workflow. It only added a new MCP surface over an existing platform capability.

What You Have Now​

ACME Banking's platform now has:

  • the original getClients io.Connect interop method
  • an MCP Web server running as a platform plugin
  • one static MCP tool named get_clients
  • an MCP tool that calls the same platform method used by the Client List app

In Chapter 3: Configure the Agent Backend, you will configure the Mastra backend so it can talk to the assistant frontend through the io.Intelligence Agent Protocol.