企业官网建设流程全解析

最新网站排名优化方法,一二三四视频社区,杭州市建设工程交易中心,网页设计图片放大效果写在前面 最近 AI Coding 实在太火了#xff0c;Cursor、Claude Code 这些工具让写代码变得越来越轻松。你可能也注意到了#xff0c;这些工具都有一个共同点#xff1a;在你写代码的时候#xff0c;它们会实时给你补全建议#xff0c;按 Tab 就能接受。这种体验太爽了Cursor、Claude Code 这些工具让写代码变得越来越轻松。你可能也注意到了这些工具都有一个共同点在你写代码的时候它们会实时给你补全建议按 Tab 就能接受。这种体验太爽了以至于我想在自己的博客编辑器里也搞一个类似的功能。与此同时「全栈开发」和「大模型应用开发」也成了很多人想要学习的方向。我自己折腾了一个 Next.js 全栈 AI 博客项目把 Prompt 工程、RAG 知识库、流式输出、AI Copilot 这些东西都实践了一遍。今天想通过这篇文章把我在这个项目里学到的东西分享出来希望能帮到想入门这个领域的朋友。Github地址先看看这个博客长什么样项目用的技术栈前端Next.js 15 TypeScript shadcn/ui Tailwind CSS后端Next.js API Routes Prisma ORMAIKimi API Ollama ChromaDB接下来我会从 Prompt 讲起然后聊聊 AI Copilot、RAG、流式输出这些功能是怎么实现的。一切的起点Prompt说到大模型应用开发绑不开的就是 Prompt。Prompt 是什么说白了就是你跟大模型说的话。你怎么问它就怎么答。问得好答案就靠谱问得烂答案就离谱。我在做这个项目的时候发现很多 AI 功能的本质都是一样的构造一个 Prompt然后调 LLM API。比如AI 生成文章标题Prompt LLMAI 生成摘要Prompt LLMAI 推荐标签还是 Prompt LLM所以想玩好大模型应用Prompt 工程是必须要会的。结构化 Prompt写 Prompt 其实跟写文章差不多有结构会比乱写好很多。我在项目里用的是一种叫「结构化 Prompt」的写法大概长这样# Role: 你的角色 ## Profile - Author: xxx - Version: 1.0 - Language: 中文 - Description: 角色描述 ## Skills - 技能1 - 技能2 ## Rules 1. 规则1 2. 规则2 ## Workflow 1. 第一步做什么 2. 第二步做什么 ## OutputFormat - 输出格式要求 ## Initialization 作为 Role严格遵守 Rules按照 Workflow 执行任务。这种写法的好处是逻辑清晰大模型更容易理解你想要什么。举个实际的例子这是我项目里用来生成文章摘要的 PromptexportfunctionbuildExcerptPrompt(content:string):string{return# Role: 内容摘要撰写专家 ## Profile - Author: Spring Broken AI Blog - Version: 2.0 - Language: 中文 - Description: 你是一位专业的内容编辑擅长从长文中提取核心信息撰写简洁有力的摘要。 ## Rules 1. 摘要长度必须严格控制在 100-200 个汉字之间 2. 必须包含文章的核心观点和主要结论 3. 使用简洁、专业的语言避免冗余表达 4. 只返回摘要文本不要包含任何其他内容 ## Workflow 1. 仔细阅读并理解完整的文章内容 2. 识别文章的核心主题和主要论点 3. 用简洁的语言组织摘要 4. 输出纯文本摘要 ## Input 文章内容${content.slice(0,3000)}## Initialization 作为 Role严格遵守 Rules按照 Workflow 撰写摘要。;}你看其实就是告诉大模型你是谁、要遵守什么规则、按什么流程做事、输出什么格式。把这些说清楚了大模型的输出质量会好很多。AI Copilot编辑器里的智能补全这个功能是我觉得最有意思的一个效果类似 GitHub Copilot 或者 Cursor在你写文章的时候实时给你补全建议。实现思路说穿了也不复杂把文章上下文 Prompt 丢给 LLM让它帮你续写。具体流程是这样的用户在编辑器里打字我提取光标前 500 个字符作为上下文构造一个 Prompt大意是「根据上下文续写 5-30 个字」调 Kimi API 拿到补全建议把建议以灰色斜体显示在光标后面用户按 Tab 接受按 Esc 取消技术难点这个功能看起来简单但实际做起来有几个坑1. 非侵入式显示补全建议不能直接写入文档只能在视图层显示。我一开始想的就是用样式来实现——在光标位置叠加一个灰色斜体的文本看起来像是补全建议但实际上不是文档的一部分。这个思路是对的关键是怎么实现。参考了 VSCode 的做法。VSCode 的 AI 补全GitHub Copilot用的是「虚拟文本」机制补全建议只在视图层显示不写入文档模型。只有用户按 Tab 确认后才真正写入。我用的编辑器是 Tiptap基于 ProseMirror刚好有类似的机制叫 Decoration。它可以在视图层叠加显示内容不影响文档结构正好符合我的需求。2. 防抖用户打字很快的时候不能每敲一个字就调一次 API那样太浪费了。我设了 500ms 的防抖用户停下来半秒钟才触发补全请求。3. 异步竞态用户可能在 API 返回之前又继续打字了这时候光标位置已经变了。如果直接把补全建议显示出来位置就对不上了。我的做法是双重位置校验发请求前记录光标位置API 返回后再校验一次位置变了就不显示。// 第一次校验防抖回调执行时constcurrentStateextension.editor.state;if(currentSelection.from!currentFrom){return;// 位置已改变丢弃请求}// 调用 AI API...// 第二次校验API 返回后constlatestStateextension.editor.state;if(latestState.selection.fromcurrentFrom){// 位置仍然一致才更新状态}4. ProseMirror 插件编辑器用的是 Tiptap基于 ProseMirror补全建议的显示用的是 Decoration不会影响文档结构只是视觉上的装饰。核心代码大概长这样// 创建补全建议的视觉装饰constwidgetdocument.createElement(span);widget.classNameai-completion-suggestion;widget.style.cssTextcolor: #9ca3af; // 灰色font-style: italic; // 斜体pointer-events: none; // 不拦截鼠标user-select: none;;// 不可选中widget.textContentsuggestion;// 在光标位置显示constdecorationDecoration.widget(position,widget,{side:1,// 光标后ignoreSelection:true,});RAG让 AI 基于你的内容回答问题RAG 是这个项目里我花时间最多的功能。先聊聊向量数据库在讲 RAG 之前得先说说向量数据库是什么。我们平时用的数据库比如 MySQL、MongoDB存的都是结构化数据或文档。查询的时候用的是精确匹配或者关键词搜索。但 AI 领域有个问题怎么找到「语义相似」的内容比如「如何写好 Prompt」和「Prompt 工程技巧」这两句话关键词不一样但意思很接近。传统数据库搞不定这个。向量数据库就是为了解决这个问题。它的思路是把文本转成一串数字向量这个过程叫 Embedding语义相似的文本转出来的向量也相似查询的时候把问题也转成向量然后找最相似的几个常见的向量数据库有 Pinecone、Milvus、Chroma 等。我用的是 Chroma开源免费轻量好用。为什么需要 RAG大模型虽然很聪明但它不知道你博客里写了什么。你问它「我之前写的那篇关于 Prompt 的文章讲了什么」它只能瞎猜。这是因为大模型的知识有两个问题知识不新训练数据有截止日期不知道最新的事知识不全不知道你的私有内容RAGRetrieval-Augmented Generation检索增强生成就是为了解决这个问题。简单说就是给大模型「开卷考试」先从你的内容里检索相关信息再让大模型基于这些信息回答。我的实现思路整个流程分两部分离线索引把文章存起来把文章切成小块语义分块用 Ollama 把每个块转成向量Embedding把向量存到 ChromaDB在线检索用户提问时把用户的问题也转成向量在 ChromaDB 里找最相似的几个块把这些块作为上下文构造 Prompt调 Kimi API 生成回答分块的坑分块这一步踩了不少坑。一开始我想简单点按固定字符数切比如每 500 字一块。结果发现很多问题句子被截断、段落被分割、检索时匹配到不完整的片段。后来改成了语义分块按优先级先按段落分\n\n段落太长就按句子分。实在不行才硬切还有一个坑是 Ollama 的 nomic-embed-text 模型有 800 字符的限制。超过这个长度就报错。我的处理方式是如果一个块超过 800 字符就把它切成多个子块每个子块单独生成向量单独存储。这样虽然麻烦点但不会丢信息。// 语义分块的核心逻辑exportfunctionchunkPost(content:string,options{}){constmaxCharsoptions.maxChars||800;// Ollama 硬限制constchunks[];// 按段落分割constparagraphscontent.split(/\n\n/).filter((p)p.trim());for(constparaofparagraphs){if(para.lengthmaxChars){// 段落太长按句子分割splitBySentence(para,chunks);}else{chunks.push(para);}}returnchunks;}流式输出打字机效果如果你用过 ChatGPT应该对那个打字机效果有印象。AI 的回答不是一下子全出来而是一个字一个字蹦出来的。这个效果不只是好看更重要的是用户体验。如果等 AI 生成完再返回用户可能要干等好几秒体验很差。流式输出让用户立刻看到反馈感觉响应更快。实现思路流式输出的核心是SSEServer-Sent Events。传统的 HTTP 请求是发请求 → 等待 → 收到完整响应。SSE 是发请求 → 保持连接 → 服务器持续推送数据 → 最后关闭连接。一个请求多次推送。后端代码大概是这样// 创建 SSE 流conststreamnewReadableStream({asyncstart(controller){constsendEvent(type,data){constmessageevent:${type}\ndata:${JSON.stringify(data)}\n\n;controller.enqueue(encoder.encode(message));};// 调用 Kimi API流式返回awaitaiClient.chatStream(messages,{},(chunk){// 每收到一个文本块就推送给前端sendEvent(chunk,{chunk});});// 完成后关闭连接sendEvent(complete,{done:true});controller.close();},});returnnewResponse(stream,{headers:{Content-Type:text/event-stream,Cache-Control:no-cache,Connection:keep-alive,},});前端用fetchReadableStream读取constresponseawaitfetch(/api/ai/rag/stream,{method:POST,body:JSON.stringify({question}),});constreaderresponse.body.getReader();constdecodernewTextDecoder();while(true){const{done,value}awaitreader.read();if(done)break;consttextdecoder.decode(value);// 解析 SSE 格式更新 UIparseSSE(text,(chunk){setContent((prev)prevchunk);// 追加文本实现打字机效果});}其他功能除了上面说的 AI 功能项目里还有一些基础功能AI 生成标题、摘要、标签这些都是「Prompt LLM」的套路。给大模型文章内容让它生成标题/摘要/标签。相关文章推荐用当前文章的标题和摘要生成向量在 ChromaDB 里找最相似的几篇文章。比传统的「按标签匹配」更智能。降级机制RAG 依赖 Ollama 和 ChromaDB这两个服务挂了怎么办我做了降级处理如果 RAG 不可用就退化成纯 LLM 模式。虽然回答质量会差一些但至少功能还能用。如何获取 LLM API Key这个项目用的是 KimiMoonshot AI的 API申请地址https://platform.moonshot.cn/注册后会有免费额度个人学习完全够用。其他可选的 LLM 服务DeepSeekhttps://platform.deepseek.com/通义千问https://dashscope.aliyun.com/智谱 AIhttps://open.bigmodel.cn/快速上手项目开源在 GitHub感兴趣的话可以 clone 下来跑一跑GitHub 地址https://github.com/flawlessv/Spring-Broken-AI-Blog如果觉得有帮助欢迎给个 ⭐️ Star详细的安装步骤在 README 里都有这里就不展开了。简单说就是安装 Node.js、Ollama、ChromaDB配置 Kimi API Keynpm installnpm run dev总结做完这个项目我最大的感受是大模型应用开发没有想象中那么难。很多功能的本质都是「Prompt 调 API」关键是把 Prompt 写好把流程理清楚。通过这个项目你可以学到Next.js 全栈开发前端 后端 数据库Prompt 工程结构化 Prompt、角色设定、规则约束RAG 实现向量化、语义分块、相似度检索流式输出SSE、ReadableStream如果想继续深入可以看看这些方向Agent让 AI 自己规划任务、调用工具MCP模型上下文协议统一 AI 与外部系统的交互微调用自己的数据训练模型希望这篇文章对你有帮助。有问题欢迎交流