The Business Plan Generator uses Claude 3 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.

Business Plan Generator using Claude 3

Business Plan Generator using Claude 3

​
Pre-requisites

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

Supabase

Set up user authentication & PostgreSQL database using Supabase

Anthropic

Set up Anthropic & understand how it’s used throughout the 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 { businessIdea, targetMarket, revenueStreams } = body;

  return (
    "Create a comprehensive business plan for a solopreneur, focusing on the unique aspects of their business idea, target market, and revenue streams.\n" +
    "INPUTS:\n" +
    `Business Idea: ${businessIdea}\n` +
    `Target Market: ${targetMarket}\n` +
    `Revenue Streams: ${revenueStreams}\n` +

Take note of the input variables (businessIdea,targetMarket & revenueStreams). 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.

  type: "claude",
  fields: [
    {
      label: "💡 Business Idea",
      name: "businessIdea",
      type: "textarea",
      placeholder:
        "Describe your business idea in one sentence. What makes it unique?",
      required: true,
    },
    {
      label: "👥 Target Market",
      name: "targetMarket",
      type: "textarea",
      placeholder:
        "Who is your target market? Describe their key demographics and needs.",
      required: true,
    },
    {
      label: "💰 Revenue Streams",
      name: "revenueStreams",
      type: "textarea",
      placeholder:
        "Describe your revenue streams. How will your business make money?",
      required: true,
    },
  ],
  submitText: "Generate Business Plan 🚀",
  submitTextGenerating: "Generating business plan...",
  responseTitle: "Your business plan has been generated",
  responseSubTitle: "Find your business plan below",

​
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/(apps)/claude/[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/(apps)/claude/[id]/page.tsx
<OutputLayout params={params} toolConfig={toolConfig} />