Skip to main content

Component API

This page covers the React API exposed by @interopio/io-assist-react.

IoAssist Component​

IoAssist is the React component that renders the assistant UI. It is the only component the package exports.

Usage​

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

Props​

PropTypeRequiredDescription
staticConfigIoAssistStaticConfigYesInfrastructure configuration for io.Connect, AI Web, MCP, prompts, and Working Context. Known at bootstrap
dynamicConfigIoAssistDynamicConfigYesRuntime configuration for the current user and optional per-user agent headers. Often known only after login

Notes​

  • Both props are required. The component wraps its tree in an internal provider that exposes both configs to the rest of the UI.
  • The React layer does not validate the configs at runtime. Malformed configuration surfaces as a failure during io.Connect or AI Web initialization rather than as an early validation error.
  • While io.Connect and AI Web initialize, the component renders a loading state; on initialization failure it renders an error state with a retry action.
  • Request headers are taken only from dynamicConfig.agentServer.headers, so per-user auth tokens belong in the dynamic config.

Minimal Example​

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} />;
}

Login-Aware Pattern​

Because both configs are plain props, the common login-aware pattern is to compute dynamicConfig from auth state and render IoAssist only once a user is present. Memoize the dynamic config so the assistant reacts to auth changes without rebuilding on every render.

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} />;
}

Stylesheet​

The component requires its stylesheet, exposed through the package ./styles export:

@import "@interopio/io-assist-react/styles";

Without the stylesheet, the component will not render as intended. See Configuration for details.

The exported types are:

  • IoAssistStaticConfig
  • IoAssistDynamicConfig

See io.Assist React Configuration for the detailed type breakdown, including the structural prompt and Working Context shapes.