震惊！用AI写代码竟如此简单？Trae Solo带你3步构建多模态RAG系统前端

本文详细介绍了如何利用字节跳动的AI编程工具Trae Solo构建多模态RAG系统的前端界面，并分享了"三步走"的Vibe Coding最佳实践：构建结构化提示词、提示词优化和精准问题定位。通过实际案例演示了使用Trae Solo快速开发前端应用的全过程，包括模块化架构设计、流式对话交互实现和PDF引用溯源功能等，为AI辅助编程提供了实用方法论。

朝阳区靓仔_James

577人浏览 · 2025-12-27 14:25:53

朝阳区靓仔_James · 2025-12-27 14:25:53 发布

前言

上篇分享[《LangChain1.0实战之多模态RAG系统（三）——多模态RAG系统PDF解析功能实现》]中，笔者详细分享了基于 LangChain 的多模态 RAG 系统如何处理 PDF 文档——从解析、文本分块到引用溯源，并通过完整代码示例展示了如何实现一个具备文档引用功能的问答系统，为实际构建多模态 RAG 应用提供了具体指导。

后端核心功能已基本开发完成。但一个完整的系统离不开与之匹配的前端界面。在当前 AI 编程逐渐成为主流的背景下，Vibe Coding（氛围编程）正深刻改变开发方式：开发者通过自然语言描述需求，由大语言模型（LLM）直接生成软件。在笔者之前的文章《[Gemini3.0深度解析，它在重新定义智能，会是前端工程师噩梦吗？》]中曾探讨过这一趋势。

Vibe Coding 已不再是国外模型的专属。字节跳动推出的 AI 编程工具 Trae 已开放 Solo 模式，号称能够高效、自动化地实现“从自然语言到软件”的全流Trae 程开发。在本期分享中，笔者将带领大家使用 Trae Solo，一步步完成多模态 RAG 系统前端页面的搭建与实现。

本系列内容适合所有对 LangChain 感兴趣的学习者，无论之前是否接触过 LangChain。当然，如果大家已经学习过我的专栏《深入浅出LangChain&LangGraph AI Agent 智能体开发》，相信可以更快上手。该专栏基于笔者在实际项目中的深度使用经验，系统讲解了使用LangChain/LangGraph如何开发智能体，目前已更新30讲，并持续补充实战与拓展内容。欢迎感兴趣的同学关注笔者微信公众号 大模型真好玩，每期分享涉及的代码均可在公众号私信: LangChain智能体开发免费获取。

PS:鉴于后台私信越来越多，我建了一些大模型交流群，大家在日常学习生活工作中遇到的大模型知识和问题都可以在群中分享出来大家一起解决！如果大家想交流大模型知识，可以关注我并回复加群。

一、Vibe Coding 最佳实践指南

笔者在文章 [Chatbox支持接入LangGraph智能体？一切都靠Trae Solo!]利用 Trae Solo 快速生成了一个 FastAPI 中间层，将笔者开发的智能体与Chatbox前端页面无缝衔接。对于这类需求明确、结构简单的任务，Trae Solo 确实能做到近乎“一键生成”。

然而当面对一个稍具规模、功能复杂的系统级项目时，通过多次实践，笔者发现不能期望 Trae Solo 能瞬间“理解”全部需求，一次性生成完美无瑕的代码。这正是当前阶段 Vibe Coding（氛围编程）的真实写照：它并非“替代”开发者，而是一个需要被“引导”和“协同”的强大工具。

高效的 Vibe Coding 不仅要求开发者具备扎实的专业知识和项目经验，以便提出精准需求和定位问题，更需要一套系统的方法论来引导大模型。经过反复实践与总结，笔者分享自己常用的“三步走”最佳指南，显著提升大模型生成代码的准确性与可用性。

第一步：构建结构化的提示词

清晰、完整的提示词是成功的关键因素。为了让大模型充分理解你的意图，必须提供一份结构严谨的提示词。在文章[《与大模型对话的艺术：提示词工程指南（一）》]中笔者分享了通用场景的提示词技巧。对于具体的开发任务，笔者进一步将其细化为以下几个核心要素：

角色定位

首先，明确赋予大模型一个特定的“身份”和“能力集”。例如：“你是一位资深的前端开发工程师，精通 HTML、CSS、JavaScript 及 React 框架，能够根据产品需求独立完成高质量的前端页面开发。”
清晰的需求描述

在阐明能力后，具体、无歧义地描述需求。例如：“请基于我已开发的后端 API（附上接口文档），构建一个多模态 RAG 系统的管理前端。核心功能需包括：文档上传区、对话历史列表、实时问答交互界面，并确保问答结果能高亮显示引用的原文片段。”
明确的任务目标

