Configure Ideogram local development with hot reload and testing.
Use when setting up a development environment, configuring test workflows,
or establishing a fast iteration cycle with Ideogram.
Trigger with phrases like "ideogram dev setup", "ideogram local development",
"ideogram dev environment", "develop with ideogram".
Set up a fast local development workflow for Ideogram integrations. Includes a typed client wrapper, mock server for offline development (avoids burning credits), and vitest integration for automated testing.
Prerequisites
Completed ideogram-install-auth setup
Node.js 18+ with npm/pnpm
IDEOGRAM_API_KEY environment variable set
Instructions
Step 1: Create Project Structure
my-ideogram-project/
├── src/
│ ├── ideogram/
│ │ ├── client.ts # Typed Ideogram client wrapper
│ │ ├── types.ts # Request/response type definitions
│ │ └── mock-server.ts # Local mock for offline dev
│ └── index.ts
├── tests/
│ └── ideogram.test.ts
├── .env.local # Local secrets (git-ignored)
├── .env.example # Template for team
├── tsconfig.json
└── package.json
// src/ideogram/client.ts
import type { GenerateRequest, GenerateResponse } from "./types";
const IDEOGRAM_API = "https://api.ideogram.ai";
export class IdeogramClient {
constructor(private apiKey: string) {
if (!apiKey) throw new Error("IDEOGRAM_API_KEY is required");
}
async generate(request: GenerateRequest): Promise<GenerateResponse> {
const response = await fetch(`${IDEOGRAM_API}/generate`, {
method: "POST",
headers: {
"Api-Key": this.apiKey,
"Content-Type": "application/json",
},
body: JSON.stringify({ image_request: request }),
});
if (!response.ok) {
const body = await response.text();
throw new IdeogramError(response.status, body);
}
return response.json();
}
}
export class IdeogramError extends Error {
constructor(public status: number, public body: string) {
super(`Ideogram API error ${status}: ${body}`);
this.name = "IdeogramError";
}
}
Step 5: Mock Server for Offline Development
// src/ideogram/mock-server.ts
import type { GenerateResponse } from "./types";
// Use this in development to avoid burning real credits
export function mockGenerate(prompt: string): GenerateResponse {
return {
created: new Date().toISOString(),
data: [{
url: `https://placehold.co/1024x1024/333/fff?text=${encodeURIComponent(prompt.slice(0, 30))}`,
prompt,
resolution: "1024x1024",
is_image_safe: true,
seed: Math.floor(Math.random() * 100000),
style_type: "GENERAL",
}],
};
}
