Semi A2UI

English | 简体中文

A complete implementation of the A2UI v0.8 protocol using Semi Design components.

A2UI (Agent to UI) is a streaming protocol for Agent-Driven User Interfaces. It allows AI agents to generate rich, interactive UIs through a declarative JSON-based protocol.

✨ Features

• ✅ Full A2UI v0.8 Protocol Support
• ✅ Semi Design Components Integration
• ✅ TypeScript Support
• ✅ React Hooks API
• ✅ Data Binding & Event Handling
• ✅ Multiple Surfaces Support
• ✅ Progressive Rendering via JSONL/SSE

🚀 Quick Start

# Install dependencies
npm install

# Run development server
npm run dev

The demo will be available at http://localhost:3000.

📖 Documentation

• 完整实现文档 (中文) - API reference, usage guide, and examples
• Complete Implementation Guide - Full documentation with API reference
• Implementation Summary - Technical implementation details

💡 Basic Usage

import { A2UIProvider, SurfaceRenderer, useA2UIStream } from 'semi-a2ui';

function App() {
  return (
    <A2UIProvider
      onUserAction={(action) => console.log('Action:', action)}
      onError={(error) => console.error('Error:', error)}
    >
      <MySurface />
    </A2UIProvider>
  );
}

function MySurface() {
  const { processStream } = useA2UIStream('main');

  React.useEffect(() => {
    const jsonl = `
{"surfaceUpdate": {"components": [{"id": "root", "component": {"Text": {"text": {"literalString": "Hello, World!"}}}}]}}
{"beginRendering": {"root": "root"}}
`;
    processStream(jsonl);
  }, [processStream]);

  return <SurfaceRenderer surfaceId="main" />;
}

🎯 Supported Components

All 19 standard A2UI v0.8 components are supported:

Text & Media

• Text, Image, Icon, Video, AudioPlayer

Layout

• Row, Column, List, Card, Tabs, Divider, Modal

Interactive

• Button, CheckBox, TextField, DateTimeInput, MultipleChoice, Slider

📚 Resources

• A2UI Specification v0.8
• A2UI Protocol Documentation
• Standard Component Catalog
• Semi Design

🛠️ Tech Stack

• React 19.2.4
• TypeScript 5.9.3
• Semi Design 2.90.13
• Vite 7.3.1

✅ Testing & Quality

• 95%+ Code Coverage - Comprehensive test suite
• ESLint - Code linting with TypeScript support
• TypeScript - Full type safety
• GitHub Actions CI - Automated checks on PRs
• Pre-publish Checks - Automated quality gates

Run Tests

npm test                # Run all tests
npm run test:coverage   # With coverage report
npm run lint            # Lint code
npm run typecheck       # Type check
npm run pre-publish     # All checks

See TESTING.md for details.

📝 License

ISC

Ready to build AI-generated UIs? Get started with Semi A2UI today! 🚀