Claude 3
Build variations of the Business Plan Generator in minutes
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
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:
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:
- The input variables defined in the prompt
- Input variables in
prompt.ts
should matchname
intoolConfig.ts
. See example below.
- Input variables in
- The button text for the form
- 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/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.
<OutputLayout params={params} toolConfig={toolConfig} />