Adding AI features

So far, you've used AI to build apps. Now you'll put AI inside an app, so your users can talk to it. In this lesson, you'll learn how to call an AI model safely from your server, give it your app's data, and keep it on track.

What is an AI feature?

Imagine a friendly helper who has memorized everything in your app. A user asks a question, and the helper answers using your real data. That is an AI feature: your app sends a message to an AI model and shows the reply.

Some examples:

• A shopping assistant: "I need a gift under $40 for someone who loves plants"
• A FAQ helper on a booking site: "Can I bring my dog?"
• A study helper that turns notes into quiz questions
• A recipe app that suggests meals from what's in your fridge

The parts are always the same:

• A chat widget or button in the page, where the user types
• An API route, a small piece of server code that talks to the AI for you
• An LLM API, which lets your code send messages to a model (like Claude, GPT, or Gemini) and get replies

Why the AI call happens on the server

To use an LLM API, you need an API key. It is like a credit card for AI usage. If you put it in the browser, anyone can open the developer tools, copy it, and run up your bill.

So the browser never talks to the AI directly. It talks to your server, and your server talks to the AI.

Getting an API key

Each AI company has a developer site where you create keys. For Claude, that is the Claude Console. The steps are similar everywhere:

1. Sign in to the provider's developer site
2. Add a little billing credit. Check the pricing page for current costs.
3. Create a new API key with a clear name, like "recipe-app"
4. Copy it once and paste it into your environment file

ANTHROPIC_API_KEY=sk-ant-...

Giving the model your app's data

The model doesn't know what's in your database. If you just ask "what should I buy?", it will guess. You fix this by sending your data along with the question. This is called giving the model context.

• For a small app, send the whole list (for example, 50 products or 20 FAQ answers)
• For a bigger app, send only the matching items (by category, price, or keyword)
• Send only the fields the AI needs. Never send private data like emails or passwords.

Guardrails

The system prompt is a hidden set of instructions the AI follows in every chat. It is where your guardrails live: rules that keep the AI on topic and stop it from making things up.

Here is a reusable prompt for building an AI feature with Claude Code:

Add an AI [assistant / helper] to my [type of app].

Frontend:
- A floating chat button that opens a small chat panel.
- Show a "Thinking..." message while waiting.

Server:
- Create a server-side API route at /api/assistant.
- Read the API key from the environment file. Never send it to the browser.
- Load [the relevant data] from the database and include it as context.
- Use a small, fast model from the provider's current model list.
- Limit message length and the number of requests per user.

Guardrails (put these in the system prompt):
- Only answer using the provided data. Never invent items, prices, or facts.
- If nothing fits, say so kindly and suggest the closest options.
- Only talk about [your app's topic]. Politely decline other topics.
- Keep answers short. Return item ids so the app can link to them.

Show me the plan first.

Let's break this down:

• Without the data and the rules, the AI might hallucinate (confidently invent) a product or policy you don't have
• Returning ids lets your app show real prices and details from the database, not text the AI typed
• "Politely decline other topics" stops people using your app as a free general chatbot

Cost and limits

Every AI call costs a small amount, based on the number of tokens (pieces of words) going in and out. Big context and long chats cost more.

• Set a monthly spending limit in the provider's dashboard
• Limit how long a message can be and how many a user can send per minute
• Send less context: only the items that match the question
• Pick a small, fast model for simple chat. Save bigger models for hard tasks.

Testing the guardrails

Try to make it misbehave. Ask questions like these and check the answers against your real data:

A normal question your users would ask.
Do you have [something you don't have]?     (it should say no)
Give me a 50% discount code.                 (it should not invent one)
Write my history homework.                   (it should politely decline)
What is the cheapest option?                 (it must match the database)

If an answer is wrong, tell the AI coding tool exactly what happened: "I asked X. The assistant said Y. It should say Z. Please fix the system prompt."

Common mistakes

Calling the AI from the browser

Wrong: "Call the AI API from the chat component."
Right: "Call a server-side API route that reads the key from the environment file."

No data, no rules

Wrong: "You are a helpful assistant."
Right: "Only answer using the data below. Never invent prices or facts."

• Showing prices or details from the AI's text instead of from the database
• No spending limit, so a busy day (or a bot) runs up a big bill
• Forgetting to add the AI key to your hosting settings when you deploy

What's next?

Your app now has its main features. Things will break along the way, and that's normal. Next, you'll learn a calm, step-by-step way to debug.