@amodalai/react
High-level React components for embedding Amodal agents in your product. Provides a provider, chat UI, action components, and hooks.
Installation
npm install @amodalai/reactComponents
AmodalProvider
Wraps your app with agent context:
import { AmodalProvider } from "@amodalai/react";
<AmodalProvider runtimeUrl="https://your-agent.example.com" appId="app_123">
{children}
</AmodalProvider>;AmodalChat
Full chat interface:
import { AmodalChat } from "@amodalai/react";
<AmodalChat />;AmodalAction
Trigger agent actions from buttons or other UI elements:
import { AmodalAction } from "@amodalai/react";
<AmodalAction prompt="Summarize today's alerts">Get Summary</AmodalAction>;Hooks
| Hook | Description |
|---|---|
useAmodalBrief | Get a quick agent summary on a topic |
useAmodalInsight | Request a detailed analysis |
useAmodalTask | Start and track background tasks |
useAmodalQuery | Run a query and get structured results |
Confirmation & Review
Built-in confirmation and review UIs for write operations. When the agent needs user approval, these components render automatically within the chat flow.
Bundle Size
~26.7KB ESM