building-chat-interfaces_skill

Overview

This skill teaches how to build production-grade AI chat interfaces that integrate a custom backend, authentication, and context injection. It covers connecting a React front end using useChatKit to a Python ChatKitServer, persisting conversations, handling JWT/JWKS auth, and proxying httpOnly cookies. The guidance targets setups that need agent integration, streaming responses, and context-aware prompts.

How this skill works

The front end uses useChatKit with a customizable fetch interceptor to inject auth headers and page/user context into request metadata. The backend runs a ChatKitServer.respond implementation that loads recent thread history, extracts metadata, composes agent instructions (including context), and streams agent output back to the client. Optional components include async DB connection pooling, JWT/JWKS validation, Next.js httpOnly cookie proxies, and MCP tool credential passing via system prompts.

When to use it

• Integrating a chat UI with custom AI agents or tools that require context-aware prompts.
• Adding robust authentication (JWT/JWKS) or supporting httpOnly cookie flows via server proxy.
• Streaming agent responses to the client with conversation persistence in a database.
• Injecting page and user context (metadata) into prompts for personalized replies.
• When MCP tools require embedded credentials passed through system instructions.

Best practices

• Always include recent conversation history in the agent's system prompt to maintain state.
• Inject user and page metadata on the client and extract it server-side to inform agent instructions.
• Pre-warm async DB connection pools on startup to avoid slow first requests.
• Use a server-side proxy for httpOnly cookies to forward auth tokens to the backend securely.
• When MCP tools don’t forward headers, embed required credentials in the system prompt with clear constraints.

Example use cases

• A support chat that includes the current article title and user profile in the prompt for tailored answers.
• A sales assistant that streams responses while using a search tool and persists threaded history to Postgres.
• A Next.js app that proxies httpOnly auth cookies through an API route and forwards SSE streams to the browser.
• An agent that calls MCP tools requiring user-specific credentials passed securely in the system prompt.