Agent-ready guidance for building generative interfaces with OpenUI. This repository contains one focused skill that helps AI coding assistants work with OpenUI Lang, the OpenUI runtimes, Agent Interface, and OpenUI Gateway.
- Scaffold new OpenUI Gateway applications by default with
@openuidev/cli, while preserving an explicit self-hosted path. - Stream and render OpenUI Lang in React, Vue, Svelte, and browser-based apps.
- Build custom component libraries with typed schemas, state, actions, queries, and mutations.
- Measure and improve generation reliability with repeated evaluations, DevTools, production observability, and runtime correction.
- Set up and customize Agent Interface, including streaming, storage, message rendering, layout, theming, navigation, and artifacts; preserve an existing assistant-ui, CopilotKit, or custom chat surface when only the OpenUI renderer is needed.
- Choose between Responses and Chat Completions, optionally add Conversations persistence to Responses, and distinguish each framework's browser transport from its provider API.
- Add Agent Interface artifacts through tool calls and application-provided renderers for HTML, Markdown, presentations, or any other user-requested content.
- Use built-in or custom component libraries with OpenUI Gateway generation, including Gateway BYOK.
- Migrate legacy JSON UI or self-hosted OpenUI implementations.
- Debug prompts, parsers, renderers, adapters, storage, theming, tools, and artifacts.
npx skills add thesysdev/skillsOnce installed, try prompts such as:
- “Create a streaming OpenUI dashboard from this API.”
- “Create a new OpenUI Gateway agent with LangGraph.”
- “Add Agent Interface to my existing Next.js app.”
- “Build a custom OpenUI component library for these domain objects.”
- “Move this OpenAI Chat Completions app to OpenUI Gateway without changing its history model.”
- “Migrate this self-hosted OpenUI chat to OpenUI Gateway.”
| Resource | Purpose |
|---|---|
skills/openui/SKILL.md |
Core workflows, package guidance, OpenUI Lang rules, and verification steps |
agent-interface.md |
Agent Interface setup, backend channels, message rendering, shell customization, navigation, and artifact integration |
artifacts.md |
Detailed Agent Interface artifact workflow: tool results, custom renderers, editing, and optional storage |
gateway/integration.md |
Shared Gateway routing, configuration, security, BYOK, compatibility, reliability, and verification |
gateway/quickstart.md |
Gateway-first scaffolding, generated-template workflow, and launch verification |
gateway/chat/api-selection.md |
Selection between Responses and Chat Completions for conversational generation |
gateway/chat/responses.md |
Responses generation, history modes, streaming, hosted tools, and application function tools |
gateway/chat/chat-completions.md |
Chat Completions, app-owned history/storage, adapters, and function-tool runbook |
gateway/chat/conversations.md |
Optional Responses persistence: threads, items, frontend tokens, identity, authorization, and browser storage |
gateway/oss-migration.md |
Migration of an existing OpenAI-compatible client by changing its key, base URL, and model id |
examples.md |
Complete first-party example catalog plus current existing-chat and runtime integration guides |
build-component-library.md |
Component definition, schema design, prompt/spec handoff, runtime wiring, and verification |
open-ended-html.md |
Guidance for generated HTML, sandboxed apps, and open-ended UI |
theme-provider.md |
Theme ownership, tokens, light/dark mode, nested scopes, and portals |
- OpenUI Lang — a language for AI-generated interfaces.
- Runtime packages — render those interfaces in React, Vue, Svelte, or the browser.
- Component libraries — the components the model can use.
- Agent Interface — a ready-made chat application with conversation history, generated UI, and an artifact workspace. See the dedicated guide.
- OpenUI Gateway — access models with automatic fallbacks and UI correction.
- OpenUI Observability — monitor and debug generated interfaces in production.