An AI-powered visual UI widget builder and design studio. Create, edit, and manage reusable widget templates with the help of Claude or ChatGPT.
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
Run it instantly with npx. No clone or install required:
npx @swis/genui-studioThen open http://localhost:4277 in your browser.
You can change the port with the PORT environment variable:
PORT=3000 npx @swis/genui-studio- Node.js 18+
- An Anthropic API key and/or OpenAI API key
API keys can be entered directly in the app's settings UI.
If you want to contribute or run from source:
git clone https://github.com/swisnl/genui-studio.git
cd genui-studio
npm installOptionally 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 previewPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
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 is a web agency from Leiden, the Netherlands. We love working with open source software.