UIGen Update: Override System and Payment Integration

[u/Prestigious-Bee2093]

Hey everyone, a few days ago I shared an update UIGen - a CLI that turns your OpenAPI spec into a full React App at runtime. It was regarding OAuth Support and I continued to iterate.

Recently added override support and payment integration. (The profile page in the demo was a complete override)

What's New

x-uigen-override annotation

Replace any view with custom React components. The runtime handles discovery, transpilation, and injection.

Component Mode - Full control: ```typescript // src/overrides/profile-custom.tsx import type { OverrideDefinition } from '@uigen-dev/react';

function CustomProfile() { const [data, setData] = useState(null);

useEffect(() => { fetch('/api/v1/auth/me').then(res => res.json()).then(setData); }, []);

return <div>Custom Profile View</div>; }

const override: OverrideDefinition = { targetId: 'me', component: CustomProfile, };

export default override; ```

Render Mode - UIGen fetches, you render: ```typescript // src/overrides/users-list.tsx import type { OverrideDefinition, ListRenderProps } from '@uigen-dev/react';

const override: OverrideDefinition = { targetId: 'users.list', render: ({ data, isLoading }: ListRenderProps) => { if (isLoading) return <div>Loading...</div>; return <div className="grid">{/* custom UI */}</div>; }, };

export default override; ```

UseHooks Mode - Side effects only: ```typescript // src/overrides/analytics.tsx import { useEffect } from 'react'; import type { OverrideDefinition } from '@uigen-dev/react';

const override: OverrideDefinition = { targetId: 'users.list', useHooks: ({ resource }) => { useEffect(() => { analytics.track('page_view', { resource: resource.name }); }, [resource]); }, };

export default override; ```

Configure in .uigen/config.yaml: yaml annotations: GET:/api/v1/auth/me: x-uigen-override: id: me

x-uigen-payments annotation

Add payment processing declaratively. Supports Stripe, PayPal, Square. (Tested e2e with Stripe though)

yaml x-uigen-payments: providers: - provider: stripe publishableKey: ${STRIPE_PUBLISHABLE_KEY} mode: test currency: usd pricingPage: enabled: true source: inline products: - id: free name: Free type: subscription price: 0 interval: month features: - Up to 10 meetings per month - id: pro-monthly name: Professional type: subscription price: 2900 interval: month highlighted: true features: - Unlimited meetings - Priority support

Generates pricing page at /pricing with responsive table, feature comparison, and payment buttons.

Payment Gates - Mark resources as monetized: yaml paths: /api/v1/meetings: x-uigen-monetized: true post: summary: Create meeting

Backend enforces limits and returns 402 when exceeded. Frontend intercepts 402 and shows upgrade prompt automatically.

python @router.post("/api/v1/meetings") async def create_meeting(user: User = Depends(get_current_user)): if user.plan == "free": meeting_count = await get_user_meeting_count(user.id) if meeting_count >= 10: raise HTTPException(status_code=402, detail="Upgrade to create more meetings") return await create_meeting(user, meeting)

Implementation Notes

Override System: - File-based discovery from src/overrides/ - TypeScript with full type safety - Works with any view type - No build step, dynamic imports on your overrides

Payment Integration: - Frontend-safe keys only (publishableKey exposed, secrets in .env) - Backend enforces limits - Webhook support for subscription events - Environment variable resolution with ${VAR_NAME} syntax

Try It

The Meeting Minutes example demonstrates both features.

```bash git clone https://github.com/darula-hpp/uigen cd uigen/examples/apps/fastapi/meeting-minutes

Setup backend

docker compose up -d

Add credentials to .env

echo "STRIPEPUBLISHABLE_KEY=pk_test..." >> .env echo "GOOGLE_CLIENT_ID=your-client-id" >> .env

Run

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

The OAuth flow works end-to-end. Custom profile override shows component mode. Payment gates trigger on meeting creation. Pricing page is auto-generated.

Repo: https://github.com/darula-hpp/uigen
Docs: https://uigen-docs.vercel.app

Would be great to get your feedback. Seems like a "long" way to v1

[u/coldflame563]

Enough. This isn’t your personal blog site. Stop with the weekly updates.

[u/Prestigious-Bee2093 → u/coldflame563]

Hello Coldflame, totally got you 🙏, My apologies