building-chat-interfaces

name	building-chat-interfaces
description	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.

Building Chat Interfaces

Build production-grade AI chat interfaces with custom backend integration.

Quick Start

# 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

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() -> AsyncIterator[ThreadStreamEvent]:
          input_user_message:
            

        
        previous_items =  .store.load_thread_items(
            thread., after=, limit=, order=, context=context
        )

        
        history_str = .join([
            
             item  (previous_items.data)
        ])

        
        user_info = context.metadata.get(, {})
        page_context = context.metadata.get(, {})

        
        agent = Agent(
            name=,
            tools=[your_search_tool],
            instructions=,
        )

        
        result = Runner.run_streamed(agent, input_user_message.content)
          event  stream_agent_response(context, result):
             event