chatkit-widgetlisted
Install: claude install-skill aiskillstore/marketplace
# 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
```
frontend/
├── app/
│ ├── api/
│ │ └── chatkit/
│ │ └── route.ts # Secure API proxy
│ ├── components/
│ │ └── chat/
│ │ ├── ChatWidget.tsx # Main widget component
│ │ └── ChatButton.tsx # Custom trigger button
│ └── layout.tsx # Root layout with widget
├── lib/
│ └── chatkit.ts # Utility functions
└── config/
└── chatkit.config.ts # Widget configuration
```
## Widget Configuration
### Configuration File
```typescript
// frontend/config/chatkit.config.ts
import { ChatKitConfig } from "@/lib/chatkit";
interface ChatKitConfig {
// Public configuration (safe to expose)
projectId: string;
publicKey: string;
// Server-side configuration (fetched from API)
apiUrl: string;
// Branding
theme: {
primaryColor: string;
secondaryColor: string;
textColor: string;
backgroundColor: string;
borderRadius: string;
};
// Positioning
position: {
bottom: string;
right: string;
mobi