The Marketing Strategy Generator uses GPT-3.5 or GPT-4o (mini) to return structured JSON output. Input details are defined in the toolConfig.ts file, and the output can be automatically displayed by the components/output/OutputLayout.tsx file, regardless of the JSON structure.

Marketing Strategy Generator using GPT-4o mini

Marketing Strategy Generator using GPT-4o mini

​
Pre-requisites

To run the app, you must have Supabase and OpenAI set up. If you haven’t done this yet, please start there.

Supabase

Set up user authentication & PostgreSQL database using Supabase

OpenAI

Set up OpenAI & use it’s various models throughout your app

That’s all you need to get the app running.

Review lib/types/toolconfig.ts to understand the various configuration fields in the demo app.

​
Building variations

The app is designed for easy customization and variation generation because of:

  • Automatic input capturing
  • Automatic output rendering, regardless of JSON structure

​
Prompt and JSON schema

Start by creating a new prompt and JSON schema for your app.

Use the existing prompts and JSON schemas for guidance. Follow the same principles and structure as in the demo prompts.

Your prompt.ts file should manage user input like this:

prompt.ts
export function generatePrompt(body: any) {
  const {
    ideaDescription,
    targetMarket,
    monthlyMarketingBudget,
    currentUserBase,
  } = body;

  return (
    "Craft a multi-faceted growth plan for a startup.\n" +
    "INPUTS:\n" +
    `Idea Description: ${ideaDescription}\n` +
    `Target Customer Base: ${targetMarket}\n` +
    `Monthly Marketing Budget: ${monthlyMarketingBudget} USD\n` +
    `Current User Base: ${currentUserBase}\n` +

Take note of the input variables (ideaDescription,targetMarket,monthlyMarketingBudget & currentUserBase). We’ll use these later.

​
Automatic input capturing

Update toolConfig.ts to include:

  1. The input variables defined in the prompt
    • Input variables in prompt.ts should match name in toolConfig.ts. See example below.
  2. The button text for the form
  3. The type of model used

Ensure the type field in toolConfig.ts is specified correctly. InputCapture.tsx uses this to determine what to include (fields, file uploads) and which API endpoint to call.

The page.tsx page in /app folder of our demo app will get the data from toolConfig.ts and pass it to the InputCapture component to automatically build a form based on this.

​
Automatic output rendering

The goal is to allow rapid app generation, input capture, and output display for fast prototyping. Then, you can refine the output display for a more polished presentation.

app/openai/gpt/[id]/page.tsx will automatically fetch data from Supabase based on the uuid & render the JSON, no matter the structure.

The OutputLayout component handles all the heavy lifting, automatically fetching and displaying the JSON. Review it for better understanding.

app/openai/gpt/[id]/page.tsx
<OutputLayout params={params} toolConfig={toolConfig} />

For this GPT example, a custom layout is included, but you can check out the LLaMA 3 app or the GPT-4o/vision app to see how automatic output rendering works.

GPT-4o & Vision

Analyze and describe images using GPT-4 or GPT Vision

Branding Strategy Generator

Generate a marketing strategy using LLaMA3

GPT-4o & visionLLaMA 3