thesys-generative-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Thesys Generative UI

Thesys 生成式UI

Last Updated: 2025-11-10

最后更新: 2025-11-10

Quick Start

快速开始

typescript

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>;
}

typescript

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

自然语言：使用通俗英语描述UI
Schema驱动：生成类型安全的组件
React组件：生成可直接用于生产环境的组件
AI赋能：采用大语言模型实现智能设计

Example

示例

typescript

const form = await generateUI({
  prompt: 'Create a contact form with name, email, and message fields',
  theme: 'modern'
});

typescript

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

```
references/what-is-thesys.md
```
- TheSys C1介绍、成功指标、入门指南
```
references/use-cases-examples.md
```
- 适用场景、可避免的12种错误、全模板目录
```
references/tool-calling.md
```
- 搭配Zod schemas的完整工具调用指南
```
references/integration-guide.md
```
- 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

```
references/component-api.md
```
- 完整组件属性参考
```
references/ai-provider-setup.md
```
- OpenAI、Anthropic、Cloudflare Workers AI配置教程
```
references/tool-calling-guide.md
```
- 工具调用模式说明
```
references/theme-customization.md
```
- 主题系统深度解析
```
references/common-errors.md
```
- 扩展错误目录

Templates (15+ files)

模板（15+个文件）

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

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
```

实用工具:

theme-config.ts

tool-schemas.ts

streaming-utils.ts

官方文档: https://docs.thesys.dev | 在线体验: https://console.thesys.dev/playground