chatkit-js

Integrate ChatKit UI components into Next.js apps with theming and auth.

Updated Jan 2, 2026

Search Tags:#theming #authentication #frontend #OpenAI #Next.js #chatkit

Ready to run

npx skills add https://github.com/Tahasaif3/Hackathon-Todo-AI-Evolution --skill chatkit-js-tahasaif3

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chatkit-js
Source: https://github.com/Tahasaif3/Hackathon-Todo-AI-Evolution/tree/main/.claude/skills/chatkit-js
Command: npx skills add https://github.com/Tahasaif3/Hackathon-Todo-AI-Evolution --skill chatkit-js-tahasaif3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to quickly integrate the OpenAI ChatKit UI components into Next.js applications, delivering a polished chat experience with minimal boilerplate.

Core Features & Use Cases

Embeds the ChatKit widget into Next.js pages and routes with minimal setup.
Supports theming, custom API backend configuration, conversation history, and authentication token injection.
Use Case: add a customer-support chat or task assistant to an existing Next.js site without building a chat UI from scratch.

Quick Start

Install the ChatKit React package and render the ChatKit component with a configured API endpoint. Set environment variables NEXT_PUBLIC_CHAT_API_URL and NEXT_PUBLIC_OPENAI_DOMAIN_KEY as needed.

Frequently Asked Questions about chatkit-js

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

FAQPage Schema

How do I embed OpenAI ChatKit UI into a Next.js app?▼

To embed OpenAI ChatKit UI into a Next.js app, install the @openai/chatkit-react package and render the ChatKit component with a configured API endpoint. Set environment variables NEXT_PUBLIC_CHAT_API_URL and NEXT_PUBLIC_OPENAI_DOMAIN_KEY as needed.

Can I customize theming and authentication for the ChatKit widget in Next.js?▼

Yes, you can customize theming and authentication for the ChatKit widget in Next.js. The Skill supports custom theming, conversation history tracking, and authentication token injection via an optional custom fetch configuration.

Do I need a backend API to use OpenAI ChatKit components in my frontend?▼

Yes, a compatible backend API is required to use OpenAI ChatKit components in your frontend. The ChatKit widget needs a configured API endpoint to handle requests and process conversation history.

What is the best way to add a customer support chat to a Next.js site without building a UI from scratch?▼

The best way to add a customer support chat to a Next.js site without building a UI from scratch is integrating the OpenAI ChatKit widget. It provides a polished chat experience with minimal boilerplate setup.

Does OpenAI ChatKit support conversation history tracking in Next.js routes?▼

Yes, OpenAI ChatKit supports conversation history tracking in Next.js routes. The Skill covers embedding the widget and configuring history tracking to maintain chat context across your application.

How does injecting an authentication token work with the ChatKit API backend?▼

Injecting an authentication token with the ChatKit API backend works by using an optional custom fetch configuration. This allows you to securely pass authentication credentials when the ChatKit component communicates with your backend.