Complete guide to deploying AI applications on a budget. Learn how to use free and low-cost services like Vercel, Cloudflare, and Railway to host chatbots, APIs, and web apps for less than $10/month.
Quick Answer: You don't need expensive cloud infrastructure to deploy AI applications. This guide shows you how to deploy production-ready AI chatbots, APIs, and web apps using free and low-cost services—for less than the cost of two coffees per month.
---
Typical Cloud Costs (AWS/GCP/Azure):
For Individual Developers:
Modern Serverless Platforms:
Benefits:
---
What is Vercel?
Free Tier:
Pricing:
```
Free: $0/month
├─ 100GB bandwidth
├─ Unlimited sites
└─ Hobby projects
Pro: $20/month
├─ 1TB bandwidth
├─ Team collaboration
└─ Commercial use
```
Best For:
What is Cloudflare?
Free Tier:
Pricing:
```
Free: $0/month
├─ 100K requests/day
├─ Unlimited bandwidth
└─ 10GB storage
Workers Paid: $5/month
├─ 10M requests/month
├─ No daily limits
└─ More CPU time
```
Best For:
What is Railway?
Free Tier:
Pricing:
```
Hobby: $5/month (usage-based)
├─ Pay for what you use
├─ All features
└─ No hidden costs
Pro: $20/month + usage
├─ Team features
├─ Priority support
└─ Higher limits
```
Best For:
What is Supabase?
Free Tier:
Pricing:
```
Free: $0/month
├─ 500MB database
├─ 1GB storage
└─ 50K MAU
Pro: $25/month
├─ 8GB database
├─ 100GB storage
└─ 100K MAU
```
Best For:
| Use Case | Best Platform | Monthly Cost | Why |
|----------|---------------|--------------|-----|
| AI Chatbot (webcel | $0 | Easy deployment, fast |
| AI API | Cloudflare Workers | $0-5 | Scalable, global |
| Full-stack App | Railway | $5 | Database included |
| App with Auth | Supabase + Vercel | $0 | Complete backend |
| High Traffic | Cloudflare | $5 | Best performance |
| Rapid Prototype | Vercel | $0 | Fastest setup |
---
Step 1: Create Next.js App (5 minutes)
```bash
npx create-next-app@latest ai-chatbot
cd ai-chatbot
npm install ai @ai-sdk/anthropic
npm install @vercel/analytics
ai-chatbot/
├── app/
│ ├── api/
│ │ └── chat/
│ │ └── route.ts
│ ├── page.tsx
│ └── layout.tsx
├── components/
│ └── chat.tsx
└── .env.local
```
Step 2: Create Chat API (10 minutes)
```typescript
// app/api/chat/route.ts
import { anthropic } from '@ai-sdk/anthropic';
import { streamText } from 'ai';
export const runtime = 'edge'; // Use edge runtime for speed
export async function POST(req: Request) {
const { messages } = await req.json();
const result = await streamText({
model: anthropic('claude-3-haiku-20240307'),
messages,
system: 'You are a helpful AI assistant.',
});
return result.toAIStreamResponse();
}
```
Step 3: Create Chat UI (15 minutes)
```typescript
// components/chat.tsx
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
return (
{/* Messages */}
{messages.map(message => (
ssage.id} className={`p-4 rounded-lg ${ message.role === 'user' ? 'bg-blue-100 ml-auto' : 'bg-gray-100' } max-w-[80%]`} >
{message.role === 'user' ? 'You' : 'AI'} {message.content}
))}
{isLoading && (
Thinking...
)}
{/* Input */}
);
}
```
```typescript
// app/page.tsx
import Chat from '@/components/chat';
export default function Home() {
return (
AI Chatbot
);
}
```
Step 4: Configure Environment (5 minutes)
```bash
ANTHROPIC_API_KEY=sk-ant-api03-...
echo ".env.local" >> .gitignore
```
Step 5: Deploy to Vercel (5 minutes)
```bash
npm install -g vercel
vercel login
vercel
vercel env add ANTHROPIC_API_KEY
vercel --prod
```
Result:
---
Step 1: Setup Cloudflare (5 minutes)
```bash
npm install -g wrangler
wrangler login
wrangler init ai-summarizer
cd ai-summarizer
```
Step 2: Create Worker (10 minutes)
```typescript
// src/index.ts
export interface Env {
ANTHROPIC_API_KEY: string;
}
export default {
async fetch(request: Request, env: Env): Promise
// Handle CORS
if (request.method === 'OPTIONS') {
return new Response(null, {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST',
'Access-Control-Allow-Headers': 'Content-Type',
},
});
}
if (request.method !== 'POST') { return new Response('Method not allowed', { status: 405 });
}
try {
const { text } = await request.json();
if (!text) {
return new Response('Missing text parameter', { status: 400 });
}
// Call Claude API
const response = await fetch('https://api.anthropic.com/v1/messages', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': env.ANTHROPIC_API_KEY,
'anthropic-version': '2023-06-01',
},
body: JSON.stringify({
model: 'claude-3-haiku-20240307',
max_tokens: 300,
messages: [{
role: 'user',
content: `Summarize this text in 3 bullet points:\n\n${text}`,
}],
}),
});
const data = await response.json();
const summary = data.content[0].text;
return new Response(JSON.stringify({ summary }), {
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
},
});
} catch (error) {
return new Response(JSON.stringify({ error: error.message }), {
tatus: 500,
headers: { 'Content-Type': 'application/json' },
});
}
},
};
```
Step 3: Configure (5 minutes)
```toml
name = "ai-summarizer"
main = "src/index.ts"
compatibility_date = "2024-01-01"
[env.production]
name = "ai-summarizer"
```
Step 4: Deploy (5 minutes)
```bash
wrangler secret put ANTHROPIC_API_KEY
wrangler deploy
curl -X POST https://ai-summarizer.your-subdomain.workers.dev \
-H "Content-Type: application/json" \
-d '{"text": "Long text here..."}'
```
Result:
---
Step 1: Create Project (10 minutes)
```bash
npx create-next-app@latest ai-chat-history
cd ai-chat-history
npm install @prisma/client
npm install -D prisma
npx prisma init
```
Step 2: Setup Database (10 minutes)
```prisma
// prisma/schema.prisma
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Conversation {
id String @id @default(cuid())
userId String
createdAt DateTime @default(now())
messages Message[]
}
model Message {
id String @id @default(cuid())
conversationId String
conversation Conversation @relation(fields: [conversationId], references: [id])
role String
content String @db.Text
createdAt DateTime @default(now())
```
Step 3: Create API (15 minutes)
```typescript
// app/api/chat/route.ts
import { PrismaClient } from '@prisma/client';
import { anthropic } from '@ai-sdk/anthropic';
import { streamText } from 'ai';
const prisma = new PrismaClient();
export async function POST(req: Request) {
const { messages, conversationId, userId } = await req.json();
// Create or get conversation
let conversation;
if (conversationId) {
conversation = await prisma.conversation.findUnique({
where: { id: conversationId },
});
} else {
conversation = await prisma.conversation.create({
data: { userId },
});
}
// Save user message
await prisma.message.create({
data: {
conversationId: conversation.id,
role: 'user',
content: messages[messages.length - 1].content,
},
});
// Generate AI response
const result = await streamText({
model: anthropic('claude-3-haiku-20240307'),
messages,
});
// Save AI response (after streaming completes)
result.onFinish(async ({ text }) => {
await prisma.message.create({
data: {
conversationId: conversation.id,
role: 'assistant',
content: text,
},
});
});
return result.toAIStreamResponse();
}
// Get conversation history
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const conversationId = searchParams.get('conversationId');
const messages = await prisma.message.findMany({
where: { conversationId },
orderBy: { createdAt: 'asc' },
});
return Response.json({ messages });
}
```
Step 4: Deploy to Railway (10 minutes)
```bash
npm install -g @railway/cli
railway login
railway init
railway link
railway add --database postgresql
railway up
railway run npx prisma migrate deploy
railway domain
```
Step 5: Configure Environment (5 minutes)
```bash
railway variables set ANTHROPIC_API_KEY=sk-ant-...
```
Result:
---
Maximize Free Resources:
```
Vercel Free Tier:
├─ 100GB bandwidth/month
├─ Enough for ~10K users/month
└─ Use for: Frontend + API routes
Cloudflare Free Tier:
├─ 100K requests/day = 3M/month
├─ Unlimited bandwidth
└─ Use for: Heavy API traffic
Supabase Free Tier:
├─ 500MB database
├─ Enough for ~50K messages
└─ Use for: Chat history
Total: $0/month for most side projects
```
Hybrid Deployment:
```
Frontend (Vercel Free):
├─ Static site
├─ Client-side rendering
└─ Cost: $0
API (Cloudflare Workers Free):
├─ Serverless functions
├─ Edge computing
└─ Cost: $0
Database (Supabase Free):
├─ PostgreSQL
├─ Auth
└─ Cost: $0
Total: $0/month
```
Implement Response Caching:
```typescript
// Cloudflare Worker with caching
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise
const cache = caches.default;
const cacheKey = new Request(request.url, request);
// Check cache
let response = await cache.match(cacheKey);
if (!response) {
// Generate response
response = await generateAIResponse(request, env);
// Cache for 1 hour
response = new Response(response.body, response);
response.headers.set('Cache-Control', 'public, max-age=3600');
ctx.waitUntil(cache.put(cacheKey, response.clone()));
}
return response;
},
};
```
Savings: 70-90% reduction in API calls
Batch Multiple Requests:
```typescript
// Batch API requests
async function batchSummarize(texts: string[]) {
const prompt = texts.map((text, i) =>
`Text ${i + 1}:\n${text}\n\nSummary ${i + 1}:`
).join('\n\n');
const response = await anthropic.messages.create({
model: 'claude-3-haiku-20240307',
max_tokens: 1000,
messages: [{ role: 'user', content: prompt }],
});
// Parse multiple summaries from single response
return parseSummaries(response.content[0].text);
}
```
Savings: 50% reduction in API costs
---
Stack:
Features:
Traffic: 1,000 users/month
Cost: $0/month
Stack:
Features:
Traffic: 100,000 requests/month
Cost: $10/month
Stack:
Features:
Traffic: 10,000 users/month
Cost: $55/month
---
Vercel Analytics:
```typescript
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
Cloudflare Analytics:
```bash
wrangler tail
```
Cost Tracking:
```typescript
// Track API usage
let requestCount = 0;
let totalCost = 0;
async function trackUsage(tokens: number) {
requestCount++;
totalCost += (tokens / 1000) * 0.00025; // Haiku pricing
if (requestCount % 100 === 0) {
console.log(`Requests: ${requestCount}, Cost: $${totalCost.toFixed(4)}`);
}
}
```
Database Backups:
```bash
railway run pg_dump > backup.sql
```
---
Deploying AI applications doesn't have to be expensive. With modern serverless platforms, you can:
Quick Start Checklist:
Total setup time: 1-2 hours
Monthly cost: $0-10
Scalability: Thousands of users
---
About the Author: The OpenClaw team helps developers deploy AI applications efficiently. We've helped 300+ developers launch their AI projects on budget.
Related Articles:
Last Updated: March 22, 2026
Complete guide to building your personal AI assistant from scratch. Learn how to set up an expert assistant for coding, writing, research, and daily tasks with minimal cost and maximum efficiency.
Complete guide to building a personal knowledge base with AI. Learn how to organize notes, enable AI search, auto-summarize content, and create knowledge graphs using Notion/Obsidian + AI for maximum productivity.
Get your free AI audit and discover optimization opportunities.
START FREE AUDIT