Put the agent inside your product, not next to it
The AGO SDK embeds a customer facing AI agent in your React, Vue or Angular app. It navigates the routes you already have, changes the page the user is looking at, and runs your own JavaScript functions in the browser.
npm install @useago/sdkimport { AgoProvider, ChatWidget } from "@useago/sdk/react";
export default function App() {
return (
<AgoProvider baseUrl="https://api.useago.com" agent="support-agent">
<ChatWidget title="AGO" welcomeMessage="Ask me anything!" height={500} />
</AgoProvider>
);
}Let your coding agent install it
The full documentation is published as a single file built for coding agents. Paste this into Claude Code, Codex or Cursor and let it wire the integration into your codebase.
Read https://raw.githubusercontent.com/useago/ago-sdk/refs/heads/main/llms-full.txt
and integrate the AGO chat SDK into this app.Prefer to read it yourself? The full documentation and one runnable example per stack are in the public repository.
A chat widget answers. This one acts.
Most support widgets sit on top of your product and can only talk about it. The AGO SDK gives the agent controls, so it operates the interface your users are already in.
The agent drives your existing routes
Describe the pages you already have and “show me my invoices” actually navigates there. The hook calls your own navigate function, so route guards, auth and layouts keep working exactly as they do today. Paths accept parameters, so one route covers every detail page.
import { useAgoNavigation } from "@useago/sdk/react";
// Your existing layout. Only the hook is new.
useAgoNavigation(navigate, [
{ name: "invoices", path: "/invoices", description: "List and download invoices" },
{ name: "invoiceDetail", path: "/invoices/:id", description: "One invoice detail page" },
{ name: "settings", path: "/settings", description: "Account, billing and team" },
]);The agent changes the page the user is on
Expose the editable state of a screen, filters, sort, view mode, and “only the overdue ones, newest first” updates the view. Every value is sent with the message, so the agent knows the current state before it changes anything.
import { useAgoPageState } from "@useago/sdk/react";
useAgoPageState([
{
name: "statusFilter",
description: "Filter invoices by status",
schema: { type: "string", enum: ["all", "paid", "overdue"] },
get: () => status, // the agent reads the current value
set: setStatus, // the agent changes it
},
]);Your JavaScript becomes an agent tool
Keep your application logic as a regular function and describe its arguments with a JSON schema. When the agent calls it, the SDK runs your handler in the browser with the generated arguments and sends the result back into the conversation.
import { defineFunction } from "@useago/sdk";
export const getOrderStatusTool = defineFunction({
name: "getOrderStatus",
description: "Get the current status of an order from its ID.",
parameters: {
type: "object",
properties: {
orderId: { type: "string", description: "The order ID shown to the user" },
},
required: ["orderId"],
},
handler: async ({ orderId }) => {
const order = await fetch(`/api/orders/${orderId}`).then((r) => r.json());
return { orderId, status: order.status };
},
});Same two steps, whatever you ship with
The core client depends on nothing but fetch and ReadableStream. Framework bindings are optional peer dependencies, so you only pull in the one you import.
@useago/sdk/react@useago/sdk/vue@useago/sdk/angular@useago/sdk@useago/sdk/widgetThe default panel is a starting point
Everything the ready made widget does is also exposed through hooks and the raw client, so you can build the exact experience your product needs.
Build your own chat
useChat and useMessages give you the message list, the loading state and a send function. The default panel is a starting point, not a ceiling.
Sources on every answer
Each assistant message carries the knowledge documents it used, with title and URL, so you can render citations your users can click.
Events and streaming
Low level hooks into the message stream let you render tokens as they arrive, track tool calls and plug your own analytics.
A mock client for tests
createMockClient replaces the network in unit tests, so your agent driven flows stay covered in CI without calling a live model.
In browser devtools
An optional debug overlay shows the registered routes, page state and functions the agent can see, which makes wiring problems obvious.
Your own domain
A reverse proxy guide lets you serve AGO from your domain, same origin, so cookies and content policies stay simple.
Shipping the SDK is the easy part
A customer facing agent has to be reliable, safe and measurable. AGO runs the operating layer behind the SDK so your team does not rebuild it.
Knowledge that stays current
Connect Notion, Confluence, Zendesk, your help center or your own API. The agent answers from your real documentation instead of a frozen snapshot.
Evaluations and quality monitoring
Every conversation is scored and reviewable. You see what the agent resolved, what it got wrong and what to fix, before your customers tell you.
Security controls and human fallback
Scoped tools, tenant isolation and a handover path to your team when the agent should not act alone. SOC 2 Type II certified.
Questions developers ask before the first commit
How the SDK fits an application that already exists, and what happens to your data.
Does it work on an existing application?+
Yes, that is the point. You add a provider and one or two hooks to the layout and screens you already have. Your router, your state management and your guards stay as they are, because the SDK calls your functions rather than replacing them.
Do I have to restructure my routing?+
No. useAgoNavigation takes any function that accepts a path, so it works with React Router, Next.js, Vue Router, the Angular Router or a hand rolled navigate. Your router is never a dependency of the SDK.
What if I do not use React?+
The core client is framework free and ships bindings for Vue 3 and Angular, plus a plain TypeScript entry point. For a site with no build step, a single script tag renders the widget.
Where does the data go?+
Messages go to your AGO tenant. Functions run in your user's browser, so the data behind them never leaves your application unless you return it to the agent. AGO is SOC 2 Type II certified and GDPR compliant, with EU hosting available.
Is the SDK open source?+
The SDK is published on npm as @useago/sdk under the Apache 2.0 license, and the source, the guides and one runnable example per stack live in the public repository on GitHub.
How long does an integration take?+
A working chat panel takes about two minutes. Wiring navigation, page state and your first functions usually takes an afternoon. Teams that want it done with them use our forward deployed engineers.
Ready to reimagine your customer experience?
Deploy AI agents that truly understand your customers and your business. Book a demo with our team to see Ago in action.