Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
Passed 13 of 21 test cases with the skill, and 6 of 21 without it.
and 8 more in the full report
9 fixed5 passed either way7 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 9 test cases the skill fixed. Same model, same prompt, with and without the skill.
Write a styled-jsx global block inside a React component overriding #chatkit-container positioning for mobile viewports below 768px.
| Checked | Without skill | With skill |
|---|---|---|
| Applies CSS overrides inside a @media (max-width: 768px) media query | Missed | Passed |
| Uses !important on CSS bottom positioning property for mobile viewports | Passed | Passed |
The instructions your model reads when the skill loads.
Expert integration of OpenAI/ChatKit chat widgets into Next.js/React applications with secure configuration and custom branding.
| 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 |
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
// frontend/config/chatkit.config.ts
import { ChatKitConfig } from "@/lib/chatkit";
test cases passed, vs 6 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.