Agent skill · software engineering · aiskillstore
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.
Why this skill is useful
Provides specific patterns and code snippets for building interactive chat widgets that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Building Chat Widgets Create interactive widgets for AI chat with actions and entity tagging. Quick Start --- 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 --- Core Patterns 1. Widget Templates Define reusable widget layouts with dynamic data: 2. Client-Handled Actions Actions that update local state, navigate, or send follow-up messages: Widget Definition: Frontend Handler: 3. Server-Handled Actions Actions that mutate data, update widgets, or require backend processing: Widget Definition: Backend Handler: 4. Entity Tagging (@mentions) Allow users to @mention entities in messages: 5. Composer Tools (Mode Selection) Let users select different AI modes from the composer: Backend Routing: --- Widget Component Reference Layout Components Component Props Description ----------- ------- ------------- ListView children Scrollable list container ListViewItem key, onClickAction, children Clickable list item Row gap, align, justify, children Horizontal flex Col gap, padding, children Vertical flex Box size, radius, background, padding Styled container Content Components Component Props Description ----------- ------- ------------- Text value, size, weight, color Text display Title value, size, weight Heading text Image src, alt, width, height Image display Icon name, size, color Icon from set Interactive Components Component Props Description ----------- ------- ------------- Button label, variant, onClickAction Clickable button --- Critical Implementation Details Action Object Structure IMPORTANT: Use action.payload, NOT action.arguments: Context Parameter The context parameter is RequestContext, not dict: UserMessageItem Required Fields When creating synthetic user messages: --- Anti-Patterns 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/building-chat-widgets