将需求转化为可执行的具体任务。例如：“请使用 Vite 脚手架创建 React 项目，采用 Ant Design 作为 UI 组件库，构建符合上述需求的前端单页应用。请保持后端 API 调用方式不变，主要逻辑集中在 src/pages/chat 目录下。”
代码风格与规范约束

为防止大模型“自由发挥”导致代码风格混乱，必须提前约定规范。例如：“请遵循函数式组件编写，使用 TypeScript 进行类型定义。目录结构需按功能模块划分，组件文件采用 PascalCase 命名，工具函数采用 camelCase 命名。”

第二步提示词优化

第一步编写的提示词，其首要目标是保证“人类视角”下的完整性。然而，要让大模型最有效地理解，最好使用更符合 AI“思维习惯”的语言进行二次编写。

一个非常实用的技巧是：不要直接将你的“大白话”提示词丢给目标大模型或智能体（如 Trae Solo），而是先请另一个擅长文本处理的大模型（如 DeepSeek）对其进行优化。 优化的目标是使语言更条理清晰、逻辑通顺、指令明确。

亲测表明，经过这层“翻译”或“润色”后，再提交给 Trae Solo 等代码生成工具，得到的代码质量更高，初次运行的通过率显著提升，后续需要修正的 Bug 也更少。

第三步精准的问题定位

对于复杂项目，大模型生成的代码几乎不可能一次性完美运行。当出现Bug时，笔者身边许多开发者习惯于直接将整段报错信息抛给大模型，这种模糊的提问方式往往收效甚微。

更高效的做法是：开发者先进行初步的、粗粒度的问题定位，再引导大模型进行精准修复。 具体流程如下：

人工分析

根据报错栈信息，初步判断问题可能出现的文件或代码模块（例如，可能是 src/components/ChatWindow.tsx 中的状态更新逻辑有问题）。
提供上下文

向大模型提问时，不仅要提供错误信息，更要提供相关文件的完整代码或关键片段作为上下文。
精准提问

提问方式应为：“我在运行项目时遇到了 [具体错误]。初步分析问题可能出在 ChatWindow.tsx 组件。以下是该文件的完整代码及相关依赖模块的代码，请帮我分析并修复这个错误。”

通过这种方式，你将从一个被动的“错误提交者”转变为主动的“调试引导者”，极大提升了大模型排查和修复问题的效率。

理论阐述再多，不如动手实践。接下来，笔者将完整演示如何运用以上“三步法”，通过 Trae Solo 为多模态 RAG 后端，开发一个功能完备、界面美观的前端应用。

二、Trae Solo 前端开发实践

实践是检验真理的唯一标准。下面笔者将严格遵循前文所述的“三步走”指南，带领 Trae Solo 一步步构建多模态 RAG 系统的前端。

首先在包含后端代码的项目文件夹中打开Trae，这样在向Trae进行提问时Trae就会自动分析上下文后端代码中的内容，更精确的依据后端接口生成前端页面。

2.1 编写结构化提示词

依据指南第一步，首先需要构建一份结构清晰、要素完整的原始提示词。

1. 角色定位：明确赋予****Trae Solo 一个专业身份和能力范围

你是一名前端编程大师，具备熟练运用React+TypeScript组件化开发的技能，熟练运用TailWind CSS + antd构建现代化框架样式与组件库的技能，具备使用vite脚手架开发前端项目的技能，能够完成用户提出的所有需求。

2. 清晰的需求：详细描述业务场景与功能点

在backend/src文件夹下是我利用fastapi编写的后端代码，用户可以请求接口完成大模型智能问答、大模型图片分析、大模型音频转写、大模型PDF问答解析四个功能。该前端项目名称为多模态大模型RAG系统，用户进入后首先会有一个排列智能问答、图片分析、音频转写和PDF解析的四个功能选项，选择功能选项会进入与大模型的对话框。在智能问答选项中用户可以与大模型进行对话问答。在图片分析选项中用户除了可以与大模型进行对话问答外，还可以上传图片，大模型依据图片内容和用户提问进行回答。在音频转写选项中用户除了可以与大模型进行对话问答外，还可以上传音频，大模型依据音频内容和用户提问进行回答。在PDF转写选项中用户除了可以与大模型进行对话问答外，还可以上传PDF，大模型依据PDF内容作为参照对用户提问进行回答，回答中还包含对PDF的引用。与大模型的对话都以流式输出的方式输出。

