WebJSON Prompting: Build an AI Carousel Generator with Claude

TL;DR WebJSON is a prompting technique that forces AI models like Claude to output structured JSON data that you can easily plug into your applications. Let me show you how I used this to build an AI Carousel Generator.

What is WebJSON Prompting?

LLMs (Large Language Models) are great at writing text, but they often struggle to return data in a reliable, machine-readable format. WebJSON is a structured prompt methodology that constrains the LLM's output to strictly valid JSON matching a specific schema.

Why Do We Need Structured Output?

If you are building an application that uses AI to generate content (like a carousel generator), you can't just receive a block of text. You need an array of objects, where each object represents a slide with a heading, content, and image_prompt.

The Carousel Generator Prompt

Here is the exact prompt structure I used to generate carousel data:

{
  "system_instruction": "You are a professional social media manager. Your task is to generate an engaging LinkedIn carousel about [TOPIC].",
  "output_format": "You MUST return ONLY valid JSON matching the following schema. Do not include markdown formatting like 

json.",
"schema": {
"type": "array",
"items": {
"type": "object",
"properties": {
"slide_number": { "type": "integer" },
"heading": { "type": "string", "maxLength": 40 },
"body_text": { "type": "string", "maxLength": 150 },
"visual_suggestion": { "type": "string" }
},
"required": ["slide_number", "heading", "body_text", "visual_suggestion"]
}
}
}
``

Parsing the Output

By forcing the model to adhere to this strict JSON structure, the application code becomes extremely simple. You just send the prompt, await the response, and run JSON.parse(response)`.

If the model behaves correctly, you now have an array of slide objects that you can map over in React to render beautiful carousel graphics!