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