GenUI Studio

An AI-powered visual UI widget builder and design studio. Create, edit, and manage reusable widget templates with the help of Claude or ChatGPT.

What it does

GenUI Studio is a web-based IDE for building OpenAI Chatkit compatible widgets. You describe what you want in natural language, and the AI agent generates or modifies widget templates on a visual canvas. Templates use a JSX-like syntax that compiles to Nunjucks JSON templates, compatible with the @swis/genui-widgets component library.

Key features:

• AI agent — Chat with Claude or ChatGPT to generate and modify widgets
• Visual canvas — Drag, position, and arrange widgets on an infinite canvas
• Live preview — See widgets render with dynamic template data in real time
• Theme system — Full light/dark mode with customizable color palettes
• Multi-project — Create and switch between multiple projects
• Undo/redo — Full history with keyboard shortcuts

Quick start

Run it instantly with npx. No clone or install required:

npx @swis/genui-studio

Then open http://localhost:4277 in your browser.

You can change the port with the PORT environment variable:

PORT=3000 npx @swis/genui-studio

Requirements

• Node.js 18+
• An Anthropic API key and/or OpenAI API key

API keys can be entered directly in the app's settings UI.

Development

If you want to contribute or run from source:

git clone https://github.com/swisnl/genui-studio.git
cd genui-studio
npm install

Optionally create a .env file in the project root:

VITE_ANTHROPIC_API_KEY=your_anthropic_key_here
VITE_OPENAI_API_KEY=your_openai_key_here

# Development server (hot reload)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Joris Meijer
• All Contributors

License

This package is open-sourced software licensed under the GPL License.

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you'll be creating employment for local families and restoring wildlife habitats.

SWIS :heart: Open Source

SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.