--- name: configure-chatkit description: This skill should be used when setting up OpenAI ChatKit in Next.js, adding domain allowlist to environment, building chat UI component, integrating with \/api\/chat endpoint, displaying history and tool calls visually, and integrating Better Auth session. --- # Configure ChatKit Skill This skill provides guidance for integrating OpenAI ChatKit in a Next.js frontend. ## Purpose Setup OpenAI ChatKit in Next.js: - Add domain allowlist key to environment - Build chat UI component - POST to \/api\/chat endpoint with conversation_id - Display conversation history and tool calls visually - Integrate Better Auth session ## When to Use Use this skill when: - Building the chatbot frontend UI - Integrating ChatKit components - Setting up chat API communication - Displaying tool execution results - Connecting frontend with authenticated backend ## Capabilities - **ChatKit Integration**: Use OpenAI ChatKit for chat UI - **Environment Configuration**: Set up domain allowlist - **API Communication**: POST to chat endpoint with conversation context - **Visual Feedback**: Display history, tool calls, and results - **Authentication**: Integrate Better Auth session ## Environment Setup ```env # .env.local NEXT_PUBLIC_CHAT_KIT_PUBLIC_KEY=your_chatkit_public_key CHAT_KIT_SECRET=your_chatkit_secret_key CHAT_KIT_INSTANCE_ID=your_instance_id NEXT_PUBLIC_ALLOWED_DOMAINS=localhost:3000,yourdomain.com ``` ## Implementation Pattern ### Chat Component ```tsx "use client"; import { useState, useEffect, useRef } from "react"; import { useChat } from "@openai\/chatkit"; import { useSession } from "better-auth\/react"; interface ChatWidgetProps { conversationId?: string; } export function ChatWidget({ conversationId }: ChatWidgetProps) { const { data: session } = useSession(); const [input, setInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const messagesEndRef = useRef(null); const { messages, sendMessage, isLoading: chatLoading, error } = useChat({ apiUrl: "\/api\/chat", conversationId, auth: { getToken: () => session?.accessToken } }); const handleSend = async () => { if (!input.trim() || isLoading) return; setIsLoading(true); try { await sendMessage(input); setInput(""); } catch (err) { console.error("Failed to send message:", err); } finally { setIsLoading(false); } }; return (

{messages.map((msg) => ( ))}

<\/div>

setInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSend()} placeholder="Ask me to manage your tasks..." disabled={isLoading} \/>