building-chat-interfaces
Build AI chat interfaces with custom backends, authentication, and context injection. Use when integrating chat UI with AI agents, adding auth, or injecting user/page context. Covers ChatKitServer, useChatKit, and MCP auth patterns.
npx skills add majiayu000/claude-skill-registry --skill building-chat-interfaces --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Building Chat Interfaces Build production-grade AI chat interfaces with custom backend integration. ## Quick Start ```bash # Backend (Python) uv add chatkit-sdk agents httpx # Frontend (React) npm install @openai/chatkit-react ``` --- ## Core Architecture ``` Frontend (React) Backend (Python) ┌─────────────────┐ ┌─────────────────┐ │ useChatKit() │───HTTP/SSE───>│ ChatKitServer │ │ - custom fetch │ │ - respond() │ │ - auth headers │ │ - store │ │ - page context │ │ - agent │ └─────────────────┘ └─────────────────┘ ``` --- ## Backend Patterns ### 1. ChatKit Server with Custom Agent ```python from chatkit.server import ChatKitServer from chatkit.agents import stream_agent_response from agents import Agent, Runner class CustomChatKitServer(ChatKitServer[RequestContext]): """Extend ChatKit server with custom agent.""" async def respond( self, thread: ThreadMetadata, input_user_message: UserMessageItem | None, context: RequestContext, ) -> AsyncIterator[ThreadStreamEvent]: if not input_user_message: return # Load conversation history previous_items = await self.store.load_thread_items( thread.id, after=None, limit=10, order="desc", context=context ) # Build history string for prompt h
- Quick Start
- Core Architecture
- Backend Patterns
- 1. ChatKit Server with Custom Agent
- 2. Database Persistence
- 3. JWT/JWKS Authentication
- Frontend Patterns
- 1. Custom Fetch Interceptor
- 2. Page Context Extraction
- 3. Script Loading Detection
- Next.js Integration
- httpOnly Cookie Proxy
- Script Loading Strategy
- MCP Tool Authentication
Backend (Python) uv add chatkit-sdk agents httpx Frontend (React) npm install @openai/chatkit-react
What does the building-chat-interfaces skill do?
Build AI chat interfaces with custom backends, authentication, and context injection. Use when integrating chat UI with AI agents, adding auth, or injecting user/page context. Covers ChatKitServer, useChatKit, and MCP auth patterns.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill building-chat-interfaces --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.