SDK Overview
Two ways to embed a deployed Amodal agent in your product:
- @amodalai/react — The full React SDK:
AmodalProviderplus hooks for stores (useStoreQuery,useStoreEntry), actions (useIntentRun,useSkillRun), sessions (useSession,useSessionActions), and live events (useAgentEvents); chat components (AmodalChat,AmodalAction,ConfirmCard/ReviewCard); and headless clients (SdkClient,RuntimeClient). Talks to a running runtime server over HTTP/SSE. - @amodalai/react/widget —
ChatWidget, the embeddable chat surface with SSE streaming, theming, and callbacks, plus its building blocks; the subpath keeps a chat-only embed from importing the whole SDK. See Chat.
React (client-side)
npm install @amodalai/reactimport { AmodalProvider, AmodalChat } from "@amodalai/react";
function App() {
return (
<AmodalProvider runtimeUrl="https://your-agent.example.com">
<AmodalChat user={{ id: "user_123" }} />
</AmodalProvider>
);
}Your React app calls a deployed runtime over HTTP/SSE. In production, route these calls through your app backend when you need to mint user identity, scope IDs, or session tokens.
What you get
- State-machine agent loop — see State Machine for the full architecture.
- Multi-provider support — Anthropic, OpenAI, Google, DeepSeek, Groq, Mistral, xAI via the Vercel AI SDK. Provider failover chains built in.
- Tool system — store tools, connection tools with ACL enforcement, custom tools, and MCP tools.
- Sub-agent dispatch —
dispatch_taskspawns a write-enabled sub-agent with its own context. - Context compaction + loop detection — long agent runs stay coherent without blowing the budget.
- Store backends — Postgres via Drizzle ORM. Bring your own via the
storeBackendinjection. - SSE streaming — every
session.stream()call yields typed SSE events (init, text_delta, tool_call_start, tool_call_result, done). - MCP support — discover tools from connected MCP servers.
When to use which
| Scenario | Use |
|---|---|
| You want to talk to your agent from your own web app | React SDK |
| You want a chat widget on a marketing page or third-party site | Chat widget |
| You're building a vertical SaaS and want the agent as the core of your product | React SDK or chat widget backed by a deployed Amodal agent |
| You want to iterate on agent config before deployment | Amodal source editing and deploy flows |