Build an App with AI Features
You've been using Claude through the website. This week you call Claude's API directly from your own code — so you can build apps that have AI built in. A customer service bot for a WV small business. A study helper for WV students.
🧠 How AI APIs Work
You've been using Claude through the website. Now you're going to call Claude (or OpenAI) directly from your own code — so your app can generate text, answer questions, and respond to users in real time.
Go to console.anthropic.com → create account → API Keys → Create Key. Copy it somewhere safe. This is different from your claude.ai login — it's specifically for calling Claude from code.
💬 Building the Chat Interface
A chat interface is just: a text input, a send button, and a message list that updates. The AI call is just a fetch() request — you learned this last week.
AI API calls need to happen server-side to keep your key safe. Open replit.com (you set this up in Setup Day) → New Repl → Node.js. This gives you a free server environment in your browser.
Build me a chatbot app using the Anthropic Claude API in Replit (Node.js). My API key: [YOUR KEY — store it as a Replit secret called ANTHROPIC_KEY] The chatbot should have this personality: [describe your bot — e.g., "a sarcastic movie critic"] System prompt: [describe the bot's rules and personality in detail] Build: a clean chat UI (HTML/CSS), a Node.js server that calls the Claude API, message history so context is maintained. I'm a beginner — explain each file's purpose with comments.
⚡ System Prompts: Give Your AI a Personality
A system prompt is a set of instructions you give Claude before the conversation starts. It defines the AI's role, knowledge, tone, and rules. This is what turns a generic chatbot into something unique.
// A cooking assistant "You are Chef Marco, an enthusiastic Italian chef. You only talk about food, recipes, and cooking techniques. Always suggest an Italian dish as an example. Keep responses under 150 words. End every message with a relevant food emoji." // A study buddy "You are a patient tutor helping a high school student. Ask questions back to check understanding rather than just giving answers. Use simple language. Never do homework for them — guide them to the answer instead."
Write a detailed system prompt for a [type] chatbot that: - Has this personality: [describe] - Knows about: [topics] - Should NOT: [limitations] - Responds in this style: [tone/format] Make it specific enough that the AI has a clear, consistent character.
🔑 Environment Variables: Keeping Keys Safe
Replit has a "Secrets" feature — environment variables that your code can read but that don't appear in your code files. This is how you keep API keys private.
In Replit: open the Secrets panel
Click the 🔒 padlock icon in the left sidebar. This is your encrypted secrets store.
Add your API key as a secret
Key: ANTHROPIC_KEY · Value: your actual API key. Click "Add new secret."
Access it in code with process.env
const key = process.env.ANTHROPIC_KEY — reads the secret without it ever appearing in your code. Safe to share the code now.
Your Custom AI Chatbot — Live & Shareable
A themed AI chatbot, built on Claude API, deployed on Replit
Make it something you'd actually use or show off — give it a strong personality and a clear purpose.
- A well-crafted system prompt with a clear personality
- A chat interface that looks polished
- Maintains conversation history (context across messages)
- API key stored safely in Replit Secrets
- The Replit URL is live and shareable with anyone
Week 8 Done!
Mark it complete and keep your momentum going.