Thesys Generative UI
Last Updated: 2025-11-10
Quick Start
import { generateUI } from 'thesys';
const ui = await generateUI({
prompt: 'Create a user profile card with avatar, name, and email',
schema: {
type: 'component',
props: ['name', 'email', 'avatar']
}
});
export default function Profile() {
return <div>{ui}</div>;
}
Core Features
- Natural Language: Describe UI in plain English
- Schema-Driven: Type-safe component generation
- React Components: Generate production-ready components
- AI-Powered: Uses LLMs for intelligent design
Example
const form = await generateUI({
prompt: 'Create a contact form with name, email, and message fields',
theme: 'modern'
});
Resources
Core Documentation
references/what-is-thesys.md - What is TheSys C1, success metrics, getting startedreferences/use-cases-examples.md - When to use, 12 errors prevented, all templates catalogreferences/tool-calling.md - Complete tool calling guide with Zod schemasreferences/integration-guide.md - Complete setup for Vite, Next.js, Cloudflare Workers
Additional References
references/component-api.md - Complete component prop referencereferences/ai-provider-setup.md - OpenAI, Anthropic, Cloudflare Workers AI setupreferences/tool-calling-guide.md - Tool calling patternsreferences/theme-customization.md - Theme system deep divereferences/common-errors.md - Expanded error catalog
Templates (15+ files)
- Vite + React:
basic-chat.tsx, custom-component.tsx, tool-calling.tsx, theme-dark-mode.tsx
- Next.js:
app/page.tsx, app/api/chat/route.ts, tool-calling-route.ts
- Cloudflare Workers:
worker-backend.ts, frontend-setup.tsx
- Utilities:
theme-config.ts, tool-schemas.ts, streaming-utils.ts
Official Docs: https://docs.thesys.dev | Playground: https://console.thesys.dev/playground
1---2name: thesys-generative-ui3description: AI-powered generative UI with Thesys - create React components from natural language.4license: MIT5---6
7# Thesys Generative UI
8
9**Last Updated**: 2025-11-10
10
11## Quick Start
12
13```typescript
14import { generateUI } from 'thesys';
15
16const ui = await generateUI({
17 prompt: 'Create a user profile card with avatar, name, and email',
18 schema: {
19 type: 'component',
20 props: ['name', 'email', 'avatar']
21 }
22});
23
24export default function Profile() {
25 return <div>{ui}</div>;
26}
27```
28
29## Core Features
30
31- **Natural Language**: Describe UI in plain English
32- **Schema-Driven**: Type-safe component generation
33- **React Components**: Generate production-ready components
34- **AI-Powered**: Uses LLMs for intelligent design
35
36## Example
37
38```typescript
39const form = await generateUI({
40 prompt: 'Create a contact form with name, email, and message fields',
41 theme: 'modern'
42});
43```
44
45## Resources
46
47### Core Documentation
48- `references/what-is-thesys.md` - What is TheSys C1, success metrics, getting started
49- `references/use-cases-examples.md` - When to use, 12 errors prevented, all templates catalog
50- `references/tool-calling.md` - Complete tool calling guide with Zod schemas
51- `references/integration-guide.md` - Complete setup for Vite, Next.js, Cloudflare Workers
52
53### Additional References
54- `references/component-api.md` - Complete component prop reference
55- `references/ai-provider-setup.md` - OpenAI, Anthropic, Cloudflare Workers AI setup
56- `references/tool-calling-guide.md` - Tool calling patterns
57- `references/theme-customization.md` - Theme system deep dive
58- `references/common-errors.md` - Expanded error catalog
59
60### Templates (15+ files)
61- **Vite + React**: `basic-chat.tsx`, `custom-component.tsx`, `tool-calling.tsx`, `theme-dark-mode.tsx`
62- **Next.js**: `app/page.tsx`, `app/api/chat/route.ts`, `tool-calling-route.ts`
63- **Cloudflare Workers**: `worker-backend.ts`, `frontend-setup.tsx`
64- **Utilities**: `theme-config.ts`, `tool-schemas.ts`, `streaming-utils.ts`
65
66**Official Docs**: https://docs.thesys.dev | **Playground**: https://console.thesys.dev/playground
majiayu000