feat(docs-ai-assistant-panel): add resizable AI assistant panel to docs

docs/.env.example

@@ -2,3 +2,15 @@
 NEXT_PUBLIC_SANITY_PROJECT_ID=
 NEXT_PUBLIC_SANITY_DATASET=
 NEXT_PUBLIC_SANITY_API_VERSION=
+
+# AI Assistant - LLM Router
+LLM_ROUTER_URL=
+LLM_ROUTER_KATALOG_ID=
+LLM_ROUTER_KATALOG_NAME=
+LLM_ROUTER_MODEL=
+
+# AI Assistant - MCP (Streamable HTTP)
+SEED_DOCS_MCP_SERVER_URL=
+
+# AI Assistant - Client (별도 API 서버 사용 시)
+NEXT_PUBLIC_CHAT_API_URL=

docs/app/api/chat/route.ts

@@ -0,0 +1,65 @@
+import { createOpenAI } from "@ai-sdk/openai";
+import { convertToModelMessages, safeValidateUIMessages, stepCountIs, streamText } from "ai";
+import { systemPrompt } from "@/lib/ai/system-prompt";
+import { clientTools } from "@/lib/ai/tools";
+import { getMCPTools } from "@/lib/ai/mcp-client";
+import { z } from "zod";
+
+const llmRouter = createOpenAI({
+  baseURL: process.env.LLM_ROUTER_URL,
+  apiKey: "-",
+  headers: {
+    "x-request-katalog-id": process.env.LLM_ROUTER_KATALOG_ID ?? "",
+    "x-request-katalog-name": process.env.LLM_ROUTER_KATALOG_NAME ?? "",
+  },
+  name: "llm-router",
+});
+
+const llmRouterModel = process.env.LLM_ROUTER_MODEL?.trim() || "openai/gpt-4o";
+
+const chatRequestSchema = z.object({
+  messages: z.array(z.unknown()).min(1),
+});
+
+export async function POST(req: Request) {
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return Response.json({ error: "Invalid JSON" }, { status: 400 });
+  }
+
+  const parsed = chatRequestSchema.safeParse(body);
+  if (!parsed.success) {
+    return Response.json({ error: "Invalid request body" }, { status: 400 });
+  }
+
+  const mcpTools = await getMCPTools();
+  const tools = {
+    ...clientTools,
+    ...mcpTools,
+  };
+
+  const validatedMessages = await safeValidateUIMessages({
+    messages: parsed.data.messages,
+  });
+
+  if (!validatedMessages.success) {
+    return Response.json({ error: "Invalid messages format" }, { status: 400 });
+  }
+
+  const messages = await convertToModelMessages(validatedMessages.data, {
+    tools,
+    ignoreIncompleteToolCalls: true,
+  });
+
+  const result = streamText({
+    model: llmRouter(llmRouterModel),
+    system: systemPrompt,
+    messages,
+    tools,
+    stopWhen: stepCountIs(5),
+  });
+
+  return result.toUIMessageStreamResponse();
+}

docs/app/global.css

@@ -100,3 +100,67 @@ pre, code, pre code {
   user-select: text !important;
   -webkit-user-select: text !important;
 }
+
+/* AI Panel resize handle */
+#seed-ai-panel {
+  height: 100dvh !important;
+}
+
+#seed-ai-panel > [data-separator] {
+  cursor: col-resize;
+  width: 1px;
+  background-color: var(--color-fd-border);
+  opacity: 0.6;
+  transition:
+    width 220ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 220ms cubic-bezier(0.2, 0, 0, 1),
+    background-color 150ms;
+  flex-shrink: 0;
+}
+
+#seed-ai-panel > [data-separator]:hover,
+#seed-ai-panel > [data-separator][data-active] {
+  background-color: var(--color-fd-primary);
+  opacity: 0.35;
+}
+
+#seed-ai-panel[data-ai-open="false"] > [data-separator] {
+  width: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#seed-ai-panel[data-ai-transitioning="true"] #ai-panel[data-panel] {
+  transition:
+    flex-grow 220ms cubic-bezier(0.2, 0, 0, 1),
+    width 220ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.seed-docs-pane {
+  container-type: inline-size;
+  container-name: seed-docs-pane;
+}
+
+@container seed-docs-pane (max-width: 1220px) {
+  .seed-docs-pane {
+    --fd-toc-width: 0px;
+  }
+
+  .seed-docs-pane #nd-toc {
+    display: none !important;
+  }
+}
+
+#seed-ai-panel[data-ai-open="true"] #nd-docs-layout {
+  --fd-toc-width: 0px !important;
+}
+
+#seed-ai-panel[data-ai-open="true"] #nd-toc {
+  display: none !important;
+}
+
+/* Keep AI toggle only in top header, not in section sidebars */
+#nd-sidebar .seed-ai-panel-toggle,
+#nd-sidebar-mobile .seed-ai-panel-toggle {
+  display: none;
+}

docs/app/layout.config.tsx

@@ -6,6 +6,7 @@ import {
   docsSource,
 } from "@/app/source";
 import { ReactVersionSwitcher } from "@/components/react-version-switcher";
+import { AIPanelToggle } from "@/components/ai-panel/ai-panel-toggle";
 import { IconSparkle2, IconTree } from "@karrotmarket/react-multicolor-icon";
 import clsx from "clsx";
 import type { DocsLayoutProps } from "fumadocs-ui/layouts/notebook";
@@ -94,6 +95,7 @@ export const baseOptions: Omit<DocsLayoutProps, "tree"> = {
   tabMode: "navbar",
   nav: {
     mode: "top",
+    children: <AIPanelToggle />,
     title: (
       <div className="flex gap-2 justify-center items-center">
         <svg

docs/app/layout.tsx

@@ -4,6 +4,9 @@ import "./global.css";
 
 import GoogleAnalytics from "@/components/google-analytics";
 import { LatestVersionBanner } from "@/components/latest-version-banner";
+import { AIPanelProvider } from "@/components/ai-panel/ai-panel-provider";
+import { AIPanelLayout } from "@/components/ai-panel/ai-panel-layout";
+import { MotionProvider } from "@/components/MotionProvider";
 import { Inter } from "next/font/google";
 import type { ReactNode } from "react";
 import ThemeSync from "@/components/theme-sync";
@@ -28,9 +31,15 @@ export default function Layout({ children }: { children: ReactNode }) {
         <GoogleAnalytics GA_MEASUREMENT_ID="G-02SS22W02G" />
       </head>
       <body>
-        <LatestVersionBanner />
-        <ThemeSync />
-        {children}
+        <MotionProvider>
+          <AIPanelProvider>
+            <AIPanelLayout>
+              <LatestVersionBanner />
+              <ThemeSync />
+              {children}
+            </AIPanelLayout>
+          </AIPanelProvider>
+        </MotionProvider>
       </body>
     </html>
   );