How to Use JSON Advanced Templates for Agent Automation in awesome-gpt-image-2

The awesome-gpt-image-2 repository provides a JSON-based prompt-template system where agents call a skill with a templateId and variables to receive fully rendered prompts for automated image generation.

The freestylefly/awesome-gpt-image-2 project ships a production-ready framework for automating visual content creation through structured JSON templates. By combining markdown-based template definitions with a machine-readable index and OpenAI-compatible skills, developers can integrate consistent, style-aware image generation into any agentic workflow without manual prompt engineering.

Core Architecture of the JSON Template System

The automation pipeline rests on three interconnected components that transform static prompt skeletons into dynamic, agent-consumable instructions.

Template Definitions in Markdown

All prompt templates live in docs/templates.md, organized by visual style categories such as UI components, infographics, and posters. Each template section uses an anchor ID prefix (e.g., #tpl-ui, #tpl-infographic) and contains a JSON-compatible prompt skeleton with Mustache-style placeholders like {{title}}, {{color}}, or {{data}}.

These markdown sections serve as the canonical source of truth. Human operators can edit stylistic guidelines, pitfalls, and example cases directly in the document, while the build system extracts the structured data for programmatic consumption.

Machine-Readable Index Generation

A build step executed by scripts/generate-site-data.mjs parses docs/templates.md and compiles data/style-library.json. This JSON catalogue maps each template ID to machine-readable metadata:

{
  "id": "tpl-ui",
  "category": "UI & Interfaces",
  "tags": ["components", "layout", "screenshot"],
  "templateUrl": "https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md#tpl-ui",
  "pitfalls": ["Avoid cluttered backgrounds", "Ensure contrast ratios meet WCAG"],
  "exampleCases": ["Admin dashboard", "Mobile settings screen"]
}

By maintaining this index, agents perform fast lookups by id without scraping the full markdown file, reducing latency and parsing complexity.

Skill-Based Template Rendering

The entry point for automation is defined in agents/skills/gpt-image-2-style-library/SKILL.md. When an agent calls this skill with a payload containing templateId and variables, the implementation (located in src/apimartClient.js and supporting modules) executes a stateless transformation:

1. Retrieves the metadata record from data/style-library.json
2. Fetches the raw JSON snippet from the markdown section via templateUrl
3. Replaces all {{variable}} placeholders with supplied values
4. Returns the finalized prompt string to the caller

This design enables integration with LangChain chains, ReAct loops, or custom GPT-4 function calls.

Implementing Agent Automation with JSON Templates

The following patterns demonstrate how to consume the template system from different agent architectures.

Direct Template Loading in Node.js

For agents requiring custom preprocessing, you can fetch and render templates manually without invoking the skill API:

import fetch from 'node-fetch';

// Fetch the raw markdown section by template ID
async function fetchTemplate(section) {
  const url = `https://raw.githubusercontent.com/freestylefly/awesome-gpt-image-2/main/docs/templates.md`;
  const resp = await fetch(url);
  const md = await resp.text();
  const re = new RegExp(`##\\s+${section}[\\s\\S]*?(?=\\n##|$)`);
  const match = md.match(re);
  return match ? match[0] : null;
}

// Simple placeholder substitution
function fillTemplate(template, vars) {
  return template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => vars[key] ?? '');
}

// Example usage
(async () => {
  const raw = await fetchTemplate('tpl-ui');
  const jsonPart = raw.split('```json')[1].split('```')[0];
  const prompt = fillTemplate(jsonPart, { 
    title: 'Admin Dashboard', 
    color: 'teal' 
  });
  console.log(prompt);
})();

This approach targets the docs/templates.md source directly, extracting the JSON block from the #tpl-ui section.

OpenAI Function-Calling Integration

For agents operating within the OpenAI ecosystem, invoke the registered skill via function calling:

{
  "name": "gpt_image_2_style_library",
  "arguments": {
    "templateId": "tpl-poster",
    "variables": {
      "headline": "Summer Sale",
      "product": "Sunglasses",
      "discount": "30%"
    }
  }
}

The skill processes the request and returns a rendered prompt object:

{
  "prompt": "Create a vibrant poster featuring Summer Sale for Sunglasses with a 30% discount. Use bold typography, sunny colors, and eye-catching composition."
}

The placeholders are resolved server-side, producing a string ready for immediate submission to the image generation API.

End-to-End Image Generation Workflow

Combine the skill with the generation endpoint to automate the complete pipeline from template selection to image output:

import { generateImage } from '../api/generate-image.js';

async function generateFromTemplate(templateId, vars) {
  // Invoke the skill to render the prompt
  const { prompt } = await callSkill('gpt_image_2_style_library', {
    templateId,
    variables: vars,
  });

  // Forward to the image generation API
  const result = await generateImage({ prompt });
  return result;
}

// Execute workflow
generateFromTemplate('tpl-character', {
  character: 'medieval knight',
  pose: 'raising sword',
  mood: 'determined',
});

This integration leverages api/generate-image.js as the final stage, accepting the skill-rendered prompt and returning the generated image asset.

Key Source Files and Their Roles

• docs/templates.md — Master document containing all JSON prompt skeletons organized by visual style anchors (#tpl-*).
• data/style-library.json — Auto-generated index enabling fast agent lookups of template metadata, categories, and tags.
• agents/skills/gpt-image-2-style-library/SKILL.md — Skill definition exposing template lookup and rendering logic to OpenAI-compatible agents.
• scripts/generate-site-data.mjs — Build script that synchronizes the markdown templates with the JSON index.
• src/apimartClient.js — Core implementation handling template fetching and variable substitution.
• api/generate-image.js — Backend endpoint receiving finalized prompts and invoking the image generation service.

Summary

• JSON advanced templates in awesome-gpt-image-2 combine markdown documentation with machine-readable indices to power automated prompt generation.
• Template IDs (e.g., tpl-ui, tpl-poster) serve as stable references that agents use to retrieve specific visual styles from data/style-library.json.
• Variable substitution uses Mustache-style {{placeholders}} populated at runtime by the skill defined in agents/skills/gpt-image-2-style-library/SKILL.md.
• Stateless execution allows seamless integration with LangChain, ReAct, or custom GPT-4 function-calling architectures.
• Build automation via scripts/generate-site-data.mjs ensures the JSON index remains synchronized with markdown documentation changes.

Frequently Asked Questions

What format do the template variables use?

The template system uses Mustache-style double curly braces (e.g., {{title}}, {{color}}). When the skill processes a request, it performs a global regex replacement /{{\s*(\w+)\s*}}/g to substitute keys from the variables object with their corresponding values. Variables missing from the payload are replaced with empty strings by default.

How does the agent resolve template IDs without parsing markdown?

Agents query data/style-library.json, which contains pre-extracted metadata for every template. Each record includes the id, category, tags, and templateUrl pointing to the specific section in docs/templates.md. This eliminates the need for runtime markdown parsing, allowing O(1) lookups by templateId.

Can I add custom templates to the style library?

Yes. Create a new section in docs/templates.md with a unique anchor ID (e.g., ## tpl-custom). Include your JSON prompt skeleton with appropriate placeholders. After saving, run scripts/generate-site-data.mjs to regenerate data/style-library.json with your new template entry. The skill will automatically recognize the new templateId in subsequent agent requests.

Is the template rendering process stateless?

Yes. The skill implementation in src/apimartClient.js loads templates and renders prompts on-demand without maintaining session state. Each request containing a templateId and variables object produces an independent response, making the system horizontally scalable and suitable for serverless deployment patterns.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}