openai-chatkit-skill
Integrate OpenAI ChatKit for conversational AI interface
npx skills add majiayu000/claude-skill-registry --skill skills-wajahatali3218664-hackathon-02-mytodo-3 --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# OpenAI ChatKit Skill ## Instructions This skill provides guidance for integrating OpenAI's ChatKit interface for conversational AI experiences. ### Project Structure ``` src/ ├── components/ │ └── chat/ │ ├── ChatWindow.tsx # Main chat container │ ├── ChatMessage.tsx # Individual message display │ ├── ChatInput.tsx # User input area │ ├── ChatToolbar.tsx # Quick actions toolbar │ └── typing-indicator.tsx ├── hooks/ │ └── useChat.ts # Chat state management ├── lib/ │ └── openai.ts # OpenAI client configuration └── types/ └── chat.ts # Chat type definitions ``` ### Type Definitions ```tsx // src/types/chat.ts export interface ChatMessage { id: string role: 'user' | 'assistant' | 'system' content: string timestamp: Date tools?: ToolCall[] } export interface ToolCall { id: string name: string arguments: Record<string, unknown> result?: unknown } export interface ChatState { messages: ChatMessage[] isLoading: boolean error: string | null } export interface UseChatReturn extends ChatState { sendMessage: (content: string) => Promise<void> clearMessages: () => void retry: () => Promise<void> } ``` ### OpenAI Client Setup ```tsx // src/lib/openai.ts import OpenAI from 'openai' export cons
- Instructions
- Project Structure
- Type Definitions
- OpenAI Client Setup
- Chat Hook
- Chat Window Component
- Chat Message Component
- Chat Input Component
- Streaming Response Example
What does the openai-chatkit-skill skill do?
Integrate OpenAI ChatKit for conversational AI interface
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill skills-wajahatali3218664-hackathon-02-mytodo-3 --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.