@keke1933/vibe-dictionary-mcp 0.11.0 → 0.12.0

package/README.md

@@ -21,7 +21,7 @@
 
 자연어 요청은 호출하는 AI가 해석한다. AI가 한 효과를 나타내는 짧은 한영 검색어를 생성 → MCP가 키워드로 후보 조회 → AI가 요약·사용 상황을 비교하고 필요하면 동의어·다른 언어·수식어를 줄인 표현으로 재검색 → 선택한 ID의 프롬프트를 조회한다. 예를 들어 “글을 고친 뒤 아직 저장하지 않았다는 표시”는 `저장 상태` 또는 `unsaved changes`로 검색한다. 필수 조건은 유지하고 불필요한 필터만 넓히며, 검색어나 필터를 바꾸면 `offset: 0`부터 조회한다. 순위가 높아도 요구에 맞지 않으면 선택하지 않는다.
 
-도메인은 `ui`(UI), `motion`(그래픽), `layout`(레이아웃), `style`(스타일), `pixelart`(픽셀아트), `video`(모션 영상)다. 카테고리·대상·입력 ID는 도구 스키마에서 확인한다. 모든 필터는 함께 만족해야 한다. `target: "button"`, `trigger: "pointer-move"`처럼 필수 조건만 지정한다. 제목에 scroll/drag/audio가 있어도 실제 데모는 클릭·타이머 시연일 수 있으므로 `triggers`와 원문을 확인한다.
+도메인은 `ui`(UI), `motion`(그래픽), `layout`(레이아웃), `style`(스타일), `pixelart`(픽셀아트), `video`(모션 영상), `ai`(AI 네이티브)다. 카테고리·대상·입력 ID는 도구 스키마에서 확인한다. 모든 필터는 함께 만족해야 한다. `target: "button"`, `trigger: "pointer-move"`처럼 필수 조건만 지정한다. 제목에 scroll/drag/audio가 있어도 실제 데모는 클릭·타이머 시연일 수 있으므로 `triggers`와 원문을 확인한다.
 
 검색어가 있으면 관련도순이며 `score`는 정렬용 수치로 적합성 확률이 아니다. `matchedOn`은 일치한 필드명(`title`, `alias`, `keyword`, `useCase`, `target`, `trigger`, `summary`, `prompt`)이다. `query`를 생략하면 카탈로그 순서로 목록을 조회한다. 일치가 없으면 빈 목록을 반환한다.
 

package/dist/index.js

@@ -7211,6 +7211,124 @@ var PIXELART_EXPANSION_ADDITIONS = [
   }
 ];
 
