⚡

Thesys生成式UI thesys-generative-ui

Thesys 生成式UI 是一个AI驱动的工具，允许开发者使用自然语言描述快速生成React组件。它结合模式驱动和大型语言模型，实现智能UI设计，适用于前端开发、低代码场景和AI应用。关键词：AI、生成式UI、React、自然语言处理、前端开发、低代码、Thesys。

AIGC 0 次安装 0 次浏览 更新于 3/7/2026

名称：thesys-generative-ui 描述：AI驱动的生成式UI，使用Thesys - 从自然语言创建React组件。 许可证：MIT

Thesys 生成式UI

最后更新：2025-11-10

快速开始

import { generateUI } from 'thesys';

const ui = await generateUI({
  prompt: '创建一个带有头像、姓名和电子邮件的用户资料卡片',
  schema: {
    type: 'component',
    props: ['name', 'email', 'avatar']
  }
});

export default function Profile() {
  return <div>{ui}</div>;
}

核心特性

  • 自然语言：用简单英语描述UI
  • 模式驱动：类型安全的组件生成
  • React组件：生成生产就绪的组件
  • AI驱动：使用LLMs进行智能设计

示例

const form = await generateUI({
  prompt: '创建一个带有姓名、电子邮件和消息字段的联系表单',
  theme: 'modern'
});

资源

核心文档

  • references/what-is-thesys.md - 什么是TheSys C1，成功指标，入门指南
  • references/use-cases-examples.md - 何时使用，预防12个错误，所有模板目录
  • references/tool-calling.md - 完整的工具调用指南与Zod模式
  • references/integration-guide.md - Vite、Next.js、Cloudflare Workers的完整设置

额外参考

  • 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 - 扩展错误目录

模板（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
  • 实用工具：theme-config.ts、tool-schemas.ts、streaming-utils.ts

官方文档：https://docs.thesys.dev | 游乐场：https://console.thesys.dev/playground