想自己做一个 AI 聊天机器人，但觉得太复杂？其实现在只要 100 行代码就能搞定。本文带你从零开始，用 Next.js（一个流行的 React 框架）和 Vercel AI SDK（一个让 AI 聊天变简单的工具包）搭建一个能实时输出文字、还能调用你写的函数（比如查东京时间）的聊天应用。

准备环境

• Node.js：JavaScript 的运行环境，到 nodejs.org 下载 LTS 版本，安装后打开终端输入 node -v 看到版本号即成功。
• 代码编辑器：推荐 VS Code，免费且好用。
• AI 模型 API 密钥：本文用 Gemini 2.5 Flash（Google 的免费模型），到 Google AI Studio 注册获取 API 密钥。

安装步骤

1. 打开终端，执行 npx create-next-app@latest my-ai-chat 创建项目，按提示选择默认选项。
2. 进入项目目录 cd my-ai-chat，安装 AI SDK：npm install ai @ai-sdk/google。
3. 在项目根目录创建 .env.local 文件，填入你的 API 密钥：GOOGLE_GENERATIVE_AI_API_KEY=你的密钥。
4. 新建 app/api/chat/route.ts，写入后端代码：

   import { google } from '@ai-sdk/google';
   import { streamText } from 'ai';
   
   export async function POST(req: Request) {
     const { messages } = await req.json();
     const result = streamText({
       model: google('gemini-2.5-flash'),
       messages,
     });
     return result.toDataStreamResponse();
   }

5. 修改 app/page.tsx，写入前端代码：

   'use client';
   import { useChat } from 'ai/react';
   
   export default function Chat() {
     const { messages, input, handleInputChange, handleSubmit } = useChat();
     return (
       
   
         {messages.map(m => (
           
   
             {m.role}: {m.content}
           
         ))}
         
   
           
           发送
         
       
     );
   }

6. 运行 npm run dev，打开浏览器访问 http://localhost:3000，输入问题即可看到 AI 实时回复。

验证是否成功

在聊天框输入“东京现在几点？”，如果 AI 能给出实时时间（而不是乱编的），说明你的应用已正确调用模型。你也可以尝试添加工具（比如一个查天气的函数），让 AI 调用你的代码来回答——这会让聊天机器人变得更实用。

下一步可以做什么

• 修改 model 参数换成其他模型（如 GPT-4），只需一行代码。
• 添加 tool 功能：让 AI 调用你写的函数（如查询数据库、发邮件）。
• 部署到 Vercel（免费），让全世界都能用。