Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Adding AI to Your App | First Working App
Web App from Scratch with Claude

bookAdding AI to Your App

Swipe to show menu

Note
Definition

An API key is a private credential that connects your app to an AI model. Think of it like a passcode that proves your app has permission to use the AI. Without it your app cannot generate any responses.

Your app is running but it cannot generate AI responses yet. To do that it needs an API key.

How to get your key

Go to console.anthropic.com, create an account, navigate to API Keys, and create a new key. Copy it immediately. It will not be shown again.

How to add it securely

Ask Claude Code:

"How do I add my Anthropic API key to this project securely?"

It will walk you through creating a file called .env.local in your project folder and tell you exactly where to paste your key. Follow those steps and paste the key directly into that file. Do not share the key anywhere else.

Note
Note

Your API key is private. The .env.local file is the right place for it. Claude Code knows this and will guide you to do it correctly.

Testing it

Once the key is in place, type an idea into your app and hit submit. If everything is set up correctly you will get a real AI validation back within seconds. That is the moment the app works end to end.

question mark

What is the best way to securely use your Anthropic API key in your app?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 4

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Section 3. Chapter 4
some-alt