Help us improve
Share bugs, ideas, or general feedback.
From thesys-generative-ui
Generates, modifies, and styles React components from natural language using Thesys SDK. Supports schema-driven UI, theme customization, tool calling, and deployment to Vite, Next.js, or Cloudflare Workers.
npx claudepluginhub secondsky/claude-skills --plugin thesys-generative-uiHow this skill is triggered — by the user, by Claude, or both
Slash command
/thesys-generative-ui:thesys-generative-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Last Updated**: 2025-11-10
references/ai-provider-setup.mdreferences/common-errors.mdreferences/component-api.mdreferences/error-catalog.mdreferences/integration-guide.mdreferences/tool-calling.mdreferences/use-cases-examples.mdreferences/what-is-thesys.mdscripts/check-versions.shscripts/install-dependencies.shtemplates/basic-usage.tsxtemplates/cloudflare-workers/frontend-setup.tsxtemplates/cloudflare-workers/worker-backend.tstemplates/cloudflare-workers/wrangler.jsonctemplates/nextjs/api-chat-route.tstemplates/nextjs/app-page.tsxtemplates/nextjs/package.jsontemplates/nextjs/tool-calling-route.tstemplates/python-backend/README.mdtemplates/python-backend/fastapi-chat.pyGenerates multiple production-ready UI component variations via 21st.dev Magic, letting you compare and integrate the best design. Useful for building modern, responsive UI with diverse styles.
Generates production-grade frontend UI components with bold design choices and working code. Accepts component descriptions, requirements, PRD files, or OpenAPI contracts.
Generates distinctive production-grade frontend UIs like components, pages, dashboards, apps in HTML/CSS/JS, React, Vue with bold memorable aesthetics avoiding generic AI designs.
Share bugs, ideas, or general feedback.
Last Updated: 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>;
}
const form = await generateUI({
prompt: 'Create a contact form with name, email, and message fields',
theme: 'modern'
});
references/what-is-thesys.md - What is TheSys C1, success metrics, getting startedreferences/use-cases-examples.md - When to use, 12 errors prevented, all templates catalogreferences/tool-calling.md - Complete tool calling guide with Zod schemasreferences/integration-guide.md - Complete setup for Vite, Next.js, Cloudflare Workersreferences/component-api.md - Complete component prop referencereferences/ai-provider-setup.md - OpenAI, Anthropic, Cloudflare Workers AI setupreferences/tool-calling-guide.md - Tool calling patternsreferences/theme-customization.md - Theme system deep divereferences/common-errors.md - Expanded error catalogbasic-chat.tsx, custom-component.tsx, tool-calling.tsx, theme-dark-mode.tsxapp/page.tsx, app/api/chat/route.ts, tool-calling-route.tsworker-backend.ts, frontend-setup.tsxtheme-config.ts, tool-schemas.ts, streaming-utils.tsOfficial Docs: https://docs.thesys.dev | Playground: https://console.thesys.dev/playground