thesys-generative-ui

Thesys Generative UI

最終更新日：2025-11-10

クイックスタート

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

主な機能

• 自然言語：平易な英語で UI を記述します
• スキーマ駆動：型安全なコンポーネントを生成します
• React コンポーネント：本番環境ですぐに使えるコンポーネントを生成します
• AI 搭載：LLM を使用して、インテリジェントなデザインを実現します

使用例

const form = await generateUI({
  prompt: 'Create a contact form with name, email, and message fields',
  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