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: > Generate, modify, and style React components from natural language using the Thesys SDK. Guides schema-driven UI generation, theme customisation, tool calling integration, and deployment to Vite, Next.js, or Cloudflare Workers. Use when the user says "generate UI", "create a component", "build an interface", "Thesys", "generative UI", or asks to turn a description into a React component.4license: MIT5---67# Thesys Generative UI89**Last Updated**: 2025-11-101011## Quick Start1213```typescript14import { generateUI } from 'thesys';1516const 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});2324export default function Profile() {25 return <div>{ui}</div>;26}27```2829## Core Features3031- **Natural Language**: Describe UI in plain English32- **Schema-Driven**: Type-safe component generation33- **React Components**: Generate production-ready components34- **AI-Powered**: Uses LLMs for intelligent design3536## Example3738```typescript39const form = await generateUI({40 prompt: 'Create a contact form with name, email, and message fields',41 theme: 'modern'42});43```4445## Resources4647### Core Documentation48- `references/what-is-thesys.md` - What is TheSys C1, success metrics, getting started49- `references/use-cases-examples.md` - When to use, 12 errors prevented, all templates catalog50- `references/tool-calling.md` - Complete tool calling guide with Zod schemas51- `references/integration-guide.md` - Complete setup for Vite, Next.js, Cloudflare Workers5253### Additional References54- `references/component-api.md` - Complete component prop reference55- `references/ai-provider-setup.md` - OpenAI, Anthropic, Cloudflare Workers AI setup56- `references/tool-calling-guide.md` - Tool calling patterns57- `references/theme-customization.md` - Theme system deep dive58- `references/common-errors.md` - Expanded error catalog5960### 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`6566**Official Docs**: https://docs.thesys.dev | **Playground**: https://console.thesys.dev/playground
secondsky