# Ui Generator (`tinkerbrains/ui-generator`) Actor

Get UI designs for your app ideas. Get HTML + TailwindCSS code and a full screenshot of the design in output data. You will need a Anthropic Claude API Key to add in environment variables.

- **URL**: https://apify.com/tinkerbrains/ui-generator.md
- **Developed by:** [Sanket Dongre](https://apify.com/tinkerbrains) (community)
- **Categories:** Developer tools, AI, Integrations
- **Stats:** 25 total users, 0 monthly users, 100.0% runs succeeded, 12 bookmarks
- **User rating**: 5.00 out of 5 stars

## Pricing

$30.00 / 1,000 results

This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events.

Learn more: https://docs.apify.com/actors/running/actors-in-store.md#pay-per-event

## What's an Apify Actor?

An Actor is a serverless cloud program that runs on the Apify platform. It has two run modes.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.

Apify vocabulary and the platform model are defined once, in the agent quickstart at https://apify.com/agents.md.

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.

Do not guess an integration path. Every one of them is in the agent quickstart at https://apify.com/agents.md: the Apify MCP server, Agent Skills with the Apify CLI, the JavaScript and Python clients, the REST API, and the account-free path for an agent with no human to sign in. It also carries the rule on stating cost before the first paid run.

For examples already wired to this Actor's own input schema, see the [API](#api) section below.

Each client library has reference documentation the quickstart does not restate: [JavaScript/TypeScript](https://docs.apify.com/api/client/js/docs.md) (`npm install apify-client`) and [Python](https://docs.apify.com/api/client/python/docs.md) (`pip install apify-client`).

# README

## UI Generator Apify Actor

Generate beautiful, modern UI designs from text descriptions using Claude AI.

### Features

- Generate complete HTML/CSS/JS code from text descriptions
- Customizable style preferences
- Production-ready code using Tailwind CSS
- Responsive design out of the box
- Caching support for faster responses
- Detailed error handling and logging

### Input

```json
{
    "prompt": "A modern landing page for a fitness app",
    "claude_api_key": "your-api-key",
    "style_preferences": {
        "colorScheme": "light",
        "style": "minimal"
    }
}
```

### Output

The actor outputs:

1. Generated HTML code in the dataset
2. Cached results in key-value store
3. Success/failure status for each generation

Example output:

```json
{
    "html": "<!DOCTYPE html>...",
    "prompt": "A modern landing page for a fitness app",
    "success": true
}
```

### Usage

#### Via Apify Console

1. Go to the actor's page
2. Input your prompt and API key
3. Run the actor

#### Via API

```python
from apify_client import ApifyClient

client = ApifyClient('your-apify-token')
run_input = {
    'prompt': 'A modern landing page for a fitness app',
    'claude_api_key': 'your-claude-api-key'
}

run = client.actor('username/ui-generator').call(run_input=run_input)
results = client.dataset(run['defaultDatasetId']).list_items().items
```

### Local Development

1. Install dependencies:

```bash
pip install -r requirements.txt
```

2. Set up environment variables:

```bash
ANTHROPIC_API_KEY=your-key
```

3. Run locally:

```bash
python src/actor.py
```

### Deployment

1. Install Apify CLI:

```bash
npm install -g apify-cli
```

2. Login to Apify:

```bash
apify login
```

3. Push to Apify:

```bash
apify push
```

### Memory and Compute

- Minimum memory: 256 MB
- Timeout: 300 seconds
- Storage: Uses both Dataset and Key-value store

### Error Handling

The actor includes comprehensive error handling:

- Input validation
- API error handling
- Detailed error logging
- Error status in output

# Actor input Schema

## `prompt` (type: `string`):

Description of the UI you want to generate

## `claude_api_key` (type: `string`):

Your Anthropic Claude API key

## `style_preferences` (type: `object`):

Optional styling preferences for the UI

## Actor input object example

```json
{
  "style_preferences": {}
}
```

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {};

// Run the Actor and wait for it to finish
const run = await client.actor("tinkerbrains/ui-generator").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = {}

# Run the Actor and wait for it to finish
run = client.actor("tinkerbrains/ui-generator").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{}' |
apify call tinkerbrains/ui-generator --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,tinkerbrains/ui-generator"
        }
    }
}
```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/ry1aI6v3EhUzwUHcg/builds/cJ5RMaHuO3pcJ48MY/openapi.json