aiPlugin

Add an AI assistant panel to the editor for generating and editing pages with prompts. Built on the Vercel AI SDK’s useChat.

The plugin is a thin client: it streams the conversation plus the editor’s live config and content to the hosted React Editor endpoint, and renders the component tree the service streams back. There are no tool handlers to write — the model authors the page and the service does the rest.

npm i @reacteditor/plugin-ai --save

pnpm add @reacteditor/plugin-ai

yarn add @reacteditor/plugin-ai

bun add @reacteditor/plugin-ai

import { Editor } from "@reacteditor/core";
import { aiPlugin } from "@reacteditor/plugin-ai";
import "@reacteditor/plugin-ai/dist/index.css";
 
const ai = aiPlugin({
  headers: { Authorization: `Bearer ${apiKey}` },
});
 
export function MyEditor() {
  return <Editor plugins={[ai]} />;
}

Options

aiPlugin is intentionally small — auth and routing go through headers and endpoint. Everything else (the transport, the streaming preview, attachments, scroll-into-view) is internal.

endpoint

The endpoint the chat panel posts to. Defaults to the hosted React Editor endpoint (https://api.reacteditor.dev/v1/chat). Override it to point at your own proxy (e.g. "/api/chat") that forwards to the service — useful for attaching server-side auth.

headers

Extra headers sent with every chat request. Use this for auth — a bearer token for the hosted endpoint, or whatever scheme your proxy expects. See Auth.

How it works

You don’t write tool handlers. On each request the plugin sends the conversation plus the editor’s live state:

• messages — the conversation (UIMessage[]).
• config — a JSON-safe view of the editor config (every component’s fields/slots), so the model knows the available vocabulary.
• content — the current page’s component tree, so edits apply against live state.
• editorContext — situational pointers such as the selected component id.

The model authors the page as JSX — plain HTML tags (<div>, <section>, <p>, <h1>, <img>, …) plus your registered components by their PascalCase tag (<Hero>, <FeatureCard>). The service converts that JSX into the editor’s component tree on the fly and streams the tree back, so the canvas fills in live as the model types. The plugin applies each update and records one undo step per change.

Auth

Pass credentials with headers; they ride along on every request. For a deployed proxy that fronts the service with a key:

aiPlugin({
  endpoint: "https://your-app.com/api/chat",
  headers: { Authorization: `Bearer ${userToken}` },
});

If you ship a client-only build, point endpoint at a CORS-enabled URL and pass the auth header. The browser will preflight the POST, so the remote endpoint must allow the Origin and the custom header.