{result.result?.output?.content?.map((item, i) => (
);
}
```
### Client Component with Streaming
{JSON.stringify(item)}
))}
{contents.map((item, i) =>
);
}
export default function ChatPage() {
const [client, setClient] = useState
{contents.map((item, i) =>
);
}
export default function ChatPage() {
return (
Loading...
;
return (
Loading...
;
return (
{threads.map((thread) => (
))}
);
}
```
Then use it with your chat component:
```tsx theme={null}
function ChatApp() {
const [selectedThreadId, setSelectedThreadId] = useState
{contents.map((item, i) =>
);
}
```
**Option B: Proxy Streaming**
Your backend proxies the stream. The API key never leaves your server.
```tsx theme={null}
// app/api/invoke/route.ts (SERVER)
import { ErdoClient } from '@erdoai/server';
const client = new ErdoClient({ authToken: process.env.ERDO_AUTH_TOKEN });
export async function POST(request: Request) {
const { botKey, messages } = await request.json();
const stream = new ReadableStream({
async start(controller) {
for await (const event of client.invokeStream(botKey, { messages })) {
controller.enqueue(new TextEncoder().encode(`data: ${JSON.stringify(event)}\n\n`));
}
controller.close();
},
});
return new Response(stream, {
headers: { 'Content-Type': 'text/event-stream' },
});
}
```
See [Integration Patterns](/ts-sdk/integration) for complete examples of both approaches.
## Use Cases
### Embed Data Analysis
Add AI-powered data analysis to your existing application:
```typescript theme={null}
// User asks a question in your app
const result = await client.invoke('data-analyst', {
messages: [{ role: 'user', content: userQuestion }],
datasets: ['sales-data', 'customer-data'],
});
// Render charts and insights
```
### AI Tool in Chat Applications
Use Erdo as a tool alongside your LLM for data-intensive queries:
```typescript theme={null}
// When your LLM detects a data question, delegate to Erdo
if (isDataQuestion(userMessage)) {
const erdoResult = await client.invoke('data-analyst', {
messages: [{ role: 'user', content: userMessage }],
});
// Return rich visualizations to the user
}
```
### Automated Reporting
Generate reports programmatically:
```typescript theme={null}
const report = await client.invoke('data-analyst', {
messages: [{ role: 'user', content: 'Generate a weekly sales report' }],
parameters: {
dateRange: 'last_7_days',
format: 'detailed',
},
});
```
## Environment Variables
Configure the SDK using environment variables:
| Variable | Description | Default |
| ----------------- | ----------------- | --------------------- |
| `ERDO_AUTH_TOKEN` | Your Erdo API key | Required |
| `ERDO_ENDPOINT` | API endpoint | `https://api.erdo.ai` |
```typescript theme={null}
// Uses environment variables automatically
const client = new ErdoClient();
```
## Next Steps
* [Client Reference](/ts-sdk/client) - Detailed API documentation
* [UI Components](/ts-sdk/ui-components) - React component reference
* [Integration Patterns](/ts-sdk/integration) - Vercel AI SDK, Next.js patterns
# UI Components
Source: https://docs.erdo.ai/ts-sdk/ui-components
React components for rendering Erdo agent results
# UI Components
The `@erdoai/ui` package provides React components for rendering agent results, including charts, tables, and formatted content.
## Installation
```bash theme={null}
npm install @erdoai/ui
```
**Peer Dependencies:**
```bash theme={null}
npm install react react-dom
```
## ErdoProvider
Wrap your app with `ErdoProvider` to configure the SDK:
```tsx theme={null}
import { ErdoProvider } from '@erdoai/ui';
function App() {
return (
{error &&
);
}
```
**Options:**
| Option | Type | Description |
| ---------- | ------------------------ | ----------------------------------------------- |
| `botKey` | `string` | Bot key for the thread (e.g., `'data-analyst'`) |
| `threadId` | `string` | Optional existing thread ID to resume |
| `onFinish` | `() => void` | Called when message streaming completes |
| `onError` | `(error: Error) => void` | Called on error |
**Returns:**
| Property | Type | Description |
| ------------------- | ------------------------------------ | ----------------------------------------- |
| `streamingContents` | `ContentItem[]` | Visible content items ready for rendering |
| `isStreaming` | `boolean` | Whether currently streaming |
| `error` | `Error \| null` | Most recent error |
| `sendMessage` | `(content: string) => Promise{error.message}
}
{streamingContents.map((content) => (
Loading...
;
if (error) return Error: {error.message}
;
return (
{JSON.stringify(data, null, 2)}
Loading...
;
return {JSON.stringify(allData, null, 2)};
}
```
## Content Renderers
### Content
Auto-routes to the appropriate renderer based on content type:
```tsx theme={null}
import { Content } from '@erdoai/ui';
function ResultView({ content }) {
return Bot: {content.content.bot_name}
{/* Custom rendering logic */}Custom Bot: {data.bot_name}
{botInvocation && (
{messages.map((message) => (
{message.parts.map((part, i) => {
if (isToolUIPart(part) && isErdoTool(part)) {
return
))}
{part.text}
; } return null; })}