How to build an AI legal assistant in an hour with Nutrient Document Authoring

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.externals.push({
        "@nutrient-sdk/document-authoring":
          "script DocAuth@https://document-authoring.cdn.nutrient.io/releases/document-authoring-1.17.0-umd.js",
      });
      config.output.environment = {
        ...config.output.environment,
        asyncFunction: true,
      };
    }
    return config;
  },
};

export default nextConfig;

import { openai } from "@ai-sdk/openai";
import { convertToModelMessages, stepCountIs, streamText } from "ai";
import {
  getAiPromptGuide,
  getAiToolDefinitions,
} from "@nutrient-sdk/document-authoring-ai";
import { toVercelAiTools } from "@nutrient-sdk/document-authoring-ai/vercel";

const tools = toVercelAiTools(getAiToolDefinitions({ reviewComments: "create" }));
const system = `${getAiPromptGuide()}

Include a short reviewComment on every write tool call that explains the change for the reviewer.`;

export async function POST(req: Request) {
  const body = await req.json();

  const result = streamText({
    model: openai("gpt-5.4-mini"),
    system,
    messages: await convertToModelMessages(body.messages),
    stopWhen: stepCountIs(20),
    tools,
  });

  return result.toUIMessageStreamResponse();
}

"use client";

import { useChat } from "@ai-sdk/react";
import {
  DefaultChatTransport,
  lastAssistantMessageIsCompleteWithToolCalls,
} from "ai";
import { useEffect, useRef, useState } from "react";
import { isAiWriteToolName } from "@nutrient-sdk/document-authoring-ai";
import {
  getAiToolkit,
  type AiToolkit,
} from "@nutrient-sdk/document-authoring-ai/editor";
import {
  createDocAuthSystem,
  type DocAuthEditor,
  type DocAuthSystem,
} from "@nutrient-sdk/document-authoring";

export function LegalAssistant() {
  const hostRef = useRef<HTMLDivElement | null>(null);
  const editorRef = useRef<DocAuthEditor | null>(null);
  const toolkitRef = useRef<AiToolkit | null>(null);
  const [ready, setReady] = useState(false);
  const [input, setInput] = useState("");

  // Create the editor once, load the NDA, and bind the AI toolkit to it.
  useEffect(() => {
    let system: DocAuthSystem | null = null;
    let editor: DocAuthEditor | null = null;
    let toolkit: AiToolkit | null = null;
    let disposed = false;

    const init = async () => {
      const host = hostRef.current;
      if (!host) return;

      system = await createDocAuthSystem();
      const document = await system.import(fetch("/sample.docx"), {
        fileName: "sample.docx",
      });
      editor = await system.createEditor(host, { document });
      editor.setEditorMode("review"); // edits arrive as tracked changes
      editor.setAuthor("AI Assistant"); // author shown on changes and comments
      toolkit = getAiToolkit(editor);

      if (disposed) {
        toolkit.dispose();
        editor.destroy();
        system.destroy();
        return;
      }
      editorRef.current = editor;
      toolkitRef.current = toolkit;
      setReady(true);
    };

    void init();

    return () => {
      disposed = true;
      toolkit?.dispose();
      editor?.destroy();
      system?.destroy();
      editorRef.current = null;
      toolkitRef.current = null;
    };
  }, []);

  const { messages, sendMessage, addToolOutput, status } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
    async onToolCall({ toolCall }) {
      const editor = editorRef.current;
      const toolkit = toolkitRef.current;
      if (!editor || !toolkit) {
        addToolOutput({
          tool: toolCall.toolName,
          toolCallId: toolCall.toolCallId,
          state: "output-error",
          errorText: "The editor is still loading. Try again in a moment.",
        });
        return;
      }

      const isWriteTool = isAiWriteToolName(toolCall.toolName);
      try {
        const executed = await toolkit.executeTool(
          {
            id: toolCall.toolCallId,
            name: toolCall.toolName,
            args: toolCall.input,
          },
          isWriteTool
            ? { writeMode: "track_changes", reviewComments: "create" }
            : undefined,
        );
        addToolOutput({
          tool: toolCall.toolName,
          toolCallId: toolCall.toolCallId,
          output: executed,
        });
      } catch (error) {
        addToolOutput({
          tool: toolCall.toolName,
          toolCallId: toolCall.toolCallId,
          state: "output-error",
          errorText: error instanceof Error ? error.message : "Tool failed.",
        });
      }
    },
  });

  const busy = status === "submitted" || status === "streaming";

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (!input.trim() || busy || !ready) return;
    sendMessage({ text: input });
    setInput("");
  };

  return (
    <main className="layout">
      <section className="chat">
        <div className="feed">
          {messages.map((message) =>
            message.parts.map((part, index) => {
              const key = `${message.id}-${index}`;
              if (part.type === "text" && part.text) {
                return (
                  <p key={key} className={`bubble ${message.role}`}>
                    <strong>
                      {message.role === "user" ? "You" : "Assistant"}:
                    </strong>{" "}
                    {part.text}
                  </p>
                );
              }
              if (part.type.startsWith("tool-") && "state" in part) {
                const failed = part.state === "output-error";
                const done = part.state === "output-available";
                return (
                  <p key={key} className={`bubble tool ${failed ? "failed" : ""}`}>
                    {failed ? "⚠ " : done ? "✓ " : "… "}
                    {part.type.slice("tool-".length)}
                    {failed && part.errorText ? ` — ${part.errorText}` : ""}
                  </p>
                );
              }
              return null;
            }),
          )}
        </div>
        <form onSubmit={handleSubmit}>
          <textarea
            value={input}
            onChange={(event) => setInput(event.target.value)}
            placeholder="Ask about the NDA, or request an edit..."
            rows={3}
            disabled={!ready || busy}
          />
          <button type="submit" disabled={!ready || busy}>
            {busy ? "Working..." : "Send"}
          </button>
        </form>
      </section>
      <div ref={hostRef} className="editor" />
    </main>
  );
}

import { LegalAssistant } from "../components/legal-assistant";

export default function Page() {
  return <LegalAssistant />;
}

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "AI Legal Assistant",
  description: "An AI assistant that reviews and edits an NDA in the browser.",
};

export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: system-ui, sans-serif;
}

.layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.chat {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e2e2;
  min-height: 0;
  overflow: hidden;
}

.feed {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.bubble {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f4f4f5;
  white-space: pre-wrap;
}

.bubble.user {
  background: #e7f0ff;
}

.bubble.tool {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: #555;
}

.bubble.tool.failed {
  color: #b42318;
  background: #fef3f2;
}

form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e2e2e2;
}

textarea {
  flex: 1;
  resize: none;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
}

button {
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background: #111;
  color: #fff;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.editor {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #eef2f7;
}