chatkit-backend-adapter

nadeemsangrasi's avatarfrom nadeemsangrasi

Modify OpenAI ChatKit starter to use FastAPI backend instead of OpenAI API, including citation support and error handling.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 17, 2025⬇️2downloads
[API Helpers]

When & Why to Use This Skill

This Claude skill automates the transition of the OpenAI ChatKit starter from a direct OpenAI API dependency to a custom FastAPI backend. It streamlines the refactoring process by updating API endpoints, implementing citation support in the UI, and ensuring robust error handling and state management. This allows developers to deploy private or customized LLM backends while maintaining the high-quality ChatKit frontend experience.

Use Cases

  • Migrating from OpenAI API to a self-hosted LLM backend using FastAPI for enhanced data privacy and cost management.
  • Integrating RAG (Retrieval-Augmented Generation) capabilities into ChatKit by adding backend-driven citation and source display features.
  • Standardizing error handling and loading states across a ChatKit-based application to improve user experience during backend communication.
  • Refactoring existing frontend codebases to support custom API response formats and authentication headers without breaking component architecture.
nameChatKit Backend Adapter
descriptionModify OpenAI ChatKit starter to use FastAPI backend instead of OpenAI API, including citation support and error handling.

ChatKit Backend Adapter

Instructions

  1. Replace OpenAI ChatKit client with custom backend calls:

    • Modify API calls to fetch from /chat endpoint instead of OpenAI
    • Update authentication and headers
    • Handle response format differences
    • Maintain ChatKit component compatibility

  2. Add citation support to UI:

    • Display source information from backend
    • Format citations properly in messages
    • Link citations to original sources
    • Handle citation styling consistently

  3. Implement proper error and loading states:

    • Handle backend API errors gracefully
    • Show loading indicators during requests
    • Display error messages to users
    • Implement retry functionality

  4. Maintain ChatKit internal states:

    • Preserve existing component architecture
    • Update state management for new backend
    • Handle message history properly
    • Maintain conversation flow

  5. Follow Context7 MCP documentation:

    • Do not call OpenAI API for inference
    • Follow deterministic UI patch patterns
    • Include proper error handling
    • Maintain ChatKit component compatibility

Examples

Input: "Adapt ChatKit to use custom backend" Output: Patches ChatKit frontend files to replace OpenAI API calls with custom backend endpoints.