萧鼎
萧鼎

从零构建一个全栈AI应用：Next.js + FastAPI + OpenAI API

为什么写这篇文章？

很多开发者希望构建一个能“聊天、问答、调用AI能力”的完整应用，但在前端、后端、模型接口之间打通时，常常踩坑。

今天这篇文章将手把手教你如何从零构建一个 AI 全栈应用：

  • 前端用 Next.js 构建交互界面
  • 后端用 FastAPI 管理 API 和权限
  • 模型调用使用 OpenAI API（或其他 LLM API）

目标是让你掌握前后端分离 + LLM 调用 + API 代理 + UI 交互的整个流程。

项目结构概览

ai-app/
├── backend/              # FastAPI 服务
│   └── main.py
├── frontend/             # Next.js 页面
│   └── pages/
│       └── index.tsx
├── .env
└── README.md

一、准备工作

✅ 技术选型

层级 技术栈 用途
前端 Next.js + Tailwind 搭建聊天界面
后端 FastAPI 提供统一 API 接口
LLM 接口 OpenAI API 提供模型回答能力

✅ 安装依赖

后端环境
cd backend
pip install fastapi uvicorn requests python-dotenv
前端环境
cd frontend
npx create-next-app@latest
npm install axios
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

二、构建后端 API（FastAPI）

文件：backend/main.py

from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware
import requests, os
from dotenv import load_dotenv

load_dotenv()
app = FastAPI()

# 允许前端跨域访问
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"], 
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")

@app.post("/chat")
async def chat(req: Request):
    body = await req.json()
    user_input = body.get("message", "")

    headers = {
        "Authorization": f"Bearer {OPENAI_API_KEY}",
        "Content-Type": "application/json"
    }
    data = {
        "model": "gpt-3.5-turbo",
        "messages": [{"role": "user", "content": user_input}]
    }
    response = requests.post("https://api.openai.com/v1/chat/completions", headers=headers, json=data)
    result = response.json()
    reply = result["choices"][0]["message"]["content"]
    return {"reply": reply}

.env 文件

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx

启动服务

uvicorn main:app --reload --port 8000

三、构建前端页面（Next.js）

配置 TailwindCSS（略）

参考官网：https://tailwindcss.com/docs/guides/nextjs

文件：frontend/pages/index.tsx

import { useState } from "react";
import axios from "axios";

export default function Home() {
  const [message, setMessage] = useState("");
  const [reply, setReply] = useState("");

  const handleSend = async () => {
    const res = await axios.post("http://localhost:8000/chat", { message });
    setReply(res.data.reply);
  };

  return (
    

      

        
 AI Chat Assistant