前言
大家好，我是3Katrina， 最近写文章写得少，一方面是因为我在准备面试，另一方面是因为我在开发一个新的项目！ 即使现在只有一个雏形，但我认为这个项目无论是从想法上还是从技术上，对于 应届生的我们 在求职中，是够用的， 特别是在这个AI盛行的时代，它更能吸引面试官。
截图
话不多说 先给大家看看 这个项目的部分截图吧！
想法起源的杂谈
首先给大家概述下这个项目： CarGPT 是一款专注于汽车领域的智能问答助手，基于RAG技术构建，能够为用户提供汽车相关的专业问答服务，目前已支持 2025 年 9 月的最新数据。这是一个全栈项目，从数据爬取、处理、存储到前端交互体验都做了完整实现。
做这个项目的想法是什么呢？下面是一些杂谈
做一个RAG应用.
什么是RAG?
首先，我们传统的大模型存在一个缺点：即使它的文字处理能力非常6，但是对于用户的提问，它只能基于大模型知识库中已有的知识来根据用户的提问回答内容，这会导致一些问题：如果用户问：”请问ipohone17的价格怎么样？性能怎么样？总结一下iphone17发布会的内容“，这个时候大模型 对于我们的提问， 它并没有相关知识的参考，于是它就会 ”无法回答“ 或者 ”乱答“。
但是如果你在prompt给它iphone官网的 最新信息 或者 iphone17发布会的相关报道，它就能根据这些上下文，”有理有据“地进行回答了
简单来说： RAG（检索增强生成）是通过先从外部知识库中检索与用户问题强相关的信息，再将这些信息与问题结合后输入大模型生成有理有据回答，从而解决大模型知识滞后、乱回答问题的技术方案。
下面是它的传统流程：
第一步，知识库预处理：先把要接入的知识库（比如公司内部的客户资料、行业政策文档）拆成适合检索的‘小文本块’（避免文本太长影响匹配精度），再用 Embedding 技术把每个文本块转成向量，最后存到向量数据库里 —— 这一步是‘快速检索’的基础，相当于给知识库建了‘向量索引’。
第二步，检索（Retrieval） ：当用户提问时，系统会先把用户的问题转成向量，然后去向量数据库里‘比对’—— 因为意思相近的文本，向量也会更相似，所以能瞬间找出和问题最相关的几段文本（比如 Top3-Top5），避免把整个知识库传给 LLM 导致效率低、成本高。
第三步，增强（Augmentation） ：把检索到的这几段‘强相关信息’，和用户的原始问题拼接在一起，形成新的输入（比如 “用户问题：公司 2024 年员工年假政策是什么？参考信息：1.XXX 2.XXX”）—— 这一步相当于给 LLM “临时补充知识”，让它不再只依赖固有知识库。
第四步，生成（Generation） ：LLM 基于 “用户问题 + 检索到的参考信息” 生成回答，这样既不会因知识缺失无法回答，也不会乱编内容，能做到有理有据，比如回答时会引用 “根据公司 2024 年 XX 政策第 3 条”，这就是 RAG‘增强大模型能力’的核心逻辑。”
我为什么要做？
所以回到这个项目，我在学习了 RAG 后，不想只是停留在概念上面理解，而是真正地落地一个RAG项目， 一方面是能够帮我更好地通过实操理解 RAG 的全流程; 另一方面 我认为这对求职来说也会很有帮助，因为做一个这种 新兴的项目 意味着我需要去学习很多新东西并且理解它们，所以我认为在求职中，这能体现我的 接受新知识能力以及动手实操能力
因此 CarGpt 这个项目就应运而生了！
为什么选 “汽车领域” 做 RAG？
选择汽车领域，是因为它的信息特性刚好契合 RAG 的优势，同时存在 3 个明显痛点：
时效性强：汽车每年换代（2025 款车型信息大模型默认没有）、政策频繁调整（如新能源补贴），传统大模型无法覆盖；
信息分散：车型参数在汽车之家、政策在工信部官网、评测在懂车帝，用户需跨平台查，效率低；
专业术语多：“CLTC 续航”“热成型钢占比”“混动架构” 等术语，普通用户难理解，需要 “翻译” 成通俗语言。
CarGPT 的核心目标，就是整合这些分散的最新信息，用 RAG 技术实现 “专业且易懂” 的问答 —— 这既是技术落地，也是解决实际需求。
技术杂谈
我认为技术的话，可以分为下面几个点去谈谈，由于是杂谈，可能看起来不是那么的系统
技术栈选择与应用
项目采用 Next.js 作为核心框架，配合 TypeScript 确保类型安全，用 Tailwind CSS 实现响应式 UI 设计。数据存储方面结合了 Prisma ORM 和 Supabase，其中 Supabase 不仅作为常规数据库，更重要的是利用其向量存储能力支持 RAG 架构。
AI 功能实现上，集成了 Ai SDK 处理大模型交互，LangChain 框架用于构建检索增强流程，Puppeteer 实现网页数据爬取，Zustand 则用于前端状态管理，特别是用户认证状态的管理。
技术亮点
-
智能数据处理流程 为确保汽车数据的时效性，我基于 LangChain 框架整合 Puppeteer 实现了定向网页爬取功能。通过无头浏览器技术自动化获取汽车领域最新资讯，再通过正则处理提取有效文本，过滤掉 HTML 标签等无关信息。
爬取的数据通过 RecursiveCharacterTextSplitter 进行分块处理，设置 512 字符块大小和 100 字符重叠，既保证语义完整性又避免信息割裂。
-
向量存储与检索系统 这是项目的核心部分。我调用 OpenAI 的 text-embedding-3-small 模型，将分块后的文本转换为 1536 维向量，然后存储到 Supabase 的向量数据库中。
为实现高效的相似性检索，我在 Supabase 中定义了自定义 RPC 函数 get_relevant_chunks，通过余弦相似度算法计算向量距离，支持按匹配阈值和返回数量进行筛选，确保检索结果的精准性。
-
流畅的对话交互体验 前端采用 @ai-sdk/react 提供的 useChat hook，仅用少量代码就实现了 AI 响应的流式输出，让回答内容逐字显示，大幅提升用户体验。
同时集成 React-Markdown 组件，能够解析 AI 返回的 Markdown 格式内容，支持链接、代码块等元素的正确渲染，使回答既专业又易读。
-
安全认证机制 实现了基于 JWT 的双 Token 认证体系，包含 access token 和 refresh token。access token 有效期 15 分钟，refresh token 有效期 7 天，通过无感刷新机制，在用户无感知的情况下自动更新 token，既保证安全性又提升用户体验。
认证逻辑通过 Next.js 中间件实现，精确控制受保护路由的访问权限。
完整流程总结
数据采集：Puppeteer 爬取汽车相关网页 → 正则清洗 → LangChain 分块
向量处理：OpenAI Embedding API 向量化 → Supabase 存储
问答流程：用户提问 → 生成问题向量 → Supabase RPC 检索相似内容 → 构建提示词 → GPT-4o-mini 生成回答 → 流式返回前端
前端展示：React-Markdown 渲染 → 响应式 UI 展示
整个流程通过 LangChain 实现数据处理流水线，借助 Supabase 实现高效向量检索，利用 AI SDK 实现流畅的流式交互，形成了完整的 RAG 架构闭环，确保用户能获得基于 2025 年最新数据的汽车领域专业回答。
未来
由于这个项目还是雏形，项目链接我就先不放了，等再开发一段时间功能稳定了之后
会进行开源以及分享已上线的地址
讲讲对于这个项目 我未来想做的一些事情吧
- 增加更多不同网站的 车信息数据 让这个项目更全面 能参考的知识更多
- 优化页面展示，以及优化移动端体验，增加离线缓存功能
- 集成更多汽车领域专业工具，如购车计算器等
总结
这篇文章是我在 这个项目的 设计-开发-部署 之后又总结了一遍，然后随笔写的，主要是谈谈一些想法和技术，杂谈为主。不喜勿喷，如果觉得有可以讨论的地方：欢迎评论区留言；如果觉得对你有启发或者有帮助：欢迎点个赞呀😁😁😁
