fix(docs): harden ai panel request and tool validation

Author: junghyeonsu

docs/app/api/chat/route.ts

@@ -3,6 +3,7 @@ import { 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,
@@ -14,8 +15,32 @@ const llmRouter = createOpenAI({
   name: "llm-router",
 });
 
+const chatRequestSchema = z.object({
+  messages: z
+    .array(
+      z
+        .object({
+          role: z.string().min(1),
+        })
+        .passthrough(),
+    )
+    .min(1),
+});
+
 export async function POST(req: Request) {
-  const { messages } = await req.json();
+  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 messages = parsed.data.messages as Parameters<typeof streamText>[0]["messages"];
 
   const mcpTools = await getMCPTools();
 

docs/components/ai-panel/ai-panel-provider.tsx

@@ -18,19 +18,27 @@ export function AIPanelProvider({ children }: { children: ReactNode }) {
   const [hydrated, setHydrated] = useState(false);
 
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored !== null) {
-      setIsOpen(stored === "true");
-    } else {
-      // 모바일에서는 기본 닫힘
+    try {
+      const stored = window.localStorage.getItem(STORAGE_KEY);
+      if (stored !== null) {
+        setIsOpen(stored === "true");
+      } else {
+        // 모바일에서는 기본 닫힘
+        setIsOpen(window.innerWidth >= 768);
+      }
+    } catch {
       setIsOpen(window.innerWidth >= 768);
+    } finally {
+      setHydrated(true);
     }
-    setHydrated(true);
   }, []);
 
   useEffect(() => {
-    if (hydrated) {
-      localStorage.setItem(STORAGE_KEY, String(isOpen));
+    if (!hydrated) return;
+    try {
+      window.localStorage.setItem(STORAGE_KEY, String(isOpen));
+    } catch {
+      // ignore storage write errors
     }
   }, [isOpen, hydrated]);
 

docs/components/ai-panel/ai-panel-toggle.tsx

@@ -11,6 +11,8 @@ export function AIPanelToggle() {
       type="button"
       onClick={toggle}
       className="seed-ai-panel-toggle inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-accent transition-colors"
+      aria-label={isOpen ? "AI 패널 닫기" : "AI 패널 열기"}
+      aria-pressed={isOpen}
       title={isOpen ? "AI 패널 닫기" : "AI 패널 열기"}
     >
       <IconSparkle2 width={16} height={16} />

docs/components/ai-panel/tool-result-renderer.tsx

@@ -23,6 +23,9 @@ export function ToolResultRenderer({ toolName, input, state }: ToolResultRendere
 
   switch (toolName) {
     case "showComponentExample":
+      if (typeof input.name !== "string") {
+        return <div className="my-1 text-xs text-fd-muted-foreground">잘못된 미리보기 입력입니다.</div>;
+      }
       return (
         <div className="my-2 rounded-lg border border-fd-border overflow-hidden">
           <div className="px-3 py-1.5 bg-fd-muted text-xs font-medium text-fd-muted-foreground border-b border-fd-border">
@@ -36,14 +39,17 @@ export function ToolResultRenderer({ toolName, input, state }: ToolResultRendere
             }
           >
             <div className="min-h-32 p-4">
-              <ComponentPreview name={input.name as string} />
+              <ComponentPreview name={input.name} />
             </div>
           </Suspense>
         </div>
       );
 
     case "showInstallation": {
-      const componentName = input.name as string;
+      if (typeof input.name !== "string") {
+        return <div className="my-1 text-xs text-fd-muted-foreground">잘못된 설치 입력입니다.</div>;
+      }
+      const componentName = input.name;
       return (
         <div className="my-2 rounded-lg border border-fd-border overflow-hidden">
           <div className="px-3 py-1.5 bg-fd-muted text-xs font-medium text-fd-muted-foreground border-b border-fd-border">
@@ -60,15 +66,15 @@ export function ToolResultRenderer({ toolName, input, state }: ToolResultRendere
     }
 
     case "showCodeBlock":
+      if (typeof input.code !== "string") {
+        return <div className="my-1 text-xs text-fd-muted-foreground">코드 블록 입력이 올바르지 않습니다.</div>;
+      }
       return (
         <div className="my-2">
           {typeof input.title === "string" && (
             <div className="text-xs font-medium text-fd-muted-foreground mb-1">{input.title}</div>
           )}
-          <DynamicCodeBlock
-            lang={(input.language as string) || "tsx"}
-            code={input.code as string}
-          />
+          <DynamicCodeBlock lang={typeof input.language === "string" ? input.language : "tsx"} code={input.code} />
         </div>
       );
 

docs/lib/ai/tools.ts

@@ -11,6 +11,12 @@ export const clientTools = {
     inputSchema: z.object({
       name: z
         .string()
+        .min(3, "Component example path is too short")
+        .max(120, "Component example path is too long")
+        .regex(
+          /^(react|lynx|breeze)\/[a-z0-9]+(?:-[a-z0-9]+)*\/preview$/,
+          "Expected '<platform>/<component>/preview' format",
+        )
         .describe(
           'Component example path, e.g., "react/action-button/preview", "react/checkbox/preview"',
         ),
@@ -22,6 +28,12 @@ export const clientTools = {
     inputSchema: z.object({
       name: z
         .string()
+        .min(1, "Component name is required")
+        .max(64, "Component name is too long")
+        .regex(
+          /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+          "Expected kebab-case component name (lowercase letters, numbers, hyphen)",
+        )
         .describe('Component name in kebab-case, e.g., "action-button", "checkbox", "tabs"'),
     }),
   }),