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