Imagine you run a local coffee shop.

Your main product is coffee, but it’s often the pastries and desserts that draw people in. However, those pastries aren't always baked from scratch in your kitchen.

• Some are bought fully made from a wholesale bakery and just displayed.

• Some come as pre-made dough that you just pop into your cafe's oven.

• To the customer, it looks like “your cafe's brand of pastry,” but the core baking expertise was provided by an outside specialist.

AI works in exactly the same way. Your app sends a request to an AI company; the AI sends back the result; and you display that result to your user. From the user’s perspective, it feels like AI is built natively into your app, but you're actually just connecting to an external AI company's technology.

The bridge that connects your coffee shop (your app) to the wholesale bakery (the AI company) is called an API (Application Programming Interface).

1. What features can you build with AI?

---

2. Major AI API Services Compared

---

3. How much do APIs cost?

API costs are pay-as-you-go.
Just like your water or electric bill, you pay more if you use a lot, and less if you use a little.
Unlike a monthly SaaS subscription, if you have zero users, your cost is $0.

The billing unit is the “token”. Think of it as the smallest chunk of text the AI reads and processes. In English, 1 token is about 4 characters (roughly 3/4 of a word). Each AI company has slightly different metrics, but you can test it yourself on OpenAI's official site:

https://platform.openai.com/tokenizer

(Note) What is OpenRouter? — The “Wholesale Distributor” of AI

Going back to the cafe and bakery analogy, OpenRouter is like a wholesale distributor that lets you partner with multiple bakeries (AI companies) all at once.

• You don't need to create separate accounts and billing for each company.

• With a single API Key, you can call over 200 models including those from OpenAI, Anthropic, Google, Meta, Mistral, etc.

• It includes many free models, making it the perfect place to start at zero cost.

Examples of Free/Cheap Models on OpenRouter (As of April 2026)

---

4. Connecting via AI Coding Tools

STEP 1 — Generate an API Key

An API Key is a secret key that proves to the AI company who's making the request.

• OpenAI: platform.openai.com/api-keys

• Anthropic: console.anthropic.com/settings/keys

• Google Gemini: aistudio.google.com/apikey

STEP 2 — Set up Environment Variables

Prompt your AI coding tool like this:

• ​“Save my OpenAI API key in a .env file. Name the variable OPENAI_API_KEY”​

• ​“Check if the .env file is added to .gitignore”​

STEP 3 — Write the API Call Code

AI APIs must always be called from the server. Calling them directly from the frontend exposes your API Key.

• ​“Create a Next.js API Route that sends a request to OpenAI GPT-4.1. Take user input and return a summary.”​

• ​“Maintain chat history so it remembers the context of previous messages.”​

STEP 4 — Set Cost Limits ⚠️

• Set a monthly Usage Limit (hard cap) in each service's dashboard.

• ​“Rate limit AI requests to 20 per user per day. Use Upstash Redis to track the count.”​

STEP 5 — Connect the Frontend UI

• ​“Show a loading skeleton while waiting for the AI response, and stream the text character by character.”​

• ​“If an error response comes back, show a ‘Please try again later’ message.”​

---

5. Integrating AI into Your App

Core Concept — “Automate with Prompts”

Think about what you normally do in ChatGPT or Claude:

​“Translate this sentence into Spanish”​
​“Categorize this review as positive/negative/neutral”​
​“Summarize the key clauses of this contract in 3 bullet points”​

Connecting via API just means taking those exact conversations and having them run automatically inside your web app. Every time a user clicks a button, uploads a file, or submits a form, your server automatically fires off a prompt to the AI and displays the result on the screen.

Ultimately, “adding an AI API to your app” means “having your app automatically do the work you used to do manually in a chat interface.”

---

Scenario 1 — Auto-categorizing Support Tickets + Assigning Reps

You run a SaaS or e-commerce site and get flooded with tickets every day. Instead of sighing and manually sorting through “this goes to tech, that goes to billing...”, your system quietly takes over. The moment a customer submits a ticket, your server automatically asks the AI to categorize it, and the result is safely stored in your DB. Without you lifting a finger, the right team has already been notified.

AI Coding Tool Prompt Example

When a user submits a ticket, call the OpenAI GPT-5 Nano API to categorize it into ‘Tech Support / Billing / Shipping / Other’. Save the result in Supabase and use Resend to email the assigned team.

Recommended Model & Cost

• GPT-5 Nano — Simplest categorization, so the cheapest model is perfect.

• Cost per ticket is under $0.0001 (practically free).

---

Scenario 2 — Auto-generating Product Descriptions

Another morning staring at dozens of new listings you need to post on your marketplace. Writing a catchy product description for every single one is a real grind. Now, you just enter the product name, category, and a few key features, then hit ‘Generate Description.’ Instantly, an engaging, SEO-friendly draft appears. Tweak it a bit, hit publish, and you're done.

AI Coding Tool Prompt Example

Create a button that takes the product name, category, and key features (comma separated) from the listing form, and uses Gemini 3 Flash to generate a 100-word English product description. Auto-fill the description box so the seller can edit it.

Recommended Model & Cost

• Gemini 3 Flash — Great for natural language generation.

• Cost per description is about $0.001 (a fraction of a cent).

---

Scenario 3 — 24/7 AI Customer Support Chatbot

It's 3 AM. Users on your telehealth platform or SaaS tool don't care about timezones—they still have urgent questions. Instead of making them wait until morning, an AI chatbot understands the context of their issue and replies instantly. While your team sleeps, your customers get their problems solved, and your service never stops running.

AI Coding Tool Prompt Example

Build a Gemini 3 Flash chatbot using our platform's FAQ as the system prompt. Keep the last 10 turns of conversation as context, and stream the response in real-time. System prompt: 'You are a helpful support agent for [App Name]. Answer based on the FAQ below. If you don't know the answer, direct them to customer support.'

Recommended Model & Cost

• Gemini 3 Flash or GPT-5 Mini — Best balance of speed and cost.

• Cost per conversation (10 turns) is roughly $0.005–$0.01.

---

Scenario 4 — Auto-categorizing from Photos (Image Analysis)

Users abandon listings when forced to fill out too many fields on your secondhand marketplace (like eBay, Vinted, or Facebook Marketplace). But what if they just snap a photo of a dress, and your backend AI instantly analyzes the image to fill in “Womenswear / Dress” and “Condition: Good”? Removing that friction delights your users and drastically boosts the number of completed listings.

AI Coding Tool Prompt Example

When a user uploads a product photo, call the Gemini 3 Flash API to analyze the image and return a JSON object with: ① Category (Clothing/Electronics/Furniture/Other), ② Condition (New/Good/Used), ③ A one-line description. Auto-fill the listing form with this data.

Recommended Model & Cost

• Gemini 3 Flash — Unbeatable value for image analysis.

• Cost per image analyzed is about $0.005–$0.02.

---

Scenario 5 — Long Document Summarization (Reviews, Contracts, Reports)

Reading 50-page legal briefs, endless strings of product reviews, or complex B2B contracts causes serious user fatigue. Instead of forcing users to sift through walls of text, they upload a document, and the AI instantly extracts the core points as a quick 3-to-5-bullet summary. No matter how long the document, they get the gist in seconds.

AI Coding Tool Prompt Example

When a user pastes text (up to 5,000 chars), call the Gemini 3.1 Flash-Lite API to extract: ① A one-sentence summary, ② 3 key bullet points, ③ Any red flags or warnings. Output in English using markdown.

Recommended Model & Cost

• Gemini 3.1 Flash-Lite — High quality summarization at a very efficient price.

• Cost to summarize one standard page is roughly $0.003–$0.005.