# Editor Copilot
Source: https://ui.spencerwueste.com/docs/blocks/editor-copilot/
Markdown: https://ui.spencerwueste.com/llm/blocks/editor-copilot.md

> Selection toolbar with rewrite actions, inline diff acceptance, and ghost-text completion.

> Live preview: https://ui.spencerwueste.com/preview/editor-copilot

## What's inside

- **Selection toolbar** appears above selected text with improve, shorten, expand, fix grammar, and translate.
- **Diff View** shows the proposed rewrite sentence by sentence before you accept.
- **Ghost text** offers a continuation after a pause; Tab accepts it.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/editor-copilot.json
```

Manual install dependencies: `@heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/editor-copilot.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import EditorCopilot from "@/components/blocks/editor-copilot/editor-copilot";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <EditorCopilot />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Swap `rewrite` for a model call that receives the paragraph and the action, and the ghost completion for a call that receives the trailing context. The selection math works on any block-level elements marked with `data-para`.