Thesys Generative Ui

Name: Thesys Generative Ui
Author: Claude Skills Maintainers

secondsky/claude-skills

196 repo stars
Updated July 25, 2026
secondsky/claude-skills

Build AI-powered generative UI with Thesys — generate React components from natural language.

About

Thesys enables AI-powered generative UI, creating React components from natural language. Developers use it to add LLM-driven, dynamically generated interface elements to an app.

Thesys generative UI
React from natural language
AI-powered components
LLM-driven UI

Thesys Generative Ui by the numbers

Data as of Jul 28, 2026 (Skillselion catalog sync)

/plugin marketplace add secondsky/claude-skills

/plugin install thesys-generative-ui@claude-skills

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/secondsky/claude-skills/plugins/thesys-generative-ui.svg)](https://skillselion.com/skills/secondsky/claude-skills/plugins/thesys-generative-ui)

repo stars	★ 196
Last updated	July 25, 2026
Repository	secondsky/claude-skills ↗

What it does

Build AI-powered generative UI with Thesys — generate React components from natural language.

README.md

TheSys Generative UI Skill

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.

Auto-Trigger Keywords

This skill automatically activates when you mention any of these terms:

Core Technologies

generative ui
generative user interface
genui
thesys
thesys c1
c1 api
c1 generative ui
@thesysai/genui-sdk
@crayonai/react-ui
crayonai

Use Cases

streaming react components
ai chat interface
conversational ui
chat ui components
interactive ai responses
llm to ui
ai to components
ai generated ui
dynamic ui generation
real-time ui generation

Features

chat with charts
chat with forms
chat with tables
data visualization chat
ai forms
tool calling ui
interactive chat
streaming chat
ai copilot ui
ai assistant interface

Integration Patterns

react generative ui
nextjs generative ui
vite generative ui
cloudflare generative ui
openai ui components
claude ui components
anthropic ui generation

Problems This Solves

text to ui conversion
llm response visualization
ai response components
interactive llm output
structured ai responses
streaming ai ui

What This Skill Provides

🎯 Complete Framework Coverage

Vite + React - Your preferred stack with custom backends
Next.js App Router - Full-stack with API routes
Cloudflare Workers - Workers + Static Assets integration
Framework-agnostic - General patterns for any setup

🤖 AI Provider Integration

OpenAI - GPT-4, GPT-5 models
Anthropic Claude - Sonnet, Haiku models
Cloudflare Workers AI - Cost-optimized patterns
Universal patterns - Works with any OpenAI-compatible provider

🛠️ Features Covered

<C1Chat> - Pre-built chat component with state management
<C1Component> - Low-level custom integration
Tool calling - Zod schema integration for function calling
Theming - Custom themes, dark mode, CSS overrides
Thread management - Multi-conversation support
Streaming - Real-time UI generation
Thinking states - Progress indicators during processing
Sharing - Thread and message sharing capabilities

📚 15+ Working Templates

5 Vite+React templates (basic chat, custom components, tool calling, theming)
4 Next.js templates (pages, API routes, tool integration)
3 Cloudflare Workers templates (Hono backend, frontend, config)
3 Shared utilities (themes, schemas, streaming helpers)

🐛 12+ Errors Prevented

Empty agent responses
System prompt not followed
Version compatibility issues
Theme not applying
Streaming failures
Tool calling validation errors
Thread state loss
CSS conflicts
TypeScript errors
CORS failures
Rate limit crashes
Authentication token errors

Quick Installation

# 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

Quick Start Example

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.

When to Use This Skill

✅ Use this skill when:

Building AI chat interfaces with rich, interactive components
Creating data visualization dashboards powered by AI
Implementing dynamic form generation from LLM responses
Developing AI copilots or assistants with structured output
Building search interfaces with formatted results
Converting plain text LLM responses into interactive UI

❌ Don't use this skill for:

Plain text chat (just use standard LLM SDKs)
Static UI generation (use regular React components)
Non-interactive AI responses

Package Information

Main Package: @thesysai/genui-sdk@0.6.40
UI Components: @crayonai/react-ui@0.8.42
Core Library: @crayonai/react-core@0.7.6
Streaming Utils: @crayonai/stream@latest
Python SDK: thesys-genui-sdk (for Python backends)
Last Verified: 2025-10-26
Production Tested: ✅ Yes

Skill Contents

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