thesys-generative-ui

majiayu000's avatarfrom majiayu000

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, V

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026⬇️1downloads
[Code Generation]

When & Why to Use This Skill

This Claude skill facilitates the seamless integration of TheSys C1 Generative UI into React applications, enabling developers to transform natural language prompts into production-ready interactive components. It solves the complexity of streaming dynamic UI elements like forms, charts, and tables directly from LLM responses, providing optimized templates for Vite, Next.js, and Cloudflare Workers while preventing common integration pitfalls.

Use Cases

  • AI-Powered Conversational UIs: Building chat interfaces that render interactive, real-time components instead of static text for better user engagement.
  • Rapid Component Prototyping: Generating type-safe React components (e.g., user profile cards, contact forms) using natural language descriptions and Zod schemas.
  • Data Visualization: Implementing streaming AI assistants that can dynamically generate and display complex charts and tables based on user queries.
  • Full-Stack AI Development: Streamlining the deployment of generative UI features across various environments including Vite, Next.js, and Cloudflare Workers with built-in tool calling support.
namethesys-generative-ui
descriptionAI-powered generative UI with Thesys - create React components from natural language.
licenseMIT

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