---
title: "Widgets — Cadenya"
url: "https://cadenya.com/features/widgets"
description: "Embed your agent with a ready-made React interface. Stream answers, show useful results, and let people act without leaving your product."
---

![An old tree on a grassy rise under a clear blue sky](/_astro/hero-landscape._bjPMHEx_ZxtLy9.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

# 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.

[Get started](https://app.cadenya.com/signup)

![](/_astro/roots-code.BGowGzZb_Zy2wrd.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

## 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>
```

### Embed a conversation  
anywhere

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

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

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…

### Customize the  
experience

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

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

Your component

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

### Give it context  
from the page

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

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

Need a hand with this order?

You are viewing order #1042 · 3 items.

Change the delivery address

Return an item

Something else

Continue

### Tie it to  
your users

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

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

Welcome back

Picking up where you left off on order #1042.

Tenant Acme Freight

Subject user\_8f2k

Session Expires in 15 min

Continue

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

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…

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

Your component

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

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

Need a hand with this order?

You are viewing order #1042 · 3 items.

Change the delivery address

Return an item

Something else

Continue

![](/_astro/roots-code.COYxbGtk_1TbA5n.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

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](/_astro/island-tree.DSrfAQ1I_Z2pu9sW.webp?dpl=dpl_HJa8gqwfz8xwjnF1PtXneJm7pNwR)

## Plant an agent  
in your product

Start with Widgets. Make the experience your own.

[Create an agent](https://app.cadenya.com/signup) [See API docs](/docs)