Examples

These examples are based on the current public package API of @interopio/io-assist-react.

Each example assumes the stylesheet is imported once in your app:

src/styles.css
@import "@interopio/io-assist-react/styles";

Minimal React Setup

Use this when you want the smallest possible integration.

import { IoAssist, IoAssistStaticConfig, IoAssistDynamicConfig } from '@interopio/io-assist-react';
import IOBrowser from '@interopio/browser';

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

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

export function App() {
  return <IoAssist staticConfig={staticConfig} dynamicConfig={dynamicConfig} />;
}

Use this pattern when the application only knows the active user after authentication. Memoize the dynamic config and render the assistant only once a user is present.

import { useMemo } from 'react';
import { Navigate } from 'react-router-dom';
import { IoAssist, IoAssistDynamicConfig } from '@interopio/io-assist-react';
import { staticConfig } from './configs';
import { useAuth } from './auth';

export function AssistantShell() {
  const { userId, displayName, accessToken } = useAuth();

  const dynamicConfig = useMemo<IoAssistDynamicConfig | null>(
    () =>
      userId
        ? {
            user: { id: userId, name: displayName },
            agentServer: {
              headers: { Authorization: `Bearer ${accessToken}` },
            },
          }
        : null,
    [userId, displayName, accessToken],
  );

  if (!dynamicConfig) {
    return <Navigate to="/login" replace />;
  }

  return <IoAssist staticConfig={staticConfig} dynamicConfig={dynamicConfig} />;
}

This is the recommended shape when auth is handled by the host application rather than by io.Assist itself.

Add a Prompt Library

Use defaultPrompts on the static config to preload common prompt actions for users.

import { IoAssistStaticConfig } from '@interopio/io-assist-react';
import IOBrowser from '@interopio/browser';

export const staticConfig: IoAssistStaticConfig = {
  connectConfig: {
    browser: { factory: IOBrowser },
  },
  aiWebConfig: {
    agentServer: { baseUrl: 'http://localhost:4111' },
  },
  defaultPrompts: [
    {
      category: 'General',
      prompts: [
        { name: 'Summarize', prompt: 'Please summarize the following content:' },
        { name: 'Explain', prompt: 'Please explain this in simple terms:' },
      ],
    },
    {
      category: 'Code',
      prompts: [
        { name: 'Review Code', prompt: 'Please review this code and suggest improvements:' },
      ],
    },
  ],
};

Enable Working Context

Use Working Context when assistant responses should reflect the current workspace state.

import { IoAssistStaticConfig } from '@interopio/io-assist-react';
import IOBrowser from '@interopio/browser';
import { IoIntelWorkingContextFactory } from '@interopio/working-context';

export const staticConfig: IoAssistStaticConfig = {
  connectConfig: {
    browser: { factory: IOBrowser },
  },
  aiWebConfig: {
    agentServer: { baseUrl: 'http://localhost:4111' },
  },
  workingContext: {
    factory: IoIntelWorkingContextFactory,
    config: {
      schema: {
        clientId: {
          type: 'string',
          source: {
            context: {
              location: { workspace: { target: 'my' } },
              path: 'clientId',
            },
          },
        },
        portfolioId: {
          type: 'string',
          source: {
            context: {
              location: { workspace: { target: 'my' } },
              path: 'portfolioId',
            },
          },
        },
      },
    },
  },
};

Enable MCP Apps and Remote MCP Servers

Use this pattern when the assistant should surface interactive MCP App UIs and connect to more than one MCP server. MCP Apps require both the mcpApps runtime config and the io.modelcontextprotocol/ui capability extension.

import { IoAssistStaticConfig } from '@interopio/io-assist-react';
import IOBrowser from '@interopio/browser';

export const staticConfig: IoAssistStaticConfig = {
  connectConfig: {
    browser: { factory: IOBrowser },
  },
  aiWebConfig: {
    agentServer: { baseUrl: 'http://localhost:4111' },
    mcp: {
      clientsConfig: {
        enforceStrictCapabilities: false,
        capabilities: {
          extensions: {
            'io.modelcontextprotocol/ui': {
              mimeTypes: ['text/html;profile=mcp-app'],
            },
          },
        },
      },
      ioIntel: {
        remote: {
          streamableHttp: {
            url: 'http://localhost:8989/mcp',
            name: 'primary-remote-server',
          },
        },
        web: {
          hasPriority: true,
        },
      },
      remoteServers: [
        {
          streamableHttp: {
            url: 'http://localhost:8081/mcp',
            name: 'secondary-mcp-server',
          },
        },
      ],
      mcpApps: {
        sandboxProxyUrl: 'http://localhost:6565/index.html',
        displayMode: 'workspace',
      },
    },
  },
};

Custom Sampling and Elicitation Handlers

By default io.Assist shows built-in confirmation UI for MCP sampling and elicitation requests. Provide handlers under aiWebConfig.mcp.clientsConfig.capabilities to take full control.

import { IoAssistStaticConfig } from '@interopio/io-assist-react';
import { IoAiWeb } from '@interopio/ai-web';
import IOBrowser from '@interopio/browser';

export const staticConfig: IoAssistStaticConfig = {
  connectConfig: {
    browser: { factory: IOBrowser },
  },
  aiWebConfig: {
    agentServer: { baseUrl: 'http://localhost:4111' },
    mcp: {
      clientsConfig: {
        capabilities: {
          sampling: {
            handler: async (
              serverId: string,
              params: IoAiWeb.SamplingRequestParams,
            ): Promise<IoAiWeb.SamplingSuccessResponse> => ({
              model: 'gpt-4',
              role: 'assistant',
              content: { type: 'text', text: 'Custom sampling response' },
              stopReason: 'endTurn',
            }),
          },
          elicitation: {
            handler: async (
              serverId: string,
              params: IoAiWeb.ElicitationRequestParams,
            ): Promise<IoAiWeb.ElicitationResponse> => ({
              action: 'accept',
              content: { confirmed: true },
            }),
          },
        },
      },
    },
  },
};

Use a Named Default Agent

If your agent server exposes more than one agent, preselect one by name:

import { IoAssistStaticConfig } from '@interopio/io-assist-react';
import IOBrowser from '@interopio/browser';

export const staticConfig: IoAssistStaticConfig = {
  connectConfig: {
    browser: { factory: IOBrowser },
  },
  aiWebConfig: {
    agentServer: { baseUrl: 'http://localhost:4111' },
  },
  defaultAgentName: 'research-agent',
};

If the named agent is not found, the package falls back to the first available agent.

Minimal React Setup​

Login-Aware Dynamic Config​

Add a Prompt Library​

Enable Working Context​

Enable MCP Apps and Remote MCP Servers​

Custom Sampling and Elicitation Handlers​

Use a Named Default Agent​