Skip to main content

Overview

io.Assist is the ready-made assistant offering for teams that want to embed a full assistant experience in an application without building the chat interface from scratch. It ships today for both Angular (@interopio/io-assist-ng) and React (@interopio/io-assist-react): you supply infrastructure configuration and the active user, and you get a working assistant UI with threads, prompts, tool traces, MCP Apps, and Working Context support.

It is the fastest way to add an io.Intelligence assistant to an application when you want the product surface to arrive before a custom frontend buildout.

Ready-Made Assistant Offering

io.Assist is the quickest path from "we want an assistant" to a usable assistant experience inside a real product.

It is built for teams that want the assistant experience to ship quickly without giving up the broader io.Intelligence stack underneath. You bring the host application and backend connectivity; io.Assist brings the ready-made assistant surface. It ships today for Angular and React.

Why Teams Choose io.Assist​

Ship quickly

Add one component instead of building a chat interface, thread list, prompts panel, and tool trace UI yourself.

Keep a modern assistant feature set

Get threads, prompt favorites, MCP tools, MCP Apps, and Working Context support in one ready-made assistant offering.

Stay aligned with app auth

Use a static bootstrap config plus dynamic per-user config so assistant behavior fits real login flows.

Build on proven infrastructure

Reuse AI Web and backends that implement the io.Intelligence Agent Protocol instead of creating a separate framework-specific assistant stack.

What io.Assist Gives You​

Product Walkthrough

See io.Assist in action

The screenshots below show how io.Assist moves from chat, to tools, to working context, to interactive MCP Apps without asking teams to build those surfaces themselves. The same assistant surface ships for both Angular and React.

Assistant Home

A full assistant surface is ready from the first render.

io.Assist starts with a complete chat experience: thread history, a focused composer, and favorite prompts that make the first interaction less intimidating.

Ready-Made Assistant UI​

Add a single component — <IoAssist /> in React or <io-assist> in Angular — to your application and get a conversational assistant interface with streaming responses, markdown rendering, code blocks, and thread management.

Persistent Threads​

Conversations are stored as threads and scoped to the current user identity. This makes it possible for users to return to earlier conversations, rename them, or delete them when no longer needed.

Prompt Library​

Applications can provide categorized prompts so users can start from common actions instead of typing everything from scratch. Prompt favorites are supported as part of the assistant experience.

MCP Tools and MCP Apps​

io.Assist can surface tools from MCP servers and show the tool traces inside chat. When a tool returns interactive UI, the same assistant experience can render it inline or in an io.Connect workspace window.

Working Context Awareness​

When paired with Working Context, the assistant can understand what the user is currently working on without requiring them to repeat that context in every message.

Built-In Sampling and Elicitation UI​

If an MCP server asks the host application to confirm an action or collect input, io.Assist includes built-in user interactions for those flows. Advanced integrations can still replace them with custom handlers.

Who It Helps​

AudienceWhy it matters
React teamsEmbed an assistant by dropping in one component and passing two config props
Angular teamsEmbed an assistant with a small integration surface and a familiar Angular setup model
Product ownersDeliver assistant value early without waiting for a custom UX buildout
Platform teamsStandardize how multiple apps expose assistant experiences on the same backend stack
Innovation teamsPilot prompts, tool-backed experiences, and context-aware assistance before investing in a custom frontend

When to Use io.Assist​

io.Assist is a good fit when you want to:

  • ship an assistant in a React or Angular app quickly
  • avoid building a custom chat interface and thread UI
  • keep control over infrastructure configuration while using a ready-made frontend
  • support prompt libraries, tool traces, MCP Apps, and Working Context in one package
  • add login-aware per-user assistant configuration

If you need a lower-level SDK because you are building a completely custom frontend, start with AI Web.

Minimal Mental Model​

Both deliveries split configuration into a static infrastructure config and a dynamic per-user config. The difference is how each framework wires it up.

React — App.tsx
import { IoAssist } from "@interopio/io-assist-react";
import IOBrowser from "@interopio/browser";

const staticConfig = {
  connectConfig: { browser: { factory: IOBrowser } },
  aiWebConfig: { agentServer: { baseUrl: "http://localhost:4111" } },
};

const dynamicConfig = { user: { id: "user-42", name: "Jane Doe" } };

export function App() {
  return <IoAssist staticConfig={staticConfig} dynamicConfig={dynamicConfig} />;
}
Angular — app.config.ts
import IOBrowser from "@interopio/browser";
import { provideIoAssist } from "@interopio/io-assist-ng";

export const appConfig = {
  providers: [
    provideIoAssist({
      connectConfig: { browser: { factory: IOBrowser } },
      aiWebConfig: { agentServer: { baseUrl: "http://localhost:4111" } },
    }),
  ],
};
Angular — app.component.ts
import { Component, signal } from "@angular/core";
import { IoAssistModule, IoAssistDynamicConfig } from "@interopio/io-assist-ng";

@Component({
  selector: "app-root",
  imports: [IoAssistModule],
  template: `<io-assist [config]="dynamicConfig()" />`,
})
export class AppComponent {
  dynamicConfig = signal<IoAssistDynamicConfig>({ user: { id: "user-42", name: "Jane Doe" } });
}

That is the core promise of the offering: keep the integration surface small while still plugging into the same agent, MCP, and Working Context ecosystem as the lower-level frontend stack.

How It Fits in the Stack​

Both the Angular and React deliveries of io.Assist are built on top of AI Web.

That means:

  • your app still needs a backend that implements the io.Intelligence Agent Protocol
  • MCP connectivity and Working Context are configured through the underlying AI Web integration
  • io.Assist gives you the ready-made UI layer on top of that infrastructure

For many teams, the common combination is:

  • AI Mastra Bridge or another AG-UI-compatible server on the backend
  • MCP services for tools and resources
  • Working Context for live business context
  • io.Assist as the embedded assistant experience

Typical Integration Pattern​

Most applications use io.Assist in two configuration layers:

  1. static infrastructure configuration (io.Connect, agent server, MCP, prompts, Working Context)
  2. runtime user configuration (the active user identity and per-user headers)

This split is especially useful when the app only knows the active user after login. Infrastructure stays fixed, while the current user and per-user headers are supplied dynamically.

  • React passes both objects as props: <IoAssist staticConfig={...} dynamicConfig={...} />.
  • Angular registers the static config with provideIoAssist(...) and passes the dynamic config through <io-assist [config]="...">.

What You Need Before You Start​

Typical prerequisites:

  • a React or Angular application
  • the matching package — @interopio/io-assist-react or @interopio/io-assist-ng
  • a platform package such as @interopio/browser or @interopio/desktop to supply the io.Connect factory
  • the framework peer dependencies already present in the host application (react/react-dom for React; the Angular peers for Angular)
  • an AG-UI-compatible agent server

If you are starting from scratch, Mastra is the recommended quick-start path described in the package README, but io.Assist is not limited to Mastra. The key requirement is AG-UI compatibility.

io.Assist usually works alongside:

Current Delivery​

io.Assist ships today for:

  • React through @interopio/io-assist-react
  • Angular through @interopio/io-assist-ng

Both deliveries share the same product surface and the same underlying AI Web infrastructure. Pick the package that matches your framework and continue with its API reference.

Next Steps​

Continue with: