/ AI Agent API

Build UI API

Generate UI components, layouts, and CSS from text descriptions using AI. Ideal for design systems, no-code builders, and rapid prototyping tools.

Authentication

# Pass API key in header:
curl -H "x-api-key: tpx_your_key_here" \
     -X POST https://toolpix.dev/api/v1/ui/component \
     -H "Content-Type: application/json" \
     -d '{ "description": "dark card with gradient border" }'

# Get your key at: https://toolpix.dev/console/api-keys

Supported Frameworks & Styles

Frameworks

reacthtmlvuesvelte

Style outputs

tailwindcssscssinline

Endpoints

POST/api/v1/ui/component🔑 API Key required

Generate a React or HTML component from a text description

Request:

{ "description": "a dark card with image, title and button", "framework": "react", "style": "tailwind" }

Response:

{ "code": "export function Card({ ... }) { ... }", "preview": "data:image/png;base64,...", "tokens": 320 }

POST/api/v1/ui/layout🔑 API Key required

Generate a full page layout from a description or wireframe spec

Request:

{ "description": "landing page for a SaaS product with hero, features grid, pricing", "framework": "react" }

Response:

{ "code": "...", "sections": ["hero", "features", "pricing"], "tokens": 1200 }

POST/api/v1/ui/css

Generate CSS / Tailwind classes for a visual description

Request:

{ "description": "glassmorphism card, purple accent, rounded corners", "output": "tailwind" }

Response:

{ "classes": "bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 shadow-xl p-6", "css": "..." }

POST/api/v1/ui/fix🔑 API Key required

Fix broken or ugly UI code

Request:

{ "code": "<div style=\"color:red\"...", "issue": "make it responsive and accessible" }

Response:

{ "fixed": "...", "changes": ["added aria-label", "replaced inline style", "added sm: breakpoints"] }

POST/api/v1/ui/screenshot-to-code🔑 API Key required

Convert a screenshot or image URL to HTML/React code

Request:

{ "imageUrl": "https://...", "framework": "html", "style": "css" }

Response:

{ "code": "<!DOCTYPE html>...", "confidence": 0.87, "tokens": 980 }

GET/api/v1/ui/templates

List available UI component templates

Response:

{ "templates": [{ "id": "hero", "label": "Hero Section", "frameworks": ["react", "html"] }, ...] }

Rate Limits

Build UI endpoints consume AI credits. The daily AI limit applies per user.

Plan	AI calls/day	Requests/day	Price
Free	—	5	Free
Basic	10	50	$4.99/mo
Pro	50	200	$9.99/mo
Unlimited	500	9,999	$29.99/mo

View full pricing →

Quick Example

// Node.js example
const res = await fetch("https://toolpix.dev/api/v1/ui/component", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "x-api-key": "tpx_your_key_here",
  },
  body: JSON.stringify({
    description: "pricing card with monthly/yearly toggle, 3 tiers",
    framework: "react",
    style: "tailwind",
  }),
});

const { code } = await res.json();
console.log(code); // → React component code