@amodal/react

High-level React components for embedding Amodal agents in your product. Provides a provider, chat UI, action components, and hooks.

Installation

npm install @amodal/react

Components

AmodalProvider

Wraps your app with agent context:

import { AmodalProvider } from '@amodal/react'
 
<AmodalProvider
  apiUrl="http://localhost:3847"
  tenantId="tenant_123"
>
  {children}
</AmodalProvider>

AmodalChat

Full chat interface:

import { AmodalChat } from '@amodal/react'
 
<AmodalChat />

AmodalAction

Trigger agent actions from buttons or other UI elements:

import { AmodalAction } from '@amodal/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