The DALL·E Logo generator uses DALL·E 3 to generate a logo based on keywords. Input details are defined in the toolConfig.ts file, and the image is automatically stored on Cloudflare R2 and displayed after generation.

DALL·E Logo generator

DALL·E Logo generator

​
Pre-requisites

To run the app, you must have Supabase, OpenAI and Cloudflare R2 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

Storage

Set up audio, pdf and image storage using Cloudflare R2

If you don’t want to store images on Cloudflare R2, you can simply delete the upload section under app/api/(apps)/dalle/route.ts.

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

You can easily build variations by changing the prompt.ts file and passing different input variables.

​
Prompt

Start by creating a new prompt for your app.

Use the existing prompts 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 } = body;

  return (
    `Design a modern, sleek, and scalable logo for a SaaS application that embodies the essence of ${ideaDescription}. The logo should be versatile, distinctive, and memorable, while conveying the brand's values and personality.\n` +
    "INPUTS:\n" +
    `Business Description: ${ideaDescription}\n` +

Take note of the ideaDescription input variable. We’ll use it 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.

  type: "dalle", // options: 'vision' for GPT-4o, 'dalle', 'sdxl', 'groq' & 'gpt'.
  fields: [
    {
      label: "🎯 Keywords",
      name: "ideaDescription",
      type: "input",
      placeholder: "Enter a couple of keywords related to your business.",
      required: true,
    },
  ],
  submitText: "Generate logo 👩🏼‍🎨",
  submitTextGenerating: "Generating your logo...",

​
Displaying output

After the image has been generated, the image will be automatically displayed on screen instead of the initial InfoCard component.