Production-ready skill for integrating TheSys C1 Generative UI API into React applications. This skill should be used when building AI-powered interfaces that stream interactive components (forms, charts, tables) instead of plain text responses. Covers complete integration patterns for Vite+React, Next.js, and Cloudflare Workers with OpenAI, Anthropic Claude, and Cloudflare Workers AI. Includes tool calling with Zod schemas, theming, thread management, and production deployment. Prevents 12+ common integration errors and provides working templates for chat interfaces, data visualization, and dynamic forms. Use this skill when implementing conversational UIs, AI assistants, search interfaces, or any application requiring real-time generative user interfaces with streaming LLM responses. Keywords: TheSys C1, TheSys Generative UI, @thesysai/genui-sdk, generative UI, AI UI, streaming UI components, interactive components, AI forms, AI charts, AI tables, conversational UI, AI assistants UI, React generative UI, Vite generative UI, Next.js generative UI, Cloudflare Workers generative UI, OpenAI generative UI, Claude generative UI, Anthropic UI, Cloudflare Workers AI UI, tool calling UI, Zod schemas UI, thread management, theming UI, chat interface, data visualization, dynamic forms, streaming LLM UI
Production-ready integration of TheSys C1 Generative UI API for React applications.
Convert LLM responses into streaming, interactive React components (forms, charts, tables) instead of plain text.
This skill automatically activates when you mention any of these terms:
<C1Chat> - Pre-built chat component with state management<C1Component> - Low-level custom integration# Install main packages
npm install @thesysai/genui-sdk @crayonai/react-ui @crayonai/react-core
# For API integration
npm install openai
# For tool calling
npm install zod zod-to-json-schema
import { C1Chat } from "@thesysai/genui-sdk";
import "@crayonai/react-ui/styles/index.css";
export default function App() {
return <C1Chat apiUrl="/api/chat" />;
}
That's it! See SKILL.md for complete integration guides.
✅ Use this skill when:
❌ Don't use this skill for:
@thesysai/genui-sdk@0.6.40@crayonai/react-ui@0.8.42@crayonai/react-core@0.7.6@crayonai/stream@latestthesys-genui-sdk (for Python backends)thesys-generative-ui/
├── SKILL.md (6500+ words comprehensive guide)
├── README.md (this file)
├── scripts/
│ ├── install-dependencies.sh
│ └── check-versions.sh
├── templates/
│ ├── vite-react/ (5 templates)
│ ├── nextjs/ (4 templates)
│ ├── cloudflare-workers/ (3 templates)
│ └── shared/ (3 utilities)
├── references/
│ ├── component-api.md
│ ├── ai-provider-setup.md
│ ├── tool-calling-guide.md
│ ├── theme-customization.md
│ └── common-errors.md
└── assets/
└── architecture-diagram.md
THESYS_API_KEY environment variableUse Context7 MCP for up-to-date documentation:
/websites/thesys_dev
Q: Is TheSys free? A: TheSys offers a free tier. Check their pricing page for details.
Q: Does it work with Claude/OpenAI/Workers AI? A: Yes! TheSys C1 API is OpenAI-compatible and works with all major providers.
Q: Can I use my own React components? A: Yes! You can bring your own components and integrate them with C1.
Q: Is streaming supported? A: Yes! Streaming is core to TheSys - UI updates in real-time as the LLM generates.
Q: What about thread/conversation management?
A: Fully supported with useThreadManager and useThreadListManager hooks.
references/common-errors.md for troubleshootingSKILL.md for comprehensive integration guidesSkill Version: 1.0.0 Last Updated: 2025-10-26 Maintainer: Jeremy Dawes | jeremy@jezweb.net License: MIT
npx skills add jackspace/thesys-generative-ui下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer