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?

Feature	Examples
💬 AI Chatbot	“24/7 customer support bot” for e-commerce, “symptom checker bot” for telehealth platforms, “onboarding assistant” for SaaS.
✍️ Automated Content Generation	Auto-generating product descriptions for listings, drafting property descriptions for real estate sites, suggesting titles for blogging platforms.
🖼️ Image Analysis	Auto-categorizing uploaded photos on marketplace apps (like Craigslist/eBay), recommending outfits from clothing photos, estimating calories from food photos.
🗂️ Auto-Tagging & Routing	Automatically routing support tickets to ‘Tech/Billing/Shipping’ teams, auto-categorizing posts on content platforms.
🔍 Smart Search	Searching with natural language instead of exact keywords (e.g., “cozy winter jacket under $100” → links to relevant products), upgrading internal document search.

---

2. Major AI API Services Compared

Service	Key Features	Recommended For
Google (Gemini)	Gemini 2.5 Flash is the current stable version. Gemini 3.1 series Preview is available. Maintains a free tier; supports text, image, audio, and video (multimodal). Built-in Google Search integration. Moving to a new compute-based pricing tier in early April.	Initial testing, image/video analysis, cutting costs
OpenAI (ChatGPT)	GPT-4.1 is the current recommended production model replacing GPT-4o. Massive 1M token context window, cheaper than GPT-4o ($2 in / $8 out per 1M tokens). Lightweight GPT-4.1 mini/nano released. GPT-5 series also available for complex reasoning/coding. Largest ecosystem.	Chatbots, summarization, coding, processing long docs
Anthropic (Claude)	Claude Opus 4.6 (released Feb 2026) is the latest flagship. 1M token context window standard at no extra cost starting March 2026. Supports complex multi-agent “team” features. High scores for long-document processing, nuanced responses, and safety. Top-tier coding/reasoning benchmarks.	Long document analysis, complex reasoning, nuanced and high-quality responses
OpenRouter (and others)	Access 200+ AI models (OpenAI, Anthropic, Google, Meta, Mistral, etc.) with a single API key. Includes many free models (Llama, Gemma, Mistral, DeepSeek). Easy to compare prices and switch models to optimize costs. Perfect for prototyping and experimentation.	Exploring free/cheap models, comparing multiple models, cost reduction

---

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)

Model	Creator	Features	Cost
Qwen 3.6 Plus	Alibaba	#1 most used free model in April 2026. 1M context. Extremely strong in coding, agents, and reasoning. SWE-bench score of 78.8, rivaling GPT-5 level performance for coding.	Free
Llama 4 Maverick	Meta	MoE architecture (17B active out of 400B). 1M context. Multimodal (Image+Text). General multi-language support.	Partially free
Nemotron 3 Super	NVIDIA	262K context. Mamba-Transformer hybrid. Specialized for long documents with rapid generation speeds.	Free
GPT-OSS 120B	OpenAI	OpenAI's first open-weight model (Apache 2.0). Provides GPT-4 level performance for free.	Free

---

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.

When using a Chat App directly	When integrating via API into your web app
User manually types the prompt	App automatically generates and sends the prompt
Manually copy & paste every time	Automated processing with a single click
Manually read and save the result	Result is automatically saved to the DB or rendered on screen
Only you can use it	Thousands of users can use it simultaneously

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.