Agent skill · software engineering · aiskillstore
chatkit-widget
Use when integrating OpenAI/ChatKit chat widgets into Next.js/React applications. Triggers for: embedding chat widgets, configuring widget appearance, implementing event handlers, setting up authenticated chat access, or customizing widget branding. NOT for: building custom chat UIs from scratch or backend AI model configuration.
Why this skill is useful
Provides specific integration patterns and configuration details for embedding ChatKit widgets in Next.js applications that the AI wouldn't reliably generate on its own.
What it needs
Requires next, react installed locally. Requires openai account access. About 8k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
ChatKit Widget Integration Skill Expert integration of OpenAI/ChatKit chat widgets into Next.js/React applications with secure configuration and custom branding. Quick Reference Task File/Component ------ ---------------- Widget component components/chat/ChatWidget.tsx Configuration config/chatkit.config.ts Layout integration app/layout.tsx or pages/app.tsx API proxy app/api/chatkit/route.ts Project Structure Widget Configuration Configuration File Environment Variables Widget Component Main Widget (Lazy Loaded) Hook for Widget Control Secure API Proxy Backend Proxy Route Layout Integration Root Layout (App Router) Page Router (app.tsx) Role-Based Chat Access Dark Mode Support Event Handling Quality Checklist [ ] Mobile-friendly: Widget doesn't overlap content (proper z-index, positioning) [ ] No hardcoded API keys: All secrets from environment variables [ ] Dark mode compatible: Theme adjusts to system preference [ ] Performance: Widget lazy-loaded, doesn't block core content [ ] SSR-safe: Dynamic imports with ssr: false [ ] Role-based access: Only authorized users see widget [ ] Privacy-compliant: Minimal event logging, no PII in logs Integration Points Skill Integration ------- ------------- @frontend-nextjs-app-router Layout integration, dynamic imports @tailwind-css Styling, dark mode support @env-config Environment variables management @auth-integration Role-based access control @error-handling Error boundaries for widget errors Customization Examples School Branding Helpdesk-Specific Documentation Template tsx import { ChatWidget } from "@/components/chat/ChatWidget"; function SupportPage() { return ( <div> <h1>Support</h1> <ChatWidget userRole="student" /> </div> ); }
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/chatkit-widget