Agent skill · software engineering · aiskillstore
building-chat-interfaces
Build AI chat interfaces with custom backends, authentication, and context injection. Use when integrating chat UI with AI agents, adding auth to chat, injecting user/page context, or implementing httpOnly cookie proxies. Covers ChatKitServer, useChatKit, and MCP auth patterns. NOT when building simple chatbots without persistence or custom agent integration.
Why this skill is useful
Provides specific backend and frontend integration patterns for building AI chat interfaces that the AI wouldn't reliably generate on its own.
What it needs
Requires npm, python installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Building Chat Interfaces Build production-grade AI chat interfaces with custom backend integration. 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 When auth tokens are in httpOnly cookies (can't be read by JavaScript): Script Loading Strategy --- MCP Tool Authentication MCP protocol doesn't forward auth headers. Pass credentials via system prompt: --- Common Pitfalls Issue Symptom Fix ------- --------- ----- History not in prompt Agent doesn't remember conversation Include history as string in system prompt Context not transmitted Agent missing user/page info Add to request metadata, extract in backend Script not loaded Component fails to render Detect script loading, wait before rendering Auth headers missing Backend rejects requests Use custom fetch interceptor httpOnly cookies Can't read token from JS Create server-side API route proxy First request slow 7+ second delay Pre-warm database connection pool --- Verification Run: python3 scripts/verify.py Expected: ✓ building-chat-interfaces skill ready If Verification Fails 1. Check: references/ folder has chatkit-integration-patterns.md 2. Stop and report if still failing Related Skills (Tiered System) streaming-llm-responses - Tier 2: Response lifecycle, progress updates, client effects building-chat-widgets - Tier 3: Interactive widgets, entity tagging, composer tools fetching-library-docs - ChatKit docs: --library-id /openai/chatkit --topic useChatKit References references/chatkit-integration-patterns.md - Complete patterns with evidence references/nextjs-httponly-proxy.md - Next.js cookie proxy patterns
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/building-chat-interfaces