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 started

• references/use-cases-examples.md

• When to use, 12 errors prevented, all templates catalog

• references/tool-calling.md

• Complete tool calling guide with Zod schemas

• references/integration-guide.md

• Complete setup for Vite, Next.js, Cloudflare Workers

Additional References

• references/component-api.md

• Complete component prop reference

• references/ai-provider-setup.md

• OpenAI, Anthropic, Cloudflare Workers AI setup

• references/tool-calling-guide.md

• Tool calling patterns

• references/theme-customization.md

• Theme system deep dive

• references/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