Agents. Live editor

What it is

Live editor mode runs the agent against a <DocxEditor> instance in the user's browser. Tool calls turn into real comments, tracked changes, and scroll actions on the document the user is looking at. No server-side review job, no buffer round-trip. The user sees the agent's tool calls land as the model streams tokens.

npm install @eigenpal/docx-editor-react @eigenpal/docx-editor-agents

Minimal wiring

"use client";
 
import { useRef } from "react";
import { DocxEditor, type DocxEditorRef } from "@eigenpal/docx-editor-react";
import { useDocxAgentTools } from "@eigenpal/docx-editor-agents/react";
import { useChat } from "@ai-sdk/react";
 
export function EditorWithAgent({ documentBuffer }: { documentBuffer: ArrayBuffer }) {
  const editorRef = useRef<DocxEditorRef>(null);
  const { tools } = useDocxAgentTools({ editorRef });
 
  const { messages, sendMessage } = useChat({
    api: "/api/agent-chat",
    body: { tools },
  });
 
  return (
    <div>
      <DocxEditor ref={editorRef} documentBuffer={documentBuffer} />
      {/* render messages, sendMessage button, etc. */}
    </div>
  );
}

useDocxAgentTools returns tool definitions the AI SDK consumes; the call lifecycle is forwarded transparently. Server side, wrap the client's tool descriptors with getAiSdkTools():

// app/api/agent-chat/route.ts
import { streamText } from "ai";
import { getAiSdkTools } from "@eigenpal/docx-editor-agents/ai-sdk/server";
 
export async function POST(req: Request) {
  const { messages, tools: clientTools } = await req.json();
  const tools = getAiSdkTools(clientTools);
  return streamText({ model: "openai/gpt-4o", messages, tools }).toUIMessageStreamResponse();
}

Tool call lifecycle

1. Model decides to call a tool (e.g. add_comment).
2. AI SDK forwards the call to the client.
3. useDocxAgentTools executes against the live editor via editorRef.
4. The editor renders the change (comment marker, tracked-change underline).
5. Tool result returns to the model on the next turn.

paraId is the trick that makes multi-turn work cleanly. The agent can find_text in turn 1 and add_comment on the same paragraph in turn 5 without re-resolving, because paraId is Word's stable w14:paraId attribute and survives concurrent edits.

Agent UI primitives

The chat surfaces ship with the toolkit, not the editor:

import {
  AgentPanel,
  AgentChatLog,
  AgentComposer,
  AgentSuggestionChip,
  AgentTimeline,
} from "@eigenpal/docx-editor-agents/react";

Same for Vue: @eigenpal/docx-editor-agents/vue. The hooks don't care what UI you wire up, so bring your own if you prefer.

Where to next

• Bring your own agent: Vercel AI SDK, OpenAI, Anthropic, LangChain
• agents/react API reference, full hook signatures
• Word JS API parity: Office.js verb mapping