Wire up the Claude API and display the graded results

Create your .env.local file with the API key

Store your Claude API key securely in a local environment file — never in your code.

• In your copy-grader project folder, create a new file called exactly: .env.local (the dot at the start is required).
• On Mac: open Terminal, navigate to the folder, and run: touch .env.local to create it, then open it with: open -a TextEdit .env.local
• On Windows: in the copy-grader folder, right-click → New → Text Document, name it .env.local (delete the .txt extension).
• Inside the file, add this one line: ANTHROPIC_API_KEY=sk-ant-yourkeyhere (replace with your real key, no spaces around the = sign).
• Save and close the file.
• The .env.local file is already listed in .gitignore — this means it will NEVER be pushed to GitHub. Your key stays private.
• Never paste your API key directly into page.tsx, route.ts, or any other code file. Always use environment variables.
• Restart npm run dev after creating this file so Next.js picks it up.

Install the Anthropic SDK

Add the official Anthropic package to your project so your app can talk to Claude.

• Stop the dev server with Ctrl + C in your npm terminal tab.
• Run: npm install @anthropic-ai/sdk
• Wait for the install to complete — you will see "added X packages".
• Open package.json in your project folder and confirm you can see "@anthropic-ai/sdk" in the dependencies section.
• Restart the dev server: npm run dev
• The SDK handles authentication, request formatting, and response parsing — you do not need to write any of that yourself.

Create the API route with Claude Code

Use Claude Code to create the server-side route that connects your form to Claude.

• Open Claude Code in your project terminal and paste this prompt:
• "Create a Next.js API route at app/api/grade/route.ts that: (1) Accepts POST requests with a JSON body containing headline (string), subheadline (string), cta (string), and bullets (string). (2) Validates all four fields are non-empty — if any are missing, returns 400 with JSON { error: 'All four fields are required' }. (3) Creates an Anthropic client using process.env.ANTHROPIC_API_KEY. (4) Sends a message to claude-3-5-haiku-20241022 with max_tokens: 1024. (5) Uses this exact system prompt: 'You are a conversion copywriter reviewing a non-developer founder's landing page copy. Grade each of the four elements below on a scale of 1 to 10. For each element give: the score, one sentence explaining why, and one specific rewrite suggestion. Be honest, not just encouraging. A score of 7 or above means it is working. A score below 5 needs a full rewrite. Follow this format exactly:\nHEADLINE SCORE: X/10\nWhy: [sentence]\nRewrite: [suggestion]\n\nSUBHEADLINE SCORE: X/10\nWhy: [sentence]\nRewrite: [suggestion]\n\nCTA SCORE: X/10\nWhy: [sentence]\nRewrite: [suggestion]\n\nBULLETS SCORE: X/10\nWhy: [sentence]\nRewrite: [suggestion]\n\nOVERALL SCORE: X/10\nTop priority fix: [one action item]'. (6) Sends user message: 'Headline: [headline]\nSubheadline: [subheadline]\nCTA: [cta]\nFeature bullets:\n[bullets]'. (7) Returns JSON { result: string } with the Claude response. (8) Catches all errors and returns 500 with JSON { error: 'Grading failed. Please try again.' }."
• Wait for Claude Code to create the file at app/api/grade/route.ts.
• The route runs entirely on the server — your API key is never sent to the browser.
• claude-3-5-haiku-20241022 is chosen because it is fast and inexpensive. Each grade costs roughly $0.001 in API fees.

Connect the form to the API and display results

Update the front-end page to call your API route and show the scored results as styled cards.

• In Claude Code, paste this prompt:
• "Update app/page.tsx to: (1) When the form submits, POST to /api/grade with the four field values as JSON. (2) Show isLoading state (button says 'Grading your copy...' and is disabled) while waiting. (3) When the result arrives, parse the response text and split it into five sections: Headline, Subheadline, CTA, Bullets, and Overall — each section starts with its all-caps label. (4) Display each section as a separate card below the form. Each card shows: the section name as a small label, the score as a large bold number (e.g. 7/10) in a coloured badge (green for 7+, amber for 5–6, red for below 5), the 'Why' sentence in grey text, and the 'Rewrite' suggestion in an emerald-tinted highlight box. (5) Display the Overall card last with the score extra large and the 'Top priority fix' highlighted. (6) Show a red error message if the API returns an error. (7) Add a 'Grade another page →' button after results that resets the form and clears results."
• After Claude Code finishes, check localhost:3000 and test a full submission.
• Fill in all four fields with real copy and click Grade. Watch the loading state, then the results cards.
• Check that each card shows the correct section (Headline score for the headline, etc.).
• If the parsing is wrong (e.g. all content in one card), ask Claude Code: "The result text is not being split correctly. Here is an example result: [paste example]. Fix the parsing so each section is a separate card."

Test on three real landing pages

Before deploying, validate that your product gives useful output across different types of copy.

• Test 1: Use the landing page for your own project or business.
• Test 2: Use NonDevApps.com — paste the real headline, subheadline, CTA, and a bullet or two.
• Test 3: Use any other product page you know well — a SaaS tool, a creator's site, anything with a clear headline and CTA.
• For each test, read every line of the output and ask: does this feel honest?
• The test for honesty: does at least one score sting a little? Good feedback is sometimes uncomfortable.
• If every score is above 7 on all three tests, add to the system prompt in your API route: "Most first-draft landing page copy scores between 4 and 6. Do not inflate scores. Be direct about what is not working."
• Write down one thing each test result told you that you did not already know. That is the signal the product is working.

Add your API key to Vercel and deploy

The live Vercel deployment cannot read your local .env.local file — you must add the key to Vercel separately.

• Go to your Vercel project dashboard at vercel.com.
• Click Settings in the top navigation.
• Click Environment Variables in the left sidebar.
• Click Add New.
• Key: ANTHROPIC_API_KEY. Value: your actual API key.
• Check all three boxes: Production, Preview, and Development.
• Click Save.
• Back in GitHub Desktop, commit all your new files: "Day 3: Claude API wired up, results working". Push to GitHub.
• Vercel will auto-deploy the new version. Wait about 90 seconds.
• Visit your live Vercel URL and test a real submission — it should grade copy exactly like your local version.
• Share the updated link with the same person you shared Day 2 with, or post in your chosen community.