building-chat-widgets
Build interactive AI chat widgets with buttons, forms, and bidirectional actions. Use when creating agentic UIs with clickable widgets, entity tagging (@mentions), composer tools, or server-handled widget actions. Covers full widget lifecycle. NOT when building simple text-only chat without interactive elements.
npx skills add majiayu000/claude-skill-registry --skill building-chat-widgets --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.
# Building Chat Widgets Create interactive widgets for AI chat with actions and entity tagging. ## Quick Start ```typescript const chatkit = useChatKit({ api: { url: API_URL, domainKey: DOMAIN_KEY }, widgets: { onAction: async (action, widgetItem) => { if (action.type === "view_details") { navigate(`/details/${action.payload.id}`); } }, }, }); ``` --- ## Action Handler Types | Handler | Defined In | Processed By | Use Case | |---------|------------|--------------|----------| | `"client"` | Widget template | Frontend `onAction` | Navigation, local state | | `"server"` | Widget template | Backend `action()` | Data mutation, widget replacement | --- ## Widget Lifecycle ``` 1. Agent tool generates widget → yield WidgetItem 2. Widget renders in chat with action buttons 3. User clicks action → action dispatched 4. Handler processes action: - client: onAction callback in frontend - server: action() method in ChatKitServer 5. Optional: Widget replaced with updated state ``` --- ## Core Patterns ### 1. Widget Templates Define reusable widget layouts with dynamic data: ```json { "type": "ListView", "children": [ { "type": "ListViewItem", "key": "item-1", "onClickAction": { "type": "item.sele
- Quick Start
- Action Handler Types
- Widget Lifecycle
- Core Patterns
- 1. Widget Templates
- 2. Client-Handled Actions
- 3. Server-Handled Actions
- 4. Entity Tagging (@mentions)
- 5. Composer Tools (Mode Selection)
- Widget Component Reference
- Layout Components
- Content Components
- Interactive Components
- Critical Implementation Details
What does the building-chat-widgets skill do?
Build interactive AI chat widgets with buttons, forms, and bidirectional actions. Use when creating agentic UIs with clickable widgets, entity tagging (@mentions), composer tools, or server-handled widget actions. Covers full widget lifecycle. NOT when building simple text-only chat without interactive elements.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill building-chat-widgets --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.