No-Code AI Web Dev: Embed AI in Your App (Part 4)
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).
listContentsexpand_more
- 1. What features can you build with AI?
- 2. Major AI API Services Compared
- 3. How much do APIs cost?
- (Note) What is OpenRouter? — The “Wholesale Distributor” of AI
- 4. Connecting via AI Coding Tools
- STEP 1 — Generate an API Key
- STEP 2 — Set up Environment Variables
- STEP 3 — Write the API Call Code
- STEP 4 — Set Cost Limits ⚠️
- STEP 5 — Connect the Frontend UI
- 5. Integrating AI into Your App
- Core Concept — “Automate with Prompts”
- Scenario 1 — Auto-categorizing Support Tickets + Assigning Reps
- Scenario 2 — Auto-generating Product Descriptions
- Scenario 3 — 24/7 AI Customer Support Chatbot
- Scenario 4 — Auto-categorizing from Photos (Image Analysis)
- Scenario 5 — Long Document Summarization (Reviews, Contracts, Reports)
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
WARNING
Cost Warning!
Since APIs are pay-as-you-go, an unexpected spike in traffic or a bug in your code can rack up a massive bill. Always set a Usage Limit (Hard Cap) in your dashboard!
(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.
NOTE
Just starting out? Start with OpenRouter's free models.
You can test out powerful models like Meta's Llama, Google's Gemma, and Mistral for free.
Once you've built your integration at zero cost, you can seamlessly switch to a paid model that fits your needs.
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
CAUTION
API Key = Your Credit Card Number.
Never include it in your frontend code or push it to a public GitHub repo. If leaked, others can use your API at your expense. Always ask your AI coding tool to do a security check before publishing your web app.
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.
NOTE
Want to dive deeper into AI model benchmarks and pricing?