# How to Integrate gpt-image-2-style-library with Claude Code and Codex: Complete Developer Guide

> Integrate gpt-image-2-style-library with Claude Code and Codex. Follow this developer guide to implement image generation features using a marketplace.json manifest or npm package.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-08-31

---

**You can integrate gpt-image-2-style-library with Claude Code via a [`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) manifest and with Codex as an npm package by importing the `generatePrompt` function from `@gpt-image-2/style-library`.**

The **gpt-image-2-style-library** is a reusable skill module in the [freestylefly/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2) repository that provides structured prompt templates for GPT-Image-2. Both Claude Code and Codex can consume this library using provider-specific integration patterns while sharing the same underlying data source in [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).

---

## Architecture Overview

The repository uses a **single-source-of-truth design**. All style definitions, categories, and templates live in one JSON file, while thin adapter layers handle Claude Code and Codex compatibility.

| Component | Purpose | Location |
|-----------|---------|----------|
| **Data layer** | Master catalog of styles, scenes, and templates | [[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) |
| **NPM package** | Distributable skill with programmatic API | `agents/skills/gpt-image-2-style-library/` |
| **OpenAI manifest** | Example LLM tool definition | [[`agents/skills/gpt-image-2-style-library/agents/openai.yaml`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/agents/openai.yaml)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/agents/openai.yaml) |
| **Claude plugin** | Claude Code marketplace registration | [[`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) |

---

## Claude Code Integration

Claude Code discovers external skills through a **manifest-based plugin system**. The repository provides a pre-configured manifest that declares the skill's capabilities to Claude.

### Step 1: Verify Plugin Manifest Structure

Claude Code reads [`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) at startup. The manifest maps to the same HTTP endpoint pattern used by the OpenAI integration:

```json
// .claude-plugin/marketplace.json (structure)
{
  "name": "gpt-image-2-style-library",
  "description": "Prompt templates for GPT-Image-2 image generation",
  "type": "http",
  "url": "https://your-deployment.com/gpt-image-2-style-library/generate",
  "input_schema": {
    "type": "object",
    "properties": {
      "templateId": { "type": "string" },
      "customizations": { "type": "object" }
    },
    "required": ["templateId"]
  },
  "output_schema": {
    "type": "object",
    "properties": {
      "prompt": { "type": "string" }
    }
  }
}

```

### Step 2: Deploy the Skill Endpoint

The skill exposes an HTTP server through `bin/install.mjs`. Deploy this to a URL accessible by Claude Code:

```bash
cd agents/skills/gpt-image-2-style-library
npm install
npm run start  # Starts HTTP server on configured port

```

### Step 3: Invoke from Claude Code

Once registered, reference the skill in any Claude Code conversation:

```json
{
  "name": "gpt-image-2-style-library",
  "input": {
    "templateId": "ui-screenshot-system",
    "customizations": {
      "platform": "iOS",
      "aspectRatio": "16:9",
      "title": "My New App"
    }
  }
}

```

Claude Code routes the request to your deployed endpoint and returns the generated prompt string for use in subsequent image generation calls.

---

## Codex Integration

Codex integrates with **gpt-image-2-style-library** as a standard npm dependency, enabling direct function calls within your codebase.

### Installation

```bash
npm install @gpt-image-2/style-library

```

The package resolves to the local path defined in [`agents/skills/gpt-image-2-style-library/package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/package.json).

### Programmatic API Usage

