AI editing

// app/api/chat/route.ts
import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from 'ai';
import { openai } from '@ai-sdk/openai';
import { type AgentContextSnapshot } from '@eigenpal/docx-editor-agents/server';
import { getAiSdkTools } from '@eigenpal/docx-editor-agents/ai-sdk/server';

// No `execute` on these tools: the AI SDK forwards every call to the
// client's useChat({ onToolCall }), which runs it against the live editor.
const tools = getAiSdkTools();

export async function POST(req: Request) {
  const { messages, context } = (await req.json()) as {
    messages: UIMessage[];
    context?: AgentContextSnapshot;
  };

  const result = streamText({
    model: openai('gpt-4o'),
    system:
      'You are a careful document assistant. Locate paragraphs with ' +
      'read_document or find_text before commenting or suggesting changes.' +
      (context?.selection?.paraId
        ? `\nThe user's cursor is in paragraph ${context.selection.paraId}.`
        : ''),
    messages: await convertToModelMessages(messages),
    tools,
    // AI SDK stops after a single step by default. Without stopWhen the
    // model never reads its own tool results and never writes a final reply.
    stopWhen: stepCountIs(12),
  });

  return result.toUIMessageStreamResponse();
}

'use client';

import { useMemo, useRef, useState } from 'react';
import dynamic from 'next/dynamic';
import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
import { type DocxEditorRef } from '@eigenpal/docx-editor-react';
import {
  AgentChatLog,
  AgentComposer,
  useDocxAgentTools,
  getToolDisplayName,
  type EditorRefLike,
} from '@eigenpal/docx-editor-agents/react';
import { toAgentMessages } from '@eigenpal/docx-editor-agents/ai-sdk/react';

// Client-only import; see /docs/1.x/installation for the SSR recipe.
const DocxEditor = dynamic(
  () => import('@eigenpal/docx-editor-react').then((m) => ({ default: m.DocxEditor })),
  { ssr: false }
);

export default function Page() {
  const editorRef = useRef<DocxEditorRef>(null);
  const [input, setInput] = useState('');

  // The hook owns the bridge to the live editor: a tool executor plus a
  // context snapshot for the system prompt.
  const { executeToolCall, getContext } = useDocxAgentTools({
    // RefObject is invariant; DocxEditorRef satisfies EditorRefLike, so cast at the boundary.
    editorRef: editorRef as React.RefObject<EditorRefLike | null>,
    author: 'Assistant',
  });

  // `chat` is not defined yet inside onToolCall, so route the tool result
  // back through a ref that is set after useChat returns.
  const chatRef = useRef<{ addToolResult: (args: unknown) => Promise<void> } | null>(null);
  const chat = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
      prepareSendMessagesRequest: ({ messages }) => ({
        body: { messages, context: getContext() },
      }),
    }),
    // Re-send the conversation after each tool result so the model can read
    // its own output and either call another tool or write the final reply.
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
    onToolCall: ({ toolCall }) => {
      const result = executeToolCall(
        toolCall.toolName,
        (toolCall.input ?? {}) as Record<string, unknown>
      );
      const output =
        typeof result.data === 'string'
          ? result.data
          : (result.error ?? JSON.stringify(result.data));
      void chatRef.current?.addToolResult({
        tool: toolCall.toolName,
        toolCallId: toolCall.toolCallId,
        output,
      });
    },
  });
  // useChat's return type is wider than the minimal addToolResult shape the ref declares.
  chatRef.current = chat as unknown as typeof chatRef.current;

  const messages = useMemo(
    () => toAgentMessages(chat.messages, chat.status),
    [chat.messages, chat.status]
  );
  const loading = chat.status === 'streaming' || chat.status === 'submitted';

  return (
    <DocxEditor
      ref={editorRef}
      // ...your usual editor props (documentBuffer, etc.)
      agentPanel={{
        title: 'Assistant',
        render: () => (
          <>
            <AgentChatLog
              messages={messages}
              loading={loading}
              error={chat.error?.message}
              humanizeToolName={getToolDisplayName}
            />
            <AgentComposer
              value={input}
              onChange={setInput}
              onSubmit={() => {
                if (!input.trim() || loading) return;
                chat.sendMessage({ text: input });
                setInput('');
              }}
              disabled={loading}
            />
          </>
        ),
      }}
    />
  );
}

// Read-only agent: can look, cannot touch.
useDocxAgentTools({
  editorRef,
  include: ['read_document', 'read_selection', 'find_text', 'read_comments', 'read_changes'],
});

// Comment-only reviewer: reads plus comments, no text edits.
useDocxAgentTools({
  editorRef,
  include: ['read_document', 'find_text', 'add_comment', 'reply_comment'],
});

// Everything except direct edits.
useDocxAgentTools({
  editorRef,
  exclude: ['suggest_change', 'apply_formatting', 'set_paragraph_style'],
});

const REVIEW_TOOLS = ['read_document', 'find_text', 'add_comment'];
const all = getAiSdkTools();
const tools = Object.fromEntries(
  Object.entries(all).filter(([name]) => REVIEW_TOOLS.includes(name))
);

import type { AgentToolDefinition } from '@eigenpal/docx-editor-agents/react';

const fetchClause: AgentToolDefinition<{ name: string }> = {
  name: 'fetch_clause_template',
  displayName: 'Fetching template',
  description: 'Fetch a clause from the template library by name.',
  inputSchema: { type: 'object', properties: { name: { type: 'string' } }, required: ['name'] },
  handler: (input) => ({ success: true, data: fetchTemplateSync(input.name) }),
};

useDocxAgentTools({ editorRef, tools: { fetch_clause_template: fetchClause } });

import {
  useAgentBridge,
  AgentPanel,
  AgentChatLog,
  AgentComposer,
} from '@eigenpal/docx-editor-agents/vue';
import { toAgentMessages } from '@eigenpal/docx-editor-agents/ai-sdk/vue';

const { executeToolCall, toolSchemas } = useAgentBridge({ editorRef, author: 'Assistant' });