Advanced6 min read
Was this chapter helpful?
Share
Add AI-powered features to your app — chatbots, content generation, summarization, and more. No machine learning degree required.
A conversational interface where users ask questions and get answers. Great for customer support, documentation helpers, and interactive assistants.
Auto-generate blog posts, product descriptions, email drafts, or social media captions. Users provide a topic or outline, AI writes the content.
Condense long articles, meeting notes, or documents into key points. Users paste text or upload a document and get a brief summary back.
Create images from text descriptions using DALL-E or Stable Diffusion. Users type 'a cat in space' and get a generated image back.
Use AI embeddings to search by meaning, not just keywords. Search 'comfortable shoes for walking' and find results even if they don't contain those exact words.
Automatically categorize content: sort support tickets by urgency, tag blog posts by topic, or detect sentiment in reviews (positive/negative/neutral).
The big three are OpenAI, Anthropic Claude, and Google Gemini. They all do roughly the same things — the differences are price, free tier, context length, and vibe. Start here before you commit to one.
| Provider | Free tier? | Typical cost | Pick it for |
|---|---|---|---|
| OpenAI (GPT-4o, GPT-4o-mini) | Signup credit only | $ – $$ | Broadest tooling, image generation (DALL-E), the safe default |
| Anthropic (Claude) | Signup credit only | $$ | Following instructions, writing, long documents, code |
| Google (Gemini) | ✓ Real free tier | $ (cheapest paid tier) | Side projects, huge context, images + video in |
| Open-source (Replicate, HF, Groq) | Varies / rate-limited | Varies | Niche models, image/audio, ultra-fast inference (Groq) |
The most popular AI API. Powers ChatGPT. Offers GPT-4o for text, GPT-4o-mini for cheap/fast tasks, and DALL-E for images. Huge community and the widest tooling support.
Pros
Biggest ecosystem — every library supports it
Native image generation (DALL-E)
Great docs and endless tutorials
Cons
No real free tier — just a small signup credit
Can get expensive at volume
The company behind Claude. Known for being careful, nuanced, and the best at following complex instructions. Excellent for long documents, writing, and code.
Pros
Best at following instructions precisely
Handles 200K-token contexts (whole books)
Strong reasoning, writing, and coding
Cons
No image generation (input only)
Mid-range pricing — not cheapest
Google's AI family. Gemini Flash is cheap and fast, Gemini Pro is the heavyweight. Native support for images, video, and audio — plus the biggest context window on the market (2M tokens on Pro).
Pros
Real free tier — low rate limits but zero cost
Multimodal: takes images, video, audio as input
Huge context — 1M–2M tokens
Cheapest paid pricing of the big three
Cons
Free-tier inputs may be used to train Google's models
Smaller ecosystem than OpenAI
A platform that lets you run open-source AI models via API. Access Stable Diffusion, Llama, Whisper, and thousands of others without managing servers.
Pros
Thousands of open-source models
Pay per second — no minimum
Best for image, video, and audio models
Cons
Cold starts can be slow (5–30s)
Open-source model quality varies
Not a model maker — an ultra-fast inference service that runs open-source models (Llama, Mixtral) on custom hardware. Known for responses that appear almost instantly.
Pros
Blazingly fast — 10x+ faster than typical APIs
Generous free tier
OpenAI-compatible API format
Cons
Only runs open-source models
Fewer model options than Replicate
The open-source AI hub. Host and run models for free or use their inference API. Huge model library covering text, image, audio, and more.
Pros
Massive free model library
Community-driven — new models daily
Free inference API for popular models
Cons
Free tier has rate limits and cold starts
Requires more knowledge to pick the right model
A secret password that lets your app talk to an AI service. You get one from the provider's dashboard. Never put it in your frontend code — store it in .env.local and only use it on the server side.
How AI models measure text. One token is roughly 4 characters or 3/4 of a word. You pay per token (input + output). A 500-word response uses about 650 tokens. Set max token limits to control costs.
Instead of waiting for the entire response, display words as they come in — like watching someone type. Makes the app feel faster and more responsive. Essential for chat interfaces.
Instructions you give the AI model before the user's message. 'You are a helpful customer support agent for a shoe store. Be friendly and concise.' This controls the AI's personality and behavior.
Message bubbles (user on right, AI on left)
Text input with send button at bottom
Auto-scroll to newest message
Typing indicator while AI responds
Words appear one by one, like typing
Cursor blinks at the end of the text
Stop button to cancel generation
Smooth scrolling as text grows
Animated dots or spinner while waiting
Skeleton text placeholders
'Thinking...' or 'Generating...' labels
Estimated time for long operations
The easiest way to add AI to a Next.js app. Handles streaming, chat state, and provider switching with just a few lines of code. Works with OpenAI, Anthropic, and more.
A framework for building complex AI workflows. Chain multiple AI calls together, add memory to conversations, connect AI to your database, and build agents that can use tools.
Copy-paste these prompts to quickly add AI features to your project.
"Add an AI chat widget using the OpenAI API with streaming responses. Show messages in a chat bubble layout with the user on the right and AI on the left. Include a text input and send button."
"Set up the Gemini API in my Next.js app using the free tier. Create an /api/chat route that uses Gemini 2.0 Flash with streaming, and show me the env variable I need and where to get the API key."
"Swap the chat widget in my project from OpenAI to Gemini using the Vercel AI SDK. Keep everything else the same and point me to which env variables I need to change."
"Add a 'Generate Description' button next to my product form. When clicked, use the AI to generate a product description based on the product name and category fields. Show a loading spinner."
"Add a text summarization feature. Users paste an article into a textarea and click 'Summarize'. Use the Anthropic API to return a 3-bullet summary. Stream the response."
"Set up the Vercel AI SDK with OpenAI in my Next.js app. Create an API route at /api/chat and a chat page with streaming messages, a stop button, and conversation history."
"Add an AI-powered search to my documentation site. Use OpenAI embeddings to find the most relevant docs based on the user's question, then generate a natural language answer with citations."
