Add UIPunch to anything.

How it works

Quick start

Get an API key from your dashboard, then make a POST request:

curl -X POST https://uipunch.com/api/v1/generate \
  -H "Authorization: Bearer uip_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Dark mode paywall for a fitness app",
    "framework": "react"
  }'

That's it. You get back code (production-ready component) in your requested framework.

To generate a new screen while staying consistent with existing app code, pass mode: "generate" + contextCode:

curl -X POST https://uipunch.com/api/v1/generate \
  -H "Authorization: Bearer uip_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "mode": "generate",
    "framework": "react",
    "prompt": "Add a settings screen matching our current style",
    "contextCode": "export function ExistingScreen() { ... }",
    "projectContext": "Design tokens + shared component conventions"
  }'

To enhance an existing screen, send your current code in existingCode:

curl -X POST https://uipunch.com/api/v1/generate \
  -H "Authorization: Bearer uip_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "mode": "enhance",
    "framework": "react",
    "prompt": "Improve visual hierarchy and CTA clarity",
    "existingCode": "export default function Screen() { ... }",
    "projectContext": "theme colors: #0B1220, #14B8A6; buttons use rounded-xl; spacing scale: 4,8,12,16..."
  }'

curl -X POST https://uipunch.com/api/v1/generate \
  -H "Authorization: Bearer uip_your_key_here" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Profile page for a music app with stats and follow button",
    "framework": "react",
    "openrouterKey": "sk-or-v1-your-openrouter-key",
    "model": "anthropic/claude-sonnet-4"
  }'

Works with any model on OpenRouter — Claude, GPT-4o, Gemini, Llama, Mistral, and more.

You can tell your AI coding tool to call UIPunch whenever it needs to build UI. Instead of generating generic UI directly, it can request production-quality code from UIPunch.

# .cursor/rules/uipunch.mdc
---
description: Use UIPunch API for UI generation
globs: ["**/*.tsx", "**/*.jsx", "**/*.html"]
---

When the user asks to generate or build any UI screen:

1. Call UIPunch:
   curl -X POST https://uipunch.com/api/v1/generate \
     -H "Authorization: Bearer ${UIPUNCH_API_KEY}" \
     -H "Content-Type: application/json" \
     -d '{"prompt": "<what the user asked for>", "framework": "react"}'

2. Use the "code" field from the response.
3. Don't change the design decisions — colors, spacing, layout
   are already production-ready. Adapt imports to fit the project.

import requests, os

API_KEY = os.environ["UIPUNCH_API_KEY"]
SCREENS = [
    ("Onboarding", "Welcome screen with feature highlights"),
    ("Home", "Dashboard with daily stats and quick actions"),
    ("Profile", "User profile with avatar and settings"),
    ("Paywall", "Premium upgrade with plan toggle"),
]

for name, prompt in SCREENS:
    resp = requests.post(
        "https://uipunch.com/api/v1/generate",
        headers={"Authorization": f"Bearer {API_KEY}"},
        json={"prompt": prompt, "framework": "react"}
    )
    code = resp.json()["code"]
    with open(f"src/screens/{name}.tsx", "w") as f:
        f.write(code)
    print(f"✓ {name}.tsx")

API reference

Authorization: Bearer uip_your_api_key_here

{
  "code": "export default function PaywallScreen() { ... }",
  "framework": "react",
  "frameworkSource": "explicit",
  "screenCount": 1,
  "operation": "generate",
  "mode": "default",
  "creditsRemaining": 29,
  "overageCharged": false
}

API access requires Pro or higher. Credits are shared between the web app and API, and your dashboard shows a cycle-level web/API split.

Included credits and overage are both metered by usage. If a request needs more credits than you have left, prepaid overage is used automatically.