Skip to content
LiveNew tools this week
Submit
AIMarketly
thesys-generative-ui logo

Thesys Generative UI

thesys-generative-ui

> Generate, modify, and style React components from natural language using the Thesys SDK. Guides schema-driven UI generation, theme customisation, tool calling integration, and deployment to Vite, Next.js, or Cloudflare Workers. Use when the user says "generate UI", "create a component", "build an interface", "Thesys", "generative UI", or asks to turn a description into a React component.

secondsky/claude-skills0installs226stars

SKILL.md

Full skill instructions

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