Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

SDK Overview

Two ways to embed a deployed Amodal agent in your product:

  • @amodalai/react — The full React SDK: AmodalProvider plus 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/widgetChatWidget, 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/react
import { 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 dispatchdispatch_task spawns 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 storeBackend injection.
  • 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

ScenarioUse
You want to talk to your agent from your own web appReact SDK
You want a chat widget on a marketing page or third-party siteChat widget
You're building a vertical SaaS and want the agent as the core of your productReact SDK or chat widget backed by a deployed Amodal agent
You want to iterate on agent config before deploymentAmodal source editing and deploy flows