Skip to main content
Structured Output is the cleanest example of “AI that returns usable data instead of random paragraphs.” It lets users pick a template, choose a model, and get validated structured results.

​
Why This App Matters

Many people try to build AI features by asking a model for JSON and hoping the result is clean enough to parse. This app shows the better pattern:
  • define a schema
  • define a template
  • collect the right inputs
  • generate structured output
  • render the result in a product-friendly way
That pattern is useful across hundreds of SaaS ideas.

​
Supported Providers

ProviderExamples
OpenAIGPT-5, GPT-5 mini
AnthropicClaude Opus 4.5, Sonnet 4.5, Haiku 4.5
GoogleGemini 3 Pro, Gemini 2.5 Flash
GroqLlama 4 Scout, Llama 4 Maverick
xAIGrok 4, Grok 4.1
DeepSeekDeepSeek models

​
Pre-requisites

Supabase

Needed for auth and saved generations.

AI Provider

Set up at least one AI provider.
You only need an API key for the provider whose models you want to use. Add more providers to unlock more model options.

​
Built-In Templates

The current app already includes templates such as:
  • Product Hunt Launch Simulator
  • Marketing Plan Generator
These are not just prompt presets. Each one has its own schema and rendering logic.

​
How It Works

​
1. Define a Template

Create a prompt template with a corresponding Zod schema that defines the expected JSON output structure:
schema.ts
import { z } from "zod";

export const mySchema = z.object({
  title: z.string(),
  summary: z.string(),
  keyPoints: z.array(z.string()),
  recommendations: z.array(
    z.object({
      action: z.string(),
      priority: z.string(),
    })
  ),
});

​
2. Configure The Form Inputs

Define the input fields in toolConfig.ts. Input variables should match what your prompt expects:
toolConfig.ts
fields: [
  {
    label: "Topic",
    name: "topic",
    type: "textarea",
    placeholder: "Describe the topic you want to analyze...",
    required: true,
  },
  {
    label: "Output Style",
    name: "outputStyle",
    type: "select",
    options: ["Concise", "Detailed", "Technical"],
    required: true,
  },
],
submitText: "Generate Output",
submitTextGenerating: "Generating...",

​
3. Build the Prompt

Your prompt.ts file consumes the input variables:
prompt.ts
export function generatePrompt(body: any) {
  const { topic, outputStyle } = body;

  return (
    "Analyze the following topic and provide structured output.\n" +
    "INPUTS:\n" +
    `Topic: ${topic}\n` +
    `Output Style: ${outputStyle}\n`
  );
}

​
4. Select a Model and Generate

The user selects a template, picks a model, submits the form, and receives a validated structured response.

​
Why This App Is Useful As A Template

This app is a strong base for:
  • marketing planners
  • research assistants
  • business analysis tools
  • onboarding flows
  • internal ops tools
  • any product where AI should return clean data, not just text

​
Files To Know

If you want to customize this app, start with:
  • app/(apps)/structured-output/templates/*
  • app/(apps)/structured-output/api/route.ts
  • app/(apps)/structured-output/form.tsx
  • app/(apps)/structured-output/toolConfig.ts

​
Credit System

Structured Output uses the shared credit system, so you can monetize premium generations without rebuilding billing logic.