3. 明确的任务：将需求转化为具体的开发指令

请在保持我后端核心代码不发生大规模变动的前提下，使用vite脚手架，利用react框架，antd UI库帮我构建一个前端项目用户请求我的后端接口。

4. 代码规范约束：为防止代码风格失控，必须提前约定规范

在前端编写中，你应该遵循如下规范，确保前端代码的可维护性：(1) 组件设计采用容器/展示分离逻辑与视图，容器组件：管理数据、状态和逻辑。展示组件：接收props渲染UI，通常无状态。 (2) 目录结构按业务或功能模块组织，组件与页面分开存放，src/pages/ 存放页面，src/components/ 存放公共组件，src/modules/ 存放业务模块。(3) 导入导出保持导入导出清晰一致，优先使用具名导出，单文件单组件：可用默认导出。单文件多组件/工具：必须用具名导出。导入顺序：库 -> 组件 -> 资源 -> 样式。 (4) 样式管理避免全局样式污染，组件样式独立管理。CSS Modules/Styled Components：推荐。覆盖Antd样式：通过自定义类名或使用configProvider全局配置。(5) 路由与页面使用路由实现页面级代码分割，按需加载。配置页面路由：/pages/Home/index.jsx -> /home。懒加载页面组件：使用 React.lazy() 和 Suspense

2.2 DeepSeek提示词优化

原始提示词已经具备了所有要素，但其表述偏向“大白话”，逻辑连贯性有待加强。现在笔者执行第二步：使用另一个大模型（这里选用 DeepSeek）对提示词进行优化，使其更符合大模型的“阅读习惯”。

原始输入提示词:

我想要为我fastapi的后端编写一个前端页面，请对我的提示词进行优化，使提示词条理清晰，逻辑通顺。我的提示词如下：“你是一名前端编程大师，具备熟练运用React+TypeScript组件化开发的技能，熟练运用TailWind CSS + antd构建现代化框架样式与组件库的技能，具备使用vite脚手架开发前端项目的技能，能够完成用户提出的所有需求。 在backend/src文件夹下是我利用fastapi编写的后端代码，用户可以请求接口完成大模型智能问答、大模型图片分析、大模型音频转写、大模型PDF问答解析四个功能。 请在保持我后端核心代码不发生大规模变动的前提下，使用vite脚手架，利用react框架，antd UI库帮我构建一个前端项目用户请求我的后端接口。 该前端项目名称为多模态大模型RAG系统，用户进入后首先会有一个排列智能问答、图片分析、音频转写和PDF解析的四个功能选项，选择功能选项会进入与大模型的对话框，在智能问答选项中用户可以与大模型进行对话问答。在图片分析选项中用户除了可以与大模型进行对话问答外，还可以上传图片，大模型依据图片内容和用户提问进行回答。在音频转写选项中用户除了可以与大模型进行对话问答外，还可以上传音频，大模型依据音频内容和用户提问进行回答。在PDF转写选项中用户除了可以与大模型进行对话问答外，还可以上传PDF，大模型依据PDF内容作为参照对用户提问进行回答，回答中还包含对PDF的引用。与大模型的对话都以流式输出的方式输出。 在前端编写中，你应该遵循如下规范，确保前端代码的可维护性： (1) 组件设计采用容器/展示分离逻辑与视图，容器组件：管理数据、状态和逻辑。展示组件：接收props渲染UI，通常无状态。 (2) 目录结构按业务或功能模块组织，组件与页面分开存放，src/pages/ 存放页面，src/components/ 存放公共组件，src/modules/ 存放业务模块。 (3) 导入导出保持导入导出清晰一致，优先使用具名导出，单文件单组件：可用默认导出。单文件多组件/工具：必须用具名导出。导入顺序：库 -> 组件 -> 资源 -> 样式。 (4) 样式管理避免全局样式污染，组件样式独立管理。CSS Modules/Styled Components：推荐。覆盖Antd样式：通过自定义类名或使用configProvider全局配置。 (5) 路由与页面使用路由实现页面级代码分割，按需加载。配置页面路由：/pages/Home/index.jsx -> /home。懒加载页面组件：使用 React.lazy() 和 Suspense ”

DeepSeek优化后结果:

