Gan-Tu/Widgets

What it solves

This project provides a way to render compact, structured UI widgets within chat interfaces. It allows developers to move beyond simple text responses by providing a standardized system for rendering rich, interactive components (like charts, forms, and agent-specific primitives) using a template-and-data approach.

How it works

The system uses a WidgetRenderer that takes three primary inputs: a UI template string (written in a strict, JSX-like language), an optional Zod schema for data validation, and the actual data object.

To ensure safety and predictability, the renderer uses a conservative template engine that supports declarative logic (bindings, conditions, and loops) but forbids arbitrary JavaScript. It includes a library of 142 pre-registered components—ranging from basic layout and typography to complex agent-native primitives like ThinkingReasoning and StreamingText. Interactions are handled via local client actions (e.g., copying text or opening URLs) or forwarded to the host application via an onAction callback.

Who it’s for

Developers building AI chat UIs or agent-based applications who want to provide structured, interactive visual responses without having to manually build unique React components for every possible AI output.

Highlights

• Extensive Component Library: 142 built-in components including charts, forms, and workspace primitives.
• Schema Validation: Optional Zod integration to ensure data passed to widgets is valid before rendering.
• Safe Templating: A restricted JSX-like language that prevents arbitrary JS execution while supporting loops and conditional rendering.
• Agent-Native Primitives: Specialized components designed for AI interactions, such as reasoning blocks and approval cards.
• Theming Support: Fully customizable via CSS design tokens with built-in light and dark mode support.