Advanced6 min readShare
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 most popular AI API. Powers ChatGPT. Offers GPT-4 for text and DALL-E for images. Huge community, tons of tutorials, and the widest model selection.
Pros
Most widely used — largest community
GPT-4 is excellent for most tasks
Great documentation and examples
Cons
Can get expensive with heavy usage
Rate limits on free tier
The company behind Claude. Known for being more careful, nuanced, and better at following complex instructions. Great for long documents and detailed tasks.
Pros
Excellent at following instructions
Handles very long documents (100K+ tokens)
Strong reasoning and analysis
Cons
Smaller ecosystem than OpenAI
No image generation
A platform that lets you run open-source AI models via API. Access Stable Diffusion, Llama, Whisper, and thousands of other models without managing servers.
Pros
Access to thousands of open-source models
Pay per use — no minimum commitment
Great for image, video, and audio models
Cons
Cold starts can be slow
Open-source models vary in quality
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 library of free models
Community-driven with new models daily
Free inference API for popular models
Cons
Free tier has rate limits and latency
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."
"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."
