المهارات building-chat-interfaces
💬

building-chat-interfaces

آمن ⚡ يحتوي على سكربتات

打造 AI 聊天介面

建立 AI 聊天介面需要自訂後端、身分驗證與情境注入。本技能提供 ChatKitServer、useChatKit hooks 與 httpOnly cookie 代理的可上線模式，協助打造安全的聊天體驗。

يدعم: Claude Code(CC)
🥈 77 فضي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "building-chat-interfaces". Build a ChatKit backend with authentication

النتيجة المتوقعة:

  • 後端：具 respond() method 的自訂 ChatKitServer 類別
  • 透過 JWKS endpoint 驗證 JWT
  • 帶預熱的資料庫連線池
  • 從請求 metadata 擷取使用者情境
  • 前端：使用自訂 fetch 為 useChatKit 加入驗證標頭
  • Web Components 的腳本載入偵測

استخدام "building-chat-interfaces". Create a Next.js API proxy for httpOnly cookies

النتيجة المتوقعة:

  • 伺服器端 route 讀取 httpOnly cookies
  • 將 Bearer token 加入 Authorization 標頭
  • SSE 串流回應處理
  • 對未驗證請求的錯誤處理

التدقيق الأمني

آمن
v5 • 1/16/2026

This is a documentation-only skill containing code examples for ChatKit integration. All static findings are false positives: the scanner flagged markdown code block delimiters as shell commands, legitimate AI terminology as C2 keywords, and RS256 (a strong algorithm) as weak crypto. No actual command execution, no credential exfiltration, no malicious network calls. The verification script only checks file existence.

5
الملفات التي تم فحصها
909
الأسطر التي تم تحليلها
1
النتائج
5
إجمالي عمليات التدقيق

عوامل الخطر

⚡ يحتوي على سكربتات (1)
scripts/verify.py:1-21
تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

64
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
31
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

建置聊天後端

建立具有自訂代理的 ChatKitServer 以支援 AI 對話

整合聊天 UI

以驗證與情境注入將 React 前端連接後端

設定驗證代理

設定 Next.js API route 以安全代理 httpOnly cookies

جرّب هذه الموجهات

基本聊天伺服器 
Create a ChatKitServer class that extends ChatKitServer with a custom respond() method. Include conversation history loading and basic agent integration.
驗證攔截器 
Configure useChatKit with a custom fetch function that adds X-User-ID header and injects userInfo/pageContext into request metadata.
Cookie 代理 
Create a Next.js API route at /api/chatkit that reads auth_token from httpOnly cookies and proxies requests to the ChatKit backend with Bearer token.
情境注入 
Show how to extract user metadata and page context from request and inject into the agent system prompt for personalized responses.

أفضل الممارسات

  • 延伸 ChatKitServer 基底類別，而非取代核心協定處理
  • 將對話歷史以字串形式包含在 system prompt 中，提供代理情境
  • 在啟動時預熱資料庫連線以避免首次請求延遲

تجنب

  • 在前端程式碼中硬編碼驗證權杖
  • 略過腳本載入偵測導致渲染失敗
  • 多租戶情境中未依 user_id 過濾 store 操作

الأسئلة المتكررة

我需要哪些 ChatKit 套件？
後端：chatkit-sdk 與 agents。前端：@openai/chatkit-react 的 React hooks。
我該如何處理 httpOnly cookies？
建立 Next.js 伺服器端 API route 讀取 cookies，並為後端請求加入 Authorization 標頭。
不使用 ChatKit 也可以嗎？
模式可通用。核心概念適用於任何使用 HTTP/SSE 串流的聊天後端。
使用這些模式我的資料安全嗎？
可以。模式包含正確的驗證、透過 RequestContext 的使用者隔離，以及安全的 cookie 處理。
為什麼第一個請求很慢？
資料庫連線池冷啟動。請在啟動時用 SELECT 1 查詢預熱連線池。
這和簡單聊天機器人相比如何？
此技能涵蓋企業級模式：驗證、持久化、情境注入，而非基本無狀態聊天機器人。

تفاصيل المطور

المؤلف

Asmayaseen

الترخيص

MIT

المستودع

https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/building-chat-interfaces

مرجع

main

بنية الملفات

📁 references/

📄 chatkit-integration-patterns.md

📄 nextjs-httponly-proxy.md

📁 scripts/

📄 verify.py

📄 SKILL.md