从Web开发到AI应用——用FastGPT构建实时问答系统

图片来源网络，侵权联系删。

文章目录

[1. 引言](#1. 引言)
[2. Web开发与FastGPT Agent的衔接点](#2. Web开发与FastGPT Agent的衔接点)
[3. 核心原理：实时爬取 + RAG 如何工作？](#3. 核心原理：实时爬取 + RAG 如何工作？)
[3.1 整体流程（Mermaid 流程图）](#3.1 整体流程（Mermaid 流程图）)
[4. 实战步骤：搭建你的第一个 FastGPT 实时问答应用](#4. 实战步骤：搭建你的第一个 FastGPT 实时问答应用)
[4.1 环境准备](#4.1 环境准备)
[4.2 创建自定义工具：网页爬虫](#4.2 创建自定义工具：网页爬虫)
[4.3 在 FastGPT 中编排 Agent 工作流](#4.3 在 FastGPT 中编排 Agent 工作流)
[4.4 前端集成（Vue 示例）](#4.4 前端集成（Vue 示例）)
[5. 常见问题与解决方案（Web开发者视角）](#5. 常见问题与解决方案（Web开发者视角）)
[5.1 问题：Docker 中无法访问本地爬虫服务](#5.1 问题：Docker 中无法访问本地爬虫服务)
[5.2 问题：网页内容太长，超出 LLM 上下文窗口](#5.2 问题：网页内容太长，超出 LLM 上下文窗口)
[5.3 问题：并发请求导致爬虫被封](#5.3 问题：并发请求导致爬虫被封)
[5.4 问题：前端调用 FastGPT API 需要鉴权](#5.4 问题：前端调用 FastGPT API 需要鉴权)
[6. 总结与Web开发者的AI学习路径](#6. 总结与Web开发者的AI学习路径)
[🚀 给 Web 开发者的 AI 学习建议：](#🚀 给 Web 开发者的 AI 学习建议：)
[🔗 推荐资源（真实可用）：](#🔗 推荐资源（真实可用）：)

1. 引言

在传统Web开发中，我们习惯于通过API获取结构化数据、渲染页面、处理用户交互。而当AI能力（如大语言模型）逐渐成为应用的核心组件时，Web开发者其实拥有天然优势------我们早已熟悉"请求-响应"模型、服务编排、前后端协作等核心逻辑。

本文将带领有Web开发背景的你，基于FastGPT平台 ，实战搭建一个结合实时网页爬取与RAG（检索增强生成）技术的智能问答系统。整个过程无需深度学习背景，只需掌握基本的HTTP请求、JSON处理和前端展示逻辑，即可快速上手AI应用开发。

💡 为什么选择FastGPT？

FastGPT 是一个开源的 LLM 应用开发平台，支持可视化编排 Agent 工作流、集成外部工具（如爬虫、数据库）、部署 RAG 系统，且提供 RESTful API，完美契合 Web 开发者的工程思维。

2. Web开发与FastGPT Agent的衔接点

FastGPT 的核心是 Agent 工作流编排，这与 Web 开发中的"微服务调用链"或"业务流程引擎"高度相似：

Web 开发概念	FastGPT 对应概念	类比说明
前端发起 HTTP 请求	用户向 FastGPT 应用提问	入口一致
后端调用多个微服务	Agent 调用多个工具节点	编排逻辑
中间件处理数据	Prompt 节点处理上下文	数据加工
返回 JSON 响应	FastGPT 返回结构化回答	输出格式

更重要的是，FastGPT 支持：

自定义工具（Tool）：可封装网页爬虫、数据库查询等为函数；
RAG 检索：将外部知识注入 LLM 上下文；
API 部署：一键生成可被 Web 前端调用的接口。

这意味着，你可以像开发一个普通 Web 后端服务一样，构建一个具备"感知-思考-回答"能力的 AI Agent。

3. 核心原理：实时爬取 + RAG 如何工作？

很多 Web 开发者听到"RAG"会觉得陌生，但其实它的逻辑非常"Web-native"：

RAG = 外部数据检索 + 提示词拼接 + LLM 生成

类比 Web 场景：

用户搜索商品 → 后端从数据库查出相关商品 → 渲染到页面
用户提问 → Agent 从网页/数据库检索相关信息 → 拼接到提示词 → LLM 生成答案

而"实时网页爬取"就是动态获取最新数据的"数据源"，相当于你在后端写了一个 fetchLatestNews(url) 函数。

3.1 整体流程（Mermaid 流程图）

用户提问
FastGPT Agent
调用网页爬虫工具
提取网页正文/关键信息
RAG 检索模块
将网页内容作为上下文
构造提示词: "基于以下信息回答..."
LLM 生成答案
返回结构化 JSON
Web 前端展示

✅ 关键点：网页内容不是直接喂给 LLM，而是经过清洗、截断、嵌入（embedding）后，作为"上下文证据"注入提示词，确保回答准确且不幻觉。

4. 实战步骤：搭建你的第一个 FastGPT 实时问答应用

4.1 环境准备

部署 FastGPT（推荐 Docker）：
bash 复制代码
```
git clone https://github.com/labring/FastGPT.git
cd FastGPT
docker-compose up -d
```
访问 http://localhost:3000 即可进入管理后台。
准备 API Key：
- 在 OpenRouter 或阿里百炼获取兼容 OpenAI 格式的 LLM API Key；
- 在 FastGPT 后台「模型管理」中添加该模型。

4.2 创建自定义工具：网页爬虫

FastGPT 支持通过 HTTP 工具 调用外部服务。我们可以先用 Python 写一个轻量爬虫服务（也可用现成的如 playwright 或 requests-html）：

python 复制代码

# crawl_service.py
from flask import Flask, request, jsonify
import requests
from bs4 import BeautifulSoup

app = Flask(__name__)

@app.route('/crawl', methods=['POST'])
def crawl():
    url = request.json.get('url')
    try:
        resp = requests.get(url, timeout=10)
        soup = BeautifulSoup(resp.text, 'html.parser')
        # 移除脚本和样式
        for script in soup(["script", "style"]):
            script.decompose()
        text = soup.get_text()
        # 简单清洗
        lines = (line.strip() for line in text.splitlines())
        chunks = (phrase.strip() for line in lines for phrase in line.split("  "))
        clean_text = '\n'.join(chunk for chunk in chunks if chunk)
        return jsonify({"content": clean_text[:3000]})  # 截断避免超长
    except Exception as e:
        return jsonify({"error": str(e)}), 500

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5001)

启动服务：python crawl_service.py

🌐 Web开发者友好提示：这个服务就像你平时写的任何一个 RESTful 微服务，FastGPT 只是它的"调用方"。

4.3 在 FastGPT 中编排 Agent 工作流

进入 FastGPT 后台 → 「应用」→ 「新建应用」；
添加 HTTP 工具节点 ：
- URL: http://host.docker.internal:5001/crawl（注意 Docker 网络）
- Method: POST
- Body: {"url": "{``{input}}"}
- 提取字段：$.content
添加 RAG 检索节点（可选，若仅用爬取内容可跳过）；
添加 LLM 节点，提示词模板如下：

text 复制代码

你是一个智能助手，请基于以下网页内容回答问题：

{{tool_result}}

问题：{{input}}

请用简洁中文回答，不要编造信息。

连接节点：用户输入 → 爬虫工具 → LLM → 输出。

4.4 前端集成（Vue 示例）

vue 复制代码

<template>
  <div>
    <input v-model="question" @keyup.enter="ask" placeholder="请输入网址或问题，如：https://example.com 的主要内容是什么？" />
    <button @click="ask">提问</button>
    <div v-if="answer" class="answer">{{ answer }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const question = ref('')
const answer = ref('')

async function ask() {
  const res = await fetch('http://localhost:3000/api/v1/chat/completions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      appId: 'your-app-id-from-fastgpt',
      messages: [{ role: 'user', content: question.value }]
    })
  })
  const data = await res.json()
  answer.value = data.choices[0].message.content
}
</script>

<style scoped>
.answer { margin-top: 16px; padding: 12px; background: #f5f5f5; border-radius: 8px; }
</style>

✅ 效果：用户输入一个 URL，系统自动爬取并总结内容；输入问题，系统基于最新网页内容作答。

5. 常见问题与解决方案（Web开发者视角）

5.1 问题：Docker 中无法访问本地爬虫服务

原因：FastGPT 运行在容器内，localhost 指向容器自身。
解决：使用 host.docker.internal（Mac/Windows）或宿主机 IP（Linux）。

5.2 问题：网页内容太长，超出 LLM 上下文窗口

方案：在爬虫服务中做摘要（如用 transformers 抽取关键句），或使用 FastGPT 的 分块+RAG 功能，只检索最相关段落。

5.3 问题：并发请求导致爬虫被封

方案：
- 加入请求头模拟浏览器；
- 使用代理池；
- 缓存已爬取页面（Redis + URL MD5）。

5.4 问题：前端调用 FastGPT API 需要鉴权

建议：不要在前端暴露 FastGPT API Key！应由你的 Web 后端（如 Java/Spring Boot）作为中间层代理请求，类似 JWT 认证流程。

java 复制代码

// Spring Boot 示例
@PostMapping("/ai/ask")
public ResponseEntity<String> ask(@RequestBody Map<String, String> payload) {
    HttpHeaders headers = new HttpHeaders();
    headers.set("Authorization", "Bearer YOUR_FASTGPT_API_KEY");
    // 转发请求到 FastGPT
    // ...
}

6. 总结与Web开发者的AI学习路径

通过本次实战，你已经完成了：

将传统 Web 服务（爬虫）接入 AI Agent；
利用 RAG 思想实现"基于事实"的问答；
用熟悉的 Vue/React/Java 技术栈集成 AI 能力。

🚀 给 Web 开发者的 AI 学习建议：

从"工具集成"入手：先学会调用 AI API（如 FastGPT、LangChain），而非训练模型；
聚焦"数据流"设计：AI 应用本质是数据管道，你的 Web 架构经验是巨大优势；
逐步深入 ：
- 阶段1：前端 + FastGPT API（快速原型）
- 阶段2：后端封装 Agent 逻辑（安全/缓存/限流）
- 阶段3：自建 Embedding 服务 + 向量数据库（提升 RAG 精度）

🔗 推荐资源（真实可用）：

FastGPT 官方文档
Web开发者友好的AI课程：《AI Engineering for Web Devs》（DeepLearning.AI）
开源项目：Next.js + FastGPT 聊天模板
工具库：Cheerio（Node.js 爬虫）、Playwright（无头浏览器）