Point it at an OpenAPI spec. Get a fully functional frontend. Zero boilerplate.
# Configure your spec (optional but helpful - Includes theme config)
npx @uigen-dev/cli config openapi.yaml
# Serve your UI
npx @uigen-dev/cli serve openapi.yamlVisit http://localhost:4400 to see your app.
git clone https://github.com/darula-hpp/uigen
cd examples/apps/fastapi/meeting-minutes
# Setup backend (FastAPI + PostgreSQL)
docker compose up -d
docker compose exec app alembic upgrade head
# Test UIGen with the example
cd ../../../ # Back to repo root
pnpm install && pnpm build
pnpm run test:config
pnpm run test:serveUIGen transforms your OpenAPI spec into a complete, interactive frontend in seconds. Here's the flow:
OpenAPI Spec (YAML/JSON)
│
▼
Config Reconciliation (.uigen/config.yaml merged in)
│
▼
Adapter (parser)
│
▼
IR (Intermediate Representation)
│
▼
React SPA (renderer)
│
▼ live API calls via proxy
Your API
UIGen reconciles your config with the spec, then parses it into a framework-agnostic Intermediate Representation containing:
- Resources and their relationships
- Operations (CRUD + custom actions)
- Schemas with validation rules
- Authentication flows
- Pagination strategies
The React renderer reads this IR and generates:
- Table views with sorting, filtering, pagination
- Create & edit forms with validation
- Detail views with related resource links
- Search interfaces from query parameters
- Authentication flows (Bearer, API Key, HTTP Basic, credential-based login)
- Multi-step wizards for complex forms
- Custom action buttons for non-CRUD endpoints
- Dashboard with resource overview
- Dark/light theme toggle
Because the IR is framework-agnostic, you can swap renderers. The same spec works with @uigen-dev/react, @uigen-dev/svelte, or @uigen-dev/vue (coming soon).
- Full Documentation - Complete guides, API reference, and examples
- Architecture - Deep dive into the IR, adapters, and rendering pipeline
- Better handling of resources and their relationships
- Layout Config
MIT
