Integrating AI Into Your Stack
Beyond coding assistants, AI can be integrated directly into your applications. Here's how to add AI capabilities to your prototypes.
It's often best to start AI integrations by creating a chat page to ensure the model is set up properly before creating your actual feature.
API-Based Integrations
The most common way to add AI is through APIs. You send text, get intelligent responses back.
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});
const response = await openai.chat.completions.create({
model: 'gpt-4',
messages: [
{ role: 'user', content: 'Summarize this text...' }
]
});import Anthropic from '@anthropic-ai/sdk';
const anthropic = new Anthropic({
apiKey: process.env.ANTHROPIC_API_KEY
});
const response = await anthropic.messages.create({
model: 'claude-3-sonnet-20240229',
max_tokens: 1024,
messages: [
{ role: 'user', content: 'Analyze this data...' }
]
});Using Vercel AI SDK
Vercel provides and maintains the AI SDK code, and you just plug in the model. It's always a good idea to have more than one model available.
No-Code AI Integrations
Add AI without writing code:
- Zapier AI — AI actions in your automation workflows
- Make (Integromat) — Visual AI integration builder
- Voiceflow — Build AI chatbots visually
- Typeform + AI — Smart form responses
Common Use Cases
| Use Case | Best Tool | Complexity |
|---|---|---|
| Chatbot | OpenAI + Vercel AI SDK | Medium |
| Content generation | Anthropic Claude API | Low |
| Image generation | Replicate / DALL-E | Low |
| Voice transcription | Whisper API | Low |
| Semantic search | Pinecone + OpenAI | High |
For prototypes, start with pre-built solutions like Vercel's AI SDK. Only build custom integrations when you have specific requirements.