An old tree on a grassy rise under a clear blue sky

Widgets

Branch out

Embed your agent with a ready-made React interface. Stream answers, show useful results, and let people act without leaving your product.

Server

const session = await cadenya.widgetSessions.create({
  spec: {
    widgetId: process.env.CADENYA_WIDGET_ID,
    tenant: { id: user.orgId, name: user.orgName },
    subject: { id: user.id, name: user.name },
  },
});
return { host: session.info?.host, token: session.spec.token };

React

<CadenyaWidgetProvider host={host} token={token}>
  <ConversationsPanel />
</CadenyaWidgetProvider>

Drop the conversation panel into any page of your app. History, streaming replies, and approvals come with it.

Order help

Where is order #1042?

Looked up order #1042

It left the Parcelway depot this morning and arrives Thursday by 6 pm. Want me to leave it at reception?

Ask a follow-up…

Set light or dark mode, accent colors, and corner radius. Then register your own React component for any tool.

Your component

<ConversationsPanel
  toolPlacement="inline"
  toolComponents={{
    pick_delivery_window: ({ args, submit }) => (
      <DeliveryWindowPicker
        slots={args?.slots}
        onPick={(slot) => submit(slot)}
      />
    ),
  }}
/>

Choose what page context to share and which browser tools to register. Your agent works with what people are looking at.

Need a hand with this order?

You are viewing order #1042 · 3 items.

Change the delivery address
Return an item
Something else
Continue

Your backend mints a session for each visitor. Conversations follow the person, and your API key stays on your server.

Welcome back

Picking up where you left off on order #1042.

Tenant Acme Freight
Subject user_8f2k
Session Expires in 15 min
Continue

Start ready-made.
Make it yours.

01 / Embed

A ready-made
React experience.

Conversation history, streaming messages, tool activity, and approvals. Bring your agent into the interface.

02 / Adapt

Your brand,
down to the details.

Set light or dark mode, accent colors, corner radius, and message backgrounds. Choose a composer that fits.

03 / Compose

Your interface.
Our runtime.

Build with individual React components and hooks, or use the TypeScript SDK to create your own frontend.

Your app

Cadenya Widgets

Your agent

A few things
to know.

Do I have to use the React panel?

No. Use individual components and hooks, or build your own UI with the TypeScript widget SDK.

Can my agent use the page’s context?

Yes. You choose what page context to share and which browser tools to register.

Can results stay in the conversation?

Yes. Inline tool cards remain in the thread and are restored when the conversation is reopened.

A sprawling bonsai on a floating island trailing roots

Plant an agent
in your product

Start with Widgets. Make the experience your own.

Create an agent See API docs