Quick Start

The fastest way to try UIGen is with npx (no installation required).

Step 1: Run the CLI

Point UIGen at any OpenAPI 3.x or Swagger 2.0 spec file:

npx @uigen-dev/cli serve ./openapi.yaml

You should see output like:

🚀 UIGen starting...

Reading spec: ./openapi.yaml
✓ Parsed spec: Petstore API v1.0.0
  Resources: pets, users

API proxy target: http://localhost:3000

✓ Server running at http://localhost:4400

Press Ctrl+C to stop

Step 2: Open the browser

Navigate to http://localhost:4400. UIGen serves a complete React SPA with:

  • A sidebar listing all resources detected from your spec
  • A dashboard overview with resource counts
  • Fully functional list, detail, create, edit, and delete views

Step 3: Navigate the generated UI

Click any resource in the sidebar to open its list view. From there you can:

  • Browse records fetched live from your API
  • Click a row to open the detail view
  • Use the New button to open the create form
  • Edit or delete records inline

Using a remote spec

UIGen also accepts a URL:

npx @uigen-dev/cli serve https://petstore3.swagger.io/api/v3/openapi.json

Custom port

npx @uigen-dev/cli serve ./openapi.yaml --port 8080

Custom proxy base

If your API runs on a different host than what's declared in the spec's servers field:

npx @uigen-dev/cli serve ./openapi.yaml --proxy-base http://localhost:3001

Next steps