The universal canvas for AI. Ask for anything.
Generous Works is a streaming generative UI platform — type a natural language prompt and the AI generates live, interactive React components in real time. Charts, 3D scenes, maps, timelines, code editors, games, data tables, and 100+ more component types, all rendered progressively as the AI streams its response.
Built by Decentralized Intelligence Agency / Logos Liber as the rendering layer of an open-source ecosystem for collective intelligence.
🌐 Live at generous.works
- Streaming Generative UI — Components appear progressively as the AI generates them, with no waiting for full responses
- 114+ Composable Components — Data visualizations, 3D scenes, maps, editors, games, social cards, and more
- Dual Rendering Pipeline — JSX for simple UI elements and A2UI JSON for complex data-driven components, mixed in a single response
- Multi-Provider AI Support — OpenAI, Anthropic, Google, and Zhipu out of the box
- Runtime Type Safety — Zod schemas validate all component props before rendering
- Authenticated — Clerk v6 with GitHub, Discord, Google, and Email providers
| Category | Count | Examples |
|---|---|---|
| AI Elements | 90+ | Charts, Maps, ThreeScene, Timeline, NodeEditor, CodeEditor, DataTable, Phaser, Mermaid, LaTeX, VRM, WYSIWYG |
| Tool UI | 18 | ApprovalCard, WeatherWidget, LinkPreview, InstagramPost, OrderSummary, ParameterSlider |
| Standard UI Adapters | 76 | Button, Card, Input, Dialog, Tabs, Alert, Breadcrumb, Skeleton, Accordion |
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| UI | React 19, Tailwind CSS 4, shadcn/ui + Radix UI |
| AI | Vercel AI SDK 6, AG-UI, A2UI |
| State | Zustand v5 |
| Auth | Clerk v6 |
| Validation | Zod |
| Testing | Vitest, Testing Library |
| 3D / Visual | Three.js, deck.gl, amCharts 5, Phaser |
| Maps | MapLibre GL, Leaflet, deck.gl geo-layers |
| Editors | CodeMirror, TipTap, XYFlow |
| Media | Remotion, Rive, KaTeX, Mermaid |
- Node.js 18+ (20+ recommended)
- npm 9+
- An AI provider API key (Zhipu GLM-4.7 is the default — cost-effective and capable)
- Clerk keys for authentication
git clone https://github.com/davincidreams/Generous-Works.git
cd Generous-Works
npm installcp .env.example .env.localEdit .env.local with your keys. At minimum:
# AI Provider (default: Zhipu GLM-4.7)
ZHIPU_API_KEY=your_zhipu_key
ZHIPU_BASE_URL=https://api.z.ai/api/paas/v4
ZHIPU_MODEL=glm-4.7
# Authentication (Clerk)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...See .env.example for all supported providers (OpenAI, Anthropic, Google) and additional configuration options.
npm run devOpen http://localhost:3000. You'll see the chat interface — sign in and start asking for anything.
| Command | Description |
|---|---|
npm run dev |
Start dev server with Turbopack (port 3000) |
npm run dev:webpack |
Start dev server with Webpack (fallback) |
npm run build |
Production build |
npm run build:turbo |
Production build with Turbopack |
npm run start |
Start production server |
npm run test |
Run tests in watch mode |
npm run test:run |
Run all tests once (CI mode) |
npm run test:ui |
Interactive Vitest UI |
npm run test:coverage |
Run tests with coverage report |
npm run test:registry |
Validate A2UI component registry |
npm run lint |
ESLint with caching |
The AI can respond with two formats, mixed freely in a single response:
- JSX Rendering — Plain JSX strings for simple UI (Button, Card, form elements). Parsed and sandboxed by
jsx-preview.tsx. - A2UI JSON Rendering — Structured JSON for complex data-driven components (Charts, Maps, Timeline, ThreeScene). Parsed by
renderer.tsx.
The generative-message.tsx component handles both — it streams markdown and detects embedded JSX blocks or A2UI JSON, rendering each inline.
lib/a2ui/
catalog.ts # Component catalog — the AI's vocabulary
catalog-standard-ui.ts # Standard UI component registrations
catalog-variants.ts # Variant definitions
renderer.tsx # Parses A2UI JSON → React components
adapter.ts # Interface all adapters implement
adapters/ # One file per component category
button.tsx, card.tsx, charts.tsx, layout.tsx, ...
The catalog (catalog.ts) is the source of truth for what the AI can render. It generates the system prompt section that tells the AI what components exist and how to use them.
app/api/chat/route.ts— Main chat endpoint with AI provider configurationapp/api/a2ui-chat/route.ts— A2UI-specific endpoint
lib/store.ts— Zustand v5 store withuseMessages()anduseAppState()hooks
app/ # Next.js App Router
page.tsx # Main chat UI
canvas/ # Canvas page with loading/error states
api/chat/route.ts # AI endpoint + system prompt builder
api/a2ui-chat/route.ts # A2UI-specific endpoint
sign-in/ # Clerk sign-in page
sign-up/ # Clerk sign-up page
*-test/ # Individual component demo pages
components/
ui/ # 25 shadcn/Radix UI primitives
ai-elements/ # 90+ AI chat & visualization components
tool-ui/ # 18 tool call visualization components
chat-sidebar.tsx # Chat sidebar navigation
lib/
a2ui/ # A2UI framework (catalog, renderer, adapters)
schemas/ # Zod schemas for 22+ component types
store.ts # Zustand global state
utils.ts # cn() and utility functions
maf/ # Microsoft Agent Framework integration
middleware.ts # Clerk auth route protection
plans/ # PRDs, architecture docs, session notes
Marketing/ # Brand guide, landing pages, SEO strategy
docs/ # Additional documentation
| Document | Description |
|---|---|
| CONTRIBUTING.md | Contribution guide with setup, conventions, and workflow |
| AUTHENTICATION.md | Clerk authentication setup and provider configuration |
| CLAUDE.md | AI agent guide with architecture and conventions |
| lib/a2ui/README.md | A2UI framework internals and adapter system |
| Marketing/ECOSYSTEM.md | Logos Liber ecosystem overview |
| Marketing/BRAND_GUIDE.md | Brand guidelines |
| plans/ | PRDs, architecture decisions, and implementation plans |
Generous Works is part of the Logos Liber ecosystem — "The word, freely rendered." An open-source suite of projects under the Decentralized Intelligence Agency 501(c)(3) nonprofit, united by the mission to increase collective intelligence.
┌──────────────────────────────┐
│ DECENTRALIZED INTELLIGENCE │
│ AGENCY │
│ 501(c)(3) Scientific NonProfit│
└──────────────┬───────────────┘
│
┌──────────────▼──────────────┐
│ LOGOS LIBER │
│ logosliber.org │
│ The open-source ecosystem │
└──────────────┬──────────────┘
│
┌────────────────────────┼────────────────────┐
│ │ │
┌─────────▼─────────┐ ┌──────────▼────────┐ ┌────────▼────────┐
│ GALAXY BRAIN │ │ GENEROUS ◄──── YOU ARE HERE │
│ galaxybrain.info │ │ generous.works │ │ Agents of Empire│
│ Knowledge layer │ │ Rendering layer │ │ Agent management│
│ Universal KMS │ │ Universal canvas │ │ Game GUI for AI │
└───────────────────┘ └───────────────────┘ └─────────────────┘
| Project | Role | Description |
|---|---|---|
| Generous | Rendering Layer | The universal canvas — AI generates live, interactive UI from natural language |
| Galaxy Brain | Knowledge Layer | Universal data store, parser, and knowledge management system |
| Agents of Empire | Command Layer | Game-inspired GUI for visualizing and directing AI agent workflows |
| Monumental Systems | Infrastructure | Orleans actor framework for distributed agent execution |
We welcome contributions of all kinds — new components, bug fixes, documentation, and ideas. See CONTRIBUTING.md for the full guide covering:
- Development setup and environment configuration
- Project structure and component conventions
- How to add new AI components (the most common contribution)
- Code style, testing, and PR workflow
Quick contribution start:
# 1. Fork and clone
git clone https://github.com/YOUR_USERNAME/Generous-Works.git
# 2. Install and configure
npm install
cp .env.example .env.local
# Edit .env.local with your keys
# 3. Create a branch and start developing
git checkout -b feature/my-new-component
npm run devMIT © 2024–2025 Decentralized Intelligence Agency / Logos Liber
The word, freely rendered.