Vercel AI 应用部署指南

Vercel 是 Next.js 的母公司，也是目前部署 AI Web 应用（如 Chatbot）的首选平台。配合 Vercel AI SDK，你可以用几十行代码写出一个功能完备的 ChatGPT 网页版。

1. 核心挑战：超时 (Timeout)

部署 AI 应用最大的坑是响应时间。大模型生成长文可能需要 10-30 秒，而 Vercel 的免费 Serverless Function 默认限制 10 秒超时。

解决方案有两个：

1. 流式响应 (Streaming)：让 AI 一个字一个字地吐出来，只要第一个字在 10 秒内出来，连接就不会断。
2. 使用 Edge Runtime：边缘函数的超时限制通常更宽松（或支持流式直到结束）。

2. Vercel AI SDK 实战

这是 Vercel 专门为 AI 开发的 SDK，统一了 OpenAI, LangChain, HuggingFace 的接口。

2.1 安装

npm install ai openai

2.2 后端 API (app/api/chat/route.ts)

一定要指定 runtime = 'edge'。

import { OpenAIStream, StreamingTextResponse } from 'ai';
import { OpenAI } from 'openai';

// 强制使用 Edge Runtime，避免 10s 超时
export const runtime = 'edge';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function POST(req: Request) {
  const { messages } = await req.json();
  const response = await openai.chat.completions.create({
    model: 'gpt-3.5-turbo',
    stream: true,
    messages,
  });
  
  // 将 OpenAI 的流转换为 Vercel 的流
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

2.3 前端页面 (app/page.tsx)

'use client';
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}
      
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

3. 部署步骤

1. 将代码推送到 GitHub。
2. 在 Vercel 后台 Import 这个仓库。
3. 在 Settings -> Environment Variables 中填入 OPENAI_API_KEY。
4. 点击 Deploy，等待 1 分钟，你的 AI 应用就上线了，且自带 HTTPS 域名。

---

使用 Vercel + Next.js + AI SDK，是目前构建 AI 创业产品最快、最现代化的技术栈。