building-chat-widgets

Integrate action-driven widgets with client and server handlers into AI chat interfaces.

Updated Jan 6, 2026
One-click install
npx skills add https://github.com/salmanparacha/speckitplus-calculator --skill building-chat-widgets-salmanparacha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-chat-widgets
Source: https://github.com/salmanparacha/speckitplus-calculator/tree/main/.claude/skills-nocontext/building-chat-widgets
Command: npx skills add https://github.com/salmanparacha/speckitplus-calculator --skill building-chat-widgets-salmanparacha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Builders struggle to add rich, actionable UIs to AI chats; this skill provides a pattern-driven approach to create interactive widgets with buttons, forms, and bidirectional actions.

Core Features & Use Cases

  • Create interactive widgets for AI chats with action handling and entity tagging.
  • Support client-side actions for navigation and UI updates and server-side actions for data mutation and widget updates.
  • Leverage composer tools and widget lifecycles to manage widget state across conversations.

Quick Start

Install the ChatKit library and initialize your chat UI with a widgets.onAction handler to route actions to the appropriate UI.

Frequently Asked Questions about building-chat-widgets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add clickable buttons and forms to an AI chat interface?▼

You can add clickable buttons and forms to an AI chat interface by implementing interactive chat widgets with a defined lifecycle. This pattern handles bidirectional actions and entity tagging to manage state across chat sessions.

How do chat widgets handle client-side versus server-side actions?▼

Chat widgets handle client-side actions for navigation and UI updates, while server-side actions manage data mutation and widget updates. A widgets.onAction handler routes button-driven flows to the appropriate client or server process.

What are composer tools in chat UI and how do they work?▼

Composer tools in chat UI are interactive elements integrated alongside widgets to manage widget state and entity mentions across conversations. They leverage a defined widget lifecycle to ensure consistent action handling.

Can I manage widget state across multiple chat sessions?▼

Yes, you can manage widget state across multiple chat sessions by leveraging composer tools and a clear widget lifecycle. This approach maintains consistent interactive controls and entity tagging throughout the conversation flow.

What is the best way to structure entity tagging in an AI chat UI?▼

The best way to structure entity tagging in an AI chat UI is using a pattern-driven approach that integrates action-driven interactive widgets. This enforces clear client- and server-handled action patterns to process entity mentions reliably.