**角色与技能定位**  你是一名资深前端工程师，精通以下技术栈：-   React + TypeScript 的组件化开发-   Tailwind CSS + Ant Design (antd) 用于现代化 UI 构建-   Vite 脚手架进行项目开发与构建**项目概述**  我已在 `backend/src` 下基于 FastAPI 开发了后端服务，支持以下四个核心功能：1.  大模型智能问答2.  大模型图片分析3.  大模型音频转写4.  大模型 PDF 问答解析现需要你基于现有后端，使用 **Vite + React + TypeScript + antd + Tailwind CSS** 开发一个前端项目，项目命名为  **“多模态大模型RAG系统”** 。后端核心代码应保持不变，前端通过调用接口与后端交互。**核心功能需求**1.  **首页导航**    -   进入系统后，首页清晰展示四个功能入口：智能问答、图片分析、音频转写、PDF解析。2.  **功能页面与交互**    -   每个功能对应一个独立的对话页面，支持用户与大模型进行**流式对话**（答案逐步输出）。    -   **智能问答**：纯文本对话界面。    -   **图片分析**：在对话基础上，支持上传图片，模型依据图片内容与用户提问进行回答。    -   **音频转写**：在对话基础上，支持上传音频，模型依据音频内容与用户提问进行回答。    -   **PDF解析**：在对话基础上，支持上传PDF，模型以PDF内容为参照回答问题，并在答案中提供引用来源。**前端代码规范**  请严格按照以下架构与规范进行开发：3.  **组件设计**    -   采用容器组件（管理数据、状态、逻辑）与展示组件（接收 props 渲染 UI）分离的模式。4.  **目录结构**    -   `src/pages/`：存放页面级组件（如 Home, ChatPage 等）    -   `src/components/`：存放可复用的公共组件    -   `src/modules/`：按业务模块组织（例如：chat, upload, utils 等）5.  **导入导出**    -   优先使用具名导出；单文件单组件可使用默认导出。    -   导入顺序：第三方库 → 内部组件 → 静态资源 → 样式文件。6.  **样式管理**    -   使用 CSS Modules 或 Styled Components 避免全局样式污染。    -   覆盖 antd 样式时，通过自定义类名或 `ConfigProvider` 全局配置实现。7.  **路由与代码分割**    -   配置路由映射（例如：`/pages/Home/index.tsx` → `/home`）。    -   使用 `React.lazy()` 与 `Suspense` 实现页面级懒加载，提升性能。**补充要求**-   所有对话界面需实现**流式输出**（Server-Sent Events 或 WebSocket）。-   文件上传组件需支持常见格式（图片：jpg/png；音频：mp3/wav；PDF：pdf），并提供上传状态反馈。-   界面风格保持现代、简洁，符合 Ant Design 设计语言，并适当运用 Tailwind CSS 进行样式定制。

优化后的提示词层级分明、指令明确，消除了冗余和歧义。此时将其提交给 Trae Solo，能够确保指令被最高效、最准确地执行。

2.3 Trae Solo 自动开发

现在笔者将优化后的提示词交给 Trae Solo，开始Trae Solo的表演。

1. 输入提示词：将上述优化后的文本粘贴到 Trae 对话框中

2. 环境自动搭建：Trae 接收到指令后，并未立即开始编码，而是首先分析后端代码结构，然后自动执行命令行指令来搭建开发环境（如创建 Vite 项目、安装依赖）。这一特性极大简化了环境配置流程。用户在中部对话框的输入，会被实时转化为右侧终端的命令执行，实现了自然语言驱动开发环境配置。

3. 结构化编码：环境就绪后，Trae 开始按照设定的规范编写代码。从其输出的中间过程可以看出，它有条不紊地创建目录、编写组件，逻辑清晰。

4. 生成项目结构：首版代码生成后，查看目录结构，完全符合之前约定的规范。语义化的文件命名和模块化组织，使得代码可读性和可维护性很高。

2.4 Bug修复与功能添加

即便是一个数千行代码的规范项目，Trae Solo也难以一次性生成无bug代码。此时便需要运用指南的第三步：精准的问题定位与引导修复。

1. 精准定位修复 Bug：例如，在 PDF 页面遇到了 Encountered two children with the same key 的错误。不应简单粘贴报错，而是将错误信息与疑似出问题的 pdf.tsx 文件代码一同提供给 Trae，并引导其分析问题所在。这种提供上下文的方式能极大提高修复效率。

2. 环境相关错误处理：对于如 localStorage is not defined 这类与环境相关的运行时错误，同样通过指明问题的页面和代码片段，引导 Trae 进行条件判断或兼容性修复。

3. 功能迭代与补充：在核心功能测试通过后，发现需要补充两个特性：对话历史记录和PDF引用可点击溯源。对于这类明确的小功能点，这里直接用自然语言向 Trae 提出需求，它会高效地实现。

2.5 最终效果

