feat(docs-ai): switch ai panel props and guide intent to llms fetch

Author: junghyeonsu

docs/app/api/chat/route.ts

@@ -1,8 +1,10 @@
 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 { buildSystemPrompt } from "@/lib/ai/system-prompt";
+import { createClientTools } from "@/lib/ai/tools";
 import { getMCPTools } from "@/lib/ai/mcp-client";
+import { detectComponentGuideIntent, extractLatestUserText } from "@/lib/ai/component-guide-intent";
+import { resolveComponentGuideLinks } from "@/lib/ai/component-guide-links";
 import { z } from "zod";
 
 const llmRouter = createOpenAI({
@@ -22,6 +24,8 @@ const chatRequestSchema = z.object({
 });
 
 export async function POST(req: Request) {
+  const baseUrl = new URL(req.url).origin;
+
   let body: unknown;
   try {
     body = await req.json();
@@ -35,6 +39,7 @@ export async function POST(req: Request) {
   }
 
   const mcpTools = await getMCPTools();
+  const clientTools = createClientTools({ baseUrl });
   const tools = {
     ...clientTools,
     ...mcpTools,
@@ -48,14 +53,33 @@ export async function POST(req: Request) {
     return Response.json({ error: "Invalid messages format" }, { status: 400 });
   }
 
+  const latestUserText = extractLatestUserText(validatedMessages.data);
+  const componentGuideIntent = latestUserText
+    ? await detectComponentGuideIntent(latestUserText, { baseUrl })
+    : null;
+  const componentGuideLinks = componentGuideIntent
+    ? await resolveComponentGuideLinks({
+        componentId: componentGuideIntent.component.id,
+        baseUrl,
+      })
+    : [];
+
   const messages = await convertToModelMessages(validatedMessages.data, {
     tools,
     ignoreIncompleteToolCalls: true,
   });
 
   const result = streamText({
     model: llmRouter(llmRouterModel),
-    system: systemPrompt,
+    system: buildSystemPrompt({
+      componentGuide: componentGuideIntent
+        ? {
+            componentId: componentGuideIntent.component.id,
+            userQuery: componentGuideIntent.question,
+            links: componentGuideLinks,
+          }
+        : null,
+    }),
     messages,
     tools,
     stopWhen: stepCountIs(8),

docs/content/ai-integration/llms-txt.mdx

@@ -34,15 +34,16 @@ SEED Design은 계층적인 llms.txt 구조를 제공합니다. 루트 진입점
   <Folder name="react" defaultOpen>
     <File name="llms.txt" />
     <File name="llms-full.txt" />
-    <File name="llms-components.txt" />
-    <File name="llms-getting-started.txt" />
-    <File name="llms-stackflow.txt" />
-    <File name="llms-developer-tools.txt" />
-    <File name="llms-migration.txt" />
-    <File name="llms-updates.txt" />
-    <Folder name="llms-components">
-      <File name="action-button.txt" />
-      <File name="..." />
+  </Folder>
+  <Folder name="llms" defaultOpen>
+    <Folder name="react" defaultOpen>
+      <Folder name="components" defaultOpen>
+        <File name="action-button.txt" />
+        <Folder name="layout">
+          <File name="box.txt" />
+        </Folder>
+        <File name="..." />
+      </Folder>
     </Folder>
   </Folder>
   <Folder name="breeze">
@@ -75,6 +76,7 @@ SEED Design은 계층적인 llms.txt 구조를 제공합니다. 루트 진입점
 자주 사용되는 문서에 빠르게 접근할 수 있습니다.
 
 - **전체 React 문서**: [/react/llms.txt](https://seed-design.io/react/llms.txt) - React 라이브러리의 모든 문서를 하나의 파일로 제공
+- **개별 React 컴포넌트 문서**: `/llms/react/components/{component}.txt` (예: [/llms/react/components/layout/box.txt](https://seed-design.io/llms/react/components/layout/box.txt))
 - **컴포넌트 가이드라인**: [/docs/llms.txt](https://seed-design.io/docs/llms.txt) - 디자인 가이드라인 문서 진입점
 
 ## 사용 예시
@@ -90,7 +92,7 @@ SEED Design React 라이브러리를 사용해서 버튼 컴포넌트를 구현
 ### 특정 컴포넌트 문서 참조
 
 ```
-@https://seed-design.io/react/llms-components/action-button.txt
+@https://seed-design.io/llms/react/components/action-button.txt
 
 ActionButton 컴포넌트의 variant 옵션에 대해 설명해주세요.
 ```

docs/lib/ai/component-guide-intent.test.ts

@@ -0,0 +1,95 @@
+import { afterEach, beforeEach, describe, expect, it } from "bun:test";
+import {
+  clearComponentGuideIntentCache,
+  detectComponentGuideIntent,
+  extractLatestUserText,
+} from "./component-guide-intent";
+import { clearLlmsPropsCache } from "./llms-props";
+
+const SAMPLE_REACT_LLMS_INDEX = `# SEED Design React - LLM Reference
+
+### components
+
+- [Box](https://seed-design.io/llms/react/components/layout/box.txt)
+- [Alert Dialog](https://seed-design.io/llms/react/components/alert-dialog.txt)
+`;
+
+describe("detectComponentGuideIntent", () => {
+  const originalFetch = globalThis.fetch;
+  const componentIds = ["alert-dialog", "action-button", "checkbox"];
+
+  beforeEach(() => {
+    clearComponentGuideIntentCache();
+    clearLlmsPropsCache();
+  });
+
+  afterEach(() => {
+    clearComponentGuideIntentCache();
+    clearLlmsPropsCache();
+    globalThis.fetch = originalFetch;
+  });
+
+  it("detects Korean usage query with spaced component name", async () => {
+    const result = await detectComponentGuideIntent("alert dialog 어떻게 사용해?", { componentIds });
+
+    expect(result?.type).toBe("component-guide");
+    expect(result?.component.id).toBe("alert-dialog");
+  });
+
+  it("detects PascalCase component query", async () => {
+    const result = await detectComponentGuideIntent("AlertDialog 설치 방법 알려줘", { componentIds });
+
+    expect(result?.component.id).toBe("alert-dialog");
+  });
+
+  it("detects kebab-case component props query", async () => {
+    const result = await detectComponentGuideIntent("alert-dialog props 알려줘", { componentIds });
+
+    expect(result?.component.id).toBe("alert-dialog");
+  });
+
+  it("returns null when query is not a guide question", async () => {
+    const result = await detectComponentGuideIntent("최근 배포 이슈 요약해줘", { componentIds });
+
+    expect(result).toBeNull();
+  });
+
+  it("loads component ids from react/llms.txt using baseUrl", async () => {
+    globalThis.fetch = (async (input) => {
+      const url = typeof input === "string" ? input : input.url;
+      if (url === "https://seed-design.io/react/llms.txt") {
+        return new Response(SAMPLE_REACT_LLMS_INDEX, { status: 200 });
+      }
+
+      return new Response("not found", { status: 404 });
+    }) as typeof fetch;
+
+    const result = await detectComponentGuideIntent("box props는 어떤게 있어?", {
+      baseUrl: "https://seed-design.io",
+    });
+
+    expect(result?.type).toBe("component-guide");
+    expect(result?.component.id).toBe("box");
+  });
+});
+
+describe("extractLatestUserText", () => {
+  it("extracts latest user text from message parts", () => {
+    const messages = [
+      {
+        role: "user",
+        parts: [{ type: "text", text: "이전 질문" }],
+      },
+      {
+        role: "assistant",
+        parts: [{ type: "text", text: "이전 답변" }],
+      },
+      {
+        role: "user",
+        parts: [{ type: "text", text: "alert dialog 어떻게 사용해?" }],
+      },
+    ];
+
+    expect(extractLatestUserText(messages)).toBe("alert dialog 어떻게 사용해?");
+  });
+});