Embed an AI agent in a React app

Mount the widget

Create a client component that injects the two scripts and passes your router to the agent, then render <ActbrowWidget /> in your root layout.

// components/ActbrowWidget.tsx
'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

const BASE_URL = 'https://actbrow-backend.depak.dev';

export function ActbrowWidget() {
  const router = useRouter();

  useEffect(() => {
    // Hand the agent your client-side router so it can navigate your SPA.
    window.ActbrowWidgetConfig = {
      assistantId: 'YOUR_ASSISTANT_ID',
      baseUrl: BASE_URL,
      apiKey: 'wk_...',
      navigate: (path) => router.push(path),
    };

    const sdk = document.createElement('script');
    sdk.src = BASE_URL + '/actbrow-sdk.js';
    sdk.onload = () => {
      const widget = document.createElement('script');
      widget.src = BASE_URL + '/actbrow-widget.js';
      document.body.appendChild(widget);
    };
    document.body.appendChild(sdk);
  }, [router]);

  return null;
}

Next steps

• Full docs & REST tool execution
• Vue example
• Self-host with Docker