skills.rest
CopilotKitCopilotKitOfficial·3 Agent Skills Included

OpenGenerativeUI

Generate interactive charts, diagrams, and widgets from plain chat prompts

Generates live interactive visuals from chat prompts, including SVG diagrams, Chart.js dashboards, 3D scenes, simulations, and UI mockups. Eliminates hand-coding of visualizations and static screenshots by streaming sandboxed HTML widgets directly into the conversation. Teaches AI agents when to pick each visual format and how to style it, so explanations render faster with consistent light and dark theming.
1,499|198
↗
npx skills add CopilotKit/OpenGenerativeUI --all -g -y
Available:

Explains to the AI agent how the CopilotKit v2 agent-state pattern works in this template, so it can read and update shared application state through tools and keep the frontend UI in sync.

All Skills in This Repository (3)

Pure Emerald Level Indicators
📦 In Repo
CopilotKitCopilotKit

Master Agent Playbook

Transform AI responses into interactive visual experiences with widgets and diagrams.

Official
Advanced
📦 In Repo
CopilotKitCopilotKit

Advanced Visualization Techniques

Generate interactive HTML/SVG widgets for dashboards and data visualizations.

Official
Advanced
📦 In Repo
CopilotKitCopilotKit

SVG Diagram Generation

Generate inline SVG diagrams with a 680px viewBox and design rules.

Official
Advanced

Frequently Asked Questions

FAQPage Schema
How to install OpenGenerativeUI?▼

Run `npx skills add CopilotKit/OpenGenerativeUI --all -g -y` in your terminal to install all skills in this suite globally.

What is generative UI in AI chat?▼

Generative UI means the AI answers with live interactive components like charts, diagrams, and widgets instead of plain text. This suite renders them safely inside sandboxed iframes with automatic theming.

How do I make an AI agent draw diagrams and charts?▼

Install these skills and your agent gains rules for producing SVG flowcharts, Chart.js dashboards, Mermaid diagrams, and interactive widgets through the generateSandboxedUi tool.

Does OpenGenerativeUI work with Claude Code and Cursor?▼

Yes. The skills follow the standard SKILL.md format and the included MCP server works with Claude Desktop, Claude Code, Cursor, and other MCP-compatible clients.

Do I need design skills to use OpenGenerativeUI?▼

No. You describe what you want in plain English, and the agent picks the right visual format and applies the built-in design system automatically.

Related Repositories in Design & Creative

View All in Design & Creative→
nextlevelbuildernextlevelbuilder
123.5k

ui-ux-pro-max-skill

AI design intelligence for professional UI, brands, and presentations

Official📦 13 Skills
shadcn-uishadcn-ui
122.7k

ui

Build and customize beautiful React component libraries with AI

Official📦 2 Skills
nexu-ionexu-io
93.2k

open-design

Open-source AI design studio for decks, prototypes, images, and video

Official📦 394 Skills