Connect the Brain

Your app needs to connect to Claude. Here's why.

When you use Claude in the desktop app, you're logged into your account and Claude knows who you are. But the app you're building is a separate thing — it's a web page, not the Claude app. So we need a way to tell Claude: "this app is allowed to use your AI features, and here's who's paying for it."

That's what an API key is. You'll see this term a lot if you build AI tools — it's just a unique code (a long string of letters and numbers) that you generate once and paste into your app. an "API" is the connection between your app and Claude; the "key" is what proves you're authorized to use it. Think of it like a VIP wristband: the key gets you (and anyone using your app) through the door. Every time someone submits text in your tool, the key goes along with the request so Claude knows it's legitimate.

How does your app talk to Claude?

Your app needs a way to send text to Claude and get a response back. Think of it like a phone call — your page sends text, Claude receives it, thinks about it, and sends a response back. In this module, you're setting up that connection. Once it's in place, clicking Submit will actually do something.

Before you start

• Your comms-gut-check folder has an index.html file with a text box, Submit button, and a results area
• You have an API key copied and ready to paste (see below if you haven't created one yet)
• The Claude desktop app is open and you're in the Code tab

How to get your API key

1. Go to console.anthropic.com and sign in.
2. In the left sidebar, look for an API Keys section — it may be listed under a Manage menu. Click it.
3. Click the button to create a new key. Give it any name you like (e.g. "Comms Gut Check").
4. Copy the key the moment it appears. You'll only see it once — the console hides it as soon as you navigate away. Paste it somewhere safe (a note, a doc) before you close anything.

Step 1: Connect the app to Claude

Copy the prompt below, replace YOUR_KEY_HERE with your actual API key, then paste it into the Code tab.

Make the Submit button work. When someone clicks it, take the text they've typed and send it to Claude. Show the message "Analyzing your communication…" while waiting, then display whatever Claude sends back in the results area below the button.

If something goes wrong, show a short friendly error message so the user knows something didn't work.

Here's my API key to connect to Claude: YOUR_KEY_HERE

Claude's role: you are a senior communications expert reviewing a draft. Give honest, specific feedback.

Step 2: Test it

1. Open your page in the browser — or refresh the tab if it's already open.
2. Paste a short piece of text into the text box. Try something you've actually written — an internal announcement, a press release excerpt, or even a single sentence.
3. Click Submit. You should see "Analyzing your communication…" appear, then within a few seconds a response from Claude appears below.

What to expect — and what comes next

The response right now is one unbroken block of text. Claude is working, but the output isn't structured yet. In Module 4, you'll give Claude a more precise brief that breaks the feedback into five clearly labeled sections, each in its own box.

If you click Submit and nothing happens — or you see an error instead of a response — the most likely cause is a typo in your key. Go back to the Code tab and say: "The Submit button isn't working — here's what I'm seeing: [describe what you see on the page]." Claude Code will diagnose it and fix it.