所有开发与调试完成后，指示 Trae 执行 npm run dev 启动开发服务器，对各功能进行逐一测试。

系统首页：清晰展示四个功能入口。

智能问答： 纯文本流式对话界面。

图片分析： 支持上传图片并结合图片内容进行问答。

音频转写： 支持上传音频文件并基于其内容进行交互。

PDF解析回答： 支持上传PDF，模型回答时提供可点击的引用来源，实现溯源。

三、前端关键代码解析

在 Trae Solo 的助力下，笔者快速获得了一个功能完整的前端项目。现在笔者深入代码内部，审视大模型生成的实现细节，并解析大家最为关注的几个核心设计。

3.1 模块化架构与路由设计

核心设计：项目采用了清晰的分层与模块化架构，充分体现了 React 的最佳实践。

1. 路由层 (Home.tsx) ：
项目使用 react-router-dom (v7) 作为路由管理核心。Home.tsx 作为布局组件，定义了系统的整体导航结构。它将四个核心功能（智能问答、图片分析、音频转写、PDF解析）映射到不同的路由路径，实现了功能模块的隔离与按需加载。

2. 组件复用策略：
尽管四个功能页面（text.tsx, image.tsx, audio.tsx, pdf.tsx）在 UI 和交互上高度相似，但 Trae Solo 并没有简单复制代码，而是巧妙地运用了 组件组合与属性驱动 的设计模式。它们共用同一个核心的 ChatPage 组件，通过传入不同的 props（如 title, extraUploadComponent, apiEndpoint 等）来定制化各自的行为与界面，极大地提升了代码的可维护性和复用性。

3.2 流式对话交互的实现

核心技术：对于大模型问答这类需要实时反馈的场景，流式输出至关重要。Trae Solo 生成的代码优雅地实现了这一功能。

状态管理：
在 ChatPage/index.tsx 中，使用 useState 维护一个 messages 数组，该数组实时存储并更新用户与模型之间的完整对话记录。历史记录在localstorage中，当然这只是demo, 真实生产环境中历史记录要保存在数据库中。
流式数据获取与渲染：
当用户发送消息时，前端会调用对应的后端流式接口。核心逻辑在于使用 fetch API 的 Response.body 获取一个 ReadableStream，并通过 reader 逐块 (chunk) 读取服务器推送的数据。

增量更新

当后端返回的数据类型为 content_delta（内容增量）时，代码会立即更新当前正在回复的消息内容，实现文字的逐字输出效果。
完成处理

当接收到 message_complete 标识时，结束当前消息的流式接收，并将完整的消息对象存入 messages 状态，准备下一次交互。

3.3 PDF 引用溯源功能的实现

核心价值：这是 RAG 系统的关键特性。AI 不仅回答了问题，还能指明答案的来源。

数据结构：
后端在流式响应的最后，会返回一个 references 数组，其中包含了引用的原文片段、所在页码等元数据。
前端渲染与交互：
ChatPage/index.tsx 在接收到完整的消息和引用数据后，会调用 renderContentWithReferences 函数进行处理。该函数的核心逻辑是：

智能匹配

将回答文本中标记的引用占位符（如 [1]）与 references 数组中的具体条目进行关联。
可交互渲染

将普通的数字标记渲染成可点击的链接或按钮。
溯源展示

当用户点击引用标记时，通过弹出框（Modal）、侧边栏或高亮等形式，展示对应的原文片段和出处，完美实现了“答案可追溯，来源可查验”的 RAG 核心体验。

关于该项目的全部代码，大家可关注笔者的同名微信公众号 大模型真好玩，并回复LangChain智能体开发即可获得。

四、总结

本篇分享笔者系统性地展示了如何利用 Trae Solo，高效构建多模态 RAG 系统的前端界面，完成了整个全栈应用的闭环。回顾本次实践，笔者不仅成功获得了可用的前端项目，更重要的是系统总结并验证了一套行之有效的 Vibe Coding 最佳实践指南——从编写结构化的提示词、进行提示词优化，到精准定位和修复问题。这套方法论有效提升了大模型编程的确定性与产出质量。

至此，基于 LangChain 1.0 构建多模态 RAG 系统的系列核心教程已告一段落。然而，智能体（Agent）开发领域的探索永无止境。别忘了，LangGraph 也已正式发布 1.0 版本，其强大的多智能体编排能力将为应用开发打开全新的想象空间。此外，LangChain 官方推出的 deepAgents 等框架，正不断降低着复杂智能体系统的开发门槛。笔者对此将不断跟随并一直更新下去，让大家每个人都掌握智能体开发必备技能。

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述