chatkit-integration

Integrate ChatKit with custom backends for authenticated conversational interfaces.

1|Updated Feb 19, 2026
One-click install
npx skills add https://github.com/ayeshakhalid192007-dev/humanoid-ai-studio --skill chatkit-integration-ayeshakhalid192007-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chatkit-integration
Source: https://github.com/ayeshakhalid192007-dev/humanoid-ai-studio/tree/main/.claude/skills/chatkit-integration
Command: npx skills add https://github.com/ayeshakhalid192007-dev/humanoid-ai-studio --skill chatkit-integration-ayeshakhalid192007-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Integrates the OpenAI ChatKit UI with custom backends and domain-specific AI agents so conversational requests carry authentication, user/page context, and conversation history for accurate agent responses.

Core Features & Use Cases

  • Backend adapter: Extend ChatKitServer and implement respond() to load thread history, extract metadata, build a single prompt for agents, and stream agent responses.
  • Frontend integration: Provide a custom fetch interceptor to add auth headers and metadata, detect and wait for ChatKit script loading, extract page context and support text-selection "Ask" flows in React/Docusaurus apps.
  • Production readiness: Support conversation persistence, multi-tenant isolation via RequestContext, graceful degradation when services fail, and connection pool warmup to avoid long cold starts.
  • Use Case: Embed ChatKit in an educational Docusaurus site so authenticated learners can ask questions about selected page content and have those conversations persisted per user.

Quick Start

Add a custom fetch wrapper that injects X-User-ID and pageContext into ChatKit requests and implement ChatKitServer.respond to assemble history and run your agent.

Frequently Asked Questions about chatkit-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add authentication headers to ChatKit requests in a React application?

To add authentication headers to ChatKit requests, you implement a custom fetch wrapper that injects headers like X-User-ID and metadata into the outgoing requests. This ensures your conversational interface securely identifies users before routing messages to agents.

How do I route ChatKit user messages to custom AI agents with conversation history?

You route ChatKit messages to custom agents by extending ChatKitServer and implementing the respond() method. This method loads thread history, extracts page metadata, builds a single prompt for your agents, and streams the generated responses back to the UI.

Does ChatKit integration support multi-tenant isolation for persisted conversations?

ChatKit integration supports multi-tenant isolation using RequestContext to separate user data. It provides conversation persistence, ensuring that authenticated users have their threads and history maintained independently across the web application.

What is the best way to inject page context into ChatKit conversations on a Docusaurus site?

The best way to inject page context is using a frontend integration that detects ChatKit script loading and extracts page content. It supports text-selection "Ask" flows, allowing authenticated learners to ask questions about specific selected content directly within Docusaurus apps.

How do you handle graceful degradation when ChatKit agent services fail?

Graceful degradation when ChatKit agent services fail is handled through production readiness features within the backend adapter. It ensures the conversational interface fails safely without crashing, maintaining application stability when domain-specific agents are unavailable.

Can I use connection pool warmup to avoid long cold starts in ChatKit backends?

You can use connection pool warmup to avoid long cold starts in ChatKit backends. This production readiness feature pre-initializes database connections, ensuring conversation persistence and agent routing respond quickly when the first user messages arrive.