作为前端开发者，2026年最酷的事情莫过于自己手搓一个AI应用。
不管是想做个套壳站赚点零花钱，还是想给公司内部搭个ChatGPT镜像，最大的拦路虎往往不是前端UI（毕竟有shadcn/ui），而是后端的API接入。
直接在前端请求OpenAI？跨域（CORS）教你做人，API Key暴露更是大忌。用Node.js做反代？服务器维护成本太高。
今天教大家一个纯前端的方案：Next.js (App Router) + 147api。
不需要买服务器，不需要搞Nginx，直接部署在Vercel上，一行后端代码都不用写，还能享受到官方5折的API价格。
为什么选 147api 而不是直连？
在前端项目中，直连OpenAI有三个致命伤：
- 网络不通：Vercel的Edge Function虽然能访问外网，但连接OpenAI极其不稳定。
- 风控：OpenAI对Vercel的IP段查得很严，经常403。
- 贵：GPT-4o跑起来，信用卡受不了。
而 147api 完美解决了这些问题：
- 国内优化：自带专线，延迟极低，Stream流式输出飞快。
- 兼容性：完全兼容OpenAI SDK，改个
baseURL就能用。 - 成本：价格只有官方的一半，支持支付宝充值。
实战步骤
1. 初始化项目
npx create-next-app@latest my-chatgpt --typescript --tailwind --eslint
cd my-chatgpt
npm install openai ai
2. 配置环境变量
在项目根目录创建 .env.local：
# 你的 147api Key
OPENAI_API_KEY=sk-147api-xxxxxxxxxxxxxxxx
# 147api 的 Base URL (关键！)
OPENAI_BASE_URL=https://api.147api.com/v1
3. 实现后端 API Route (App Router)
在 app/api/chat/route.ts 中写入：
import { OpenAI } from 'openai';
import { OpenAIStream, StreamingTextResponse } from 'ai';
// 初始化 OpenAI 客户端，自动读取环境变量中的 BASE_URL
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
baseURL: process.env.OPENAI_BASE_URL, // 这里会自动指向 147api
});
export const runtime = 'edge'; // 使用 Edge Runtime
export async function POST(req: Request) {
const { messages } = await req.json();
// 调用 GPT-4o
const response = await openai.chat.completions.create({
model: 'gpt-4-turbo', // 147api 支持所有主流模型
stream: true,
messages,
});
// 将响应转换为流
const stream = OpenAIStream(response);
return new StreamingTextResponse(stream);
}
4. 实现前端 UI
在 app/page.tsx 中：
'use client';
import { useChat } from 'ai/react';
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
{messages.map(m => (
<div key={m.id} className="whitespace-pre-wrap">
{m.role === 'user' ? 'User: ' : 'AI: '}
{m.content}
</div>
))}
<form onSubmit={handleSubmit}>
<input
className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
value={input}
placeholder="Say something..."
onChange={handleInputChange}
/>
</form>
</div>
);
}
5. 竞品对比：为什么不用 OpenRouter？
我在开发过程中也试过OpenRouter和硅基流动：
- OpenRouter：模型确实多，但因为服务器在国外，配合Vercel使用时，延迟感人，有时候前端都loading半天了后端还没响应。
- 硅基流动：跑DeepSeek很爽，但想用GPT-4或者Claude 3.5时就没办法了，模型支持不够全。
- 147api：最均衡。既有专线低延迟，又全模型覆盖，关键是便宜。
总结
通过 Next.js + 147api，我们用不到100行代码就实现了一个功能完备的AI聊天应用。
对于前端开发者来说，选择一个兼容性好、速度快、价格低的API中转平台，能让你少操很多心，把精力集中在交互体验上。
