Skip to main content

Overview

AI Web is the web SDK for teams that want to build their own assistant or copilot experience on top of io.Connect. It gives you the building blocks for agent conversations, thread management, MCP connectivity, and optional Working Context support without forcing you into a prebuilt UI.

If you want full control over the frontend experience, AI Web is the package that sits closest to the integration surface.

Custom Frontend Layer

AI Web gives you the assistant runtime without deciding what your product UX should look like.

Use it when the assistant needs to feel native to your application, not embedded as a generic chat box. AI Web keeps the difficult infrastructure pieces together while leaving layout, interaction design, and product behavior in your hands.

Why Teams Choose AI Web​

Design the experience yourself

Keep control over the chat layout, entry points, thread list, action bars, and product-specific flows.

Unify multiple assistant dependencies

Connect one frontend runtime to an agent server, MCP servers, and optional Working Context.

Support richer assistant journeys

Move from simple text chat to tool traces, inline UI apps, and workspace launches.

Stay flexible over time

Start with a focused use case and keep adding capabilities without throwing away your frontend investment.

What AI Web Does​

AI Web combines several pieces that teams often need when building an assistant experience:

Agent Execution​

Connect your frontend to a backend that implements the io.Intelligence Agent Protocol and start runs with either streaming events or a simpler generated text response.

Persistent Threads​

Create and manage conversation threads tied to a resource such as a user, session, or workflow. This gives your application a stable place to resume conversations and fetch message history.

MCP Connectivity​

AI Web acts as an MCP host. It can connect to the io.Intelligence MCP server and to additional remote MCP servers over Streamable HTTP, then expose their tools and resources through one frontend API.

MCP Apps​

When an MCP tool returns an interactive UI resource, AI Web can render that experience inline or open it in an io.Connect Workspace. This is useful when a chat response needs a richer embedded application instead of plain text.

AI Web is the client-side host for all MCP App interactions. It detects UI tools in the run stream, manages app lifecycle, handles state persistence across thread switches, and exposes aiWeb.mcpApps for custom integration hooks. → MCP Apps overview

Working Context Integration​

When you enable Working Context, AI Web can collect the user's current business context and make it available to the assistant flow. This helps the assistant respond with awareness of what the user is already working on.

Who It Helps​

AudienceWhy it matters
Frontend teamsBuild a product-specific assistant experience without reimplementing agent, MCP, or thread plumbing from scratch
Product ownersCreate a copilot that feels native to the application instead of a bolted-on chat widget
Platform teamsStandardize how web applications connect to agent backends, MCP infrastructure, and Working Context
Innovation teamsPrototype quickly, then grow into richer workflows like MCP Apps and multi-server assistant access

When to Use AI Web​

AI Web is a good fit when you want to:

  • build a custom assistant UI instead of using a ready-made component
  • connect one frontend to both an agent server and one or more MCP servers
  • manage threads, tools, and resources from a single SDK
  • support MCP Apps in either inline or workspace mode
  • add Working Context to a browser-based assistant experience

If you want a ready-made Angular assistant instead of a lower-level SDK, start with io.Assist NG.

Typical Product Scenarios​

Build a Custom Copilot in a Web App​

Use AI Web when you want to design your own chat layout, toolbar actions, and thread list while still relying on io.Intelligence services behind the scenes.

Connect to Multiple MCP Servers​

AI Web can combine tools from the io.Intelligence MCP server with additional remote MCP servers, which is useful when your assistant needs access to internal application capabilities and external services at the same time.

Add Business Context to Assistant Responses​

If users work across channels, workspaces, or shared contexts, AI Web can be paired with Working Context so runs are grounded in the current workflow state.

Launch Interactive MCP Apps from Chat​

When a tool result should open a UI instead of only returning text, AI Web can coordinate the embedded app lifecycle and route messages between the host application and the sandboxed guest app.

Minimal Mental Model​

main.ts
import IOBrowser from "@interopio/browser";
import { IoAiWebFactory } from "@interopio/ai-web";

const io = await IOBrowser();

const aiWeb = await IoAiWebFactory(io, {
  agentServer: {
    baseUrl: "http://localhost:4111",
  },
  mcp: {
    clientsConfig: {
      capabilities: {},
    },
  },
});

const agents = await aiWeb.agents.list();
const reply = await agents[0].generate({
  messages: "Summarize what this assistant can access.",
  resourceId: "user-123",
});

The important idea is not the code itself. It is that one frontend runtime becomes the place where your application talks to agents, threads, tools, resources, and optional UI apps.

How It Fits in the io.Intelligence Stack​

AI Web usually sits between your custom frontend and the rest of the io.Intelligence stack:

  • Step 1 Your application initializes AI Web inside an io.Connect Browser or Desktop experience.

  • Step 2 AI Web connects to a backend that implements the io.Intelligence Agent Protocol, such as one built with AI Mastra Bridge.

  • Step 3 It discovers tools and resources from MCP infrastructure and can add Working Context.

  • Step 4 Your product UI decides how those assistant capabilities are presented to users.

What You Need Before You Start​

AI Web is intended for applications running in an io.Connect environment.

Typical prerequisites:

  • an io.Connect Browser or io.Connect Desktop application
  • a backend that implements the io.Intelligence Agent Protocol
  • optional MCP server endpoints if you want tool and resource discovery
  • an optional sandbox proxy page if you want to use MCP Apps

AI Web is usually combined with:

  • MCP when you need tools and resources from io.Connect applications
  • Working Context when runs should be aware of the user's active workflow state
  • AI Mastra Bridge when your backend runtime is Mastra
  • io.Assist NG when you later decide to use the ready-made Angular UI instead of a custom frontend
  • Agent Protocol Reference for the exact contract AI Web uses to talk to the backend

Next Steps​

If AI Web matches your use case, continue with: