chat-ui

Build chat interfaces with TypeScript and React using the A2UI protocol.

2|Updated Jan 24, 2026
One-click install
npx skills add https://github.com/ai-kitchen-inc/openbench --skill chat-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: chat-ui
Source: https://github.com/ai-kitchen-inc/openbench/tree/main/.claude/skills/chat-ui
Command: npx skills add https://github.com/ai-kitchen-inc/openbench --skill chat-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a robust and flexible React component library for building interactive chat interfaces, enabling developers to create rich user experiences powered by declarative UI protocols like A2UI.

Core Features & Use Cases

  • Declarative UI Rendering: Renders chat interfaces based on A2UI v0.10 JSONL, supporting dynamic updates and custom components.
  • Real-time Streaming: Handles Server-Sent Events (SSE) for progressive text streaming and rich content updates.
  • Customization: Offers hooks for custom UI logic and a system to register custom A2UI components.
  • Use Case: Integrate a fully functional chat interface into your application with minimal boilerplate, or extend it with custom widgets like charts and file previews.

Quick Start

Use the chat-ui skill to create a basic chat interface by importing and using the ChatProvider and ChatPanel components.

Frequently Asked Questions about chat-ui

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

FAQPage Schema
How do I build a React chat interface with SSE streaming?

The A2UI v0.10 protocol is a declarative JSON streaming format used to render dynamic chat interfaces. It allows the SDK to progressively update React components and custom widgets via JSONL data streamed over SSE or REST transports.

Does this chat UI SDK require specific frontend dependencies?

The chat UI SDK requires a React and TypeScript environment to function. It provides a declarative component library designed specifically for frontend development without listing additional external runtime dependencies.

What is the A2UI v0.10 declarative JSON streaming protocol?

The A2UI v0.10 protocol is a declarative JSON streaming format used to render dynamic chat interfaces. It allows the SDK to progressively update React components and custom widgets via JSONL data streamed over SSE or REST transports.

Can I add custom components and hooks to my chat UI?

Yes, the SDK supports adding custom components and hooks to the chat UI. You can register custom A2UI components to extend the interface with interactive widgets like charts or file previews while applying custom styling.

How do I integrate a basic chat interface into my application?

You can integrate the chat interface by importing the ChatProvider and ChatPanel components. This provides a fully functional chat experience with minimal boilerplate, supporting REST and SSE transports out of the box.

Does this chat UI SDK require specific frontend dependencies?

The chat UI SDK requires a React and TypeScript environment to function. It provides a declarative component library designed specifically for frontend development without listing additional external runtime dependencies.