Skip to main content

​
Quickstart Guide

This guide will help you get Open Higgsfield AI up and running in just a few minutes.

​
Prerequisites

Before you begin, make sure you have:

Node.js v18+

Download from nodejs.org

Muapi API Key

Get yours at muapi.ai
Node.js v18 or higher is required. Check your version with node --version.

​
Getting Your Muapi API Key

Open Higgsfield AI uses Muapi.ai as its AI model gateway, providing access to 200+ models through a single API.
1

Visit Muapi.ai

Navigate to muapi.ai and create an account if you don’t have one.
2

Generate API Key

Once logged in, go to your dashboard and generate a new API key. It will start with sk-.
3

Save Your Key

Copy the API key and save it somewhere secure. You’ll need it when you first launch Open Higgsfield AI.
Your API key is stored locally in your browser’s localStorage and is never sent to any server except Muapi.ai for authentication. Keep it secure!

​
Installation

1

Clone the repository

Clone the Open Higgsfield AI repository from GitHub:
git clone https://github.com/Anil-matcha/Open-Higgsfield-AI.git
cd Open-Higgsfield-AI
2

Install dependencies

Install the required npm packages:
npm install
This will install:
  • Vite — Development server and build tool
  • Tailwind CSS v4 — Styling framework with PostCSS
  • Autoprefixer — CSS vendor prefix automation
3

Start the development server

Launch the Vite development server:
npm run dev
You should see output like:
VITE v5.4.0  ready in 234 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
4

Open in your browser

Navigate to http://localhost:5173 in your web browser.

​
First-Time Setup

When you first open Open Higgsfield AI, you’ll see the API key authentication modal: API Key Authentication Modal
1

Enter your API key

Paste your Muapi API key (starts with sk-) into the input field.
2

Initialize the studio

Click the “Initialize Studio” button to save your key and unlock the interface.
Your API key is stored in localStorage under the key muapi_key. You can clear it anytime from the Settings menu.

​
Generate Your First Image

Now that the studio is initialized, let’s create your first AI-generated image!
1

Choose Image Studio

By default, you’ll be in the Image Studio. You should see the “NANO BANANA PRO” hero text and a prompt input bar.
2

Select a model

Click the model picker dropdown. You’ll see 50+ text-to-image models. For this example, select “Flux Dev”:
// From src/lib/models.js - Flux Dev model definition
{
  "id": "flux-dev",
  "name": "Flux Dev",
  "endpoint": "flux-dev-image",
  "inputs": {
    "prompt": {
      "description": "Text prompt describing the image",
      "type": "string"
    },
    "aspect_ratio": {
      "enum": ["1:1", "16:9", "9:16", "4:3", "3:4", "21:9"],
      "default": "1:1"
    }
  }
}
3

Choose an aspect ratio

Select your desired aspect ratio from the dropdown. Options include:
  • 1:1 — Square (1024×1024)
  • 16:9 — Widescreen (1280×720)
  • 9:16 — Portrait (720×1280)
  • 4:3 — Standard (1152×864)
  • 21:9 — Ultrawide (1536×640)
4

Write your prompt

Enter a descriptive prompt in the text area. For example:
A majestic snow leopard standing on a rocky mountain peak at sunset, 
dramatic lighting, photorealistic, 8k, highly detailed fur texture
5

Generate

Click the “Generate” button (or press Cmd/Ctrl + Enter). The button will show a loading state:
  • “Submitting…” — Sending request to Muapi API
  • “Generating…” — Polling for results (typically 10-30 seconds)
6

View your result

Once complete, your generated image will appear in the canvas area, replacing the hero text. The image is automatically added to your generation history.
The generation flow uses a submit-and-poll pattern. The app first sends a POST request to /api/v1/flux-dev-image, then polls /api/v1/predictions/{request_id}/result every 2 seconds until the image is ready.

​
Generate Your First Video

Ready to try video generation? It’s just as easy!
1

Switch to Video Studio

Click “Video” in the header navigation to switch to the Video Studio.
2

Select a text-to-video model

Choose a model like “Kling v3”, “Veo 3”, or “Seedance 2.0” from the model picker.
3

Configure video settings

Set your desired:
  • Aspect ratio — 16:9, 9:16, 4:3, or 3:4
  • Duration — 5s, 10s, or 15s (model-dependent)
  • Quality — Basic or High (if supported)
4

Write your prompt

Enter a video prompt, for example:
A drone shot flying through a misty forest at dawn, 
slow smooth camera movement, cinematic lighting
5

Generate and wait

Click Generate. Video generation takes longer than images (typically 1-3 minutes depending on the model and duration).
6

View and download

Your video will appear in the player once complete. Click the download button to save it locally.

​
Explore Advanced Features

​
Image-to-Image Transformation

1

Upload a reference image

In Image Studio, click the upload button to open the reference image picker.
2

Select or upload an image

Choose from previously uploaded images or click “Upload files” to add a new one.
3

Model auto-switching

The model picker automatically switches to show 55+ image-to-image models when a reference image is selected.
4

Generate with reference

Write a prompt describing how you want to transform the image and click Generate.

​
Multi-Image Input

Some models support up to 14 reference images:
1

Select a multi-image model

Choose models like “Nano Banana 2 Edit” (14 images) or “Flux Kontext Dev I2I” (10 images).
2

Multi-select mode

The upload picker switches to multi-select mode with checkboxes and order numbers.
3

Select multiple images

Click images in the order you want them sent to the model. Each gets an order badge (1, 2, 3…).
4

Confirm selection

Click “Use Selected” to confirm and close the picker.
5

Generate

Write your prompt and generate. The API receives all images in the images_list array:
// From src/lib/muapi.js:245-252
const imageField = modelInfo?.imageField || 'image_url';
const imagesList = params.images_list?.length > 0 
  ? params.images_list 
  : (params.image_url ? [params.image_url] : null);
if (imagesList) {
  if (imageField === 'images_list') {
    finalPayload.images_list = imagesList;
  }
}

​
Managing Your API Key

You can update or remove your API key anytime:
  1. Click the Settings icon in the header
  2. In the Settings modal, click “Clear API Key”
  3. Confirm the action to remove the key from localStorage
  4. The auth modal will appear again on next generation

​
What’s Next?

Installation Guide

Learn about production builds, environment configuration, and troubleshooting

Image Studio

Deep dive into text-to-image and image-to-image generation

Video Studio

Explore text-to-video and image-to-video models

Cinema Studio

Master professional camera controls for cinematic shots
Join the community! Star the repo on GitHub and read the full technical overview on Medium.

Build docs developers (and LLMs) love

Get started for freeTalk to us