[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-langchain-ai--langchain-nextjs-template":3,"similar-langchain-ai--langchain-nextjs-template":89},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":8,"readme_en":9,"readme_zh":10,"quickstart_zh":11,"use_case_zh":12,"hero_image_url":13,"owner_login":14,"owner_name":15,"owner_avatar_url":16,"owner_bio":17,"owner_company":18,"owner_location":18,"owner_email":19,"owner_twitter":15,"owner_website":20,"owner_url":21,"languages":22,"stars":34,"forks":35,"last_commit_at":36,"license":37,"difficulty_score":38,"env_os":39,"env_gpu":40,"env_ram":40,"env_deps":41,"category_tags":50,"github_topics":18,"view_count":38,"oss_zip_url":18,"oss_zip_packed_at":18,"status":54,"created_at":55,"updated_at":56,"faqs":57,"releases":88},4540,"langchain-ai\u002Flangchain-nextjs-template","langchain-nextjs-template","LangChain + Next.js starter template","langchain-nextjs-template 是一个专为快速构建 AI 应用设计的开源启动模板，完美结合了 LangChain.js 的强大能力与 Next.js 的现代开发体验。它旨在解决开发者在从零搭建大语言模型（LLM）应用时面临的配置繁琐、示例缺失等痛点，提供了一套开箱即用的解决方案。\n\n该模板非常适合前端工程师、全栈开发者以及希望快速验证 AI 想法的研究人员使用。通过内置的多个实用示例，用户可以轻松实现基础聊天对话、让模型返回结构化数据、构建能处理复杂多步任务的智能体（Agent），以及开发基于检索增强生成（RAG）的知识库问答系统。\n\n其技术亮点在于深度集成了 Vercel AI SDK，支持流畅的流式响应输出，显著提升用户交互体验；同时利用 LangGraph.js 框架简化了智能体工作流的构建逻辑。此外，项目针对无服务器边缘函数进行了优化，包体积小巧，对免费层级友好。无论是想学习 LangChain 实战的新手，还是寻求高效原型的资深开发者，langchain-nextjs-template 都能帮助你迅速将创意转化为可运行的应用。","# 🦜️🔗 LangChain + Next.js Starter Template\n\n[![Open in GitHub Codespaces](https:\u002F\u002Fgithub.com\u002Fcodespaces\u002Fbadge.svg)](https:\u002F\u002Fcodespaces.new\u002Flangchain-ai\u002Flangchain-nextjs-template)\n[![Deploy with Vercel](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_a4c0f8073a9c.png)](https:\u002F\u002Fvercel.com\u002Fnew\u002Fclone?repository-url=https%3A%2F%2Fgithub.com%2Flangchain-ai%2Flangchain-nextjs-template)\n\nThis template scaffolds a LangChain.js + Next.js starter app. It showcases how to use and combine LangChain modules for several\nuse cases. Specifically:\n\n- [Simple chat](\u002Fapp\u002Fapi\u002Fchat\u002Froute.ts)\n- [Returning structured output from an LLM call](\u002Fapp\u002Fapi\u002Fchat\u002Fstructured_output\u002Froute.ts)\n- [Answering complex, multi-step questions with agents](\u002Fapp\u002Fapi\u002Fchat\u002Fagents\u002Froute.ts)\n- [Retrieval augmented generation (RAG) with a chain and a vector store](\u002Fapp\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts)\n- [Retrieval augmented generation (RAG) with an agent and a vector store](\u002Fapp\u002Fapi\u002Fchat\u002Fretrieval_agents\u002Froute.ts)\n\nMost of them use Vercel's [AI SDK](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fai) to stream tokens to the client and display the incoming messages.\n\nThe agents use [LangGraph.js](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002F), LangChain's framework for building agentic workflows. They use preconfigured helper functions to minimize boilerplate, but you can replace them with custom graphs as desired.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe389e4e4-4fb9-4223-a4c2-dc002c8f20d3\n\nIt's free-tier friendly too! Check out the [bundle size stats below](#-bundle-size).\n\nYou can check out a hosted version of this repo here: https:\u002F\u002Flangchain-nextjs-template.vercel.app\u002F\n\n## 🚀 Getting Started\n\nFirst, clone this repo and download it locally.\n\nNext, you'll need to set up environment variables in your repo's `.env.local` file. Copy the `.env.example` file to `.env.local`.\nTo start with the basic examples, you'll just need to add your OpenAI API key.\n\nBecause this app is made to run in serverless Edge functions, make sure you've set the `LANGCHAIN_CALLBACKS_BACKGROUND` environment variable to `false` to ensure tracing finishes if you are using [LangSmith tracing](https:\u002F\u002Fdocs.smith.langchain.com\u002F).\n\nNext, install the required packages using your preferred package manager (e.g. `yarn`).\n\nNow you're ready to run the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) with your browser to see the result! Ask the bot something and you'll see a streamed response:\n\n![A streaming conversation between the user and the AI](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_3a17741e666f.png)\n\nYou can start editing the page by modifying `app\u002Fpage.tsx`. The page auto-updates as you edit the file.\n\nBackend logic lives in `app\u002Fapi\u002Fchat\u002Froute.ts`. From here, you can change the prompt and model, or add other modules and logic.\n\n## 🧱 Structured Output\n\nThe second example shows how to have a model return output according to a specific schema using OpenAI Functions.\nClick the `Structured Output` link in the navbar to try it out:\n\n![A streaming conversation between the user and an AI agent](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_87b65a59c55a.png)\n\nThe chain in this example uses a [popular library called Zod](https:\u002F\u002Fzod.dev) to construct a schema, then formats it in the way OpenAI expects.\nIt then passes that schema as a function into OpenAI and passes a `function_call` parameter to force OpenAI to return arguments in the specified format.\n\nFor more details, [check out this documentation page](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fhow_to\u002Fstructured_output).\n\n## 🦜 Agents\n\nTo try out the agent example, you'll need to give the agent access to the internet by populating the `SERPAPI_API_KEY` in `.env.local`.\nHead over to [the SERP API website](https:\u002F\u002Fserpapi.com\u002F) and get an API key if you don't already have one.\n\nYou can then click the `Agent` example and try asking it more complex questions:\n\n![A streaming conversation between the user and an AI agent](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_0a22d4476a54.png)\n\nThis example uses a [prebuilt LangGraph agent](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002Ftutorials\u002Fquickstart\u002F), but you can customize your own as well.\n\n## 🐶 Retrieval\n\nThe retrieval examples both use Supabase as a vector store. However, you can swap in\n[another supported vector store](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fintegrations\u002Fvectorstores) if preferred by changing\nthe code under `app\u002Fapi\u002Fretrieval\u002Fingest\u002Froute.ts`, `app\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts`, and `app\u002Fapi\u002Fchat\u002Fretrieval_agents\u002Froute.ts`.\n\nFor Supabase, follow [these instructions](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fintegrations\u002Fvectorstores\u002Fsupabase) to set up your\ndatabase, then get your database URL and private key and paste them into `.env.local`.\n\nYou can then switch to the `Retrieval` and `Retrieval Agent` examples. The default document text is pulled from the LangChain.js retrieval\nuse case docs, but you can change them to whatever text you'd like.\n\nFor a given text, you'll only need to press `Upload` once. Pressing it again will re-ingest the docs, resulting in duplicates.\nYou can clear your Supabase vector store by navigating to the console and running `DELETE FROM documents;`.\n\nAfter splitting, embedding, and uploading some text, you're ready to ask questions!\n\nFor more info on retrieval chains, [see this page](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Ftutorials\u002Frag).\nThe specific variant of the conversational retrieval chain used here is composed using LangChain Expression Language, which you can\n[read more about here](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fhow_to\u002Fqa_sources\u002F). This chain example will also return cited sources\nvia header in addition to the streaming response.\n\nFor more info on retrieval agents, [see this page](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002Ftutorials\u002Frag\u002Flanggraph_agentic_rag\u002F).\n\n## 📦 Bundle size\n\nThe bundle size for LangChain itself is quite small. After compression and chunk splitting, for the RAG use case LangChain uses 37.32 KB of code space (as of [@langchain\u002Fcore 0.1.15](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@langchain\u002Fcore)), which is less than 4% of the total Vercel free tier edge function alottment of 1 MB:\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_5e3066cd82b8.png)\n\nThis package has [@next\u002Fbundle-analyzer](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@next\u002Fbundle-analyzer) set up by default - you can explore the bundle size interactively by running:\n\n```bash\n$ ANALYZE=true yarn build\n```\n\n## 📚 Learn More\n\nThe example chains in the `app\u002Fapi\u002Fchat\u002Froute.ts` and `app\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts` files use\n[LangChain Expression Language](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fconcepts#langchain-expression-language) to\ncompose different LangChain.js modules together. You can integrate other retrievers, agents, preconfigured chains, and more too, though keep in mind\n`HttpResponseOutputParser` is meant to be used directly with model output.\n\nTo learn more about what you can do with LangChain.js, check out the docs here:\n\n- https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002F\n\n## ▲ Deploy on Vercel\n\nWhen ready, you can deploy your app on the [Vercel Platform](https:\u002F\u002Fvercel.com\u002Fnew?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).\n\nCheck out the [Next.js deployment documentation](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fdeployment) for more details.\n\n## Thank You!\n\nThanks for reading! If you have any questions or comments, reach out to us on Twitter\n[@LangChainAI](https:\u002F\u002Ftwitter.com\u002Flangchainai), or [click here to join our Discord server](https:\u002F\u002Fdiscord.gg\u002Flangchain).\n","# 🦜️🔗 LangChain + Next.js 入门模板\n\n[![在 GitHub Codespaces 中打开](https:\u002F\u002Fgithub.com\u002Fcodespaces\u002Fbadge.svg)](https:\u002F\u002Fcodespaces.new\u002Flangchain-ai\u002Flangchain-nextjs-template)\n[![使用 Vercel 部署](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_a4c0f8073a9c.png)](https:\u002F\u002Fvercel.com\u002Fnew\u002Fclone?repository-url=https%3A%2F%2Fgithub.com%2Flangchain-ai%2Flangchain-nextjs-template)\n\n此模板搭建了一个 LangChain.js + Next.js 的入门应用。它展示了如何针对多种用例使用和组合 LangChain 模块。具体包括：\n\n- [简单聊天](\u002Fapp\u002Fapi\u002Fchat\u002Froute.ts)\n- [从 LLM 调用中返回结构化输出](\u002Fapp\u002Fapi\u002Fchat\u002Fstructured_output\u002Froute.ts)\n- [使用代理回答复杂、多步骤的问题](\u002Fapp\u002Fapi\u002Fchat\u002Fagents\u002Froute.ts)\n- [结合链和向量存储的检索增强生成（RAG）](\u002Fapp\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts)\n- [结合代理和向量存储的检索增强生成（RAG）](\u002Fapp\u002Fapi\u002Fchat\u002Fretrieval_agents\u002Froute.ts)\n\n其中大多数示例都使用 Vercel 的 [AI SDK](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fai) 将 token 流式传输到客户端，并显示传入的消息。\n\n代理部分使用了 [LangGraph.js](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002F)，这是 LangChain 用于构建代理工作流的框架。它们使用预配置的帮助函数来减少样板代码，但你也可以根据需要替换为自定义图。\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe389e4e4-4fb9-4223-a4c2-dc002c8f20d3\n\n该模板也非常适合免费层级！请查看下方的 [打包大小统计](#-bundle-size)。\n\n你可以在以下链接查看此仓库的托管版本：https:\u002F\u002Flangchain-nextjs-template.vercel.app\u002F\n\n## 🚀 快速开始\n\n首先，克隆此仓库并将其下载到本地。\n\n接下来，你需要在项目的 `.env.local` 文件中设置环境变量。将 `.env.example` 文件复制到 `.env.local`。对于基础示例，你只需添加你的 OpenAI API 密钥即可。\n\n由于此应用运行在无服务器边缘函数中，如果你使用 [LangSmith 追踪](https:\u002F\u002Fdocs.smith.langchain.com\u002F)，请确保将 `LANGCHAIN_CALLBACKS_BACKGROUND` 环境变量设置为 `false`，以保证追踪能够完成。\n\n然后，使用你喜欢的包管理器（例如 `yarn`）安装所需的依赖包。\n\n现在你可以启动开发服务器：\n\n```bash\nyarn dev\n```\n\n用浏览器打开 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)，你就能看到效果了！向机器人提问，你会看到流式响应：\n\n![用户与 AI 之间的流式对话](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_3a17741e666f.png)\n\n你可以通过修改 `app\u002Fpage.tsx` 来开始编辑页面。文件编辑时，页面会自动更新。\n\n后端逻辑位于 `app\u002Fapi\u002Fchat\u002Froute.ts` 中。在这里，你可以更改提示词和模型，或添加其他模块和逻辑。\n\n## 🧱 结构化输出\n\n第二个示例展示了如何使用 OpenAI Functions 让模型按照特定模式返回输出。点击导航栏中的“Structured Output”链接来尝试：\n\n![用户与 AI 代理之间的流式对话](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_87b65a59c55a.png)\n\n此示例中的链使用了一个名为 Zod 的流行库来构建模式，然后将其格式化为 OpenAI 所期望的形式。接着，它将该模式作为函数传递给 OpenAI，并设置 `function_call` 参数，强制 OpenAI 按照指定格式返回参数。\n\n更多详情，请参阅 [此文档页面](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fhow_to\u002Fstructured_output)。\n\n## 🦜 代理\n\n要尝试代理示例，你需要通过在 `.env.local` 中填写 `SERPAPI_API_KEY` 来赋予代理访问互联网的权限。如果没有 API 密钥，可以前往 [SERP API 官网](https:\u002F\u002Fserpapi.com\u002F) 获取。\n\n之后，你可以点击“Agent”示例，尝试向它提出更复杂的问题：\n\n![用户与 AI 代理之间的流式对话](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_0a22d4476a54.png)\n\n本示例使用了一个 [预构建的 LangGraph 代理](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002Ftutorials\u002Fquickstart\u002F)，但你也可以自定义自己的代理。\n\n## 🐶 检索\n\n检索示例均使用 Supabase 作为向量存储。不过，你也可以根据需要更换为 [其他支持的向量存储](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fintegrations\u002Fvectorstores)，只需修改 `app\u002Fapi\u002Fretrieval\u002Fingest\u002Froute.ts`、`app\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts` 和 `app\u002Fapi\u002Fchat\u002Fretrieval_agents\u002Froute.ts` 中的代码即可。\n\n对于 Supabase，按照 [这些说明](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fintegrations\u002Fvectorstores\u002Fsupabase) 设置你的数据库，然后获取数据库 URL 和私钥，并将其粘贴到 `.env.local` 中。\n\n之后，你可以切换到“Retrieval”和“Retrieval Agent”示例。默认文档文本取自 LangChain.js 的检索用例文档，但你可以将其替换为你想要的任何文本。\n\n对于给定的文本，你只需点击一次“Upload”即可。再次点击会导致文档被重新摄取，从而产生重复内容。你可以通过导航到控制台并执行 `DELETE FROM documents;` 来清空 Supabase 向量存储。\n\n在分割、嵌入并上传一些文本后，你就可以开始提问了！\n\n有关检索链的更多信息，请参阅 [此页面](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Ftutorials\u002Frag)。此处使用的对话式检索链变体是使用 LangChain 表达式语言编写的，你可以 [在此处了解更多](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fhow_to\u002Fqa_sources\u002F)。除了流式响应外，此链示例还会通过标题返回引用来源。\n\n有关检索代理的更多信息，请参阅 [此页面](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002Ftutorials\u002Frag\u002Flanggraph_agentic_rag\u002F)。\n\n## 📦 打包大小\n\nLangChain 本身的打包大小非常小。经过压缩和分块处理后，对于 RAG 用例，LangChain 使用 37.32 KB 的代码空间（截至 [@langchain\u002Fcore 0.1.15](https:\u002F\u002Fnpmjs.com\u002Fpackage\u002F@langchain\u002Fcore)），这不到 Vercel 免费层级边缘函数配额 1 MB 的 4%：\n\n![](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_readme_5e3066cd82b8.png)\n\n此包默认设置了 [@next\u002Fbundle-analyzer](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@next\u002Fbundle-analyzer)——你可以通过运行以下命令交互式地探索打包大小：\n\n```bash\n$ ANALYZE=true yarn build\n```\n\n## 📚 了解更多\n\n`app\u002Fapi\u002Fchat\u002Froute.ts` 和 `app\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts` 文件中的示例链使用了 [LangChain 表达式语言](https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002Fconcepts#langchain-expression-language) 来组合不同的 LangChain.js 模块。你还可以集成其他检索器、代理、预配置的链等，但请注意，`HttpResponseOutputParser` 旨在直接用于模型输出。\n\n要了解 LangChain.js 的更多功能，请查阅以下文档：\n\n- https:\u002F\u002Fjs.langchain.com\u002Fdocs\u002F\n\n## ▲ 在 Vercel 上部署\n\n准备就绪后，您可以在 [Vercel 平台](https:\u002F\u002Fvercel.com\u002Fnew?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) 上部署您的应用。\n\n更多详细信息，请参阅 [Next.js 部署文档](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fdeployment)。\n\n## 感谢！\n\n感谢您的阅读！如果您有任何问题或意见，请通过 Twitter 联系我们：[@LangChainAI](https:\u002F\u002Ftwitter.com\u002Flangchainai)，或[点击此处加入我们的 Discord 服务器](https:\u002F\u002Fdiscord.gg\u002Flangchain)。","# LangChain + Next.js 快速上手指南\n\n本指南基于 `langchain-nextjs-template` 官方模板，帮助开发者快速构建集成了 LangChain.js 能力的 Next.js AI 应用。该模板支持流式对话、结构化输出、Agent 智能体以及 RAG（检索增强生成）等多种高级用例。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **Node.js**: 建议安装 LTS 版本（v18+）。\n*   **包管理器**: 推荐使用 `yarn`，也可使用 `npm` 或 `pnpm`。\n*   **API Keys**:\n    *   **OpenAI API Key**: 用于驱动大模型（必需）。\n    *   **SerpApi Key**: 仅在使用 Agent 联网功能时需要。\n    *   **Supabase URL & Key**: 仅在使用 RAG 向量检索功能时需要。\n*   **代码编辑器**: 推荐 VS Code。\n\n> **注意**：由于该应用运行在 Serverless Edge Functions 中，若需使用 LangSmith 追踪，请务必将环境变量 `LANGCHAIN_CALLBACKS_BACKGROUND` 设置为 `false`，以确保追踪数据能正常完成上报。\n\n## 安装步骤\n\n### 1. 克隆项目\n首先将模板仓库克隆到本地：\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template.git\ncd langchain-nextjs-template\n```\n\n### 2. 配置环境变量\n复制示例配置文件并填入你的密钥：\n\n```bash\ncp .env.example .env.local\n```\n\n编辑 `.env.local` 文件，至少填入 OpenAI 密钥：\n\n```env\nOPENAI_API_KEY=sk-your-openai-api-key-here\n# 若使用 Agent 联网功能，取消注释并填入：\n# SERPAPI_API_KEY=your-serpapi-key\n# 若使用 RAG 功能，取消注释并填入 Supabase 配置：\n# SUPABASE_URL=your-supabase-url\n# SUPABASE_PRIVATE_KEY=your-supabase-key\n# 确保 LangSmith 追踪在 Edge 环境下正常工作：\nLANGCHAIN_CALLBACKS_BACKGROUND=false\n```\n\n### 3. 安装依赖\n使用你偏好的包管理器安装依赖（国内用户若遇网络问题，可临时切换淘宝镜像源）：\n\n```bash\n# 使用 yarn (推荐)\nyarn install\n\n# 或使用 npm\nnpm install\n\n# 国内加速示例 (npm)\n# npm config set registry https:\u002F\u002Fregistry.npmmirror.com\n# npm install\n```\n\n### 4. 启动开发服务器\n运行以下命令启动本地服务：\n\n```bash\nyarn dev\n```\n\n## 基本使用\n\n启动成功后，在浏览器中访问 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)。\n\n### 1. 体验流式对话 (Simple Chat)\n这是最基础的功能。直接在首页输入框中输入问题（例如：“请用中文介绍什么是 LangChain？”），你将看到 AI 以流式方式逐字返回回答。\n\n*   **前端逻辑**: 页面自动更新，无需刷新。\n*   **后端逻辑**: 核心代码位于 `app\u002Fapi\u002Fchat\u002Froute.ts`。你可以在此修改 Prompt、切换模型或添加其他 LangChain 模块。\n\n### 2. 尝试结构化输出 (Structured Output)\n点击导航栏中的 **Structured Output** 链接。\n该示例展示了如何让 LLM 按照指定的 JSON Schema 返回数据（基于 Zod 库）。这对于需要程序化处理 LLM 输出的场景非常有用。\n\n### 3. 进阶功能提示\n*   **Agent 智能体**: 点击 **Agent** 链接前，请确保已在 `.env.local` 中配置 `SERPAPI_API_KEY`。此功能允许 AI 自主调用工具回答复杂的多步问题。\n*   **RAG 检索**: 点击 **Retrieval** 链接前，需配置 Supabase 数据库。首次使用时，需在界面点击 **Upload** 按钮上传文档（默认使用 LangChain 文档片段），成功后即可针对该知识库进行问答。\n\n### 4. 自定义开发\n*   修改前端界面：编辑 `app\u002Fpage.tsx`。\n*   修改后端链式逻辑：编辑 `app\u002Fapi\u002Fchat\u002F` 目录下的对应路由文件。\n*   分析打包体积：运行 `ANALYZE=true yarn build` 可查看详细的 Bundle Size 分析。\n\n现在你已经准备好了，可以开始基于此模板构建你的 AI 应用了！","某初创团队急需在两周内上线一款具备联网搜索、结构化数据提取及文档问答功能的智能客服原型，以验证市场可行性。\n\n### 没有 langchain-nextjs-template 时\n- **架构搭建耗时**：开发者需手动配置 Next.js 服务端边缘函数与 LangChain.js 的复杂集成，仅环境初始化就耗费数天。\n- **流式响应开发难**：缺乏现成的 Vercel AI SDK 集成示例，实现打字机效果的流式输出需要反复调试前端状态管理。\n- **高级功能重复造轮子**：构建支持多步推理的 Agent 或 RAG（检索增强生成）链路时，需从零编写 LangGraph 工作流和向量存储逻辑。\n- **数据结构化繁琐**：要让大模型返回符合特定 Schema 的 JSON 数据，需手动处理 Zod 校验规则与 OpenAI Function Calling 的底层对接。\n- **部署门槛高**：由于未针对 Serverless 环境优化，应用在 Vercel 等平台部署时常遇到包体积过大或追踪回调失败的问题。\n\n### 使用 langchain-nextjs-template 后\n- **极速启动项目**：直接克隆模板并填入 API Key 即可运行，内置的边缘函数配置让团队当天便完成了基础聊天接口开发。\n- **开箱即用的流式体验**：复用模板中集成的 AI SDK 组件，无需额外代码即可实现流畅的消息流式渲染，大幅提升用户体验。\n- **复杂场景快速落地**：直接调用预置的 Agent 和 RAG 示例代码，轻松实现了联网查询竞品价格和内部知识库问答功能。\n- **标准化数据输出**：利用模板中基于 Zod 的结构化输出范例，快速定义了工单创建格式，确保大模型返回数据可直接入库。\n- **无缝云端部署**：依托模板对 Vercel 的一键部署支持及包体积优化，应用顺利上线且天然兼容无服务器架构，运维成本极低。\n\nlangchain-nextjs-template 将原本需要数周的后端链路整合工作压缩至小时级，让团队能专注于业务逻辑创新而非基础设施搭建。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_langchain-nextjs-template_3a17741e.png","langchain-ai","LangChain","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Flangchain-ai_8e6aaeef.png","",null,"support@langchain.dev","https:\u002F\u002Fwww.langchain.com","https:\u002F\u002Fgithub.com\u002Flangchain-ai",[23,27,31],{"name":24,"color":25,"percentage":26},"TypeScript","#3178c6",96.8,{"name":28,"color":29,"percentage":30},"JavaScript","#f1e05a",1.6,{"name":32,"color":33,"percentage":30},"CSS","#663399",2440,552,"2026-04-04T16:00:02","MIT",2,"Linux, macOS, Windows","未说明",{"notes":42,"python":40,"dependencies":43},"该项目基于 Next.js 和 LangChain.js，运行在服务器无边缘函数（Serverless Edge Functions）环境中。需要配置 OpenAI API 密钥，若使用 Agent 功能需配置 SERPAPI_API_KEY，若使用 RAG 功能需配置 Supabase 数据库 URL 和私钥。建议使用 yarn 安装依赖。若使用 LangSmith 追踪，需将环境变量 LANGCHAIN_CALLBACKS_BACKGROUND 设置为 false。",[44,45,46,47,48,49],"nextjs","langchain","@langchain\u002Fcore","langgraphjs","zod","@vercel\u002Fai-sdk",[51,52,53],"语言模型","开发框架","Agent","ready","2026-03-27T02:49:30.150509","2026-04-07T01:48:56.876449",[58,63,68,73,78,83],{"id":59,"question_zh":60,"answer_zh":61,"source_url":62},20660,"在 Vercel 上部署时遇到构建错误，提示类型不匹配（Type 'ChatPromptTemplate' does not satisfy the constraint...）怎么办？","这通常是由于 LangChain 相关包版本过旧或不兼容导致的。解决方案是升级以下包到最新版本：\n- `@langchain\u002Fcommunity`: \"^0.2.9\"\n- `@langchain\u002Fcore`: \"^0.2.6\"\n- `@langchain\u002Fopenai`: \"^0.1.2\"\n\n此外，如果是本地构建成功但 Vercel 构建失败，可以尝试在项目设置中将安装脚本（Install Command）修改为 `bun install`，或者清除缓存和 node_modules 后重新构建。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template\u002Fissues\u002F42",{"id":64,"question_zh":65,"answer_zh":66,"source_url":67},20661,"在 Vercel 部署时遇到\"Module not found\"错误或依赖解析警告，如何解决？","问题通常出在 `package.json` 中的 `resolutions` 或 `overrides` 字段锁定了过时的 `@langchain\u002Fcore` 版本，导致与新版本的 LangChain 不兼容。\n\n解决方法是移除 `package.json` 中的以下配置块：\n```json\n\"resolutions\": {\n  \"@langchain\u002Fcore\": \"0.1.58\"\n},\n\"overrides\": {\n  \"@langchain\u002Fcore\": \"0.1.58\"\n},\n\"pnpm\": {\n  \"overrides\": {\n    \"@langchain\u002Fcore\": \"0.1.58\"\n  }\n}\n```\n移除后重新安装依赖即可正常部署。注意未来更新时需关注依赖兼容性问题。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template\u002Fissues\u002F24",{"id":69,"question_zh":70,"answer_zh":71,"source_url":72},20662,"检索到的源文本（Source）显示乱码或非 UTF-8 编码，如何修复？","这是因为前端使用 `atob()` 解码 Base64 字符串时未正确处理 UTF-8 字符。请打开 `components\u002FChatWindow.tsx` 文件，找到第 45 行左右，将：\n`atob(sourcesHeader)`\n替换为：\n`(Buffer.from(sourcesHeader, 'base64')).toString('utf8')`\n\n如果是在浏览器环境且无法直接使用 Node.js 的 Buffer，可以使用以下替代函数：\n```javascript\nfunction base64Decode(str) {\n  return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {\n    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);\n  }).join(''));\n}\n```","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template\u002Fissues\u002F20",{"id":74,"question_zh":75,"answer_zh":76,"source_url":77},20663,"为什么模型在检索模式下不记得之前的聊天历史消息？","默认模板中的提示词（Prompt）主要设计用于引用之前问题中的实体，而非处理关于对话历史的元问题。维护者已更新代码，通过将聊天历史显式传递给最终生成步骤来改善此问题。\n\n你可以参考 `app\u002Fapi\u002Fchat\u002Fretrieval\u002Froute.ts` 文件的第 112 行附近的实现，确保在构建链（Chain）时将 `history` 变量传入。如果自定义了 Prompt，需要确保提示词模板中包含处理历史消息的指令。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template\u002Fissues\u002F1",{"id":79,"question_zh":80,"answer_zh":81,"source_url":82},20664,"代码中为什么有一个 300ms 的等待延迟（setTimeout）？可以移除吗？","这个 300 毫秒（注意是毫秒不是秒）的延迟是一个临时的变通方案（hack），目的是确保第一条消息发送时，输入框的滑动动画能够完整播放完毕，避免 UI 闪烁或错位。如果没有自定义动画或遇到 UI 问题，可以尝试调整或移除该延迟，但在默认模板中建议保留以保证用户体验。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template\u002Fissues\u002F15",{"id":84,"question_zh":85,"answer_zh":86,"source_url":87},20665,"使用 AWS Bedrock (Claude 模型) 时，返回的回答被截断（truncated）怎么办？","这是因为默认的 `maxTokens` 设置对于某些模型（如 Claude）来说太短了。在使用 `ChatBedrock` 初始化模型时，需要显式设置一个较大的 `maxTokens` 值。\n\n示例代码：\n```javascript\nconst model = new ChatBedrock({\n  model: \"anthropic.claude-v2\",\n  region: \"us-west-2\",\n  streaming: true,\n  maxTokens: 4096, \u002F\u002F 添加此行，根据需求调整大小\n  credentials: {\n    accessKeyId: process.env.AWS_ACCESS_KEY_ID,\n    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY\n  }\n});\n```\n另外，如果在 Next.js 中遇到错误，尝试使用 web 入口点（entrypoint）而不是默认的节点入口点。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Flangchain-nextjs-template\u002Fissues\u002F14",[],[90,101,109,117,125,133],{"id":91,"name":92,"github_repo":93,"description_zh":94,"stars":95,"difficulty_score":96,"last_commit_at":97,"category_tags":98,"status":54},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[53,52,99,100],"图像","数据工具",{"id":102,"name":103,"github_repo":104,"description_zh":105,"stars":106,"difficulty_score":96,"last_commit_at":107,"category_tags":108,"status":54},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[52,99,53],{"id":110,"name":111,"github_repo":112,"description_zh":113,"stars":114,"difficulty_score":38,"last_commit_at":115,"category_tags":116,"status":54},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",141543,"2026-04-06T11:32:54",[52,53,51],{"id":118,"name":119,"github_repo":120,"description_zh":121,"stars":122,"difficulty_score":38,"last_commit_at":123,"category_tags":124,"status":54},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107888,"2026-04-06T11:32:50",[52,99,53],{"id":126,"name":127,"github_repo":128,"description_zh":129,"stars":130,"difficulty_score":96,"last_commit_at":131,"category_tags":132,"status":54},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[51,99,53,52],{"id":134,"name":135,"github_repo":136,"description_zh":137,"stars":138,"difficulty_score":96,"last_commit_at":139,"category_tags":140,"status":54},4292,"Deep-Live-Cam","hacksider\u002FDeep-Live-Cam","Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具，用户仅需一张静态照片，即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点，让高质量的数字内容创作变得触手可及。\n\n这款工具不仅适合开发者和技术研究人员探索算法边界，更因其极简的操作逻辑（仅需三步：选脸、选摄像头、启动），广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换，还是制作趣味短视频和直播互动，Deep-Live-Cam 都能提供流畅的支持。\n\n其核心技术亮点在于强大的实时处理能力，支持口型遮罩（Mouth Mask）以保留使用者原始的嘴部动作，确保表情自然精准；同时具备“人脸映射”功能，可同时对画面中的多个主体应用不同面孔。此外，项目内置了严格的内容安全过滤机制，自动拦截涉及裸露、暴力等不当素材，并倡导用户在获得授权及明确标注的前提下合规使用，体现了技术发展与伦理责任的平衡。",88924,"2026-04-06T03:28:53",[52,99,53,141],"视频"]