Import and call `generatePrompt` from `bin/generate.mjs` (the package's main entry point):

```javascript
import { generatePrompt } from '@gpt-image-2/style-library';

async function createImagePrompt() {
  const prompt = await generatePrompt({
    templateId: 'character-design-sheet',
    customizations: {
      character: 'Cyberpunk Hacker',
      poses: 4,
      outfit: 'Neon Jacket'
    }
  });

  // Use with Codex or any OpenAI image model
  const response = await openai.images.generate({
    model: 'gpt-image-2',
    prompt,
    n: 1,
    size: '1024x1024'
  });

  return response.data[0].url;
}

createImagePrompt();

```

### Direct Data Access

For advanced use cases, access the raw style library data:

```javascript
import styleLibrary from '@gpt-image-2/style-library/data/style-library.json';

// List available templates
const templates = Object.keys(styleLibrary.templates);

// Access specific style metadata
const style = styleLibrary.categories.photography.styles['cinematic-lighting'];

```

---

## Shared Data Model

Both integrations consume **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)** as the canonical source. This file defines:

- **Categories**: Top-level groupings (photography, illustration, UI/UX)
- **Styles**: Visual aesthetics within each category
- **Scenes**: Compositional contexts
- **Templates**: Pre-built prompt structures with substitution variables

The `generatePrompt` function in `bin/generate.mjs` merges template strings with `customizations` objects to produce final prompts. This logic is **provider-agnostic**—Claude Code calls it via HTTP, Codex calls it as a library function.

---

## Configuration Comparison

| Aspect | Claude Code | Codex |
|--------|-------------|-------|
| **Discovery mechanism** | [`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) manifest | [`package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/package.json) dependency |
| **Invocation style** | HTTP POST to deployed endpoint | In-process function call |
| **Entry point** | `bin/install.mjs` (server mode) | `bin/generate.mjs` (library mode) |
| **Authentication** | Bearer token in manifest headers | Environment variables in host app |
| **Response format** | JSON with `prompt` field | JavaScript string return |

---

## Key Files Reference

| File | Purpose |
|------|---------|
| [[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) | Master data catalog—consumed by both integrations |
| [[`agents/skills/gpt-image-2-style-library/package.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/package.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/package.json) | NPM package definition with `main` pointing to `bin/generate.mjs` |
| [[`agents/skills/gpt-image-2-style-library/SKILL.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/SKILL.md) | Human-readable skill documentation for marketplaces |
| [[`agents/skills/gpt-image-2-style-library/agents/openai.yaml`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/agents/openai.yaml)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/agents/skills/gpt-image-2-style-library/agents/openai.yaml) | Reference manifest for converting to Claude format |
| [[`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) | Claude Code plugin registration |
| `agents/skills/gpt-image-2-style-library/bin/generate.mjs` | Core prompt generation logic |
| `agents/skills/gpt-image-2-style-library/bin/install.mjs` | HTTP server setup for Claude Code deployment |

---

## Summary

- **gpt-image-2-style-library** provides a unified prompt template system for GPT-Image-2 through [[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).

- **Claude Code** integrates via the [[`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json)](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) manifest, which declares an HTTP endpoint served by `bin/install.mjs`.

- **Codex** integrates by installing `@gpt-image-2/style-library` and importing `generatePrompt` from `bin/generate.mjs` for direct programmatic access.

- Both approaches use identical template substitution logic and consume the same [`style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/style-library.json) source, ensuring consistent prompt output across platforms.

---

## Frequently Asked Questions

### What is the minimum required configuration for Claude Code integration?

Claude Code requires only a valid [`.claude-plugin/marketplace.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/.claude-plugin/marketplace.json) file with `name`, `type: "http"`, `url`, and `input_schema`/`output_schema` fields. The skill HTTP endpoint must accept `templateId` and optional `customizations` parameters, returning a JSON object with a `prompt` string.

### Can I use the same deployment for both Claude Code and Codex?

Yes. Deploy `bin/install.mjs` as a persistent HTTP service for Claude Code, while also publishing the same package to a private npm registry for Codex. Both consume [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) identically, so updates to the data automatically propagate to both integrations.

### How do I add custom templates to the library?

Add new template definitions to [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) following the existing schema structure, then reference the new `templateId` in either your Claude Code manifest calls or Codex `generatePrompt()` invocations. No code changes are required in the integration layers.