+// ../../packages/catalog/src/additions/ai.ts
+var AI_ADDITIONS = [
+  /* 1. 입력 제어 (ai_input) */
+  {
+    id: "ai-prompt-box",
+    domain: "ai",
+    category: "ai_input",
+    vibeTag: "\uC785\uB825 \uAE38\uC774\uC5D0 \uB9DE\uCDB0 \uC790\uC5F0\uC2A4\uB7FD\uAC8C \uB298\uC5B4\uB098\uB294",
+    vibeKeywords: ["\uD504\uB86C\uD504\uD2B8 \uC785\uB825\uCC3D", "\uC624\uD1A0\uB9AC\uC0AC\uC774\uC988 textarea", "\uBAA8\uB378 \uD1A0\uAE00", "\uD504\uB86C\uD504\uD2B8 \uC804\uC1A1", "\uC778\uD48B \uBC15\uC2A4"],
+    titleKo: "\uC790\uB3D9 \uD655\uC7A5 \uD504\uB86C\uD504\uD2B8 \uC785\uB825\uCC3D",
+    titleEn: "Auto-Expanding Prompt Box",
+    summary: "\uD14D\uC2A4\uD2B8 \uAE38\uC774\uC5D0 \uB530\uB77C \uB192\uC774\uAC00 \uBD80\uB4DC\uB7FD\uAC8C \uB298\uC5B4\uB098\uACE0 Fast/Pro \uBAA8\uB378 \uC804\uD658\uACFC \uCCA8\uBD80\xB7\uC804\uC1A1 \uC0C1\uD0DC\uB97C \uC81C\uC5B4",
+    promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uD14D\uC2A4\uD2B8 \uAE38\uC774\uC5D0 \uB530\uB77C \uB192\uC774\uAC00 \uB298\uC5B4\uB098\uB294 \uC778\uD130\uB799\uD2F0\uBE0C \uD504\uB86C\uD504\uD2B8 \uC785\uB825\uCC3D\uC744 \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px\uC758 \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 1px \uD14C\uB450\uB9AC(\uB77C\uC774\uD2B8 #e2e8f0, \uB2E4\uD06C #334155), 16px \uB465\uADFC \uBAA8\uC11C\uB9AC, \uBC30\uACBD(\uB77C\uC774\uD2B8 #ffffff, \uB2E4\uD06C #0f172a)\uC758 \uCE74\uB4DC \uD504\uB808\uC784\uC744 \uAD6C\uC131\uD574 \uC918. \uC0C1\uB2E8\uC5D0\uB294 textarea(\uCD5C\uC18C 48px, \uCD5C\uB300 120px \uB192\uC774, overflow-y auto, resize none, 14px \uAE00\uC790, \uD328\uB529 12px)\uB97C \uBC30\uCE58\uD558\uACE0, \uAE00\uC744 \uC785\uB825\uD558\uBA74 scrollHeight\uC5D0 \uB9DE\uCDB0 \uB192\uC774\uAC00 \uC2E4\uC2DC\uAC04 \uC870\uC808\uB418\uAC8C \uD574 \uC918. \uD558\uB2E8 \uD234\uBC14\uC5D0\uB294 \uC88C\uCE21\uC5D0 Fast\uC640 Pro \uBAA8\uB4DC\uB97C \uC804\uD658\uD558\uB294 2\uAC1C \uC138\uADF8\uBA3C\uD2B8 \uBC84\uD2BC(\uB192\uC774 28px, 11px \uAE00\uC790, 8px \uB465\uADFC \uBAA8\uC11C\uB9AC, \uD65C\uC131 \uC2DC #6366f1 \uBC30\uACBD \uBC0F \uD770\uC0C9 \uAE00\uC790)\uACFC \uD30C\uC77C \uCCA8\uBD80 \uBC84\uD2BC\uC744 \uB450\uACE0, \uC6B0\uCE21\uC5D0\uB294 \uD14D\uC2A4\uD2B8 \uC720\uBB34\uC5D0 \uB530\uB77C \uD65C\uC131\uD654\uB418\uB294 \uC804\uC1A1 \uBC84\uD2BC(32px \uC6D0\uD615, #6366f1 \uBC30\uACBD, \uD770\uC0C9 \uD654\uC0B4\uD45C \uC544\uC774\uCF58)\uC744 \uC81C\uACF5\uD574 \uC918. \uC5D4\uD130 \uD0A4\uB97C \uB204\uB974\uBA74 \uC804\uC1A1\uB418\uACE0 Shift+\uC5D4\uD130\uB294 \uC904\uBC14\uAFC8\uC744 \uC9C0\uC6D0\uD574 \uC918. \uC804\uC1A1 \uD6C4\uC5D0\uB294 \uD14D\uC2A4\uD2B8\uAC00 \uBE44\uC6CC\uC9C0\uACE0 \uB192\uC774\uAC00 48px\uB85C \uCD08\uAE30\uD654\uB418\uC5B4\uC57C \uD574. \uC678\uBD80 \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC5C6\uC774 \uC21C\uC218 React\uC640 Tailwind CSS\uB85C \uAD6C\uD604\uD574 \uC918."
+  },
+  {
+    id: "ai-slash-command",
+    domain: "ai",
+    category: "ai_input",
+    vibeTag: "\uC2AC\uB798\uC2DC \uC785\uB825\uC73C\uB85C \uC989\uC2DC \uBA85\uB839\uC5B4\uB97C \uD638\uCD9C\uD558\uB294",
+    vibeKeywords: ["\uC2AC\uB798\uC2DC \uCEE4\uB9E8\uB4DC", "\uD504\uB86C\uD504\uD2B8 \uBA85\uB839\uC5B4", "\uCEE4\uB9E8\uB4DC \uD31D\uC624\uBC84", "\uB2E8\uCD95 \uBA85\uB839", "\uD0A4\uBCF4\uB4DC \uD314\uB808\uD2B8"],
+    titleKo: "\uC2AC\uB798\uC2DC \uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8",
+    titleEn: "Slash Command Palette",
+    summary: "\uC785\uB825\uCC3D\uC5D0 \uC2AC\uB798\uC2DC\uB97C \uC785\uB825\uD558\uBA74 \uCD94\uCC9C \uBA85\uB839 \uD31D\uC624\uBC84\uAC00 \uC5F4\uB9AC\uACE0 \uBC29\uD5A5\uD0A4\uC640 \uC5D4\uD130\uB85C \uD14D\uC2A4\uD2B8\uB97C \uC790\uB3D9 \uC644\uC131",
+    promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uC2AC\uB798\uC2DC(/) \uBB38\uC790\uB85C \uD2B8\uB9AC\uAC70\uB418\uB294 \uBA85\uB839\uC5B4 \uD31D\uC624\uBC84 \uC778\uD130\uB799\uC158\uC744 \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108\uC5D0 \uB2E8\uC77C input \uB610\uB294 textarea\uB97C \uB450\uACE0, \uC0AC\uC6A9\uC790\uAC00 /\uB97C \uC785\uB825\uD558\uBA74 \uCEE4\uC11C \uC704\uCABD\uC73C\uB85C 220px \uB108\uBE44\uC758 \uD50C\uB85C\uD305 \uBA54\uB274\uAC00 150ms \uD398\uC774\uB4DC\uC778\uC73C\uB85C \uB098\uD0C0\uB098\uAC8C \uD574 \uC918. \uD31D\uC624\uBC84 \uBA54\uB274\uC5D0\uB294 \uC694\uC57D(/summarize), \uBC88\uC5ED(/translate), \uCF54\uB4DC \uC0DD\uC131(/code), \uB9AC\uD329\uD1A0\uB9C1(/refactor)\uC758 4\uAC1C \uCEE4\uB9E8\uB4DC \uD56D\uBAA9(\uB192\uC774 36px, \uD328\uB529 8px, 12px \uD3F0\uD2B8, \uC544\uC774\uCF58 \uD3EC\uD568)\uC744 \uB2F4\uC544 \uC918. \uD0A4\uBCF4\uB4DC \uC704/\uC544\uB798 \uBC29\uD5A5\uD0A4\uB85C \uD3EC\uCEE4\uC2A4 \uD56D\uBAA9\uC744 \uD0D0\uC0C9\uD560 \uC218 \uC788\uACE0, Enter \uD0A4\uB098 \uD074\uB9AD\uC73C\uB85C \uC120\uD0DD\uD558\uBA74 \uC785\uB825\uCC3D\uC758 /\uAC00 \uD574\uB2F9 \uBA85\uB839\uC5B4 \uD504\uB86C\uD504\uD2B8\uB85C \uCE58\uD658\uB418\uBA70 \uD31D\uC624\uBC84\uAC00 \uB2EB\uD788\uAC8C \uD574 \uC918. Escape \uD0A4\uB97C \uB204\uB974\uBA74 \uD31D\uC624\uBC84\uAC00 \uCDE8\uC18C\uB418\uACE0 \uD14C\uB9C8(\uB77C\uC774\uD2B8 #ffffff \uBC14\uD0D5/#e2e8f0 \uD14C\uB450\uB9AC, \uB2E4\uD06C #1e293b \uBC14\uD0D5/#475569 \uD14C\uB450\uB9AC)\uB97C \uC9C0\uC6D0\uD574 \uC918. \uC678\uBD80 \uC758\uC874\uC131 \uC5C6\uC774 React \uC0C1\uD0DC\uB85C \uAD6C\uD604\uD574 \uC918."
+  },
+  {
+    id: "ai-context-pill",
+    domain: "ai",
+    category: "ai_input",
+    vibeTag: "\uCCA8\uBD80\uB41C \uCEE8\uD14D\uC2A4\uD2B8\uC640 \uD1A0\uD070 \uC18C\uBAA8\uB7C9\uC744 \uD55C\uB208\uC5D0 \uBCF4\uC5EC\uC8FC\uB294",
+    vibeKeywords: ["\uCEE8\uD14D\uC2A4\uD2B8 \uAC8C\uC774\uC9C0", "\uD1A0\uD070 \uBC14", "\uBB38\uC11C \uD0DC\uADF8 \uCE69", "\uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0", "\uD1A0\uD070 \uC0AC\uC6A9\uB7C9"],
+    titleKo: "\uCEE8\uD14D\uC2A4\uD2B8 \uD1A0\uD070 \uAC8C\uC774\uC9C0",
+    titleEn: "Context Token Gauge",
+    summary: "\uCC38\uC870 \uBB38\uC11C \uCE69\uC744 \uD0DC\uADF8 \uD615\uD0DC\uB85C \uCD94\uAC00\xB7\uC0AD\uC81C\uD558\uBA70 \uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0\uC758 \uD1A0\uD070 \uD55C\uB3C4 \uB300\uBE44 \uC18C\uBAA8\uC728\uC744 \uAC8C\uC774\uC9C0\uB85C \uD45C\uC2DC",
+    promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uCCA8\uBD80 \uBB38\uC11C \uD0DC\uADF8 \uCE69\uACFC \uC2E4\uC2DC\uAC04 \uD1A0\uD070 \uAC8C\uC774\uC9C0\uB97C \uAC16\uCD98 \uCEE8\uD14D\uC2A4\uD2B8 \uAD00\uB9AC UI\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 12px \uBAA8\uC11C\uB9AC\uC640 1px \uD14C\uB450\uB9AC\uC758 \uCE74\uB4DC\uB97C \uAD6C\uC131\uD574 \uC918. \uC0C1\uB2E8\uC5D0\uB294 \uCCA8\uBD80\uB41C \uCEE8\uD14D\uC2A4\uD2B8 \uCE69(\uC608: API_Spec.pdf 1200\uD1A0\uD070, System_Prompt 400\uD1A0\uD070)\uB4E4\uC774 \uAC00\uB85C flex\uB85C \uB098\uC5F4\uB418\uBA70, \uAC01 \uCE69\uC740 24px \uB192\uC774, 11px \uAE00\uC790, X \uC0AD\uC81C \uBC84\uD2BC\uC744 \uAC16\uCDB0 \uD074\uB9AD \uC2DC \uC81C\uAC70\uB418\uAC8C \uD574 \uC918. [\uBB38\uC11C \uCD94\uAC00] \uBC84\uD2BC\uC744 \uD074\uB9AD\uD558\uBA74 \uC0C8\uB85C\uC6B4 \uC0D8\uD50C \uCE69(800\uD1A0\uD070)\uC774 \uCD94\uAC00\uB418\uC5B4\uC57C \uD574. \uD558\uB2E8\uC5D0\uB294 \uCD1D \uD55C\uB3C4 8000\uD1A0\uD070 \uC911 \uD604\uC7AC \uC0AC\uC6A9\uB41C \uD1A0\uD070 \uBE44\uC728\uC744 \uB098\uD0C0\uB0B4\uB294 8px \uB192\uC774\uC758 \uD504\uB85C\uADF8\uB808\uC2A4 \uBC14\uB97C \uB450\uACE0, 70% \uBBF8\uB9CC\uC740 #10b981 \uCD08\uB85D, 70% \uC774\uC0C1 90% \uBBF8\uB9CC\uC740 #f59e0b \uC8FC\uD669, 90% \uC774\uC0C1\uC740 #ef4444 \uBE68\uAC15\uC73C\uB85C \uAC8C\uC774\uC9C0 \uC0C9\uC0C1\uC774 \uBC14\uB00C\uAC8C \uD574 \uC918. \uCE69 \uCD94\uAC00\xB7\uC0AD\uC81C \uC2DC \uAC8C\uC774\uC9C0 \uB108\uBE44\uAC00 200ms \uD2B8\uB79C\uC9C0\uC158\uC73C\uB85C \uBD80\uB4DC\uB7FD\uAC8C \uBCC0\uD574\uC57C \uD574."
+  },
+  /* 2. 스트리밍 & 렌더링 (ai_streaming) */
+  {
+    id: "ai-streaming-text",
+    domain: "ai",
+    category: "ai_streaming",
+    vibeTag: "\uD55C \uAE00\uC790\uC529 \uC2E4\uC2DC\uAC04\uC73C\uB85C \uD0C0\uC774\uD551\uB418\uBA70 \uC0DD\uC131\uB418\uB294",
+    vibeKeywords: ["\uC2A4\uD2B8\uB9AC\uBC0D \uD14D\uC2A4\uD2B8", "\uD384\uC2A4 \uCEE4\uC11C", "\uD0C0\uC774\uD551 \uD6A8\uACFC", "\uC751\uB2F5 \uC911\uB2E8", "\uC2E4\uC2DC\uAC04 \uC0DD\uC131"],
+    titleKo: "\uD384\uC2A4 \uCEE4\uC11C \uC2A4\uD2B8\uB9AC\uBC0D \uD14D\uC2A4\uD2B8",
+    titleEn: "Pulsing Cursor Streaming Text",
+    summary: "\uC751\uB2F5 \uC0DD\uC131 \uC2DC \uAE5C\uBE61\uC774\uB294 \uD384\uC2A4 \uCE90\uB7FF\uACFC \uD568\uAED8 \uAE00\uC790\uAC00 \uD758\uB7EC\uB098\uC624\uBA70 \uC989\uC2DC \uC911\uB2E8\uD560 \uC218 \uC788\uB294 \uCEE8\uD2B8\uB864\uC744 \uC81C\uACF5",
+    promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uC2E4\uC2DC\uAC04 \uD14D\uC2A4\uD2B8 \uC2A4\uD2B8\uB9AC\uBC0D \uD0C0\uC774\uD551\uACFC \uAE5C\uBE61\uC774\uB294 \uD384\uC2A4 \uCE90\uB7FF \uD6A8\uACFC\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCE74\uB4DC \uC548\uC5D0\uC11C [\uC751\uB2F5 \uC0DD\uC131] \uBC84\uD2BC\uC744 \uB204\uB974\uBA74 \uBBF8\uB9AC \uC815\uC758\uB41C 150\uC790 \uBD84\uB7C9\uC758 AI \uB2F5\uBCC0\uC774 30ms \uAC04\uACA9\uC73C\uB85C \uD55C \uAE00\uC790\uC529 \uCD9C\uB825\uB418\uAC8C \uD574 \uC918. \uD14D\uC2A4\uD2B8 \uB9E8 \uB05D\uC5D0\uB294 2px \uB108\uBE44, 14px \uB192\uC774\uC758 #6366f1 \uC0C9\uC0C1 \uC218\uC9C1 \uBC14(\uC778\uB77C\uC778 \uCE90\uB7FF)\uAC00 0.8\uCD08 \uC8FC\uAE30\uB85C \uAE5C\uBE61\uC5EC\uC57C \uD574. \uC2A4\uD2B8\uB9AC\uBC0D \uC911\uC5D0\uB294 [\uC751\uB2F5 \uC0DD\uC131] \uBC84\uD2BC\uC774 [\uC751\uB2F5 \uC911\uC9C0] \uBC84\uD2BC(\uBE68\uAC04\uC0C9 \uD14C\uB450\uB9AC\uC640 12px \uD3F0\uD2B8)\uC73C\uB85C \uC804\uD658\uB418\uBA70, \uD074\uB9AD \uC2DC \uC989\uC2DC \uD0C0\uC774\uBA38\uAC00 \uBA48\uCD94\uACE0 \uCE90\uB7FF\uC774 \uC0AC\uB77C\uC838\uC57C \uD574. \uC644\uB8CC\uB418\uAC70\uB098 \uC911\uC9C0\uB41C \uD6C4\uC5D0\uB294 [\uB2E4\uC2DC \uC0DD\uC131] \uBC84\uD2BC\uC73C\uB85C \uCC98\uC74C\uBD80\uD130 \uC7AC\uC0DD\uD560 \uC218 \uC788\uAC8C \uD574 \uC918. \uB77C\uC774\uD2B8 \uBAA8\uB4DC(#1e293b \uAE00\uC790)\uC640 \uB2E4\uD06C \uBAA8\uB4DC(#f8fafc \uAE00\uC790) \uAC00\uB3C5\uC131\uC744 \uBCF4\uC7A5\uD558\uACE0 unmount \uC2DC \uD0C0\uC774\uBA38\uB97C \uC815\uB9AC\uD574 \uC918."
+  },
+  {
+    id: "ai-code-runner",
+    domain: "ai",
+    category: "ai_streaming",
+    vibeTag: "\uC2E0\uD0DD\uC2A4 \uD558\uC774\uB77C\uC774\uD305\uACFC \uACB0\uACFC \uBBF8\uB9AC\uBCF4\uAE30\uB97C \uC624\uAC00\uB294",
+    vibeKeywords: ["\uC778\uD130\uB799\uD2F0\uBE0C \uCF54\uB4DC \uBE14\uB85D", "\uCF54\uB4DC \uD558\uC774\uB77C\uC774\uD2B8", "\uACB0\uACFC \uBBF8\uB9AC\uBCF4\uAE30", "\uC6D0\uD074\uB9AD \uBCF5\uC0AC", "\uC2E4\uD589 \uD0ED"],
+    titleKo: "\uC778\uD130\uB799\uD2F0\uBE0C \uCF54\uB4DC \uBE14\uB85D",
+    titleEn: "Interactive Code Block",
+    summary: "\uC5B8\uC5B4 \uBC30\uC9C0\uC640 \uBCF5\uC0AC \uBC84\uD2BC\uC744 \uAC16\uCD98 \uCF54\uB4DC \uBE14\uB85D\uC5D0\uC11C \uD0ED \uC804\uD658\uC744 \uD1B5\uD574 \uB80C\uB354\uB9C1\uB41C \uCEF4\uD3EC\uB10C\uD2B8 \uACB0\uACFC\uB97C \uBC14\uB85C \uD655\uC778",
+    promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uCF54\uB4DC \uBDF0\uC640 \uBBF8\uB9AC\uBCF4\uAE30(Preview) \uBDF0\uB97C \uD0ED\uC73C\uB85C \uC804\uD658\uD560 \uC218 \uC788\uB294 \uC778\uD130\uB799\uD2F0\uBE0C \uCF54\uB4DC \uBE14\uB85D\uC744 \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px\uC758 \uC5B4\uB450\uC6B4 \uCE74\uB4DC(#0f172a \uBC30\uACBD, 12px \uBAA8\uC11C\uB9AC, 1px #334155 \uD14C\uB450\uB9AC)\uB97C \uAD6C\uC131\uD574 \uC918. \uC0C1\uB2E8 \uD5E4\uB354(36px \uB192\uC774, \uD328\uB529 12px)\uC5D0\uB294 \uC88C\uCE21\uC5D0 [Code]\uC640 [Preview] 2\uAC1C\uC758 \uD0ED \uBC84\uD2BC(12px \uD3F0\uD2B8, \uC120\uD0DD \uC2DC #6366f1 \uD558\uB2E8 2px \uC778\uB514\uCF00\uC774\uD130)\uACFC TypeScript \uC5B8\uC5B4 \uBC30\uC9C0\uB97C \uB450\uACE0, \uC6B0\uCE21\uC5D0\uB294 [\uBCF5\uC0AC] \uBC84\uD2BC\uC744 \uBC30\uCE58\uD574 \uC918. \uBCF5\uC0AC \uD074\uB9AD \uC2DC 1.5\uCD08\uAC04 [\uBCF5\uC0AC\uB428 \u2713]\uC73C\uB85C \uB77C\uBCA8\uC774 \uC804\uD658\uB418\uC5B4\uC57C \uD574. Code \uD0ED\uC5D0\uC11C\uB294 \uBB38\uBC95 \uD558\uC774\uB77C\uC774\uD2B8 \uC2A4\uD0C0\uC77C\uC774 \uC801\uC6A9\uB41C \uC18C\uC2A4 \uCF54\uB4DC\uB97C \uD45C\uC2DC\uD558\uACE0, Preview \uD0ED\uC73C\uB85C \uC804\uD658\uD558\uBA74 \uD574\uB2F9 \uCF54\uB4DC\uAC00 \uB80C\uB354\uB9C1\uD55C \uC2E4\uC81C \uCE74\uC6B4\uD130 \uBC84\uD2BC UI\uAC00 \uC778\uD130\uB799\uD2F0\uBE0C\uD558\uAC8C \uB3D9\uC791\uD574\uC57C \uD574. \uD0ED \uC804\uD658\uC740 150ms \uD398\uC774\uB4DC \uD6A8\uACFC\uB85C \uBD80\uB4DC\uB7FD\uAC8C \uC5F0\uACB0\uD574 \uC918."
+  },
+  {
+    id: "ai-message-branch",
+    domain: "ai",
+    category: "ai_streaming",
+    vibeTag: "\uB2E4\uC2DC \uC0DD\uC131\uD55C \uB2F5\uBCC0\uB4E4\uC744 \uC790\uC720\uB86D\uAC8C \uB118\uACA8\uBCF4\uB294",
+    vibeKeywords: ["\uBC84\uC804 \uBD84\uAE30", "\uC7AC\uC0DD\uC131 \uD788\uC2A4\uD1A0\uB9AC", "\uC751\uB2F5 \uC2A4\uC704\uCC98", "\uBE0C\uB79C\uCE58 \uB124\uBE44\uAC8C\uC774\uC158", "\uBC84\uC804 \uBE44\uAD50"],
+    titleKo: "\uC751\uB2F5 \uBC84\uC804 \uBD84\uAE30 \uC2A4\uC704\uCC98",
+    titleEn: "Response Branch Switcher",
+    summary: "\uB3D9\uC77C \uD504\uB86C\uD504\uD2B8\uC5D0\uC11C \uC7AC\uC0DD\uC131\uB41C \uC5EC\uB7EC \uB2F5\uBCC0 \uBC84\uC804\uC744 \uC774\uC804/\uB2E4\uC74C \uBC84\uD2BC\uC73C\uB85C \uD0D0\uC0C9\uD558\uBA70 \uBD84\uAE30 \uC774\uB825\uC744 \uAD00\uB9AC",
+    promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uC5EC\uB7EC \uBC88 \uC7AC\uC0DD\uC131\uB41C AI \uC751\uB2F5 \uBC84\uC804\uC744 \uB118\uACA8\uBCFC \uC218 \uC788\uB294 \uBD84\uAE30 \uC2A4\uC704\uCC98 UI\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 \uB9D0\uD48D\uC120 \uCE74\uB4DC(12px \uBAA8\uC11C\uB9AC, \uD328\uB529 16px, 1px \uD14C\uB450\uB9AC)\uB97C \uB450\uACE0, \uD558\uB2E8\uC5D0 < 1 / 3 > \uD615\uD0DC\uC758 \uBC84\uC804 \uB124\uBE44\uAC8C\uC774\uC158 \uCEE8\uD2B8\uB864(\uB192\uC774 28px, 11px \uAE00\uC790)\uC744 \uBC30\uCE58\uD574 \uC918. \uC88C\uC6B0 \uD654\uC0B4\uD45C \uBC84\uD2BC\uC744 \uD074\uB9AD\uD558\uBA74 \uBC84\uC804 \uC778\uB371\uC2A4\uAC00 \uBC14\uB00C\uBA74\uC11C \uC774\uC804/\uB2E4\uC74C \uC751\uB2F5 \uD14D\uC2A4\uD2B8(\uC608: \uBC84\uC804 1 \uAC04\uACB0\uD615, \uBC84\uC804 2 \uC0C1\uC138\uD615, \uBC84\uC804 3 \uD45C \uD615\uC2DD)\uB85C 200ms \uC2AC\uB77C\uC774\uB4DC \uC804\uD658\uB418\uC5B4\uC57C \uD574. \uC6B0\uCE21 \uC0C1\uB2E8\uC5D0\uB294 [\uC0C8 \uBC84\uC804 \uC0DD\uC131] \uBC84\uD2BC\uC744 \uB450\uC5B4 \uD074\uB9AD \uC2DC 4\uBC88\uC9F8 \uBC84\uC804\uC774 \uBC30\uC5F4\uC5D0 \uCD94\uAC00\uB418\uACE0 \uC989\uC2DC \uD574\uB2F9 \uBC84\uC804\uC73C\uB85C \uC774\uB3D9\uD558\uAC8C \uD574 \uC918. \uCCAB \uBC84\uC804\uC77C \uB54C\uB294 \uC774\uC804 \uBC84\uD2BC\uC774 \uBE44\uD65C\uC131\uD654\uB418\uACE0 \uB9C8\uC9C0\uB9C9 \uBC84\uC804\uC77C \uB54C\uB294 \uB2E4\uC74C \uBC84\uD2BC\uC774 \uBE44\uD65C\uC131\uD654\uB418\uC5B4\uC57C \uD574."
+  },
+  /* 3. 추론 & 사고과정 (ai_reasoning) */
+  {
+    id: "ai-thinking-accordion",
+    domain: "ai",
+    category: "ai_reasoning",
+    vibeTag: "AI\uC758 \uCD94\uB860 \uB2E8\uACC4\uB97C \uD22C\uBA85\uD558\uAC8C \uD3BC\uCCD0\uBCF4\uB294",
+    vibeKeywords: ["\uC0AC\uACE0 \uACFC\uC815 \uC544\uCF54\uB514\uC5B8", "\uCD94\uB860 \uD1A0\uAE00", "Thinking Log", "CoT \uB2E8\uACC4", "\uACBD\uACFC \uC2DC\uAC04"],
+    titleKo: "\uC0AC\uACE0 \uACFC\uC815 \uC544\uCF54\uB514\uC5B8",
+    titleEn: "Thinking Process Accordion",
+    summary: "\uACBD\uACFC \uC2DC\uAC04 \uBC30\uC9C0\uC640 \uD568\uAED8 AI\uC758 \uB0B4\uBD80 \uCD94\uB860(Chain-of-Thought) \uB85C\uADF8\uB97C \uC811\uACE0 \uD3BC\uCE58\uBA70 \uC810\uAC80",
+    promptSnippet: '\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 AI\uC758 \uCD94\uB860 \uACFC\uC815(Chain-of-Thought)\uC744 \uC811\uACE0 \uD3BC\uCE60 \uC218 \uC788\uB294 \uC544\uCF54\uB514\uC5B8 UI\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 12px \uBAA8\uC11C\uB9AC\uC640 1px \uD14C\uB450\uB9AC\uC758 \uCE74\uB4DC\uB97C \uAD6C\uC131\uD574 \uC918. \uC0C1\uB2E8 \uBC14(\uB192\uC774 40px, \uD328\uB529 12px)\uC5D0\uB294 \uC804\uAD6C \uC544\uC774\uCF58, "\uC0AC\uACE0 \uACFC\uC815 (4\uCD08 \uC18C\uC694)" \uD14D\uC2A4\uD2B8, \uD384\uC2A4 \uC560\uB2C8\uBA54\uC774\uC158 \uB3C4\uD2B8, \uC6B0\uCE21 \uD68C\uC804 \uD654\uC0B4\uD45C\uB97C \uBC30\uCE58\uD574 \uC918. \uC0C1\uB2E8 \uBC14\uB97C \uD074\uB9AD\uD558\uBA74 200ms \uD2B8\uB79C\uC9C0\uC158\uC73C\uB85C \uBCF8\uBB38 \uC601\uC5ED\uC774 \uD3BC\uCCD0\uC9C0\uAC70\uB098 \uB2EB\uD600\uC57C \uD574. \uD3BC\uCCD0\uC9C4 \uBCF8\uBB38(\uD328\uB529 12px, 12px \uD3F0\uD2B8, \uD750\uB9B0 \uD68C\uC0C9 \uD14D\uC2A4\uD2B8)\uC5D0\uB294 3\uB2E8\uACC4 \uC0AC\uACE0 \uD750\uB984("1. \uC9C8\uBB38 \uC758\uB3C4 \uBD84\uC11D \uC644\uB8CC", "2. \uAD00\uB828 \uBB38\uC11C 3\uAC74 \uC778\uB371\uC2F1", "3. \uCD5C\uC885 \uB2F5\uBCC0 \uC694\uC57D \uC791\uC131")\uC774 \uD0C0\uC784\uB77C\uC778 \uD615\uD0DC\uB85C \uCCB4\uD06C \uC544\uC774\uCF58\uACFC \uD568\uAED8 \uD45C\uC2DC\uB418\uC5B4\uC57C \uD574. \uB77C\uC774\uD2B8\uC640 \uB2E4\uD06C \uBAA8\uB4DC\uC5D0 \uB9DE\uCDB0 \uBC30\uACBD(#f8fafc vs #1e293b)\uACFC \uD14C\uB450\uB9AC\uAC00 \uC790\uC5F0\uC2A4\uB7FD\uAC8C \uC804\uD658\uB418\uB3C4\uB85D \uD574 \uC918.'
+  },
+  {
+    id: "ai-source-citation",
+    domain: "ai",
+    category: "ai_reasoning",
+    vibeTag: "\uB2F5\uBCC0 \uC18D \uC778\uC6A9 \uBC88\uD638\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB9AC\uBA74 \uADFC\uAC70\uB97C \uBCF4\uC5EC\uC8FC\uB294",
+    vibeKeywords: ["\uCD9C\uCC98 \uC778\uC6A9 \uCE69", "\uC778\uB77C\uC778 \uB808\uD37C\uB7F0\uC2A4", "\uCD9C\uCC98 \uBBF8\uB9AC\uBCF4\uAE30", "\uCC38\uACE0 \uBB38\uD5CC \uD31D\uC624\uBC84", "\uADFC\uAC70 \uCE74\uB4DC"],
+    titleKo: "\uC778\uB77C\uC778 \uCD9C\uCC98 \uC778\uC6A9 \uD31D\uC624\uBC84",
+    titleEn: "Inline Source Citation Popover",
+    summary: "\uD14D\uC2A4\uD2B8 \uC18D \uC778\uC6A9 \uBC30\uC9C0\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB9AC\uBA74 \uC6D0\uBB38 \uC0AC\uC774\uD2B8\uC758 \uD30C\uBE44\uCF58, \uC81C\uBAA9, \uBC1C\uCDCC \uC2A4\uB2C8\uD3AB \uCE74\uB4DC\uB97C \uD31D\uC624\uBC84\uB85C \uB178\uCD9C",
+    promptSnippet: '\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uD14D\uC2A4\uD2B8 \uC778\uB77C\uC778 \uCD9C\uCC98 \uBC88\uD638 \uBC43\uC9C0\uC640 \uD638\uBC84 \uD31D\uC624\uBC84 \uCE74\uB4DC\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 AI \uB2F5\uBCC0 \uBB38\uC7A5\uC744 \uD45C\uC2DC\uD558\uACE0, \uBB38\uC7A5 \uB05D\uC5D0 [1], [2] \uD615\uD0DC\uC758 \uC791\uC740 \uC778\uC6A9 \uCE69(\uB192\uC774 18px, \uD328\uB529 \uC88C\uC6B0 6px, 11px \uAE00\uC790, \uB465\uADFC \uBAA8\uC11C\uB9AC 9999px, #6366f1 \uD14D\uC2A4\uD2B8)\uC744 \uBC30\uCE58\uD574 \uC918. \uC778\uC6A9 \uCE69\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB9AC\uAC70\uB098 \uD3EC\uCEE4\uC2A4\uD558\uBA74 \uCE69 \uC0C1\uB2E8\uC73C\uB85C 240px \uB108\uBE44\uC758 \uCD9C\uCC98 \uBBF8\uB9AC\uBCF4\uAE30 \uCE74\uB4DC(12px \uBAA8\uC11C\uB9AC, \uD328\uB529 10px, 1px \uD14C\uB450\uB9AC, \uADF8\uB9BC\uC790)\uAC00 150ms \uD398\uC774\uB4DC\uC778\uC73C\uB85C \uB098\uD0C0\uB098\uAC8C \uD574 \uC918. \uD31D\uC624\uBC84 \uCE74\uB4DC \uB0B4\uBD80\uC5D0\uB294 \uBB38\uC11C \uC544\uC774\uCF58, \uCD9C\uCC98 \uC6F9\uD398\uC774\uC9C0 \uC81C\uBAA9("React 19 \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uAC00\uC774\uB4DC"), \uB3C4\uBA54\uC778 URL("react.dev"), \uD575\uC2EC \uBC1C\uCDCC\uBB38 2\uC904\uC774 \uD3EC\uD568\uB418\uC5B4\uC57C \uD574. \uB9C8\uC6B0\uC2A4\uAC00 \uBC97\uC5B4\uB098\uBA74 \uD31D\uC624\uBC84\uAC00 \uBD80\uB4DC\uB7FD\uAC8C \uC0AC\uB77C\uC9C0\uB3C4\uB85D \uD574 \uC918.'
+  },
+  /* 4. 에이전트 & 도구 (ai_agent) */
+  {
+    id: "ai-tool-call-card",
+    domain: "ai",
+    category: "ai_agent",
+    vibeTag: "\uB3C4\uAD6C \uD638\uCD9C \uC778\uC790\uC640 \uC2E4\uD589 \uACB0\uACFC\uB97C \uC2DC\uAC01\uD654\uD558\uB294",
+    vibeKeywords: ["\uB3C4\uAD6C \uC2E4\uD589 \uCE74\uB4DC", "Tool Call", "\uD568\uC218 \uD638\uCD9C", "\uC2E4\uD589 \uC0C1\uD0DC \uBC30\uC9C0", "\uD30C\uB77C\uBBF8\uD130 \uC811\uAE30"],
+    titleKo: "\uC5D0\uC774\uC804\uD2B8 \uB3C4\uAD6C \uC2E4\uD589 \uCE74\uB4DC",
+    titleEn: "Agent Tool Execution Card",
+    summary: "\uAC80\uC0C9\xB7\uACC4\uC0B0 \uB4F1 \uC5D0\uC774\uC804\uD2B8\uAC00 \uD638\uCD9C\uD55C \uB3C4\uAD6C \uC774\uB984, \uC804\uB2EC \uC778\uC790, \uC2E4\uD589 \uC9C4\uD589 \uC2A4\uD53C\uB108 \uBC0F \uACB0\uACFC\uB97C \uB2E8\uACC4\uBCC4 \uCE74\uB4DC\uB85C \uD45C\uC2DC",
+    promptSnippet: '\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 AI \uC5D0\uC774\uC804\uD2B8\uC758 \uB3C4\uAD6C \uC2E4\uD589(Tool Call) \uC0C1\uD0DC\uC640 \uC785\uCD9C\uB825\uC744 \uBCF4\uC5EC\uC8FC\uB294 \uCE74\uB4DC\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 12px \uBAA8\uC11C\uB9AC\uC640 1px \uD14C\uB450\uB9AC\uC758 \uBC15\uC2A4\uB97C \uAD6C\uC131\uD574 \uC918. \uCE74\uB4DC \uD5E4\uB354\uC5D0\uB294 \uB80C\uCE58 \uC544\uC774\uCF58, \uB3C4\uAD6C \uC774\uB984("search_docs"), \uC2E4\uD589 \uC0C1\uD0DC \uBC30\uC9C0(\uC2E4\uD589 \uC911\uC5D0\uB294 \uD30C\uB780 \uC2A4\uD53C\uB108\uC640 "\uC2E4\uD589 \uC911...", \uC644\uB8CC \uC2DC \uCD08\uB85D \uCCB4\uD06C\uC640 "\uC131\uACF5 (120ms)")\uB97C \uD45C\uC2DC\uD574 \uC918. [\uB3C4\uAD6C \uC7AC\uC2E4\uD589] \uBC84\uD2BC\uC744 \uB204\uB974\uBA74 1.2\uCD08\uAC04 \uC2E4\uD589 \uC911 \uC0C1\uD0DC\uB85C \uC804\uD658\uB41C \uD6C4 \uC644\uB8CC \uC0C1\uD0DC\uB85C \uBCF5\uADC0\uD574\uC57C \uD574. \uBCF8\uBB38\uC5D0\uB294 \uC804\uB2EC\uB41C \uC778\uC790 JSON(query: "vibe coding")\uACFC \uBC18\uD658\uB41C \uACB0\uACFC \uC694\uC57D\uC774 \uC544\uCF54\uB514\uC5B8 \uD615\uD0DC\uB85C \uD3EC\uD568\uB418\uC5B4 \uD074\uB9AD \uC2DC \uC811\uAC70\uB098 \uD3BC\uCE60 \uC218 \uC788\uAC8C \uD574 \uC918. \uBAA8\uB178\uC2A4\uD398\uC774\uC2A4 \uAE00\uAF34\uACFC \uB77C\uC774\uD2B8/\uB2E4\uD06C \uD14C\uB9C8 \uBC30\uACBD\uC744 \uC9C0\uC6D0\uD574 \uC918.'
+  },
+  {
+    id: "ai-human-in-the-loop",
+    domain: "ai",
+    category: "ai_agent",
+    vibeTag: "\uC704\uD5D8\uD55C \uC791\uC5C5\uC744 \uC2E4\uD589\uD558\uAE30 \uC804 \uC0AC\uB78C\uC758 \uD655\uC778\uC744 \uAD6C\uD558\uB294",
+    vibeKeywords: ["\uC2B9\uC778 \uAC00\uB4DC\uB808\uC77C", "Human-in-the-loop", "\uC791\uC5C5 \uC2B9\uC778 \uBAA8\uB2EC", "\uC704\uD5D8 \uBA85\uB839 \uCC28\uB2E8", "\uC2E4\uD589 \uD5C8\uC6A9"],
+    titleKo: "\uC5D0\uC774\uC804\uD2B8 \uC2B9\uC778 \uAC00\uB4DC\uB808\uC77C",
+    titleEn: "Agent Approval Guardrail",
+    summary: "\uC911\uC694\uD55C \uD30C\uC77C \uC218\uC815\uC774\uB098 \uC678\uBD80 \uC804\uC1A1 \uC804 \uC704\uD5D8\uB3C4 \uBC30\uC9C0\uC640 \uC601\uD5A5\uB3C4\uB97C \uC548\uB0B4\uD558\uACE0 \uC0AC\uC6A9\uC790\uC758 \uBA85\uC2DC\uC801 \uC2B9\uC778\xB7\uAC70\uC808\uC744 \uC218\uC2E0",
+    promptSnippet: '\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uC5D0\uC774\uC804\uD2B8\uC758 \uC7A0\uC7AC\uC801 \uC704\uD5D8 \uC791\uC5C5\uC5D0 \uB300\uD55C Human-in-the-loop \uC2B9\uC778 \uCE74\uB4DC \uC778\uD130\uB799\uC158\uC744 \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 \uC8FC\uD669\uC0C9 \uACBD\uACE0 \uD14C\uB450\uB9AC(1px #f59e0b)\uC640 12px \uBAA8\uC11C\uB9AC\uC758 \uCE74\uB4DC\uB97C \uBC30\uCE58\uD574 \uC918. \uC0C1\uB2E8\uC5D0\uB294 \uACBD\uACE0 \uC0BC\uAC01\uD615 \uC544\uC774\uCF58, "\uD30C\uC77C \uC0AD\uC81C \uC2B9\uC778 \uC694\uCCAD", \uC704\uD5D8\uB3C4 [High] \uBE68\uAC04 \uBC30\uC9C0\uB97C \uB450\uACE0, \uC911\uC559\uC5D0\uB294 \uC2E4\uD589 \uC608\uC815 \uBA85\uB839("rm -rf ./temp_cache")\uACFC \uC601\uD5A5\uBC1B\uB294 \uD30C\uC77C 3\uAC74\uC758 \uBAA9\uB85D\uC744 \uC548\uB0B4\uD574 \uC918. \uD558\uB2E8\uC5D0\uB294 [\uAC70\uC808\uD558\uAE30] \uBC84\uD2BC(\uD68C\uC0C9 \uBCF4\uB354, 32px \uB192\uC774)\uACFC [\uC2B9\uC778\uD558\uC5EC \uC2E4\uD589] \uBC84\uD2BC(\uC8FC\uD669/\uBE68\uAC15 \uBC30\uACBD, \uD770\uC0C9 \uD14D\uC2A4\uD2B8, 32px \uB192\uC774)\uC744 \uC81C\uACF5\uD574 \uC918. \uC2B9\uC778 \uD074\uB9AD \uC2DC \uCD08\uB85D\uC0C9 "\uC2B9\uC778 \uC644\uB8CC\uB428" \uC0C1\uD0DC\uB85C \uCE74\uB4DC \uB0B4\uC6A9\uC774 \uC804\uD658\uB418\uACE0, \uAC70\uC808 \uD074\uB9AD \uC2DC \uD68C\uC0C9 "\uC791\uC5C5\uC774 \uCDE8\uC18C\uB418\uC5C8\uC2B5\uB2C8\uB2E4"\uB85C \uBCC0\uACBD\uB418\uBA70 \uBCF5\uC6D0 \uBC84\uD2BC\uC744 \uC81C\uACF5\uD574 \uC918.'
+  }
+];
+
 // ../../packages/catalog/src/techniques.ts
 var UI_CATEGORIES = [
   { id: "all", label: "\uC804\uCCB4" },
@@ -7260,13 +7378,21 @@ var VIDEO_CATEGORIES = [
   { id: "infographic", label: "\uB370\uC774\uD130\xB7\uCC28\uD2B8 \uBAA8\uC158" },
   { id: "broadcast", label: "\uBC29\uC1A1\xB7\uD2B8\uB79C\uC9C0\uC158\xB7\uC790\uB9C9" }
 ];
+var AI_CATEGORIES = [
+  { id: "all", label: "\uC804\uCCB4" },
+  { id: "ai_input", label: "\uC785\uB825\xB7\uD504\uB86C\uD504\uD2B8" },
+  { id: "ai_streaming", label: "\uC2A4\uD2B8\uB9AC\uBC0D\xB7\uB80C\uB354\uB9C1" },
+  { id: "ai_reasoning", label: "\uCD94\uB860\xB7\uC0AC\uACE0\uACFC\uC815" },
+  { id: "ai_agent", label: "\uC5D0\uC774\uC804\uD2B8\xB7\uB3C4\uAD6C" }
+];
 var DOMAIN_LABELS = {
   ui: "UI",
   motion: "\uADF8\uB798\uD53D",
   layout: "\uB808\uC774\uC544\uC6C3",
   style: "\uC2A4\uD0C0\uC77C",
   pixelart: "\uD53D\uC140\uC544\uD2B8",
-  video: "\uBAA8\uC158 \uC601\uC0C1"
+  video: "\uBAA8\uC158 \uC601\uC0C1",
+  ai: "AI \uB124\uC774\uD2F0\uBE0C"
 };
 var DOMAIN_CATEGORIES = {
   ui: UI_CATEGORIES,
@@ -7274,7 +7400,8 @@ var DOMAIN_CATEGORIES = {
   layout: LAYOUT_CATEGORIES,
   style: STYLE_CATEGORIES,
   pixelart: PIXELART_CATEGORIES,
-  video: VIDEO_CATEGORIES
+  video: VIDEO_CATEGORIES,
+  ai: AI_CATEGORIES
 };
 var CATEGORY_LABEL_MAP = Object.fromEntries(
   [
@@ -7283,10 +7410,12 @@ var CATEGORY_LABEL_MAP = Object.fromEntries(
     ...LAYOUT_CATEGORIES,
     ...STYLE_CATEGORIES,
     ...PIXELART_CATEGORIES,
-    ...VIDEO_CATEGORIES
+    ...VIDEO_CATEGORIES,
+    ...AI_CATEGORIES
   ].map((c) => [c.id, c.label])
 );
 var TECHNIQUES = [
+  ...AI_ADDITIONS,
   ...STARTER_PACK_ADDITIONS,
   ...SIGNATURE_ADDITIONS,
   ...UI_COLLECTION_ADDITIONS,
@@ -7329,7 +7458,7 @@ var TECHNIQUES = [
 ];
 
 // ../../packages/catalog/src/translations/classification.en.ts
-var DOMAIN_LABELS_EN = { ui: "UI", motion: "Graphics", layout: "Layout", style: "Style", pixelart: "Pixel Art", video: "Motion video" };
+var DOMAIN_LABELS_EN = { ui: "UI", motion: "Graphics", layout: "Layout", style: "Style", pixelart: "Pixel Art", video: "Motion video", ai: "AI Native" };
 
 // ../../packages/catalog/src/translations/additions/base.ts
 var text = (summary, vibeTag, keywords, promptSnippet) => ({ summary, vibeTag, vibeKeywords: keywords.split("|"), promptSnippet });
@@ -11761,6 +11890,70 @@ var EN_VFX_TECHNIQUES = {
   }
 };
 
+// ../../packages/catalog/src/translations/additions/ai.ts
+var EN_AI_TECHNIQUES = {
+  "ai-prompt-box": {
+    vibeTag: "Expands smoothly to fit your input length",
+    vibeKeywords: ["prompt box", "autoresize textarea", "model toggle", "prompt submit", "input card"],
+    summary: "Textarea expands smoothly with text length while managing Fast/Pro model switching, file attach, and submission states.",
+    promptSnippet: "Build an interactive prompt input box that expands with text length in the specified area. Inside a container of width 100% and min-height 180px, create a card frame with 1px border (light #e2e8f0, dark #334155), 16px rounded corners, and background (light #ffffff, dark #0f172a). Place a textarea at the top (min-height 48px, max-height 120px, overflow-y auto, resize none, font size 14px, padding 12px) that dynamically adjusts its height based on scrollHeight as the user types. In the bottom toolbar, provide a 2-segment button group on the left to toggle between Fast and Pro modes (height 28px, font size 11px, 8px rounded corners, active state with #6366f1 background and white text) along with an attachment button. On the right, include a circular submit button (diameter 32px, #6366f1 background, white arrow icon) that activates when text is present. Pressing Enter submits the prompt while Shift+Enter inserts a new line. Submitting clears the input and resets height to 48px. Implement with pure React and Tailwind CSS without external libraries."
+  },
+  "ai-slash-command": {
+    vibeTag: "Invokes quick commands on typing a slash",
+    vibeKeywords: ["slash command", "prompt commands", "command popover", "shortcut menu", "keyboard palette"],
+    summary: "Typing a slash opens a floating command palette with keyboard navigation and instant autocomplete.",
+    promptSnippet: "Create a slash command popover interaction triggered by the slash (/) character in the specified area. In a container of width 100% and min-height 180px, provide a single input or textarea. When the user types /, display a 220px wide floating menu above the input with a 150ms fade-in transition. The popover menu displays 4 command options: Summarize (/summarize), Translate (/translate), Generate Code (/code), and Refactor (/refactor), each with height 36px, padding 8px, font size 12px, and an icon. Allow users to navigate the focused item using Up/Down arrow keys, and select an option via Enter key or click to replace / with the command prompt and dismiss the popover. Pressing Escape cancels the popover. Support light (#ffffff background / #e2e8f0 border) and dark (#1e293b background / #475569 border) themes using pure React state without external dependencies."
+  },
+  "ai-context-pill": {
+    vibeTag: "Visualizes attached context and token consumption at a glance",
+    vibeKeywords: ["context gauge", "token bar", "document tag pills", "context window", "token usage"],
+    summary: "Manage referenced document tags and track context window token capacity with a color-coded progress gauge.",
+    promptSnippet: "Create a context management UI featuring attached document tag pills and a real-time token gauge in the specified area. Inside a container of width 100% and min-height 180px, build a card with 12px rounded corners and 1px border. At the top, list attached context chips (e.g., API_Spec.pdf at 1200 tokens, System_Prompt at 400 tokens) in a horizontal flex layout, where each chip has height 24px, font size 11px, and an X button to remove on click. Clicking an [Add Document] button appends a new sample chip (800 tokens). At the bottom, display an 8px tall progress bar showing token consumption relative to the total limit of 8000 tokens. The gauge color changes dynamically: #10b981 green below 70%, #f59e0b amber between 70% and 90%, and #ef4444 red at or above 90%. Adjust gauge width smoothly with a 200ms transition upon adding or removing chips."
+  },
+  "ai-streaming-text": {
+    vibeTag: "Generates text character-by-character in real time",
+    vibeKeywords: ["streaming text", "pulsing cursor", "typing effect", "stop response", "realtime generation"],
+    summary: "Simulate live response streaming with a blinking pulse caret and an immediate stop button.",
+    promptSnippet: "Create a real-time text streaming typing effect with a blinking pulse caret in the specified area. Inside a card of width 100% and min-height 180px, clicking [Generate Response] streams a predefined 150 character AI answer character-by-character at 30ms intervals. At the trailing edge of the text, render an inline caret consisting of a 2px wide, 14px tall vertical bar colored #6366f1 that pulses every 0.8 seconds. While streaming, the button switches to [Stop Generating] with a red border and font size 12px, which immediately clears the timer and hides the caret upon click. Once complete or stopped, allow the user to replay from the start via [Regenerate]. Ensure contrast in light (#1e293b text) and dark (#f8fafc text) modes, and clean up the timer on unmount."
+  },
+  "ai-code-runner": {
+    vibeTag: "Toggles seamlessly between syntax highlighting and live preview",
+    vibeKeywords: ["interactive code block", "code highlight", "result preview", "one-click copy", "execution tab"],
+    summary: "Tabbed code container with language badge, copy confirmation, and interactive component preview.",
+    promptSnippet: "Build an interactive code block that toggles between code view and live preview in the specified area. Inside a dark card of width 100% and min-height 180px (#0f172a background, 12px corners, 1px #334155 border), construct a top header (height 36px, padding 12px). The header features [Code] and [Preview] tab buttons on the left (font size 12px, active tab with a #6366f1 bottom 2px indicator) and a TypeScript badge, with a [Copy] button on the right. Clicking copy temporarily displays [Copied \u2713] for 1.5 seconds. The Code tab renders syntax-highlighted source code, while switching to Preview displays the live interactive counter button rendered by that code. Smoothly transition between tabs using a 150ms fade effect."
+  },
+  "ai-message-branch": {
+    vibeTag: "Navigate freely across regenerated response branches",
+    vibeKeywords: ["branch switcher", "regenerate history", "response switcher", "branch navigation", "version comparison"],
+    summary: "Explore multiple regenerated AI response variations using previous and next pagination buttons.",
+    promptSnippet: "Create a response branch switcher UI allowing users to flip through multiple regenerated AI response versions in the specified area. Inside a container of width 100% and min-height 180px, place a message card (12px corners, padding 16px, 1px border) with a version navigation control formatted as < 1 / 3 > at the bottom (height 28px, font size 11px). Clicking the left or right arrow updates the version index and transitions between response texts (e.g., version 1 concise, version 2 detailed, version 3 tabular) with a 200ms slide animation. Provide a [Generate New Version] button in the top right that appends a 4th version to the array and jumps to it immediately. Disable the previous button on the first version and the next button on the last version."
+  },
+  "ai-thinking-accordion": {
+    vibeTag: "Transparently unfolds the step-by-step AI reasoning",
+    vibeKeywords: ["thinking accordion", "reasoning toggle", "thinking log", "chain of thought", "elapsed time"],
+    summary: "Inspect the AI internal Chain-of-Thought log with an elapsed time badge and collapsible accordion.",
+    promptSnippet: 'Create an accordion UI to inspect the AI Chain-of-Thought reasoning steps in the specified area. Inside a container of width 100% and min-height 180px, build a card with 12px rounded corners and 1px border. The top bar (height 40px, padding 12px) contains a lightbulb icon, "Thinking Process (4s elapsed)" label, a pulsing dot animation, and a rotating arrow on the right. Clicking the bar toggles the body open or closed with a 200ms transition. The expanded body (padding 12px, font size 12px, muted text) reveals a 3-step reasoning timeline ("1. Query intent analyzed", "2. 3 relevant docs indexed", "3. Final answer synthesized") with checkmark icons. Ensure natural background (#f8fafc vs #1e293b) and border adaptation across light and dark modes.'
+  },
+  "ai-source-citation": {
+    vibeTag: "Reveals verifiable source cards upon hovering reference chips",
+    vibeKeywords: ["source citation chips", "inline reference", "source preview", "citation popover", "evidence card"],
+    summary: "Hovering inline citation badges displays a popover card with site favicon, title, and key excerpt.",
+    promptSnippet: 'Create an inline citation badge and hover preview card interaction in the specified area. Inside a container of width 100% and min-height 180px, render an AI answer sentence ending with small citation chips like [1] and [2] (height 18px, horizontal padding 6px, font size 11px, border-radius 9999px, #6366f1 text). Hovering or focusing a citation chip triggers a 240px wide preview popover card (12px corners, padding 10px, 1px border, shadow) above the chip with a 150ms fade-in transition. The popover card includes a document icon, web page title ("React 19 Migration Guide"), domain URL ("react.dev"), and a 2-line snippet excerpt. The popover gracefully disappears when the cursor leaves.'
+  },
+  "ai-tool-call-card": {
+    vibeTag: "Visualizes tool invocation arguments and execution output",
+    vibeKeywords: ["tool execution card", "tool call", "function calling", "execution status badge", "parameter fold"],
+    summary: "Displays tool invocation name, parameters, execution spinner, and returned output in an expandable card.",
+    promptSnippet: 'Build a tool execution card displaying agent tool invocation status and parameters in the specified area. Inside a container of width 100% and min-height 180px, construct a box with 12px corners and 1px border. The card header shows a wrench icon, tool name ("search_docs"), and a status badge (blue spinner with "Running..." during execution, green check with "Success (120ms)" on completion). Clicking a [Re-run Tool] button sets the status to running for 1.2 seconds before returning to completed. The body features a collapsible accordion containing input arguments JSON (query: "vibe coding") and returned output summary. Support monospace typography and light/dark theme backgrounds.'
+  },
+  "ai-human-in-the-loop": {
+    vibeTag: "Requests human confirmation before executing critical operations",
+    vibeKeywords: ["approval guardrail", "human in the loop", "action approval modal", "safety confirmation", "execution consent"],
+    summary: "Prompts users with risk severity badges and impact summaries for explicit approval or rejection before critical actions.",
+    promptSnippet: 'Create a Human-in-the-loop approval card interaction for critical agent operations in the specified area. Inside a container of width 100% and min-height 180px, position a card with an amber warning border (1px #f59e0b) and 12px rounded corners. The top section displays a warning triangle icon, "File Deletion Approval Required" title, and a red [High] risk badge. The center outlines the command to execute ("rm -rf ./temp_cache") and lists 3 affected files. The bottom bar provides a [Reject] button (gray border, height 32px) and an [Approve & Execute] button (amber/red background, white text, height 32px). Clicking approve transitions the card into a green "Operation Approved" state, while clicking reject updates it to a gray "Operation Cancelled" state with an option to restore.'
+  }
+};
+
 // ../../packages/catalog/src/translations/additions/patterns.ts
 var EN_PATTERN_TECHNIQUES = {
   "zoom-lightbox-gallery": {
@@ -11797,6 +11990,7 @@ var EN_PATTERN_TECHNIQUES = {
 
 // ../../packages/catalog/src/translations/en.ts
 var ENGLISH_TECHNIQUES = {
+  ...EN_AI_TECHNIQUES,
   ...EN_STARTER_PACK_TECHNIQUES,
   ...EN_SIGNATURE_TECHNIQUES,
   ...EN_UI_COLLECTION,
@@ -19715,10 +19909,135 @@ var VFX_SEARCH_METADATA = {
   }
 };
 
+// ../../packages/catalog/src/search-metadata/additions/ai.ts
+var AI_SEARCH_METADATA = {
+  "ai-prompt-box": {
+    targets: ["input", "button", "card"],
+    triggers: ["input", "click"],
+    useCases: {
+      ko: ["\uD14D\uC2A4\uD2B8 \uAE38\uC774\uC5D0 \uB530\uB77C \uD655\uC7A5\uB418\uB294 \uD504\uB86C\uD504\uD2B8 \uC785\uB825\uCC3D\uACFC \uBAA8\uB378 \uC804\uD658"],
+      en: ["Auto-expanding prompt textarea with model toggle and submission"]
+    },
+    aliases: {
+      ko: ["\uC624\uD1A0\uB9AC\uC0AC\uC774\uC988 \uC785\uB825\uCC3D", "\uD504\uB86C\uD504\uD2B8 \uC778\uD48B", "\uCC57\uBD07 \uC785\uB825\uCC3D"],
+      en: ["autoresize prompt input", "chat prompt box"]
+    }
+  },
+  "ai-slash-command": {
+    targets: ["input", "panel", "list"],
+    triggers: ["input", "click"],
+    useCases: {
+      ko: ["\uC2AC\uB798\uC2DC(/) \uBB38\uC790\uB85C \uBA85\uB839\uC5B4 \uBA54\uB274\uB97C \uC5F4\uACE0 \uBC29\uD5A5\uD0A4\uC640 \uC5D4\uD130\uB85C \uC790\uB3D9 \uC644\uC131"],
+      en: ["Trigger slash command popover menu with keyboard navigation and autocomplete"]
+    },
+    aliases: {
+      ko: ["\uC2AC\uB798\uC2DC \uBA54\uB274", "\uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8", "\uD504\uB86C\uD504\uD2B8 \uB2E8\uCD95\uD0A4"],
+      en: ["slash command palette", "command popover"]
+    }
+  },
+  "ai-context-pill": {
+    targets: ["card", "panel", "chart"],
+    triggers: ["click"],
+    useCases: {
+      ko: ["\uCC38\uC870 \uBB38\uC11C \uD0DC\uADF8 \uCE69\uC744 \uCD94\uAC00/\uC81C\uAC70\uD558\uACE0 \uD1A0\uD070 \uC18C\uBAA8\uC728 \uAC8C\uC774\uC9C0\uB97C \uD655\uC778"],
+      en: ["Manage context document chips and visualize token window utilization"]
+    },
+    aliases: {
+      ko: ["\uD1A0\uD070 \uC0AC\uC6A9\uB7C9 \uAC8C\uC774\uC9C0", "\uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0 \uBC14", "\uBB38\uC11C \uD0DC\uADF8 \uCE69"],
+      en: ["token usage gauge", "context window bar"]
+    }
+  },
+  "ai-streaming-text": {
+    targets: ["text", "button", "card"],
+    triggers: ["click", "auto"],
+    useCases: {
+      ko: ["\uAE5C\uBE61\uC774\uB294 \uD384\uC2A4 \uCE90\uB7FF\uACFC \uD568\uAED8 \uC2E4\uC2DC\uAC04 \uD0C0\uC774\uD551 \uC2A4\uD2B8\uB9AC\uBC0D \uBC0F \uC911\uB2E8 \uC81C\uC5B4"],
+      en: ["Stream text character-by-character with pulsing caret and stop control"]
+    },
+    aliases: {
+      ko: ["\uC2E4\uC2DC\uAC04 \uD0C0\uC774\uD551 \uD6A8\uACFC", "\uC2A4\uD2B8\uB9AC\uBC0D \uD14D\uC2A4\uD2B8", "\uC751\uB2F5 \uC911\uC9C0 \uBC84\uD2BC"],
+      en: ["realtime typing stream", "streaming response"]
+    }
+  },
+  "ai-code-runner": {
+    targets: ["panel", "button", "card"],
+    triggers: ["click"],
+    useCases: {
+      ko: ["\uCF54\uB4DC \uBE14\uB85D\uC758 \uAD6C\uBB38 \uAC15\uC870\uC640 \uD0ED \uC804\uD658\uC744 \uD1B5\uD55C \uC2E4\uC2DC\uAC04 \uCEF4\uD3EC\uB10C\uD2B8 \uBBF8\uB9AC\uBCF4\uAE30"],
+      en: ["Syntax-highlighted code block with one-click copy and live component preview tab"]
+    },
+    aliases: {
+      ko: ["\uC778\uD130\uB799\uD2F0\uBE0C \uCF54\uB4DC \uBE14\uB85D", "\uCF54\uB4DC \uBBF8\uB9AC\uBCF4\uAE30 \uD0ED", "\uCEF4\uD3EC\uB10C\uD2B8 \uB7EC\uB108"],
+      en: ["interactive code block", "code preview tab"]
+    }
+  },
+  "ai-message-branch": {
+    targets: ["card", "navigation", "text"],
+    triggers: ["click"],
+    useCases: {
+      ko: ["\uC7AC\uC0DD\uC131\uB41C \uC751\uB2F5 \uBC84\uC804\uB4E4\uC744 \uC774\uC804/\uB2E4\uC74C \uBD84\uAE30 \uB124\uBE44\uAC8C\uC774\uC158\uC73C\uB85C \uD0D0\uC0C9"],
+      en: ["Navigate between regenerated response variations with branch switcher buttons"]
+    },
+    aliases: {
+      ko: ["\uC751\uB2F5 \uBC84\uC804 \uC2A4\uC704\uCC98", "\uBE0C\uB79C\uCE58 \uB124\uBE44\uAC8C\uC774\uC158", "\uB2F5\uBCC0 \uC7AC\uC0DD\uC131 \uC774\uB825"],
+      en: ["response branch switcher", "version history pagination"]
+    }
+  },
+  "ai-thinking-accordion": {
+    targets: ["card", "panel", "list"],
+    triggers: ["click"],
+    useCases: {
+      ko: ["AI\uC758 \uCD94\uB860 \uB2E8\uACC4\uC640 \uACBD\uACFC \uC2DC\uAC04\uC744 \uC811\uC774\uC2DD \uC544\uCF54\uB514\uC5B8\uC73C\uB85C \uAC80\uD1A0"],
+      en: ["Inspect AI reasoning steps and elapsed time in a collapsible accordion"]
+    },
+    aliases: {
+      ko: ["\uC0AC\uACE0 \uACFC\uC815 \uC544\uCF54\uB514\uC5B8", "\uCD94\uB860 \uB85C\uADF8 \uD1A0\uAE00", "Thinking \uC544\uCF54\uB514\uC5B8"],
+      en: ["thinking process accordion", "chain-of-thought log"]
+    }
+  },
+  "ai-source-citation": {
+    targets: ["text", "card", "button"],
+    triggers: ["hover", "pointer-move"],
+    useCases: {
+      ko: ["\uD14D\uC2A4\uD2B8 \uB0B4 \uC778\uB77C\uC778 \uCD9C\uCC98 \uBC88\uD638 \uD638\uBC84 \uC2DC \uC6D0\uBB38 \uC694\uC57D \uD31D\uC624\uBC84 \uB178\uCD9C"],
+      en: ["Hover inline citation numbers to preview source website and excerpt popover"]
+    },
+    aliases: {
+      ko: ["\uC778\uB77C\uC778 \uCD9C\uCC98 \uD31D\uC624\uBC84", "\uCC38\uACE0\uBB38\uD5CC \uCE69", "\uCD9C\uCC98 \uBBF8\uB9AC\uBCF4\uAE30"],
+      en: ["inline source citation", "reference popover card"]
+    }
+  },
+  "ai-tool-call-card": {
+    targets: ["card", "panel", "list"],
+    triggers: ["click"],
+    useCases: {
+      ko: ["\uC5D0\uC774\uC804\uD2B8 \uB3C4\uAD6C \uD638\uCD9C\uC758 \uC778\uC790\uC640 \uC2E4\uD589 \uC0C1\uD0DC, \uACB0\uACFC \uC694\uC57D\uC744 \uD655\uC778"],
+      en: ["Inspect agent tool execution status, parameters, and output results"]
+    },
+    aliases: {
+      ko: ["\uB3C4\uAD6C \uC2E4\uD589 \uC0C1\uD0DC \uCE74\uB4DC", "Tool Call \uCE74\uB4DC", "\uD568\uC218 \uD638\uCD9C \uCE74\uB4DC"],
+      en: ["agent tool call card", "function execution card"]
+    }
+  },
+  "ai-human-in-the-loop": {
+    targets: ["card", "button", "panel"],
+    triggers: ["click"],
+    useCases: {
+      ko: ["\uC704\uD5D8 \uC791\uC5C5 \uC2E4\uD589 \uC804 \uC601\uD5A5\uB3C4 \uC694\uC57D\uACFC \uC0AC\uC6A9\uC790\uC758 \uC2B9\uC778/\uAC70\uC808 \uC561\uC158\uC744 \uC218\uC2E0"],
+      en: ["Prompt human confirmation with risk severity badge before executing critical actions"]
+    },
+    aliases: {
+      ko: ["\uC2B9\uC778 \uAC00\uB4DC\uB808\uC77C \uBAA8\uB2EC", "Human-in-the-loop \uCE74\uB4DC", "\uC704\uD5D8 \uBA85\uB839 \uC2B9\uC778"],
+      en: ["human-in-the-loop approval", "action confirmation card"]
+    }
+  }
+};
+
 // ../../packages/catalog/src/search-metadata.ts
 var TARGETS = ["button", "card", "text", "list", "background", "shape", "scene", "navigation", "panel", "input", "chart", "logo", "image"];
 var TRIGGERS = ["pointer-move", "hover", "click", "hold", "drag", "input", "auto", "static"];
 var SEARCH_METADATA = {
+  ...AI_SEARCH_METADATA,
   ...STARTER_PACK_SEARCH_METADATA,
   ...SIGNATURE_SEARCH_METADATA,
   ...UI_COLLECTION_SEARCH,
@@ -29364,6 +29683,475 @@ var AUTOMATION_KNOWLEDGE = [
   }
 ];
 
+// ../../packages/catalog/src/domain-knowledge/ai.ts
+var AI_KNOWLEDGE = [
+  {
+    id: "ai-prompt-context-and-token-budget",
+    aliases: {
+      ko: ["\uD504\uB86C\uD504\uD2B8 \uC5D4\uC9C0\uB2C8\uC5B4\uB9C1", "\uD1A0\uD070 \uC608\uC0B0", "\uD1A0\uD070\uC608\uC0B0", "\uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0", "\uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8", "\uD1A0\uD070 \uCD08\uACFC \uBC29\uC9C0"],
+      en: ["prompt engineering", "token budget", "context window management", "system prompt design", "token overflow prevention"]
+    },
+    useCases: {
+      ko: [
+        "LLM \uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0 \uD55C\uB3C4 \uC548\uC5D0\uC11C \uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8, \uB300\uD654 \uD788\uC2A4\uD1A0\uB9AC, RAG \uBB38\uC11C\uC758 \uC6B0\uC120\uC21C\uC704\uB97C \uBC30\uBD84\uD560 \uB54C",
+        "\uD1A0\uD070 \uCD08\uACFC\uB85C \uC778\uD55C API \uD638\uCD9C \uC5D0\uB7EC\uB098 \uACFC\uB3C4\uD55C \uACFC\uAE08\uC744 \uBC29\uC9C0\uD558\uAE30 \uC704\uD55C \uD1A0\uD070 \uBAA8\uB2C8\uD130\uB9C1 UI\uB97C \uAD6C\uC131\uD560 \uB54C",
+        "\uC0AC\uC6A9\uC790 \uC785\uB825 \uAE38\uC774\uC5D0 \uB9DE\uCDB0 \uC2E4\uC2DC\uAC04\uC73C\uB85C \uD1A0\uD070\uC744 \uACC4\uC0B0\uD558\uACE0 \uC704\uD5D8 \uC784\uACC4\uCE58\uB97C \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uACBD\uACE0\uD560 \uB54C",
+        "\uC5EC\uB7EC \uBB38\uC11C\uB97C \uCCA8\uBD80\uD588\uC744 \uB54C \uC6B0\uC120\uC21C\uC704\uC5D0 \uB530\uB77C \uCEE8\uD14D\uC2A4\uD2B8\uB97C \uB3D9\uC801\uC73C\uB85C \uC555\uCD95\uD558\uAC70\uB098 \uC694\uC57D\uD560 \uB54C"
+      ],
+      en: [
+        "Allocating context window space between system instructions, conversation history, and retrieved docs",
+        "Preventing token limit errors and unexpected billing surges with token monitoring controls",
+        "Calculating real-time tokens as the user types and providing warning thresholds",
+        "Dynamically truncating or summarizing attachments when total context exceeds budget"
+      ]
+    },
+    keywords: {
+      ko: ["\uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0", "\uD1A0\uD070 \uD55C\uB3C4", "\uD1A0\uD070 \uC608\uC0B0", "\uD504\uB86C\uD504\uD2B8 \uCD5C\uC801\uD654", "\uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8", "\uD1A0\uD070 \uACC4\uC0B0", "\uBE44\uC6A9 \uCD5C\uC801\uD654"],
+      en: ["context window", "token limit", "token budget", "prompt optimization", "system prompt", "token estimation", "cost control"]
+    },
+    text: {
+      ko: {
+        domain: "AI \uC5D0\uC774\uC804\uD2B8 & LLM \uC11C\uBE44\uC2A4",
+        title: "\uD504\uB86C\uD504\uD2B8 \uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0 \uAD00\uB9AC\uC640 \uD1A0\uD070 \uC608\uC0B0 \uC81C\uC5B4",
+        summary: "\uCEE8\uD14D\uC2A4\uD2B8 \uC708\uB3C4\uC6B0 \uB0B4 \uD1A0\uD070 \uC18C\uBAA8\uB7C9\uC744 \uC2E4\uC2DC\uAC04 \uCD94\uC801\uD558\uACE0, \uC785\uB825\xB7\uCC38\uC870 \uBB38\uC11C\xB7\uD788\uC2A4\uD1A0\uB9AC\uC758 \uC6B0\uC120\uC21C\uC704\uB97C \uC81C\uC5B4\uD574 \uBE44\uC6A9\uACFC \uC131\uB2A5\uC744 \uCD5C\uC801\uD654\uD569\uB2C8\uB2E4.",
+        overview: "LLM \uAE30\uBC18 \uC560\uD50C\uB9AC\uCF00\uC774\uC158\uC5D0\uC11C\uB294 \uBAA8\uB378\uBCC4 \uCD5C\uB300 \uD1A0\uD070 \uC218(Context Window)\uAC00 \uC815\uD574\uC838 \uC788\uC73C\uBA70, \uC785\uB825\uACFC \uCD9C\uB825 \uD1A0\uD070\uC5D0 \uB530\uB77C \uC9C1\uC811\uC801\uC778 \uBE44\uC6A9\uACFC \uC751\uB2F5 \uC9C0\uC5F0\uC774 \uBC1C\uC0DD\uD569\uB2C8\uB2E4. \uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8, \uCCA8\uBD80 \uBB38\uC11C, \uC774\uC804 \uB300\uD654 \uAE30\uB85D\uC774 \uC313\uC5EC \uD55C\uB3C4\uB97C \uCD08\uACFC\uD558\uBA74 API \uD638\uCD9C\uC774 \uC2E4\uD328\uD558\uAC70\uB098 \uC55E\uC120 \uB9E5\uB77D\uC774 \uC720\uC2E4\uB429\uB2C8\uB2E4. \uB530\uB77C\uC11C \uAC01 \uC694\uC18C\uC758 \uD1A0\uD070 \uC810\uC720\uC728\uC744 \uC2E4\uC2DC\uAC04\uC73C\uB85C \uC2DC\uAC01\uD654\uD558\uACE0, \uC911\uC694\uB3C4\uC5D0 \uB530\uB77C \uC624\uB798\uB41C \uB300\uD654\uB97C \uC694\uC57D\uD558\uAC70\uB098 \uCCA8\uBD80 \uBB38\uC11C\uB97C \uC120\uD0DD\uC801\uC73C\uB85C \uC798\uB77C\uB0B4\uB294 \uD1A0\uD070 \uAD00\uB9AC \uC815\uCC45\uC744 \uC218\uB9BD\uD574\uC57C \uD569\uB2C8\uB2E4.",
+        concepts: [
+          { name: "\uD1A0\uD070 \uC608\uC0B0 \uBC30\uBD84(Token Budgeting)", description: "\uC804\uCCB4 \uCEE8\uD14D\uC2A4\uD2B8 \uC6A9\uB7C9 \uC911 \uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8 \uACE0\uC815\uBD84, \uAC80\uC0C9 \uBB38\uC11C \uAC00\uBCC0\uBD84, \uB300\uD654 \uD788\uC2A4\uD1A0\uB9AC \uC2AC\uB77C\uC774\uB529 \uC708\uB3C4\uC6B0\uBD84\uC758 \uCD5C\uB300 \uD560\uB2F9\uB7C9\uC744 \uC0AC\uC804\uC5D0 \uADDC\uC815\uD569\uB2C8\uB2E4." },
+          { name: "\uC2E4\uC2DC\uAC04 \uD1A0\uD070 \uCE74\uC6B4\uD305(Tokenizer Feedback)", description: "\uD074\uB77C\uC774\uC5B8\uD2B8 \uC0AC\uC774\uB4DC BPE \uD1A0\uD06C\uB098\uC774\uC800\uB97C \uC0AC\uC6A9\uD574 \uC0AC\uC6A9\uC790\uAC00 \uC785\uB825\uD558\uB294 \uB3C4\uC911 \uC2E4\uC2DC\uAC04\uC73C\uB85C \uD1A0\uD070 \uC218\uC640 \uC608\uC0C1 \uBE44\uC6A9\uC744 \uACC4\uC0B0\uD574 \uC2DC\uAC01\uC801 \uD53C\uB4DC\uBC31\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4." },
+          { name: "\uCEE8\uD14D\uC2A4\uD2B8 \uC555\uCD95 \uBC0F \uC2AC\uB77C\uC774\uB529 \uC708\uB3C4\uC6B0(Sliding Window & Compression)", description: "\uB300\uD654\uAC00 \uAE38\uC5B4\uC9C0\uBA74 \uCD08\uAE30 \uBA54\uC2DC\uC9C0\uB97C \uC694\uC57D\uBCF8\uC73C\uB85C \uB300\uCCB4\uD558\uACE0 \uCD5C\uADFC \uD134\uB9CC \uC6D0\uBB38\uC73C\uB85C \uC720\uC9C0\uD574 \uD55C\uB3C4 \uCD08\uACFC\uB97C \uBC29\uC9C0\uD569\uB2C8\uB2E4." }
+        ],
+        workflow: [
+          { name: "\uC601\uC5ED\uBCC4 \uD1A0\uD070 \uD55C\uB3C4 \uD560\uB2F9\uD558\uAE30", description: "\uBAA8\uB378 \uD55C\uB3C4(\uC608: 8k/128k)\uC5D0 \uB9DE\uCDB0 \uC2DC\uC2A4\uD15C \uC9C0\uC2DC 15%, RAG \uAC80\uC0C9 45%, \uB300\uD654 \uD788\uC2A4\uD1A0\uB9AC 30%, \uCD9C\uB825 \uC5EC\uC720 10%\uC758 \uC608\uC0B0 \uBE44\uC728\uC744 \uC124\uC815\uD569\uB2C8\uB2E4." },
+          { name: "\uC2E4\uC2DC\uAC04 \uC785\uB825 \uBC0F \uCCA8\uBD80 \uD30C\uC77C \uD1A0\uD070 \uC0B0\uCD9C\uD558\uAE30", description: "\uC0AC\uC6A9\uC790\uAC00 \uD14D\uC2A4\uD2B8\uB97C \uC785\uB825\uD558\uAC70\uB098 \uBB38\uC11C\uB97C \uB4DC\uB86D\uD560 \uB54C \uD1A0\uD070 \uC218\uB97C \uACC4\uC0B0\uD574 \uD504\uB85C\uADF8\uB808\uC2A4 \uAC8C\uC774\uC9C0\uC5D0 \uBC18\uC601\uD569\uB2C8\uB2E4." },
+          { name: "\uC784\uACC4\uCE58 \uB3C4\uB2EC \uC2DC \uC790\uB3D9 \uC555\uCD95 \uBC0F \uACBD\uACE0 \uCC98\uB9AC\uD558\uAE30", description: "80% \uB3C4\uB2EC \uC2DC \uACBD\uACE0 \uC0C9\uC0C1 \uC804\uD658, 95% \uB3C4\uB2EC \uC2DC \uC624\uB798\uB41C \uD134 \uC694\uC57D \uC2E4\uD589 \uB610\uB294 \uC804\uC1A1 \uC81C\uD55C\uC744 \uC801\uC6A9\uD569\uB2C8\uB2E4." }
+        ],
+        pitfalls: [
+          { name: "\uAE00\uC790 \uC218(Length)\uC640 \uD1A0\uD070 \uC218(Token Count)\uB97C \uB3D9\uC77C\uC2DC\uD558\uAE30", description: "\uD55C\uAE00\uC774\uB098 \uCF54\uB4DC, \uD2B9\uC218\uBB38\uC790\uB294 \uBB38\uC790\uB2F9 2~3\uD1A0\uD070 \uC774\uC0C1\uC744 \uC18C\uBAA8\uD558\uBBC0\uB85C \uB2E8\uC21C \uAE00\uC790 \uC218\uAC00 \uC544\uB2CC \uC2E4\uC81C \uD1A0\uD06C\uB098\uC774\uC800 \uBC14\uC774\uD2B8 \uAE30\uC900\uC73C\uB85C \uACC4\uC0B0\uD574\uC57C \uD569\uB2C8\uB2E4." },
+          { name: "\uCD9C\uB825 \uD1A0\uD070(Max Completion Tokens) \uC5EC\uC720\uBD84\uC744 \uB0A8\uACA8\uB450\uC9C0 \uC54A\uAE30", description: "\uCEE8\uD14D\uC2A4\uD2B8\uB97C \uAF49 \uCC44\uC6CC \uBCF4\uB0B4\uBA74 \uBAA8\uB378\uC774 \uB2F5\uBCC0\uC744 \uD55C\uB450 \uBB38\uC7A5 \uB9CC\uC5D0 \uC798\uB77C\uBC84\uB9AC\uB294 Truncation \uD604\uC0C1\uC774 \uBC1C\uC0DD\uD569\uB2C8\uB2E4." }
+        ],
+        questions: [
+          "\uC0AC\uC6A9\uC790\uAC00 \uC5EC\uB7EC \uB300\uC6A9\uB7C9 \uD30C\uC77C\uC744 \uCCA8\uBD80\uD588\uC744 \uB54C, \uC5B4\uB5A4 \uAE30\uC900\uC73C\uB85C \uC6B0\uC120\uC21C\uC704\uB97C \uB9E4\uACA8 \uCEE8\uD14D\uC2A4\uD2B8\uC5D0 \uD3EC\uD568\uD560 \uAC83\uC778\uAC00\uC694?",
+          "\uD1A0\uD070 \uD55C\uB3C4 \uCD08\uACFC \uC2DC \uC774\uC804 \uB300\uD654\uB97C \uC644\uC804 \uC0AD\uC81C\uD560 \uAC83\uC778\uAC00\uC694, \uC544\uB2C8\uBA74 AI \uC694\uC57D\uBCF8\uC73C\uB85C \uCD95\uC57D\uD560 \uAC83\uC778\uAC00\uC694?",
+          "\uC2E4\uC2DC\uAC04 \uD1A0\uD070 \uCD94\uC815\uCE58\uC640 \uC2E4\uC81C API \uACFC\uAE08 \uD1A0\uD070 \uC218 \uAC04\uC758 \uC624\uCC28\uB97C UI\uC5D0\uC11C \uC5B4\uB5BB\uAC8C \uACE0\uC9C0\uD560 \uAC83\uC778\uAC00\uC694?"
+        ],
+        example: "\uC608\uC2DC: \uBB38\uC11C \uBD84\uC11D \uCC57\uBD07\uC5D0\uC11C \uC0AC\uC6A9\uC790\uAC00 4\uAC1C\uC758 PDF\uB97C \uCCA8\uBD80\uD558\uBA74 \uAC01 \uD30C\uC77C\uBCC4 \uD1A0\uD070 \uCE69\uC744 \uD45C\uC2DC\uD558\uACE0, \uCD1D 8,000\uD1A0\uD070 \uC911 6,500\uD1A0\uD070 \uC0AC\uC6A9 \uC2DC \uC8FC\uD669\uC0C9 \uAC8C\uC774\uC9C0\uC640 \uD568\uAED8 [\uBB38\uC11C \uC555\uCD95] \uBC84\uD2BC\uC744 \uB744\uC6CC \uD575\uC2EC \uBC1C\uCDCC\uBB38\uB9CC \uB0A8\uAE30\uB3C4\uB85D \uC720\uB3C4\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
+        relatedDesigns: [
+          { id: "ai-prompt-box", reason: "\uBAA8\uB378 \uC2A4\uC704\uCC98\uC640 \uB192\uC774 \uC790\uB3D9 \uC870\uC808\uC744 \uAC16\uCD98 \uC785\uB825\uCC3D\uC73C\uB85C \uD504\uB86C\uD504\uD2B8 \uC804\uC1A1 \uC778\uD130\uB799\uC158\uC744 \uAD6C\uC131\uD569\uB2C8\uB2E4." },
+          { id: "ai-context-pill", reason: "\uCCA8\uBD80\uB41C \uCEE8\uD14D\uC2A4\uD2B8 \uD0DC\uADF8 \uCE69\uACFC \uC2E4\uC2DC\uAC04 \uD1A0\uD070 \uC0AC\uC6A9\uB7C9 \uD504\uB85C\uADF8\uB808\uC2A4 \uBC14\uB97C \uC2DC\uAC01\uD654\uD569\uB2C8\uB2E4." }
+        ],
+        promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uCCA8\uBD80 \uBB38\uC11C \uD0DC\uADF8 \uCE69\uACFC \uC2E4\uC2DC\uAC04 \uD1A0\uD070 \uC18C\uBAA8\uC728 \uAC8C\uC774\uC9C0\uB97C \uAC16\uCD98 \uD504\uB86C\uD504\uD2B8 \uC785\uB825 \uCE74\uB4DC\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 12px \uBAA8\uC11C\uB9AC\uC640 1px \uD14C\uB450\uB9AC\uC758 \uCE74\uB4DC\uB97C \uAD6C\uC131\uD558\uACE0, \uC0C1\uB2E8\uC5D0\uB294 \uCCA8\uBD80 \uBB38\uC11C \uCE69 \uBAA9\uB85D(X \uC0AD\uC81C \uBC84\uD2BC \uD3EC\uD568), \uD558\uB2E8\uC5D0\uB294 \uCD1D 8000\uD1A0\uD070 \uB300\uBE44 \uC0AC\uC6A9\uB7C9\uC744 \uB098\uD0C0\uB0B4\uB294 \uD504\uB85C\uADF8\uB808\uC2A4 \uBC14\uB97C \uBC30\uCE58\uD574 \uC918."
+      },
+      en: {
+        domain: "AI Agents & LLM Services",
+        title: "Prompt Context Window Management and Token Budget Control",
+        summary: "Track token usage against context window limits in real-time, optimizing allocation across instructions, retrieval, and chat history.",
+        overview: "LLM applications operate within fixed context window ceilings, where input and output tokens directly dictate financial costs and latency. Without deliberate budgeting, accumulated chat histories and file attachments trigger API overflow errors or silent context truncation. Teams must implement explicit token allocations, real-time client-side counting, and automated summarization rules.",
+        concepts: [
+          { name: "Token Budget Allocation", description: "Predefining ceiling ratios for system directives, retrieved documents, and conversational turns within the total window." },
+          { name: "Real-time Tokenizer Feedback", description: "Using client-side tokenizers to compute token load and cost projections as the user types." },
+          { name: "Context Compression & Sliding Window", description: "Collapsing older messages into summaries while preserving recent turns verbatim to maintain coherency without overflow." }
+        ],
+        workflow: [
+          { name: "Define Budget Allocation Quotas", description: "Establish proportional quotas (e.g., 15% instructions, 45% retrieval, 30% history, 10% completion headroom)." },
+          { name: "Calculate Real-time Input & Attachment Tokens", description: "Compute token metrics on text change and file drop, updating visual gauges dynamically." },
+          { name: "Enforce Threshold Warnings & Auto-summaries", description: "Shift gauge alerts at 80% and trigger automated conversation summarization at 95% capacity." }
+        ],
+        pitfalls: [
+          { name: "Equating Character Count with Token Usage", description: "Multilingual text and code consume substantially more tokens per character than English prose; compute using authentic tokenizers." },
+          { name: "Neglecting Output Completion Headroom", description: "Maxing out input context leaves no capacity for model completions, truncating responses mid-sentence." }
+        ],
+        questions: [
+          "How will the system prioritize among multiple large document attachments when context limits are reached?",
+          "Will overflow conditions discard older messages entirely or condense them via background LLM summarization?",
+          "How should discrepancies between client-side estimates and provider billing be communicated?"
+        ],
+        example: "Example: In a document analysis assistant, attached files are tagged with token pills. When utilization hits 6,500 of 8,000 tokens, the gauge shifts to amber and offers a one-click summarization option.",
+        relatedDesigns: [
+          { id: "ai-prompt-box", reason: "Provides an auto-expanding prompt input with model switching controls." },
+          { id: "ai-context-pill", reason: "Visualizes attached document tags and real-time token capacity bars." }
+        ],
+        promptSnippet: "Create a prompt input card with document tag pills and a real-time token gauge in the specified area. Inside a container of width 100% and min-height 180px, build a card with 12px corners and 1px border. Feature removable context tags at the top and a progress bar showing token usage out of 8000 tokens at the bottom."
+      }
+    },
+    sources: [
+      { title: "OpenAI Prompt Engineering Guide", url: "https://platform.openai.com/docs/guides/prompt-engineering" },
+      { title: "Anthropic Context Window Guidance", url: "https://docs.anthropic.com/en/docs/build-with-claude/context-window" }
+    ]
+  },
+  {
+    id: "ai-streaming-response-and-reconnection",
+    aliases: {
+      ko: ["SSE \uC2A4\uD2B8\uB9AC\uBC0D", "\uC2A4\uD2B8\uB9AC\uBC0D \uD14D\uC2A4\uD2B8", "\uC751\uB2F5 \uC911\uB2E8", "\uC6F9\uC18C\uCF13 \uCCAD\uD06C", "\uC2A4\uD2B8\uB9AC\uBC0D \uC5D0\uB7EC \uBCF5\uAD6C"],
+      en: ["SSE streaming", "text streaming", "streaming abort", "chunked transfer", "streaming reconnect"]
+    },
+    useCases: {
+      ko: [
+        "LLM\uC758 \uAE34 \uC0DD\uC131 \uC2DC\uAC04\uC744 \uBCF4\uC644\uD558\uAE30 \uC704\uD574 \uCCAB \uD1A0\uD070 \uC9C0\uC5F0 \uC2DC\uAC04(TTFT)\uC744 \uCD5C\uC18C\uD654\uD558\uACE0 \uD55C \uAE00\uC790\uC529 \uC2E4\uC2DC\uAC04 \uB80C\uB354\uB9C1\uD560 \uB54C",
+        "\uC0DD\uC131 \uC911 \uC0AC\uC6A9\uC790\uAC00 [\uC0DD\uC131 \uC911\uC9C0(Stop)]\uB97C \uB20C\uB7EC \uBD88\uD544\uC694\uD55C \uD1A0\uD070 \uB0AD\uBE44\uC640 \uB300\uAE30\uB97C \uC989\uC2DC \uCC28\uB2E8\uD560 \uB54C",
+        "\uB124\uD2B8\uC6CC\uD06C \uBD88\uC548\uC815\uC73C\uB85C \uCCAD\uD06C \uC804\uC1A1\uC774 \uB04A\uACBC\uC744 \uB54C \uBD80\uBD84 \uC0DD\uC131\uB41C \uD14D\uC2A4\uD2B8\uB97C \uC720\uC9C0\uD558\uACE0 \uC7AC\uC5F0\uACB0\uC744 \uC2DC\uB3C4\uD560 \uB54C",
+        "\uC2A4\uD2B8\uB9AC\uBC0D \uB3C4\uC911 \uB9C8\uD06C\uB2E4\uC6B4 \uD0DC\uADF8(\uCF54\uB4DC \uBE14\uB85D, \uD45C \uB4F1)\uAC00 \uBBF8\uC644\uC131\uC778 \uC0C1\uD0DC\uC5D0\uC11C\uB3C4 \uB808\uC774\uC544\uC6C3 \uAE68\uC9D0 \uC5C6\uC774 \uB80C\uB354\uB9C1\uD560 \uB54C"
+      ],
+      en: [
+        "Minimizing time-to-first-token (TTFT) by rendering text chunks in real-time as tokens arrive",
+        "Empowering users to abort generations immediately to halt token burn and clear the UI",
+        "Recovering from network drops by retaining partial text buffers and retrying connection",
+        "Streaming incomplete markdown tokens without breaking code blocks or table layouts"
+      ]
+    },
+    keywords: {
+      ko: ["SSE", "Server-Sent Events", "\uC2A4\uD2B8\uB9AC\uBC0D", "TTFT", "\uC911\uB2E8 \uBC84\uD2BC", "AbortController", "\uCCAD\uD06C \uB80C\uB354\uB9C1", "\uB9C8\uD06C\uB2E4\uC6B4 \uD30C\uC11C"],
+      en: ["SSE", "Server-Sent Events", "streaming", "TTFT", "stop generation", "AbortController", "chunk rendering", "markdown stream"]
+    },
+    text: {
+      ko: {
+        domain: "AI \uC5D0\uC774\uC804\uD2B8 & LLM \uC11C\uBE44\uC2A4",
+        title: "SSE \uC2A4\uD2B8\uB9AC\uBC0D \uC751\uB2F5 \uB80C\uB354\uB9C1\uACFC \uC5F0\uACB0 \uBCF5\uAD6C \uBC0F \uC870\uAE30 \uC911\uB2E8",
+        summary: "\uC11C\uBC84-\uC13C\uD2B8 \uC774\uBCA4\uD2B8(SSE)\uB85C \uCCAB \uD1A0\uD070 \uC9C0\uC5F0\uC744 \uB2E8\uCD95\uD558\uACE0, AbortController \uAE30\uBC18 \uC0DD\uC131 \uC911\uB2E8\uACFC \uB04A\uAE40 \uBCF5\uAD6C\uB97C \uC81C\uACF5\uD569\uB2C8\uB2E4.",
+        overview: "\uC0DD\uC131\uD615 AI \uBAA8\uB378\uC740 \uC804\uCCB4 \uB2F5\uBCC0\uC744 \uC644\uC131\uD558\uAE30\uAE4C\uC9C0 \uC218 \uCD08\uC5D0\uC11C \uC218\uC2ED \uCD08\uAC00 \uC18C\uC694\uB418\uBBC0\uB85C, HTTP \uB2E8\uC77C \uC751\uB2F5 \uB300\uC2E0 Server-Sent Events(SSE)\uB098 \uC6F9\uC18C\uCF13\uC744 \uD1B5\uD55C \uCCAD\uD06C \uC2A4\uD2B8\uB9AC\uBC0D\uC774 \uD544\uC218\uC801\uC785\uB2C8\uB2E4. \uC0AC\uC6A9\uC790\uB294 \uCCAB \uAE00\uC790\uAC00 \uBE60\uB974\uAC8C \uCC0D\uD788\uB294 \uAC83\uC744 \uBCF4\uBA70 \uCCB4\uAC10 \uB300\uAE30 \uC2DC\uAC04\uC744 \uC904\uC77C \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uB610\uD55C \uC6D0\uCE58 \uC54A\uB294 \uBC29\uD5A5\uC73C\uB85C \uB2F5\uBCC0\uC774 \uC0DD\uC131\uB420 \uB54C \uC989\uAC01 \uC911\uB2E8(Abort)\uD560 \uC218 \uC788\uC5B4\uC57C \uD558\uBA70, \uC77C\uC2DC\uC801 \uB124\uD2B8\uC6CC\uD06C \uB2E8\uC808 \uC2DC\uC5D0\uB3C4 \uC774\uBBF8 \uB3C4\uCC29\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uC874\uD558\uACE0 \uC7AC\uC804\uC1A1\uC744 \uC694\uCCAD\uD560 \uC218 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.",
+        concepts: [
+          { name: "\uCCAB \uD1A0\uD070 \uC2DC\uAC04(Time-to-First-Token, TTFT)", description: "\uC804\uCCB4 \uC0DD\uC131 \uC644\uB8CC\uAC00 \uC544\uB2CC \uCD5C\uCD08 \uCCAD\uD06C\uAC00 \uD074\uB77C\uC774\uC5B8\uD2B8\uC5D0 \uB3C4\uCC29\uD574 \uD654\uBA74\uC5D0 \uB80C\uB354\uB9C1\uB418\uAE30\uAE4C\uC9C0\uC758 \uC18C\uC694 \uC2DC\uAC04\uC73C\uB85C, UX \uB9CC\uC871\uB3C4\uC758 \uD575\uC2EC \uCC99\uB3C4\uC785\uB2C8\uB2E4." },
+          { name: "\uC870\uAE30 \uC911\uB2E8 \uC2E0\uD638(AbortController Signal)", description: "\uC0AC\uC6A9\uC790\uAC00 \uC911\uC9C0 \uBC84\uD2BC\uC744 \uB204\uB974\uBA74 fetch API\uC758 signal\uC744 \uC911\uB2E8\uD574 \uC11C\uBC84\uC758 \uBD88\uD544\uC694\uD55C GPU \uC5F0\uC0B0\uACFC \uD1A0\uD070 \uACFC\uAE08\uC744 \uC989\uC2DC \uCC28\uB2E8\uD569\uB2C8\uB2E4." },
+          { name: "\uBD88\uC644\uC804 \uB9C8\uD06C\uB2E4\uC6B4 \uBC84\uD37C\uB9C1(Fault-Tolerant Markdown Parsing)", description: "\uCF54\uB4DC \uBE14\uB85D\uC758 \uB2EB\uB294 \uBC31\uD2F1(```)\uC774\uB098 \uBCFC\uB4DC \uD0DC\uADF8(**)\uAC00 \uC544\uC9C1 \uC2A4\uD2B8\uB9AC\uBC0D\uB418\uC9C0 \uC54A\uC558\uC744 \uB54C\uB3C4 \uD30C\uC11C\uAC00 \uD06C\uB798\uC2DC \uC5C6\uC774 \uC810\uC9C4\uC801\uC73C\uB85C \uB80C\uB354\uB9C1\uD558\uB3C4\uB85D \uCC98\uB9AC\uD569\uB2C8\uB2E4." }
+        ],
+        workflow: [
+          { name: "SSE \uC5F0\uACB0 \uC218\uB9BD \uBC0F \uC0C1\uD0DC \uCD08\uAE30\uD654\uD558\uAE30", description: "\uC694\uCCAD \uC2DC AbortController\uB97C \uB4F1\uB85D\uD558\uACE0, UI\uC5D0 \uD384\uC2A4 \uCEE4\uC11C\uC640 [\uC751\uB2F5 \uC911\uB2E8] \uBC84\uD2BC\uC744 \uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },
+          { name: "\uCCAD\uD06C \uC218\uC2E0 \uBC0F \uC810\uC9C4\uC801 \uD14D\uC2A4\uD2B8 \uCD94\uAC00\uD558\uAE30", description: "\uB3C4\uCC29\uD558\uB294 \uD14D\uC2A4\uD2B8 \uCCAD\uD06C\uB97C \uB204\uC801 \uBC84\uD37C\uC5D0 \uCD94\uAC00\uD558\uACE0, \uB80C\uB354\uB7EC\uB97C \uD1B5\uD574 \uBD80\uB4DC\uB7EC\uC6B4 \uD0C0\uC774\uD551 \uBAA8\uC158\uC73C\uB85C \uCD9C\uB825\uD569\uB2C8\uB2E4." },
+          { name: "\uC644\uB8CC \uC2E0\uD638 \uC218\uC2E0 \uB610\uB294 \uC911\uB2E8 \uC774\uBCA4\uD2B8 \uCC98\uB9AC\uD558\uAE30", description: "[DONE] \uD1A0\uD070 \uC218\uC2E0 \uC2DC \uCEE4\uC11C\uB97C \uC228\uAE30\uACE0 [\uB2E4\uC2DC \uC0DD\uC131]\uC73C\uB85C \uC804\uD658\uD558\uBA70, \uC0AC\uC6A9\uC790 \uC911\uB2E8 \uC2DC \uC5F0\uACB0\uC744 \uB2EB\uACE0 \uBD80\uBD84 \uBC84\uD37C\uB97C \uD655\uC815\uD569\uB2C8\uB2E4." }
+        ],
+        pitfalls: [
+          { name: "\uCCAD\uD06C\uB9C8\uB2E4 \uBB34\uAC70\uC6B4 \uC804\uCCB4 \uB9AC\uB80C\uB354\uB9C1 \uBC1C\uC0DD\uC2DC\uD0A4\uAE30", description: "\uB9E4 \uD1A0\uD070\uB9C8\uB2E4 \uBCF5\uC7A1\uD55C \uCEF4\uD3EC\uB10C\uD2B8 \uD2B8\uB9AC\uB97C \uB2E4\uC2DC \uADF8\uB9AC\uBA74 \uBE0C\uB77C\uC6B0\uC800 \uBA54\uC778 \uC2A4\uB808\uB4DC\uAC00 \uC815\uC9C0\uD558\uBBC0\uB85C \uAC00\uBCBC\uC6B4 \uD14D\uC2A4\uD2B8 \uB178\uB4DC \uC5C5\uB370\uC774\uD2B8\uB098 requestAnimationFrame \uBC30\uCE6D\uC744 \uC801\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4." },
+          { name: "\uD074\uB77C\uC774\uC5B8\uD2B8 \uC911\uB2E8 \uC2DC \uC11C\uBC84 \uC138\uC158\uC744 \uBC29\uCE58\uD558\uAE30", description: "\uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C\uB9CC \uC911\uB2E8\uD558\uACE0 \uBC31\uC5D4\uB4DC LLM \uD638\uCD9C\uC744 \uCDE8\uC18C\uD558\uC9C0 \uC54A\uC73C\uBA74 \uBC31\uC5D4\uB4DC\uC5D0\uC11C \uBC31\uADF8\uB77C\uC6B4\uB4DC \uD1A0\uD070 \uBE44\uC6A9\uC774 \uACC4\uC18D \uBC1C\uC0DD\uD569\uB2C8\uB2E4." }
+        ],
+        questions: [
+          "\uC2A4\uD2B8\uB9AC\uBC0D \uB3C4\uC911 \uC77C\uC2DC\uC801 \uB124\uD2B8\uC6CC\uD06C \uC624\uB958\uAC00 \uB098\uBA74 \uC5B4\uB514\uC11C\uBD80\uD130 \uC7AC\uC5F0\uACB0\uC744 \uC2DC\uB3C4\uD560 \uAC83\uC778\uAC00\uC694?",
+          "\uC911\uB2E8(Abort)\uB41C \uBD88\uC644\uC804\uD55C \uC751\uB2F5\uB3C4 \uB300\uD654 \uAE30\uB85D\uC5D0 \uC800\uC7A5\uD574 \uB2E4\uC74C \uD504\uB86C\uD504\uD2B8\uC758 \uCEE8\uD14D\uC2A4\uD2B8\uB85C \uB118\uAE38 \uAC83\uC778\uAC00\uC694?",
+          "\uCF54\uB4DC \uBE14\uB85D \uB0B4\uBD80\uAC00 \uC2A4\uD2B8\uB9AC\uBC0D\uB418\uB294 \uB3C4\uC911 \uC0AC\uC6A9\uC790\uAC00 [\uCF54\uB4DC \uBCF5\uC0AC]\uB97C \uB204\uB974\uBA74 \uC5B4\uB5BB\uAC8C \uB3D9\uC791\uD574\uC57C \uD558\uB098\uC694?"
+        ],
+        example: "\uC608\uC2DC: \uCF54\uB4DC \uC0DD\uC131 AI\uC5D0\uC11C \uC0AC\uC6A9\uC790\uAC00 \uD504\uB86C\uD504\uD2B8\uB97C \uBCF4\uB0B4\uBA74 30ms \uAC04\uACA9\uC73C\uB85C \uCF54\uB4DC\uAC00 \uC2A4\uD2B8\uB9AC\uBC0D\uB418\uBA70, \uC6D0\uCE58 \uC54A\uB294 \uB77C\uC774\uBE0C\uB7EC\uB9AC\uB85C \uC791\uC131\uB418\uAE30 \uC2DC\uC791\uD560 \uB54C [\uC751\uB2F5 \uC911\uB2E8] \uBC84\uD2BC\uC744 \uB20C\uB7EC 150\uC790 \uC2DC\uC810\uC5D0 \uC989\uC2DC \uBA48\uCD94\uACE0 \uD504\uB86C\uD504\uD2B8\uB97C \uC218\uC815\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
+        relatedDesigns: [
+          { id: "ai-streaming-text", reason: "\uC2E4\uC2DC\uAC04 \uD0C0\uC774\uD551 \uD6A8\uACFC\uC640 \uD384\uC2A4 \uCEE4\uC11C, \uC751\uB2F5 \uC911\uC9C0 \uBC84\uD2BC\uC758 \uC2DC\uAC01\uC801 \uC778\uD130\uB799\uC158\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4." },
+          { id: "ai-code-runner", reason: "\uC2A4\uD2B8\uB9AC\uBC0D\uB41C \uCF54\uB4DC\uC758 \uC2E0\uD0DD\uC2A4 \uD558\uC774\uB77C\uC774\uD305\uACFC \uBBF8\uB9AC\uBCF4\uAE30 \uD0ED \uC804\uD658\uC744 \uC9C0\uC6D0\uD569\uB2C8\uB2E4." }
+        ],
+        promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uAE5C\uBE61\uC774\uB294 \uD384\uC2A4 \uCEE4\uC11C\uC640 [\uC751\uB2F5 \uC911\uC9C0] \uC81C\uC5B4\uAC00 \uD3EC\uD568\uB41C \uC2E4\uC2DC\uAC04 \uC2A4\uD2B8\uB9AC\uBC0D \uD14D\uC2A4\uD2B8 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108\uC5D0\uC11C 30ms \uAC04\uACA9\uC73C\uB85C \uAE00\uC790\uAC00 \uCD9C\uB825\uB418\uBA70 \uD074\uB9AD \uC2DC \uC989\uC2DC \uD0C0\uC774\uBA38\uB97C \uC815\uC9C0\uD558\uB294 \uC911\uC9C0 \uBC84\uD2BC\uC744 \uC81C\uACF5\uD574 \uC918."
+      },
+      en: {
+        domain: "AI Agents & LLM Services",
+        title: "SSE Streaming Response Rendering, Connection Recovery, and Early Abort",
+        summary: "Stream tokens via SSE to slash TTFT, supporting AbortController-driven stops and resilient partial rendering.",
+        overview: "Because LLM completions can span several seconds, chunked streaming over Server-Sent Events (SSE) or WebSockets is indispensable for minimizing perceived latency. Real-time token streaming creates responsive feedback while enabling users to abort suboptimal answers early. The architecture must handle incomplete markdown tokens and gracefully recover from dropped sockets.",
+        concepts: [
+          { name: "Time-to-First-Token (TTFT)", description: "The elapsed time until the initial text chunk renders in the browser, representing the primary benchmark of perceived system responsiveness." },
+          { name: "AbortController Signal", description: "Transmitting cancellation signals to terminate the upstream LLM invocation and arrest downstream GPU billing." },
+          { name: "Fault-tolerant Markdown Streaming", description: "Parsing incomplete markdown chunks (such as unclosed code fences) incrementally without crashing the DOM renderer." }
+        ],
+        workflow: [
+          { name: "Establish SSE Stream & Abort Handles", description: "Initiate HTTP streaming with an attached AbortSignal, activating the stop button and typing cursor." },
+          { name: "Accumulate Chunks & Batch Render", description: "Buffer incoming tokens and apply requestAnimationFrame updates for smooth typographic expansion." },
+          { name: "Handle Completion or Abort Interrupts", description: "Finalize output on [DONE] signals, or cleanly sever the connection upon user abort while preserving partial buffers." }
+        ],
+        pitfalls: [
+          { name: "Triggering Full Tree Re-renders Per Token", description: "Re-evaluating entire virtual DOM trees for every arriving token stalls the browser UI thread; batch DOM mutations." },
+          { name: "Orphaning Upstream Server Generation on Abort", description: "Halting the client socket without signaling the backend API allows costly LLM compute to run to completion." }
+        ],
+        questions: [
+          "How will dropped socket connections resume without duplicate token generation?",
+          "Should truncated or aborted turns be committed into persistent session history?",
+          "What state should one-click copy buttons present while a code block is actively streaming?"
+        ],
+        example: "Example: In an AI coding assistant, code blocks stream at 30ms intervals with a pulsing caret. When the developer spots an obsolete dependency, clicking Stop immediately halts generation at 150 characters.",
+        relatedDesigns: [
+          { id: "ai-streaming-text", reason: "Implements a pulsing cursor streaming effect with start and stop controls." },
+          { id: "ai-code-runner", reason: "Renders streaming code with syntax highlighting and a live preview tab." }
+        ],
+        promptSnippet: "Create a streaming text component with a pulsing caret and stop button in the specified area. Inside a container of width 100% and min-height 180px, stream text at 30ms intervals and provide a button to immediately halt the stream on click."
+      }
+    },
+    sources: [
+      { title: "MDN Server-Sent Events Guide", url: "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events" },
+      { title: "W3C Fetch AbortController Standard", url: "https://fetch.spec.whatwg.org/#abortcontroller-interface" }
+    ]
+  },
+  {
+    id: "ai-tool-calling-and-human-approval",
+    aliases: {
+      ko: ["\uD568\uC218 \uD638\uCD9C", "Function Calling", "\uC5D0\uC774\uC804\uD2B8 \uB3C4\uAD6C", "\uD734\uBA3C\uC778\uB354\uB8E8\uD504", "\uC704\uD5D8 \uBA85\uB839 \uC2B9\uC778", "\uB3C4\uAD6C \uC2E4\uD589 \uAC00\uB4DC\uB808\uC77C"],
+      en: ["tool calling", "function calling", "agent tools", "human-in-the-loop", "action approval", "guardrail validation"]
+    },
+    useCases: {
+      ko: [
+        "AI \uC5D0\uC774\uC804\uD2B8\uAC00 \uC678\uBD80 \uAC80\uC0C9, \uB370\uC774\uD130\uBCA0\uC774\uC2A4 \uC870\uD68C, API \uD638\uCD9C\uC744 \uC9C1\uC811 \uC218\uD589\uD560 \uC218 \uC788\uB3C4\uB85D \uB3C4\uAD6C\uB97C \uC5F0\uACB0\uD560 \uB54C",
+        "\uD30C\uC77C \uC0AD\uC81C, \uACB0\uC81C \uC2E4\uD589, \uC774\uBA54\uC77C \uBC1C\uC1A1 \uB4F1 \uBE44\uAC00\uC5ED\uC801 \uC704\uD5D8 \uC791\uC5C5 \uC804 \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC2B9\uC778\uC744 \uC694\uCCAD\uD560 \uB54C",
+        "\uB3C4\uAD6C \uC2E4\uD589 \uC778\uC790(JSON Arguments)\uC640 \uBC18\uD658 \uACB0\uACFC\uB97C \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC2DC\uAC01\uC801\uC73C\uB85C \uD22C\uBA85\uD558\uAC8C \uACF5\uAC1C\uD560 \uB54C",
+        "\uB3C4\uAD6C \uC2E4\uD589 \uC2E4\uD328\uB098 \uD0C0\uC784\uC544\uC6C3 \uC2DC \uC5D0\uC774\uC804\uD2B8\uAC00 \uC2A4\uC2A4\uB85C \uB300\uCCB4 \uB3C4\uAD6C\uB97C \uCC3E\uAC70\uB098 \uC7AC\uC2DC\uB3C4\uD558\uB3C4\uB85D \uAD6C\uC131\uD560 \uB54C"
+      ],
+      en: [
+        "Equipping AI agents with tools for external search, database queries, and API integrations",
+        "Requiring explicit human approval before irreversible actions like file deletions or payment execution",
+        "Transparently displaying structured JSON tool arguments and return payloads in the interface",
+        "Enabling fallback tools or automated retries when a tool invocation times out or errors"
+      ]
+    },
+    keywords: {
+      ko: ["\uB3C4\uAD6C \uD638\uCD9C", "Function Calling", "\uC5D0\uC774\uC804\uD2B8", "Human-in-the-loop", "\uC2B9\uC778 \uBAA8\uB2EC", "\uAC00\uB4DC\uB808\uC77C", "JSON \uC778\uC790", "\uAD8C\uD55C \uAD00\uB9AC"],
+      en: ["tool call", "function calling", "agent", "human in the loop", "approval card", "guardrail", "json arguments", "permissions"]
+    },
+    text: {
+      ko: {
+        domain: "AI \uC5D0\uC774\uC804\uD2B8 & LLM \uC11C\uBE44\uC2A4",
+        title: "Function Calling \uB3C4\uAD6C \uC624\uCF00\uC2A4\uD2B8\uB808\uC774\uC158\uACFC \uC704\uD5D8 \uC791\uC5C5 \uC778\uAC04 \uC2B9\uC778(Human-in-the-Loop)",
+        summary: "\uB3C4\uAD6C \uD638\uCD9C \uC785\uCD9C\uB825\uC744 \uC2DC\uAC01\uD654\uD558\uACE0, \uBE44\uAC00\uC5ED\uC801\uC778 \uBA85\uB839 \uC2E4\uD589 \uC804 \uC778\uAC04 \uC2B9\uC778(Human-in-the-Loop) \uAC00\uB4DC\uB808\uC77C\uC744 \uC801\uC6A9\uD569\uB2C8\uB2E4.",
+        overview: "\uCD5C\uC2E0 \uC790\uC728 \uC5D0\uC774\uC804\uD2B8\uB294 \uC0AC\uC6A9\uC790\uC758 \uC758\uB3C4\uB97C \uBD84\uC11D\uD574 \uC6F9 \uAC80\uC0C9, \uACC4\uC0B0\uAE30, \uD130\uBBF8\uB110 \uC2E4\uD589, DB \uC218\uC815 \uB4F1\uC758 \uB3C4\uAD6C\uB97C \uC5F0\uACC4 \uD638\uCD9C\uD569\uB2C8\uB2E4. \uADF8\uB7EC\uB098 \uBAA8\uB378\uC774 \uC798\uBABB\uB41C \uC778\uC790\uB97C \uB123\uAC70\uB098 \uD30C\uC77C \uC2DC\uC2A4\uD15C \uC0AD\uC81C, \uACB0\uC81C \uB4F1 \uBE44\uAC00\uC5ED\uC801 \uBD80\uC791\uC6A9\uC774 \uC788\uB294 \uBA85\uB839\uC744 \uC790\uC758\uC801\uC73C\uB85C \uC2E4\uD589\uD558\uBA74 \uCE58\uBA85\uC801\uC778 \uD53C\uD574\uB97C \uCD08\uB798\uD569\uB2C8\uB2E4. \uB530\uB77C\uC11C \uB3C4\uAD6C \uD638\uCD9C\uC758 \uC9C4\uD589 \uC0C1\uD0DC\uB97C \uBA85\uD655\uD788 \uBCF4\uC5EC\uC8FC\uACE0, \uACE0\uC704\uD5D8 \uC791\uC5C5\uC740 Human-in-the-loop \uB2E8\uACC4\uB85C \uACA9\uB9AC\uD574 \uC0AC\uC6A9\uC790\uC758 \uBA85\uC2DC\uC801 [\uC2B9\uC778] \uC5C6\uC774\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uB3C4\uB85D \uAC15\uC81C\uD574\uC57C \uD569\uB2C8\uB2E4.",
+        concepts: [
+          { name: "\uB3C4\uAD6C \uC2A4\uD0A4\uB9C8 \uBC0F \uC778\uC790 \uD30C\uC2F1(Tool Schema & JSON Arguments)", description: "\uBAA8\uB378\uC774 \uD638\uCD9C\uD560 \uD568\uC218\uC758 \uC774\uB984, \uC124\uBA85, \uB9E4\uAC1C\uBCC0\uC218 \uC2A4\uD0A4\uB9C8\uB97C \uC815\uC758\uD558\uACE0 \uBC18\uD658\uB41C JSON \uC778\uC790\uC758 \uC720\uD6A8\uC131\uC744 \uB7F0\uD0C0\uC784\uC5D0\uC11C \uAC80\uC99D\uD569\uB2C8\uB2E4." },
+          { name: "\uC704\uD5D8\uB3C4 \uC218\uC900 \uBD84\uB958(Risk Severity Tiering)", description: "\uB2E8\uC21C \uC870\uD68C(Low), \uB370\uC774\uD130 \uBCC0\uACBD(Medium), \uC0AD\uC81C/\uACB0\uC81C/\uC678\uBD80 \uC804\uC1A1(High)\uC73C\uB85C \uC791\uC5C5\uC744 \uBD84\uB958\uD574 High \uB4F1\uAE09\uC5D0\uB9CC \uC2B9\uC778 \uC778\uD130\uB799\uC158\uC744 \uD544\uC218\uB85C \uC694\uAD6C\uD569\uB2C8\uB2E4." },
+          { name: "\uD734\uBA3C \uC778 \uB354 \uB8E8\uD504(Human-in-the-Loop, HITL)", description: "\uC5D0\uC774\uC804\uD2B8 \uC2E4\uD589 \uB8E8\uD504\uB97C \uC77C\uC2DC \uC911\uC9C0\uD558\uACE0 \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uBA85\uB839 \uD30C\uB77C\uBBF8\uD130\uC640 \uC608\uC0C1 \uC601\uD5A5\uC744 \uC81C\uC2DC\uD55C \uB4A4 [\uC2B9\uC778/\uAC70\uC808] \uC785\uB825\uC744 \uAE30\uB2E4\uB9BD\uB2C8\uB2E4." }
+        ],
+        workflow: [
+          { name: "\uBAA8\uB378\uC758 Tool Call \uC694\uCCAD \uC218\uC2E0 \uBC0F \uAC80\uC99D\uD558\uAE30", description: "\uBAA8\uB378\uC774 \uC0DD\uC131\uD55C function_call \uB370\uC774\uD130\uB97C \uD30C\uC2F1\uD574 \uB3C4\uAD6C \uBA85\uC138 \uBC0F \uC778\uC790 \uC720\uD6A8\uC131\uC744 \uD655\uC778\uD569\uB2C8\uB2E4." },
+          { name: "\uC791\uC5C5 \uC704\uD5D8\uB3C4 \uD3C9\uAC00 \uBC0F \uC2B9\uC778 \uCE74\uB4DC \uB80C\uB354\uB9C1\uD558\uAE30", description: "\uACE0\uC704\uD5D8 \uC791\uC5C5\uC77C \uACBD\uC6B0 \uC989\uC2DC \uC2E4\uD589\uD558\uC9C0 \uC54A\uACE0 \uC2B9\uC778 \uB300\uAE30 \uC0C1\uD0DC\uB85C \uC804\uD658\uD574 \uACBD\uACE0 \uCE74\uB4DC\uC640 \uBC84\uD2BC\uC744 \uB178\uCD9C\uD569\uB2C8\uB2E4." },
+          { name: "\uC0AC\uC6A9\uC790 \uC2B9\uC778 \uC2DC \uC2E4\uD589 \uBC0F \uACB0\uACFC \uBC18\uD658\uD558\uAE30", description: "\uC0AC\uC6A9\uC790\uAC00 \uC2B9\uC778\uD558\uBA74 \uC2E4\uC81C \uD568\uC218\uB97C \uD638\uCD9C\uD574 \uACB0\uACFC\uB97C \uC5D0\uC774\uC804\uD2B8 \uCEE8\uD14D\uC2A4\uD2B8\uC5D0 \uC8FC\uC785\uD558\uACE0, \uAC70\uC808 \uC2DC \uCDE8\uC18C \uBA54\uC2DC\uC9C0\uB97C \uC804\uB2EC\uD569\uB2C8\uB2E4." }
+        ],
+        pitfalls: [
+          { name: "\uC2B9\uC778 \uBAA8\uB2EC \uC5C6\uC774 \uC178(Shell)\uC774\uB098 \uD30C\uC77C \uC4F0\uAE30 \uAD8C\uD55C \uD5C8\uC6A9\uD558\uAE30", description: "\uD504\uB86C\uD504\uD2B8 \uC778\uC81D\uC158 \uACF5\uACA9\uC5D0 \uB178\uCD9C\uB420 \uACBD\uC6B0 \uC2DC\uC2A4\uD15C \uD30C\uC77C\uC774 \uC0AD\uC81C\uB418\uAC70\uB098 \uC545\uC131 \uC2A4\uD06C\uB9BD\uD2B8\uAC00 \uC2E4\uD589\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4." },
+          { name: "\uB3C4\uAD6C \uC2E4\uD589 \uC2E4\uD328 \uC2DC \uBB34\uD55C \uC7AC\uC2DC\uB3C4 \uB8E8\uD504\uC5D0 \uBE60\uC9C0\uAE30", description: "\uC5D0\uB7EC \uC751\uB2F5\uC744 \uBC1B\uC740 \uBAA8\uB378\uC774 \uB3D9\uC77C\uD55C \uC2E4\uD328 \uBA85\uB839\uC744 \uBC18\uBCF5 \uD638\uCD9C\uD574 \uD06C\uB808\uB527\uC744 \uACE0\uAC08\uC2DC\uD0A4\uB294 \uBB38\uC81C\uB97C \uBC29\uC9C0\uD558\uAE30 \uC704\uD574 \uCD5C\uB300 \uC7AC\uC2DC\uB3C4 \uD69F\uC218\uB97C \uC81C\uD55C\uD574\uC57C \uD569\uB2C8\uB2E4." }
+        ],
+        questions: [
+          "\uC5B4\uB5A4 \uC791\uC5C5(\uC608: \uD30C\uC77C \uC0AD\uC81C, \uC678\uBD80 API \uBC1C\uC1A1)\uC744 \uBC18\uB4DC\uC2DC \uC0AC\uC6A9\uC790\uC758 \uC2B9\uC778\uC744 \uAC70\uCCD0\uC57C \uD558\uB294 \uACE0\uC704\uD5D8\uAD70\uC73C\uB85C \uC9C0\uC815\uD560 \uAC83\uC778\uAC00\uC694?",
+          "\uC0AC\uC6A9\uC790\uAC00 \uC2B9\uC778\uC744 \uAC70\uC808\uD588\uC744 \uB54C, \uC5D0\uC774\uC804\uD2B8\uAC00 \uB2E4\uB978 \uB300\uC548\uC744 \uC81C\uC2DC\uD558\uB3C4\uB85D \uD504\uB86C\uD504\uD2B8\uB97C \uC5B4\uB5BB\uAC8C \uC720\uB3C4\uD560 \uAC83\uC778\uAC00\uC694?",
+          "\uBC31\uADF8\uB77C\uC6B4\uB4DC\uC5D0\uC11C \uC2E4\uD589\uB418\uB294 \uAE34 \uB3C4\uAD6C(\uC608: \uC6F9 \uD06C\uB864\uB9C1)\uC758 \uC9C4\uD589\uB960\uC744 \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uC5B4\uB5BB\uAC8C \uBCF4\uACE0\uD560 \uAC83\uC778\uAC00\uC694?"
+        ],
+        example: '\uC608\uC2DC: \uCF54\uB529 \uC5D0\uC774\uC804\uD2B8\uAC00 \uCE90\uC2DC \uB514\uB809\uD130\uB9AC \uC815\uB9AC \uBA85\uB839("rm -rf ./temp_cache")\uC744 \uB0B4\uB838\uC744 \uB54C, \uBE68\uAC04\uC0C9 [High] \uC704\uD5D8\uB3C4 \uBC30\uC9C0\uC640 \uC601\uD5A5\uBC1B\uB294 \uD30C\uC77C \uBAA9\uB85D\uC744 \uB2F4\uC740 \uC2B9\uC778 \uCE74\uB4DC\uB97C \uB744\uC6CC \uC0AC\uC6A9\uC790\uAC00 [\uC2B9\uC778\uD558\uC5EC \uC2E4\uD589]\uC744 \uD074\uB9AD\uD560 \uB54C\uB9CC \uC2E4\uC81C \uBA85\uB839\uC774 \uC2E4\uD589\uB418\uB3C4\uB85D \uC81C\uC5B4\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.',
+        relatedDesigns: [
+          { id: "ai-tool-call-card", reason: "\uC5D0\uC774\uC804\uD2B8\uAC00 \uD638\uCD9C\uD55C \uB3C4\uAD6C\uBA85, \uD30C\uB77C\uBBF8\uD130 JSON, \uC2E4\uD589 \uC0C1\uD0DC \uC2A4\uD53C\uB108\uB97C \uB2E8\uACC4\uBCC4\uB85C \uC2DC\uAC01\uD654\uD569\uB2C8\uB2E4." },
+          { id: "ai-human-in-the-loop", reason: "\uACE0\uC704\uD5D8 \uBA85\uB839 \uC2E4\uD589 \uC804 \uC601\uD5A5\uB3C4 \uC694\uC57D\uACFC \uC2B9\uC778/\uAC70\uC808 \uC561\uC158\uC744 \uC81C\uC5B4\uD558\uB294 \uAC00\uB4DC\uB808\uC77C UI\uB97C \uC81C\uACF5\uD569\uB2C8\uB2E4." }
+        ],
+        promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uACE0\uC704\uD5D8 \uC791\uC5C5 \uC804 \uC0AC\uC6A9\uC790 \uC2B9\uC778\uC744 \uC694\uAD6C\uD558\uB294 Human-in-the-loop \uAC00\uB4DC\uB808\uC77C \uCE74\uB4DC\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 \uACBD\uACE0 \uC544\uC774\uCF58, \uC704\uD5D8\uB3C4 [High] \uBC30\uC9C0, \uC2E4\uD589 \uC608\uC815 \uBA85\uB839 \uBC0F \uC601\uD5A5 \uD30C\uC77C \uBAA9\uB85D, \uADF8\uB9AC\uACE0 [\uC2B9\uC778\uD558\uC5EC \uC2E4\uD589]\uACFC [\uAC70\uC808\uD558\uAE30] \uBC84\uD2BC\uC744 \uBC30\uCE58\uD574 \uC918."
+      },
+      en: {
+        domain: "AI Agents & LLM Services",
+        title: "Function Calling Tool Orchestration and Human-in-the-Loop Approval",
+        summary: "Visualize agent tool invocations while gating irreversible actions behind human-in-the-loop approval guardrails.",
+        overview: "Autonomous agents leverage function calling to interact with search engines, databases, and system utilities. However, unconstrained tool access creates severe vulnerabilities when models emit erroneous arguments or execute destructive system operations. Robust architectures classify action risk levels and isolate high-severity operations behind interactive human checkpoints.",
+        concepts: [
+          { name: "Tool Schema & Parameter Validation", description: "Defining JSON schemas for available tools and validating model-generated arguments before execution." },
+          { name: "Risk Severity Tiering", description: "Categorizing tools into read-only (Low), mutation (Medium), and destructive/financial (High) tiers." },
+          { name: "Human-in-the-Loop (HITL)", description: "Suspending agent execution loops to solicit explicit approval or cancellation from the user for high-risk operations." }
+        ],
+        workflow: [
+          { name: "Parse Tool Call Directives", description: "Inspect model output for tool invocations and validate argument integrity against schemas." },
+          { name: "Evaluate Risk & Trigger Approval UI", description: "If flagged as high risk, intercept execution and render an interactive approval modal detailing projected impacts." },
+          { name: "Execute on Approval or Inject Refusal", description: "On human approval, run the function and stream results; on rejection, feed a structured cancellation notice back to the agent." }
+        ],
+        pitfalls: [
+          { name: "Permitting Unrestricted Shell Access Without Approvals", description: "Prompt injection vectors can compromise system hosts via automated script execution; enforce strict human verification." },
+          { name: "Unbounded Tool Retry Spirals", description: "Failing invocations can trap agents in repetitive error loops, rapidly draining API allowances without human intervention." }
+        ],
+        questions: [
+          "Which specific operations (e.g., file deletes, webhook calls) strictly mandate human sign-off?",
+          "How should the agent recover when a user explicitly rejects a proposed tool invocation?",
+          "What visual telemetry should communicate progress for long-running asynchronous tools?"
+        ],
+        example: 'Example: An autonomous coding agent proposing "rm -rf ./temp_cache" triggers an amber warning card with a red [High] badge. The command remains dormant until the user explicitly clicks [Approve & Execute].',
+        relatedDesigns: [
+          { id: "ai-tool-call-card", reason: "Displays tool names, JSON arguments, and execution spinner indicators." },
+          { id: "ai-human-in-the-loop", reason: "Implements human approval guardrails with risk badges and confirmation buttons." }
+        ],
+        promptSnippet: "Create a Human-in-the-loop approval guardrail card in the specified area. Inside a container of width 100% and min-height 180px, render a warning card displaying a [High] risk badge, command details, and dual [Approve & Execute] and [Reject] buttons."
+      }
+    },
+    sources: [
+      { title: "OpenAI Function Calling Guide", url: "https://platform.openai.com/docs/guides/function-calling" },
+      { title: "Anthropic Tool Use Documentation", url: "https://docs.anthropic.com/en/docs/build-with-claude/tool-use" }
+    ]
+  },
+  {
+    id: "ai-rag-retrieval-and-source-attribution",
+    aliases: {
+      ko: ["RAG", "\uAC80\uC0C9 \uC99D\uAC15 \uC0DD\uC131", "\uCD9C\uCC98 \uC778\uC6A9", "\uD560\uB8E8\uC2DC\uB124\uC774\uC158 \uBC29\uC9C0", "\uADFC\uAC70 \uC81C\uC2DC", "\uBB38\uC11C \uC784\uBCA0\uB529"],
+      en: ["RAG", "retrieval-augmented generation", "source attribution", "citation chips", "hallucination reduction", "document embeddings"]
+    },
+    useCases: {
+      ko: [
+        "\uAE30\uC5C5 \uC0AC\uB0B4 \uBB38\uC11C\uB098 \uCD5C\uC2E0 \uC9C0\uC2DD\uC744 \uAC80\uC0C9\uD574 AI \uB2F5\uBCC0\uC758 \uADFC\uAC70\uB85C \uD65C\uC6A9\uD558\uACE0 \uC2E0\uB8B0\uB3C4\uB97C \uB192\uC774\uACE0\uC790 \uD560 \uB54C",
+        "\uC0DD\uC131\uB41C \uB2F5\uBCC0 \uBB38\uC7A5\uB9C8\uB2E4 \uC778\uB77C\uC778 \uCD9C\uCC98 \uBC88\uD638([1], [2])\uB97C \uB2EC\uC544 \uD638\uBC84 \uC2DC \uC6D0\uBB38 \uC2A4\uB2C8\uD3AB\uC744 \uAC80\uC99D\uD558\uAC8C \uD560 \uB54C",
+        "AI\uAC00 \uC9C0\uC5B4\uB0B8 \uAC70\uC9D3 \uC815\uBCF4(\uD560\uB8E8\uC2DC\uB124\uC774\uC158)\uB97C \uC904\uC774\uAE30 \uC704\uD574 \uB2F5\uBCC0 \uC791\uC131 \uC804 \uCD94\uB860(Thinking) \uB2E8\uACC4\uB97C \uB178\uCD9C\uD560 \uB54C",
+        "\uAC80\uC0C9\uB41C \uBB38\uC11C \uCCAD\uD06C(Chunk) \uC911 \uC2E4\uC81C \uB2F5\uBCC0\uC5D0 \uAE30\uC5EC\uD55C \uD575\uC2EC \uBB38\uB2E8\uC744 \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uD22C\uBA85\uD558\uAC8C \uBCF4\uC5EC\uC904 \uB54C"
+      ],
+      en: [
+        "Grounding AI completions in proprietary documents or fresh knowledge bases to build trust",
+        "Attaching inline citation badges ([1], [2]) that reveal source snippets and URLs on hover",
+        "Mitigating model hallucinations by exposing step-by-step thinking processes to users",
+        "Displaying the exact document chunks that informed the generated answer"
+      ]
+    },
+    keywords: {
+      ko: ["RAG", "\uAC80\uC0C9 \uC99D\uAC15", "\uCD9C\uCC98 \uC778\uC6A9", "\uD560\uB8E8\uC2DC\uB124\uC774\uC158", "\uCD94\uB860 \uACFC\uC815", "CoT", "\uC2E0\uB8B0\uB3C4", "\uC784\uBCA0\uB529"],
+      en: ["RAG", "retrieval augmented generation", "citations", "hallucination", "thinking process", "chain of thought", "attribution"]
+    },
+    text: {
+      ko: {
+        domain: "AI \uC5D0\uC774\uC804\uD2B8 & LLM \uC11C\uBE44\uC2A4",
+        title: "RAG \uAC80\uC0C9 \uC99D\uAC15\uACFC \uC778\uB77C\uC778 \uCD9C\uCC98 \uC778\uC6A9 \uBC0F \uD560\uB8E8\uC2DC\uB124\uC774\uC158 \uAC00\uB4DC\uB808\uC77C",
+        summary: "\uAC80\uC0C9 \uC99D\uAC15(RAG) \uC9C0\uC2DD\uC744 \uBC14\uD0D5\uC73C\uB85C \uBB38\uC7A5\uBCC4 \uC778\uB77C\uC778 \uCD9C\uCC98 \uC778\uC6A9\uACFC \uC0AC\uACE0 \uACFC\uC815(Thinking)\uC744 \uC81C\uACF5\uD574 \uD560\uB8E8\uC2DC\uB124\uC774\uC158\uC744 \uC5B5\uC81C\uD569\uB2C8\uB2E4.",
+        overview: "LLM\uC758 \uAC00\uC7A5 \uD070 \uD55C\uACC4\uB294 \uD559\uC2B5 \uC2DC\uC810 \uC774\uD6C4\uC758 \uCD5C\uC2E0 \uC815\uBCF4\uB97C \uC54C\uC9C0 \uBABB\uD558\uACE0 \uADF8\uB7F4\uB4EF\uD55C \uAC70\uC9D3\uB9D0\uC744 \uC9C0\uC5B4\uB0B4\uB294 \uD560\uB8E8\uC2DC\uB124\uC774\uC158(Hallucination)\uC785\uB2C8\uB2E4. \uC774\uB97C \uADF9\uBCF5\uD558\uAE30 \uC704\uD574 \uC0AC\uC6A9\uC790 \uC9C8\uBB38\uACFC \uAD00\uB828\uB41C \uBB38\uC11C\uB97C \uBCA1\uD130 DB\uC5D0\uC11C \uAC80\uC0C9\uD574 \uCEE8\uD14D\uC2A4\uD2B8\uB85C \uC81C\uACF5\uD558\uB294 RAG \uAE30\uBC95\uC774 \uB110\uB9AC \uC0AC\uC6A9\uB429\uB2C8\uB2E4. \uC0AC\uC6A9\uC790\uC5D0\uAC8C \uB192\uC740 \uC2E0\uB8B0\uB97C \uC8FC\uB824\uBA74 \uB2F5\uBCC0 \uBB38\uC7A5\uB9C8\uB2E4 \uCD9C\uCC98 \uBC88\uD638 \uCE69\uC744 \uB2EC\uC544 \uB9C8\uC6B0\uC2A4 \uD638\uBC84 \uC2DC \uC6D0\uBB38 \uC81C\uBAA9\uACFC \uBC1C\uCDCC\uBB38\uC744 \uD655\uC778\uD558\uAC8C \uD558\uACE0, \uBCF5\uC7A1\uD55C \uB2F5\uBCC0\uC740 AI\uC758 \uC0AC\uACE0 \uACFC\uC815(Thinking)\uC744 \uD3BC\uCCD0\uBCFC \uC218 \uC788\uAC8C \uD574\uC57C \uD569\uB2C8\uB2E4.",
+        concepts: [
+          { name: "\uAC80\uC0C9 \uC99D\uAC15 \uC0DD\uC131(RAG, Retrieval-Augmented Generation)", description: "\uC678\uBD80 \uC9C0\uC2DD \uBCA0\uC774\uC2A4\uC5D0\uC11C \uAD00\uB828 \uD14D\uC2A4\uD2B8 \uCCAD\uD06C\uB97C \uAC80\uC0C9\uD574 LLM\uC758 \uD504\uB86C\uD504\uD2B8 \uCEE8\uD14D\uC2A4\uD2B8\uC5D0 \uC8FC\uC785\uD568\uC73C\uB85C\uC368 \uC815\uD655\uD55C \uADFC\uAC70 \uAE30\uBC18 \uB2F5\uBCC0\uC744 \uC0DD\uC131\uD569\uB2C8\uB2E4." },
+          { name: "\uC778\uB77C\uC778 \uCD9C\uCC98 \uC778\uC6A9(Inline Attribution)", description: "\uC0DD\uC131\uB41C \uD14D\uC2A4\uD2B8 \uBCF8\uBB38 \uB0B4\uC5D0 [1], [2] \uAC19\uC740 \uAC01\uC8FC \uD615\uD0DC\uC758 \uCE69\uC744 \uBC30\uCE58\uD558\uACE0, \uC0C1\uD638\uC791\uC6A9 \uC2DC \uC6D0\uBB38 \uB9C1\uD06C\uC640 \uBC1C\uCDCC\uBB38\uC744 \uD31D\uC624\uBC84\uB85C \uC81C\uACF5\uD569\uB2C8\uB2E4." },
+          { name: "\uC0AC\uACE0 \uACFC\uC815 \uD22C\uBA85\uC131(Chain-of-Thought Transparency)", description: "\uBAA8\uB378\uC774 \uCD5C\uC885 \uB2F5\uBCC0\uC744 \uB0B4\uB193\uAE30 \uC804 \uAC70\uCE5C \uBD84\uC11D\xB7\uAC80\uC0C9\xB7\uAC80\uC99D \uB2E8\uACC4\uB97C \uC544\uCF54\uB514\uC5B8 \uD615\uD0DC\uB85C \uB178\uCD9C\uD574 \uB2F5\uBCC0\uC758 \uB17C\uB9AC\uC801 \uD0C0\uB2F9\uC131\uC744 \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uAC80\uD1A0\uD558\uAC8C \uD569\uB2C8\uB2E4." }
+        ],
+        workflow: [
+          { name: "\uC9C8\uBB38 \uC784\uBCA0\uB529 \uBC0F \uAD00\uB828 \uCCAD\uD06C \uAC80\uC0C9\uD558\uAE30", description: "\uC0AC\uC6A9\uC790 \uC9C8\uBB38\uACFC \uC720\uC0AC\uD55C \uBB38\uC11C \uCCAD\uD06C \uC0C1\uC704 3~5\uAC1C\uB97C \uBCA1\uD130 DB\uC5D0\uC11C \uC870\uD68C\uD574 \uBA54\uD0C0\uB370\uC774\uD130(URL, \uC81C\uBAA9)\uC640 \uD568\uAED8 \uC900\uBE44\uD569\uB2C8\uB2E4." },
+          { name: "\uADFC\uAC70 \uAE30\uBC18 \uB2F5\uBCC0 \uBC0F \uC778\uC6A9 \uD0DC\uADF8 \uC0DD\uC131\uD558\uAE30", description: "\uC2DC\uC2A4\uD15C \uD504\uB86C\uD504\uD2B8\uC5D0 \uC81C\uACF5\uB41C \uBB38\uC11C\uB9CC\uC744 \uAE30\uBC18\uC73C\uB85C \uB2F5\uBCC0\uD558\uACE0 \uC778\uC6A9 \uBC88\uD638\uB97C \uBD99\uC774\uB3C4\uB85D \uC9C0\uC2DC\uD569\uB2C8\uB2E4." },
+          { name: "\uC778\uB77C\uC778 \uCE69 \uBC0F \uD638\uBC84 \uD31D\uC624\uBC84 \uCE74\uB4DC \uBC14\uC778\uB529\uD558\uAE30", description: "\uB80C\uB354\uB9C1 \uC2DC [1] \uD0DC\uADF8\uB97C \uAC10\uC9C0\uD574 \uCD9C\uCC98 \uD31D\uC624\uBC84 \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uCE58\uD658\uD558\uACE0 \uC6D0\uBB38 \uD30C\uBE44\uCF58 \uBC0F \uBC1C\uCDCC\uBB38\uC744 \uC5F0\uACB0\uD569\uB2C8\uB2E4." }
+        ],
+        pitfalls: [
+          { name: "\uAC80\uC0C9\uB41C \uCCAD\uD06C\uAC00 \uC9C8\uBB38\uACFC \uBB34\uAD00\uD55C\uB370\uB3C4 \uC5B5\uC9C0\uB85C \uB2F5\uBCC0\uC5D0 \uB07C\uC6CC \uB9DE\uCD94\uAE30", description: '\uC720\uC0AC\uB3C4 \uC810\uC218\uAC00 \uB0AE\uC740 \uAC80\uC0C9 \uACB0\uACFC\uB294 \uACFC\uAC10\uD788 \uBC84\uB9AC\uACE0 "\uC81C\uACF5\uB41C \uBB38\uC11C\uC5D0\uC11C \uAD00\uB828 \uC815\uBCF4\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4"\uB77C\uACE0 \uC194\uC9C1\uD788 \uB2F5\uBCC0\uD558\uB3C4\uB85D \uAC00\uB4DC\uB808\uC77C\uC744 \uC124\uC815\uD574\uC57C \uD569\uB2C8\uB2E4.' },
+          { name: "\uD074\uB9AD\uD574\uB3C4 \uC774\uB3D9\uD560 \uC218 \uC5C6\uB294 \uAC00\uC9DC \uCD9C\uCC98 URL \uB9C1\uD06C \uB0A8\uAE30\uAE30", description: "\uCD9C\uCC98 \uCE69\uC5D0 \uC2E4\uC81C \uC720\uD6A8\uD55C URL\uC774\uB098 \uBB38\uC11C \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uC5F0\uACB0\uB418\uC5B4 \uC788\uC9C0 \uC54A\uC73C\uBA74 \uC11C\uBE44\uC2A4 \uC2E0\uB8B0\uB3C4\uAC00 \uAE09\uACA9\uD788 \uD558\uB77D\uD569\uB2C8\uB2E4." }
+        ],
+        questions: [
+          "\uC0AC\uC6A9\uC790\uAC00 \uC778\uC6A9 \uCE69\uC744 \uD074\uB9AD\uD588\uC744 \uB54C \uC678\uBD80 \uC6F9\uD398\uC774\uC9C0\uB85C \uC774\uB3D9\uD558\uB098\uC694, \uC544\uB2C8\uBA74 \uC11C\uBE44\uC2A4 \uB0B4 \uBB38\uC11C \uBDF0\uC5B4\uB85C \uC5F0\uACB0\uD558\uB098\uC694?",
+          "\uAC80\uC0C9\uB41C \uBB38\uC11C \uB0B4\uC6A9\uACFC LLM \uC790\uCCB4 \uC9C0\uC2DD\uC774 \uC0C1\uCDA9\uD560 \uB54C \uC5B4\uB5A4 \uC815\uBCF4\uB97C \uC6B0\uC120\uD558\uC5EC \uB2F5\uBCC0\uD560 \uAC83\uC778\uAC00\uC694?",
+          "AI \uC0AC\uACE0 \uACFC\uC815(Thinking Process)\uC744 \uAE30\uBCF8\uC801\uC73C\uB85C \uD3BC\uCCD0\uB458 \uAC83\uC778\uAC00\uC694, \uC811\uC5B4\uB450\uACE0 \uC0AC\uC6A9\uC790\uAC00 \uC6D0\uD560 \uB54C\uB9CC \uBCF4\uAC8C \uD560 \uAC83\uC778\uAC00\uC694?"
+        ],
+        example: '\uC608\uC2DC: \uAE30\uC220 \uBB38\uC11C Q&A\uC5D0\uC11C React 19 \uBCC0\uACBD\uC810\uC744 \uC9C8\uBB38\uD558\uBA74, \uBCF8\uBB38 \uB05D\uC5D0 [1], [2] \uCE69\uC744 \uD45C\uC2DC\uD558\uACE0 [1]\uC5D0 \uB9C8\uC6B0\uC2A4\uB97C \uC62C\uB838\uC744 \uB54C "React 19 \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uAC00\uC774\uB4DC" \uC81C\uBAA9\uACFC react.dev URL \uBC0F \uD575\uC2EC \uBC1C\uCDCC\uBB38\uC744 \uB2F4\uC740 \uCE74\uB4DC\uAC00 \uBD80\uB4DC\uB7FD\uAC8C \uB098\uD0C0\uB0A9\uB2C8\uB2E4.',
+        relatedDesigns: [
+          { id: "ai-source-citation", reason: "\uD14D\uC2A4\uD2B8 \uC18D \uC778\uB77C\uC778 \uCD9C\uCC98 \uBC88\uD638\uC640 \uB9C8\uC6B0\uC2A4 \uD638\uBC84 \uC2DC \uB098\uD0C0\uB098\uB294 \uC6D0\uBB38 \uC694\uC57D \uD31D\uC624\uBC84\uB97C \uAD6C\uD604\uD569\uB2C8\uB2E4." },
+          { id: "ai-thinking-accordion", reason: "AI\uC758 \uCD94\uB860 \uACFC\uC815\uACFC \uACBD\uACFC \uC2DC\uAC04, \uB2E8\uACC4\uBCC4 \uCCB4\uD06C\uB9AC\uC2A4\uD2B8\uB97C \uB2F4\uC740 \uC811\uC774\uC2DD \uC544\uCF54\uB514\uC5B8\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4." }
+        ],
+        promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 \uC778\uB77C\uC778 \uCD9C\uCC98 \uC778\uC6A9 \uCE69\uACFC \uD638\uBC84 \uBBF8\uB9AC\uBCF4\uAE30 \uCE74\uB4DC\uB97C \uAC16\uCD98 AI \uB2F5\uBCC0 UI\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 \uB2F5\uBCC0 \uD14D\uC2A4\uD2B8\uC640 [1] \uC778\uC6A9 \uCE69\uC744 \uBC30\uCE58\uD558\uACE0, \uD638\uBC84 \uC2DC 240px \uB108\uBE44\uC758 \uCD9C\uCC98 \uCE74\uB4DC(\uC81C\uBAA9, URL, 2\uC904 \uBC1C\uCDCC\uBB38)\uAC00 150ms \uD398\uC774\uB4DC\uC778\uC73C\uB85C \uB098\uD0C0\uB098\uAC8C \uD574 \uC918."
+      },
+      en: {
+        domain: "AI Agents & LLM Services",
+        title: "RAG Retrieval Augmentation, Inline Source Attribution, and Hallucination Guardrails",
+        summary: "Ground AI answers in retrieved documents with inline citation badges and collapsible thinking timelines to suppress hallucinations.",
+        overview: "A primary hurdle in generative AI adoption is hallucination\u2014the confident assertion of fabricated claims. Retrieval-Augmented Generation (RAG) resolves this by fetching relevant document chunks from vector databases to anchor responses in verified truth. To cultivate user trust, answers should furnish inline reference badges that reveal underlying sources on hover alongside transparent reasoning logs.",
+        concepts: [
+          { name: "Retrieval-Augmented Generation (RAG)", description: "Injecting queried knowledge base chunks into the prompt context to ensure strictly factual, evidence-backed answers." },
+          { name: "Inline Attribution Badges", description: "Embedding interactive reference markers ([1], [2]) directly within prose to anchor assertions to verifiable documents." },
+          { name: "Chain-of-Thought Transparency", description: "Exposing intermediate reasoning and search steps inside an accordion so users can evaluate logical integrity." }
+        ],
+        workflow: [
+          { name: "Query Vector Stores for Context Chunks", description: "Retrieve top matching document snippets with associated metadata (title, URL, timestamps)." },
+          { name: "Synthesize Answers with Citation Footnotes", description: "Instruct the model to reference source indices corresponding to cited propositions." },
+          { name: "Bind Interactive Citation Popovers", description: "Map citation tokens to rich hover cards displaying site favicons, page titles, and snippet excerpts." }
+        ],
+        pitfalls: [
+          { name: "Forcing Responses When Retrieval Confidence Is Poor", description: "Failing to implement similarity score floors prompts models to hallucinate answers instead of reporting missing data." },
+          { name: "Dangling Citations Without Navigable Sources", description: "Displaying dead reference numbers with unverified links severely damages platform credibility." }
+        ],
+        questions: [
+          "Should citation clicks navigate externally or open an internal split-pane viewer?",
+          "How will conflicting facts between enterprise documents and model priors be arbitrated?",
+          "Should the thinking process accordion mount open by default or remain collapsed?"
+        ],
+        example: 'Example: In a technical documentation assistant, answers append [1] markers. Hovering marker [1] reveals a 240px card with title "React 19 Migration Guide", domain "react.dev", and excerpt text.',
+        relatedDesigns: [
+          { id: "ai-source-citation", reason: "Provides inline citation chips with hoverable source preview cards." },
+          { id: "ai-thinking-accordion", reason: "Renders collapsible reasoning logs with elapsed time badges." }
+        ],
+        promptSnippet: "Create an AI answer layout with inline citation chips and hover preview cards in the specified area. Inside a container of width 100% and min-height 180px, render text with a [1] badge that triggers a 240px source preview popover on hover."
+      }
+    },
+    sources: [
+      { title: "Lewis et al., Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks", url: "https://arxiv.org/abs/2005.11401" },
+      { title: "Pinecone RAG Architecture Guide", url: "https://www.pinecone.io/learn/retrieval-augmented-generation/" }
+    ]
+  },
+  {
+    id: "ai-agent-state-memory-and-branching",
+    aliases: {
+      ko: ["\uB300\uD654 \uC138\uC158 \uC0C1\uD0DC", "\uC751\uB2F5 \uBC84\uC804 \uBD84\uAE30", "\uB300\uD654 \uBE0C\uB79C\uCE58", "\uC5D0\uC774\uC804\uD2B8 \uBA54\uBAA8\uB9AC", "\uC2AC\uB798\uC2DC \uBA85\uB839\uC5B4", "\uB300\uD654 \uB864\uBC31"],
+      en: ["conversation state", "response branching", "message history branches", "agent memory", "slash commands", "session rollback"]
+    },
+    useCases: {
+      ko: [
+        "\uB3D9\uC77C\uD55C \uC9C8\uBB38\uC5D0 \uB300\uD574 \uC5EC\uB7EC \uBC88 \uB2E4\uC2DC \uC0DD\uC131(Regenerate)\uD55C \uB2F5\uBCC0\uB4E4\uC744 \uBC84\uB9AC\uC9C0 \uC54A\uACE0 \uBC84\uC804\uBCC4\uB85C \uD0D0\uC0C9\uD560 \uB54C",
+        "\uB300\uD654 \uB3C4\uC911 \uD2B9\uC815 \uC2DC\uC810\uC73C\uB85C \uB3CC\uC544\uAC00 \uC0C8\uB85C\uC6B4 \uB300\uD654 \uC904\uAE30\uB97C \uBED7\uC5B4\uB098\uAC00\uB294 \uBD84\uAE30(Forking/Branching)\uB97C \uAD6C\uD604\uD560 \uB54C",
+        "\uC2AC\uB798\uC2DC(/) \uBA85\uB839\uC5B4\uB85C \uC0AC\uC804\uC5D0 \uC815\uC758\uB41C \uD504\uB86C\uD504\uD2B8 \uD15C\uD50C\uB9BF\uC744 \uBE60\uB974\uAC8C \uBD88\uB7EC\uC640 \uC138\uC158\uC5D0 \uC801\uC6A9\uD560 \uB54C",
+        "\uC138\uC158\uC774 \uAE38\uC5B4\uC9C8 \uB54C \uC0AC\uC6A9\uC790\uC758 \uD575\uC2EC \uC120\uD638\uB3C4\uC640 \uACFC\uAC70 \uC791\uC5C5 \uB9E5\uB77D\uC744 \uC7A5\uAE30 \uBA54\uBAA8\uB9AC\uB85C \uC694\uC57D \uBCF4\uAD00\uD560 \uB54C"
+      ],
+      en: [
+        "Retaining multiple regenerated answer versions rather than discarding past responses",
+        "Branching conversation threads from earlier turns to explore alternative paths",
+        "Invoking preset prompt templates via slash commands directly into active sessions",
+        "Summarizing user preferences and ongoing task state into persistent agent memory"
+      ]
+    },
+    keywords: {
+      ko: ["\uC138\uC158 \uC0C1\uD0DC", "\uC751\uB2F5 \uBD84\uAE30", "\uBC84\uC804 \uC2A4\uC704\uCC98", "\uC2AC\uB798\uC2DC \uCEE4\uB9E8\uB4DC", "\uC7A5\uAE30 \uBA54\uBAA8\uB9AC", "\uB864\uBC31", "\uC7AC\uC0DD\uC131 \uD788\uC2A4\uD1A0\uB9AC"],
+      en: ["session state", "response branching", "version switcher", "slash commands", "long-term memory", "rollback", "regeneration history"]
+    },
+    text: {
+      ko: {
+        domain: "AI \uC5D0\uC774\uC804\uD2B8 & LLM \uC11C\uBE44\uC2A4",
+        title: "\uC5D0\uC774\uC804\uD2B8 \uB300\uD654 \uC138\uC158 \uC0C1\uD0DC \uAD00\uB9AC\uC640 \uC751\uB2F5 \uBC84\uC804 \uBD84\uAE30 \uBC0F \uB864\uBC31",
+        summary: "\uBA40\uD2F0\uD134 \uC138\uC158 \uC0C1\uD0DC\uB97C \uBCF4\uC874\uD558\uACE0, \uC7AC\uC0DD\uC131\uB41C \uC5EC\uB7EC \uC751\uB2F5 \uBC84\uC804 \uAC04\uC758 \uD0D0\uC0C9\uACFC \uC2AC\uB798\uC2DC \uCEE4\uB9E8\uB4DC \uD15C\uD50C\uB9BF\uC744 \uC9C0\uC6D0\uD569\uB2C8\uB2E4.",
+        overview: "\uB300\uD654\uD615 AI \uC11C\uBE44\uC2A4\uC5D0\uC11C \uC0AC\uC6A9\uC790\uB294 \uB9C8\uC74C\uC5D0 \uB4E4\uC9C0 \uC54A\uB294 \uB2F5\uBCC0\uC744 \uB2E4\uC2DC \uC0DD\uC131(Retry)\uD558\uAC70\uB098, \uC774\uC804 \uD134\uC73C\uB85C \uB3CC\uC544\uAC00 \uB2E4\uB978 \uC9C8\uBB38\uC744 \uB358\uC9C0\uB294 \uC77C\uC774 \uD754\uD569\uB2C8\uB2E4. \uC774\uC804 \uB2F5\uBCC0\uC744 \uB36E\uC5B4\uC368\uBC84\uB9AC\uBA74 \uACFC\uAC70\uC758 \uC720\uC6A9\uD55C \uC815\uBCF4\uB97C \uC601\uAD6C\uD788 \uC783\uAC8C \uB429\uB2C8\uB2E4. \uB610\uD55C \uBC18\uBCF5\uC801\uC778 \uC791\uC5C5\uC744 \uB2E8\uCD95\uD558\uAE30 \uC704\uD574 \uC2AC\uB798\uC2DC(/) \uCEE4\uB9E8\uB4DC\uB85C \uC790\uC8FC \uC4F0\uB294 \uD15C\uD50C\uB9BF\uC744 \uD638\uCD9C\uD560 \uC218 \uC788\uC5B4\uC57C \uD558\uBA70, \uC7A5\uAE30 \uC138\uC158\uC5D0\uC11C\uB3C4 \uC0AC\uC6A9\uC790\uC758 \uC120\uD638 \uC2A4\uD0C0\uC77C\uACFC \uC791\uC5C5 \uC0C1\uD0DC\uB97C \uBA54\uBAA8\uB9AC\uB85C \uC720\uC9C0\uD574\uC57C \uD569\uB2C8\uB2E4.",
+        concepts: [
+          { name: "\uD2B8\uB9AC \uAE30\uBC18 \uB300\uD654 \uC0C1\uD0DC(Tree-structured Conversation State)", description: "\uB2E8\uC21C \uC120\uD615 \uBC30\uC5F4\uC774 \uC544\uB2CC \uBD80\uBAA8-\uC790\uC2DD \uB178\uB4DC\uB85C \uBA54\uC2DC\uC9C0\uB97C \uC800\uC7A5\uD574 \uD55C \uC9C8\uBB38\uC5D0\uC11C \uC5EC\uB7EC \uB2F5\uBCC0 \uBE0C\uB79C\uCE58\uAC00 \uBD84\uAE30\uD560 \uC218 \uC788\uB3C4\uB85D \uB370\uC774\uD130 \uAD6C\uC870\uB97C \uC124\uACC4\uD569\uB2C8\uB2E4." },
+          { name: "\uBC84\uC804 \uB124\uBE44\uAC8C\uC774\uC158(Version Pagination)", description: "\uB3D9\uC77C \uB178\uB4DC\uC5D0\uC11C \uBD84\uAE30\uB41C \uC5EC\uB7EC \uB2F5\uBCC0 \uBC84\uC804\uC744 < 1 / 3 > \uD615\uD0DC\uC758 \uCEE8\uD2B8\uB864\uB85C \uB118\uACA8\uBCF4\uBA70 \uD65C\uC131 \uBE0C\uB79C\uCE58\uB97C \uC804\uD658\uD569\uB2C8\uB2E4." },
+          { name: "\uC2AC\uB798\uC2DC \uCEE4\uB9E8\uB4DC \uD15C\uD50C\uB9BF(Slash Command Prompt Ingestion)", description: "\uC785\uB825\uCC3D\uC5D0\uC11C / \uD0A4\uB85C \uD2B8\uB9AC\uAC70\uB418\uB294 \uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8\uB97C \uD1B5\uD574 \uC77C\uAD00\uB41C \uACE0\uD488\uC9C8 \uC2DC\uC2A4\uD15C \uC9C0\uC2DC \uD504\uB86C\uD504\uD2B8\uB97C \uC8FC\uC785\uD569\uB2C8\uB2E4." }
+        ],
+        workflow: [
+          { name: "\uC7AC\uC0DD\uC131 \uC694\uCCAD \uC2DC \uC2E0\uADDC \uB178\uB4DC \uCD94\uAC00\uD558\uAE30", description: "\uAE30\uC874 \uB2F5\uBCC0\uC744 \uB36E\uC5B4\uC4F0\uC9C0 \uC54A\uACE0 \uBD80\uBAA8 \uC9C8\uBB38 \uB178\uB4DC\uC758 \uC790\uC2DD \uBC30\uC5F4\uC5D0 \uC0C8\uB85C\uC6B4 \uB2F5\uBCC0 \uBC84\uC804\uC744 \uCD94\uAC00\uD569\uB2C8\uB2E4." },
+          { name: "\uBC84\uC804 \uC2A4\uC704\uCC98 \uCEE8\uD2B8\uB864 \uB80C\uB354\uB9C1\uD558\uAE30", description: "\uB2F5\uBCC0 \uCE74\uB4DC \uD558\uB2E8\uC5D0 \uC774\uC804/\uB2E4\uC74C \uD654\uC0B4\uD45C\uC640 \uD604\uC7AC \uBC84\uC804 \uC778\uB371\uC2A4\uB97C \uD45C\uC2DC\uD574 \uC2AC\uB77C\uC774\uB4DC \uC804\uD658\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4." },
+          { name: "\uC2AC\uB798\uC2DC \uCEE4\uB9E8\uB4DC\uB85C \uD504\uB86C\uD504\uD2B8 \uC790\uB3D9 \uC644\uC131\uD558\uAE30", description: "\uC0AC\uC6A9\uC790\uAC00 /\uB97C \uC785\uB825\uD558\uBA74 \uCD94\uCC9C \uBA85\uB839 \uD31D\uC624\uBC84\uB97C \uC5F4\uACE0 \uC120\uD0DD \uC2DC \uD574\uB2F9 \uD15C\uD50C\uB9BF\uC73C\uB85C \uCE58\uD658\uD569\uB2C8\uB2E4." }
+        ],
+        pitfalls: [
+          { name: "\uC0C8 \uBC84\uC804 \uC0DD\uC131 \uC2DC \uC774\uC804 \uBC84\uC804\uC744 \uD30C\uAD34\uC801\uC73C\uB85C \uB36E\uC5B4\uC4F0\uAE30", description: "\uC0AC\uC6A9\uC790\uAC00 \uC774\uC804 \uBC84\uC804\uC758 \uCF54\uB4DC\uAC00 \uB354 \uB9C8\uC74C\uC5D0 \uB4E4\uC5C8\uC744 \uB54C \uB418\uB3CC\uC544\uAC08 \uC218 \uC5C6\uC73C\uBA74 \uD070 \uBD88\uB9CC\uC744 \uC57C\uAE30\uD569\uB2C8\uB2E4." },
+          { name: "\uAE4A\uC740 \uBD84\uAE30 \uD2B8\uB9AC\uB85C \uC778\uD55C \uC138\uC158 \uC0C1\uD0DC \uBCF5\uC7A1\uB3C4 \uD3ED\uC99D", description: "\uBB34\uC81C\uD55C \uBD84\uAE30 \uC2DC \uD074\uB77C\uC774\uC5B8\uD2B8 \uBA54\uBAA8\uB9AC\uC640 DB \uAD00\uACC4\uAC00 \uBCF5\uC7A1\uD574\uC9C0\uBBC0\uB85C \uB178\uB4DC \uAE4A\uC774 \uC81C\uD55C\uC774\uB098 \uBA85\uC2DC\uC801 \uAC00\uC9C0\uCE58\uAE30(Prune) \uC815\uCC45\uC744 \uB450\uC5B4\uC57C \uD569\uB2C8\uB2E4." }
+        ],
+        questions: [
+          "\uC0AC\uC6A9\uC790\uAC00 \uD2B9\uC815 \uC774\uC804 \uBC84\uC804\uC73C\uB85C \uC804\uD658\uD588\uC744 \uB54C, \uADF8 \uC774\uD6C4\uC5D0 \uC774\uC5B4\uC9C0\uB294 \uD6C4\uC18D \uB300\uD654\uB4E4\uB3C4 \uD574\uB2F9 \uBC84\uC804\uC5D0 \uB9DE\uCDB0 \uB3D9\uAE30\uD654\uB418\uB098\uC694?",
+          "\uC2AC\uB798\uC2DC \uBA85\uB839\uC5B4 \uBAA9\uB85D\uC744 \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uCEE4\uC2A4\uD140\uC73C\uB85C \uCD94\uAC00\uD558\uACE0 \uD3B8\uC9D1\uD560 \uC218 \uC788\uB098\uC694?",
+          "\uBE0C\uB77C\uC6B0\uC800\uB97C \uC0C8\uB85C\uACE0\uCE68\uD558\uAC70\uB098 \uC138\uC158\uC744 \uB098\uAC14\uB2E4 \uC640\uB3C4 \uC0DD\uC131\uB41C \uBAA8\uB4E0 \uBC84\uC804 \uD788\uC2A4\uD1A0\uB9AC\uAC00 \uC720\uC9C0\uB418\uB098\uC694?"
+        ],
+        example: "\uC608\uC2DC: \uB3D9\uC77C\uD55C \uCF54\uB4DC \uB9AC\uD329\uD1A0\uB9C1 \uC694\uCCAD\uC5D0 \uB300\uD574 \uAC04\uACB0\uD615, \uC0C1\uC138\uD615, \uD45C \uD615\uC2DD\uC758 3\uAC00\uC9C0 \uBC84\uC804\uC744 \uC0DD\uC131\uD55C \uB4A4, \uB2F5\uBCC0 \uCE74\uB4DC \uD558\uB2E8\uC758 < 1 / 3 > \uBC84\uD2BC\uC73C\uB85C \uC790\uC720\uB86D\uAC8C \uB118\uACA8\uBCF4\uBA70 \uAC00\uC7A5 \uC801\uD569\uD55C \uBC84\uC804\uC744 \uCC44\uD0DD\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
+        relatedDesigns: [
+          { id: "ai-message-branch", reason: "\uC7AC\uC0DD\uC131\uB41C \uB2F5\uBCC0 \uBC84\uC804\uB4E4\uC744 \uC774\uC804/\uB2E4\uC74C \uD654\uC0B4\uD45C\uB85C \uB118\uACA8\uBCF4\uB294 \uBE0C\uB79C\uCE58 \uC2A4\uC704\uCC98\uB97C \uC81C\uACF5\uD569\uB2C8\uB2E4." },
+          { id: "ai-slash-command", reason: "\uC2AC\uB798\uC2DC(/) \uBB38\uC790\uB85C \uC790\uC8FC \uC4F0\uB294 \uD504\uB86C\uD504\uD2B8 \uD15C\uD50C\uB9BF\uC744 \uBE60\uB974\uAC8C \uBD88\uB7EC\uC624\uB294 \uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8\uB97C \uAD6C\uC131\uD569\uB2C8\uB2E4." }
+        ],
+        promptSnippet: "\uC9C0\uC815\uD55C \uC601\uC5ED\uC5D0 < 1 / 3 > \uD615\uD0DC\uC758 \uBC84\uC804 \uB124\uBE44\uAC8C\uC774\uC158\uC744 \uAC16\uCD98 AI \uC751\uB2F5 \uBC84\uC804 \uBD84\uAE30 \uCE74\uB4DC\uB97C \uB9CC\uB4E4\uC5B4 \uC918. \uB108\uBE44 100%, \uCD5C\uC18C \uB192\uC774 180px \uCEE8\uD14C\uC774\uB108 \uC548\uC5D0 \uB2F5\uBCC0 \uB0B4\uC6A9\uACFC \uC774\uC804/\uB2E4\uC74C \uBC84\uD2BC\uC744 \uBC30\uCE58\uD558\uACE0, \uC0C8 \uBC84\uC804 \uC0DD\uC131 \uD074\uB9AD \uC2DC \uC2E0\uADDC \uBC84\uC804\uC774 \uBC30\uC5F4\uC5D0 \uCD94\uAC00\uB418\uBA70 \uC989\uC2DC \uC774\uB3D9\uD558\uAC8C \uD574 \uC918."
+      },
+      en: {
+        domain: "AI Agents & LLM Services",
+        title: "Agent Conversation Session State, Response Branching, and Rollback",
+        summary: "Manage multi-turn conversation states with non-destructive response version branching and slash command palettes.",
+        overview: "Users routinely regenerate AI answers or backstep to fork alternative lines of inquiry. Overwriting previous responses discards viable solutions permanently. Structuring session histories as trees preserves parallel branches, navigated via version switchers, while slash command palettes facilitate rapid ingestion of standard prompt templates.",
+        concepts: [
+          { name: "Tree-structured Session State", description: "Representing conversations as parent-child nodes rather than flat lists to support multiple branching response variants." },
+          { name: "Response Version Pagination", description: "Navigating parallel response alternatives using < 1 / 3 > controls to switch the active branch." },
+          { name: "Slash Command Palette Ingestion", description: 'Surfacing command popovers on "/" keypress to insert structured prompt templates seamlessly.' }
+        ],
+        workflow: [
+          { name: "Append New Node on Regeneration", description: "Record newly generated responses as sibling nodes beneath the parent prompt rather than mutating existing records." },
+          { name: "Render Branch Pagination Controls", description: "Display previous/next selectors and version tallies at the base of message bubbles to toggle states." },
+          { name: "Trigger Slash Palette Autocompletion", description: 'Open a floating command selector when "/" is typed, substituting prompts upon selection.' }
+        ],
+        pitfalls: [
+          { name: "Destructively Overwriting Prior Generations", description: "Eliminating earlier generations frustrates users seeking snippets from previous completions; retain versions in memory." },
+          { name: "Unbounded Tree Memory Growth", description: "Unchecked branching inflates client memory and serialization complexity; establish pragmatic pruning boundaries." }
+        ],
+        questions: [
+          "Does navigating to an earlier sibling version automatically switch the downstream conversational context?",
+          "Can users configure custom personal slash command macros?",
+          "Does session persistence retain full branch histories across page reloads?"
+        ],
+        example: "Example: A developer requests three refactoring variants (concise, detailed, tabular) and navigates among them using < 1 / 3 > controls before deciding which variant to keep.",
+        relatedDesigns: [
+          { id: "ai-message-branch", reason: "Enables navigating across multiple response generations with version pagination." },
+          { id: "ai-slash-command", reason: "Provides a slash command menu to autocomplete common prompt instructions." }
+        ],
+        promptSnippet: "Create a response branch switcher card with < 1 / 3 > version navigation in the specified area. Inside a container of width 100% and min-height 180px, render message content and pagination controls to switch between regenerated responses."
+      }
+    },
+    sources: [
+      { title: "LangChain Chat History & Memory Concepts", url: "https://python.langchain.com/docs/concepts/chat_history/" },
+      { title: "Vercel AI SDK Core Concepts", url: "https://sdk.vercel.ai/docs/concepts" }
+    ]
+  }
+];
+
 // ../../packages/catalog/src/domain-knowledge.ts
 var DOMAIN_KNOWLEDGE = [
   ...EDUCATION_KNOWLEDGE,
@@ -29385,7 +30173,8 @@ var DOMAIN_KNOWLEDGE = [
   ...LOGISTICS_KNOWLEDGE,
   ...FINTECH_KNOWLEDGE,
   ...HEALTHCARE_KNOWLEDGE,
-  ...AUTOMATION_KNOWLEDGE
+  ...AUTOMATION_KNOWLEDGE,
+  ...AI_KNOWLEDGE
 ];
 
 // ../../packages/catalog/src/domain-knowledge/search-vocabulary.ts
@@ -29766,7 +30555,7 @@ function searchTechniques(options = {}) {
 // package.json
 var package_default = {
   name: "@keke1933/vibe-dictionary-mcp",
-  version: "0.11.0",
+  version: "0.12.0",
   license: "MIT",
   author: "leejh96",
   description: "Read-only local MCP for searching Vibe Dictionary techniques and retrieving implementation prompts",
@@ -29778,7 +30567,13 @@ var package_default = {
   },
   homepage: "https://leejh96.github.io/vibe-dictionary/",
   bugs: "https://github.com/leejh96/vibe-dictionary/issues",
-  keywords: ["mcp", "model-context-protocol", "ui", "prompts", "vibe-coding"],
+  keywords: [
+    "mcp",
+    "model-context-protocol",
+    "ui",
+    "prompts",
+    "vibe-coding"
+  ],
   publishConfig: {
     access: "public",
     registry: "https://registry.npmjs.org/"
@@ -29786,7 +30581,11 @@ var package_default = {
   bin: {
     "vibe-dictionary-mcp": "dist/index.js"
   },
-  files: ["dist/index.js", "README.md", "LICENSE"],
+  files: [
+    "dist/index.js",
+    "README.md",
+    "LICENSE"
+  ],
   engines: {
     node: ">=22.12.0"
   },
@@ -29808,7 +30607,7 @@ var package_default = {
 
 // src/server.ts
 var localeSchema = z.enum(["ko", "en"]).default("ko").describe("Output language; search matches both languages regardless of locale.");
-var domainSchema = z.enum(["ui", "motion", "layout", "style", "pixelart", "video"]);
+var domainSchema = z.enum(["ui", "motion", "layout", "style", "pixelart", "video", "ai"]);
 var categoryIds = [...new Set(Object.values(DOMAIN_CATEGORIES).flatMap((categories) => categories.map(({ id }) => id)))].filter((id) => id !== "all");
 var categorySchema = z.enum(categoryIds);
 var targetSchema = z.enum(TARGETS);
@@ -29856,8 +30655,8 @@ function result(output) {
 function createServer() {
   const server = new McpServer({ name: package_default.name, version: package_default.version }, {
     instructions: [
-      "Find UI, graphics, layout, style, pixel art and video techniques. Search for a few candidates, compare summaries, useCases and matchedOn fields, then get_technique by exact ID only for the selected prompts.",
-      'Before choosing designs for an education, community, commerce, booking, subscription, collaboration, customer-support, auth/account, notification, CMS/publishing, file/media, marketplace, event/check-in, recruiting/ATS, analytics, security/RBAC, logistics, fintech/wallet, healthcare or form/workflow-automation service, use search_domain_knowledge with a short domain or workflow phrase such as "LMS", "\uD68C\uC6D0 \uC804\uC6A9", "\uBD80\uBD84 \uD658\uBD88", "\uD0C0\uC784\uC2AC\uB86F", "\uC815\uAE30 \uACB0\uC81C", "\uCE78\uBC18", "\uD5EC\uD504\uB370\uC2A4\uD06C", "RBAC", "\uD569\uD3EC\uC7A5" or "\uBCF5\uC2DD \uC6D0\uC7A5". Compare summaries, useCases and matchedOn fields, then call get_domain_knowledge by a returned ID for concepts, workflows, pitfalls, open decisions, sources, related technique IDs and a reference prompt. Search supports bilingual aliases and ranked keyword matching, not semantic AI. If no entry fits, retry fewer terms or a synonym, or browse with an empty query. Workflows and examples are design references, not established policies. Do not assume answers to the open questions. Related designs do not implement the domain rules.',
+      "Find UI, graphics, layout, style, pixel art, video and AI native techniques. Search for a few candidates, compare summaries, useCases and matchedOn fields, then get_technique by exact ID only for the selected prompts.",
+      'Before choosing designs for an education, community, commerce, booking, subscription, collaboration, customer-support, auth/account, notification, CMS/publishing, file/media, marketplace, event/check-in, recruiting/ATS, analytics, security/RBAC, logistics, fintech/wallet, healthcare, form/workflow-automation or AI agent service, use search_domain_knowledge with a short domain or workflow phrase such as "LMS", "\uD68C\uC6D0 \uC804\uC6A9", "\uBD80\uBD84 \uD658\uBD88", "\uD0C0\uC784\uC2AC\uB86F", "\uC815\uAE30 \uACB0\uC81C", "\uCE78\uBC18", "\uD5EC\uD504\uB370\uC2A4\uD06C", "RBAC", "\uD569\uD3EC\uC7A5", "\uBCF5\uC2DD \uC6D0\uC7A5" or "\uD1A0\uD070 \uC608\uC0B0". Compare summaries, useCases and matchedOn fields, then call get_domain_knowledge by a returned ID for concepts, workflows, pitfalls, open decisions, sources, related technique IDs and a reference prompt. Search supports bilingual aliases and ranked keyword matching, not semantic AI. If no entry fits, retry fewer terms or a synonym, or browse with an empty query. Workflows and examples are design references, not established policies. Do not assume answers to the open questions. Related designs do not implement the domain rules.',
       "The calling assistant interprets the user request and generates short Korean or English search phrases for one effect at a time. The MCP performs bilingual weighted keyword/alias matching and runs no AI model. Extract concrete effects and targets; omit uncertain filters. For broad requests such as a clean or premium webpage, use the stated purpose and preferences; do not equate an adjective with one fixed style. Ask for clarification when missing context prevents a meaningful choice.",
       "For requests combining techniques, search distinct needs such as style, layout and interaction separately. Retrieve the selected prompts, then decide where each technique applies and compare their visual treatment, inputs and timing for conflicts. The tools do not compose techniques or check compatibility; the calling assistant makes those judgments.",
       "Use target/trigger filters only for required demo inputs. Compare summaries and useCases against the original request. If candidates are missing or unsuitable, retry a synonym, the other language or fewer modifiers, and remove only filters that are not required. Reset offset to zero when changing the query or filters. Do not select an unrelated result merely because it ranks first; clarify if useful candidates still cannot be found. Scores are not probabilities. locale selects output language independently of search language. These read-only tools return reference data only."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keke1933/vibe-dictionary-mcp",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "author": "leejh96",
   "description": "Read-only local MCP for searching Vibe Dictionary techniques and retrieving implementation prompts",
@@ -12,7 +12,13 @@
   },
   "homepage": "https://leejh96.github.io/vibe-dictionary/",
   "bugs": "https://github.com/leejh96/vibe-dictionary/issues",
-  "keywords": ["mcp", "model-context-protocol", "ui", "prompts", "vibe-coding"],
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "ui",
+    "prompts",
+    "vibe-coding"
+  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -20,7 +26,11 @@
   "bin": {
     "vibe-dictionary-mcp": "dist/index.js"
   },
-  "files": ["dist/index.js", "README.md", "LICENSE"],
+  "files": [
+    "dist/index.js",
+    "README.md",
+    "LICENSE"
+  ],
   "engines": {
     "node": ">=22.12.0"
   },