# Editor Agent
URL: /docs/web/components/editor-agent

Editor Agent component.

**Demo:**

```tsx
'use client';

import { useEffect, useMemo, useState } from 'react';

import {
  type EditorAgentClient,
  EditorAgent
} from '@docyrus/ui/components/editor-agent';
import { Button } from '@docyrus/ui/primitives/ui/button';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Bot } from 'lucide-react';

/*
 * EditorAgent is auth-aware — it needs an authenticated REST `client`, the
 * current `user`, an `apiBaseUrl`, and a `getAccessToken` callback. The docs
 * site has none of those, so this demo wires a no-op client that satisfies
 * the type contract and returns empty payloads. The drawer renders, threads
 * load empty, and `sendMessage` is a noop — perfect for visual exploration.
 *
 * For real wiring (auth + chat), see the docyrus-client integration in
 * `developer-tools-ai-assistant.tsx` (project repo) where `@docyrus/signin`
 * supplies `client`, `user`, and `getAccessToken`.
 */
const DEMO_API_BASE = 'https://api.docyrus.example/v1';
const DEMO_CHAT_URL = `${DEMO_API_BASE}/ai/agents/demo-agent-id/chat`;

const DEMO_AGENT_ENVELOPE = {
  id: 'demo-agent-id',
  name: 'Docyrus AI',
  description: 'Your intelligent document assistant',
  avatar: { name: 'Docyrus AI', color: '#6366f1' }
};

const DEMO_ASSISTANT_REPLY = 'This is a simulated response. In a real application, this would be powered by a language model via the Vercel AI SDK `useChat` hook.';

function buildMockChatStream(): Response {
  const encoder = new TextEncoder();
  const id = 'demo-msg';
  const events = [
    { type: 'start' },
    { type: 'start-step' },
    { type: 'text-start', id },
    { type: 'text-delta', id, delta: DEMO_ASSISTANT_REPLY },
    { type: 'text-end', id },
    { type: 'finish-step' },
    { type: 'finish' }
  ];

  const stream = new ReadableStream
  );
}

function EditorAgentDemoInner() {
  const [open, setOpen] = useState(false);
  const client = useStubClient();

  useMockChatFetch();

  return (
    <div className="relative h-150 w-full overflow-hidden rounded-lg border bg-background">
      <div className="absolute right-3 top-3 z-20">
        
      </div>

      <div className="flex h-full items-center justify-center px-6 text-center">
        <div className="max-w-md space-y-2">
          <h3 className="text-base font-semibold">Editor canvas</h3>
          <p className="text-sm text-muted-foreground">
            Imagine a JSONata expression editor, a Handlebars template, or a
            Query Builder rendered here. The assistant slides in from the left
            and shares the same surface area.
          </p>
        </div>
      </div>

      <EditorAgent
        agentId="demo-agent-id"
        apiBaseUrl={DEMO_API_BASE}
        client={client}
        getAccessToken={() => null}
        open={open}
        senderNameFallback="Docs Visitor"
        user={null}
        width={420}
        onClose={() => setOpen(false)} />
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-editor-agent
```

**Dependencies:**
- [@ai-sdk/react](https://www.npmjs.com/package/@ai-sdk/react)
- [ai](https://www.npmjs.com/package/ai)
- [zod](https://www.npmjs.com/package/zod)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  type EditorAgentClient,
  type EditorAgentProps,
  type EditorAgentUser,
  type IEditorAgentClientTool,
  EditorAgent
} from "@docyrus/ui/components/editor-agent";

<type EditorAgentClient
  agentId="..."
  open
  onClose={() => {}}
  client={...}
  user={...}
  apiBaseUrl="..."
  getAccessToken={() => {}}
  width={DEFAULT_WIDTH_PX}
  acceptFileTypes="DEFAULT_ACCEPT_FILE_TYPES"
  allowAttachments={true}
  dataSourceId={...}
  extraBody={() => {}}
  clientTools={ReadonlyIEditorAgentClientTool[]}
  editorContext={() => {}}
  senderNameFallback="Editor"
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `agentId` | `string` | — |
| `open` | `boolean` | — |
| `onClose` | `() => void` | — |
| `client` | `EditorAgentClient \| null \| undefined` | — |
| `user` | `EditorAgentUser \| null` | — |
| `apiBaseUrl` | `string` | — |
| `getAccessToken` | `() => string \| null \| Promise<string \| null>` | — |
| `width` | `number` | `DEFAULT_WIDTH_PX` |
| `acceptFileTypes` | `string` | `DEFAULT_ACCEPT_FILE_TYPES` |
| `allowAttachments` | `boolean` | `true` |
| `dataSourceId` | `string \| null` | — |
| `extraBody` | `() => Record<string, unknown> \| null \| undefined` | — |
| `clientTools` | `ReadonlyArray<IEditorAgentClientTool>` | — |
| `editorContext` | `() => string \| null \| undefined` | — |
| `senderNameFallback` | `string` | `'Editor'` |
| `className` | `string` | — |

## Components

| Component | Description |
|-----------|-------------|
| `type EditorAgentClient` | Public export |
| `type EditorAgentProps` | Public export |
| `type EditorAgentUser` | Public export |
| `type IEditorAgentClientTool` | Public export |
| `EditorAgent` | Public export |
| `CodyAgentToggle` | Internal — `cody-agent-toggle.tsx` |