[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-langchain-ai--agent-chat-ui":3,"tool-langchain-ai--agent-chat-ui":62},[4,18,26,36,46,54],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},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",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},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",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},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 真正成长为懂上",160411,2,"2026-04-18T23:33:24",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":42,"last_commit_at":43,"category_tags":44,"status":17},8272,"opencode","anomalyco\u002Fopencode","OpenCode 是一款开源的 AI 编程助手（Coding Agent），旨在像一位智能搭档一样融入您的开发流程。它不仅仅是一个代码补全插件，而是一个能够理解项目上下文、自主规划任务并执行复杂编码操作的智能体。无论是生成全新功能、重构现有代码，还是排查难以定位的 Bug，OpenCode 都能通过自然语言交互高效完成，显著减少开发者在重复性劳动和上下文切换上的时间消耗。\n\n这款工具专为软件开发者、工程师及技术研究人员设计，特别适合希望利用大模型能力来提升编码效率、加速原型开发或处理遗留代码维护的专业人群。其核心亮点在于完全开源的架构，这意味着用户可以审查代码逻辑、自定义行为策略，甚至私有化部署以保障数据安全，彻底打破了传统闭源 AI 助手的“黑盒”限制。\n\n在技术体验上，OpenCode 提供了灵活的终端界面（Terminal UI）和正在测试中的桌面应用程序，支持 macOS、Windows 及 Linux 全平台。它兼容多种包管理工具，安装便捷，并能无缝集成到现有的开发环境中。无论您是追求极致控制权的资深极客，还是渴望提升产出的独立开发者，OpenCode 都提供了一个透明、可信",144296,1,"2026-04-16T14:50:03",[13,45],"插件",{"id":47,"name":48,"github_repo":49,"description_zh":50,"stars":51,"difficulty_score":32,"last_commit_at":52,"category_tags":53,"status":17},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 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",109154,"2026-04-18T11:18:24",[14,15,13],{"id":55,"name":56,"github_repo":57,"description_zh":58,"stars":59,"difficulty_score":32,"last_commit_at":60,"category_tags":61,"status":17},6121,"gemini-cli","google-gemini\u002Fgemini-cli","gemini-cli 是一款由谷歌推出的开源 AI 命令行工具，它将强大的 Gemini 大模型能力直接集成到用户的终端环境中。对于习惯在命令行工作的开发者而言，它提供了一条从输入提示词到获取模型响应的最短路径，无需切换窗口即可享受智能辅助。\n\n这款工具主要解决了开发过程中频繁上下文切换的痛点，让用户能在熟悉的终端界面内直接完成代码理解、生成、调试以及自动化运维任务。无论是查询大型代码库、根据草图生成应用，还是执行复杂的 Git 操作，gemini-cli 都能通过自然语言指令高效处理。\n\n它特别适合广大软件工程师、DevOps 人员及技术研究人员使用。其核心亮点包括支持高达 100 万 token 的超长上下文窗口，具备出色的逻辑推理能力；内置 Google 搜索、文件操作及 Shell 命令执行等实用工具；更独特的是，它支持 MCP（模型上下文协议），允许用户灵活扩展自定义集成，连接如图像生成等外部能力。此外，个人谷歌账号即可享受免费的额度支持，且项目基于 Apache 2.0 协议完全开源，是提升终端工作效率的理想助手。",100752,"2026-04-10T01:20:03",[45,13,15,14],{"id":63,"github_repo":64,"name":65,"description_en":66,"description_zh":67,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":74,"owner_avatar_url":75,"owner_bio":76,"owner_company":77,"owner_location":77,"owner_email":78,"owner_twitter":74,"owner_website":79,"owner_url":80,"languages":81,"stars":94,"forks":95,"last_commit_at":96,"license":97,"difficulty_score":32,"env_os":98,"env_gpu":98,"env_ram":98,"env_deps":99,"category_tags":105,"github_topics":106,"view_count":32,"oss_zip_url":77,"oss_zip_packed_at":77,"status":17,"created_at":111,"updated_at":112,"faqs":113,"releases":142},9484,"langchain-ai\u002Fagent-chat-ui","agent-chat-ui","🦜💬 Web app for interacting with any LangGraph agent (PY & TS) via a chat interface.","agent-chat-ui 是一款基于 Next.js 开发的网页应用，旨在为用户提供一个直观的聊天界面，以便与任何 LangGraph 智能体（支持 Python 和 TypeScript）进行交互。它主要解决了开发者在调试和演示 LangGraph 服务时缺乏统一、便捷前端界面的痛点，让用户无需自行编写前端代码，即可快速连接后端服务并测试对话流程。\n\n这款工具特别适合 AI 应用开发者、研究人员以及希望快速验证智能体行为的技术团队使用。无论是本地开发环境还是部署在云端的生产服务，agent-chat-ui 都能轻松适配。其独特亮点在于高度的灵活性：用户只需输入服务地址、智能体 ID 及认证密钥即可立即开始对话；同时支持通过环境变量预设配置以跳过初始化表单。此外，它还提供了精细的消息控制能力，允许开发者通过特定标签或 ID 前缀，灵活选择隐藏流式输出内容或完全屏蔽某些中间消息，从而确保最终呈现的对话记录清晰、符合预期。作为 LangChain 生态的一部分，agent-chat-ui 以简洁高效的方式桥接了后端逻辑与前端体验，是构建和调试智能体应用的得力助手。","# Agent Chat UI\n\nAgent Chat UI is a Next.js application which enables chatting with any LangGraph server with a `messages` key through a chat interface.\n\n> [!NOTE]\n> 🎥 Watch the video setup guide [here](https:\u002F\u002Fyoutu.be\u002FlInrwVnZ83o).\n\n## Setup\n\n> [!TIP]\n> Don't want to run the app locally? Use the deployed site here: [agentchat.vercel.app](https:\u002F\u002Fagentchat.vercel.app)!\n\nFirst, clone the repository, or run the [`npx` command](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcreate-agent-chat-app):\n\n```bash\nnpx create-agent-chat-app\n```\n\nor\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui.git\n\ncd agent-chat-ui\n```\n\nInstall dependencies:\n\n```bash\npnpm install\n```\n\nRun the app:\n\n```bash\npnpm dev\n```\n\nThe app will be available at `http:\u002F\u002Flocalhost:3000`.\n\n## Usage\n\nOnce the app is running (or if using the deployed site), you'll be prompted to enter:\n\n- **Deployment URL**: The URL of the LangGraph server you want to chat with. This can be a production or development URL.\n- **Assistant\u002FGraph ID**: The name of the graph, or ID of the assistant to use when fetching, and submitting runs via the chat interface.\n- **LangSmith API Key**: (only required for connecting to deployed LangGraph servers) Your LangSmith API key to use when authenticating requests sent to LangGraph servers.\n- **Built with Agent Builder**: Toggle this on for Agent Builder deployments. This automatically sets the auth scheme to `langsmith-api-key`.\n\nAfter entering these values, click `Continue`. You'll then be redirected to a chat interface where you can start chatting with your LangGraph server.\n\n## Environment Variables\n\nYou can bypass the initial setup form by setting the following environment variables:\n\n```bash\nNEXT_PUBLIC_API_URL=http:\u002F\u002Flocalhost:2024\nNEXT_PUBLIC_ASSISTANT_ID=agent\nNEXT_PUBLIC_AUTH_SCHEME=\n```\n\n> [!NOTE]\n> If you are connecting to a LangSmith Agent Builder deployment, set `NEXT_PUBLIC_AUTH_SCHEME=langsmith-api-key`.\n\n> [!TIP]\n> If you want to connect to a production LangGraph server, read the [Going to Production](#going-to-production) section.\n\nTo use these variables:\n\n1. Copy the `.env.example` file to a new file named `.env`\n2. Fill in the values in the `.env` file\n3. Restart the application\n\nWhen these environment variables are set, the application will use them instead of showing the setup form.\n\n## Hiding Messages in the Chat\n\nYou can control the visibility of messages within the Agent Chat UI in two main ways:\n\n**1. Prevent Live Streaming:**\n\nTo stop messages from being displayed _as they stream_ from an LLM call, add the `langsmith:nostream` tag to the chat model's configuration. The UI normally uses `on_chat_model_stream` events to render streaming messages; this tag prevents those events from being emitted for the tagged model.\n\n_Python Example:_\n\n```python\nfrom langchain_anthropic import ChatAnthropic\n\n# Add tags via the .with_config method\nmodel = ChatAnthropic().with_config(\n    config={\"tags\": [\"langsmith:nostream\"]}\n)\n```\n\n_TypeScript Example:_\n\n```typescript\nimport { ChatAnthropic } from \"@langchain\u002Fanthropic\";\n\nconst model = new ChatAnthropic()\n  \u002F\u002F Add tags via the .withConfig method\n  .withConfig({ tags: [\"langsmith:nostream\"] });\n```\n\n**Note:** Even if streaming is hidden this way, the message will still appear after the LLM call completes if it's saved to the graph's state without further modification.\n\n**2. Hide Messages Permanently:**\n\nTo ensure a message is _never_ displayed in the chat UI (neither during streaming nor after being saved to state), prefix its `id` field with `do-not-render-` _before_ adding it to the graph's state, along with adding the `langsmith:do-not-render` tag to the chat model's configuration. The UI explicitly filters out any message whose `id` starts with this prefix.\n\n_Python Example:_\n\n```python\nresult = model.invoke([messages])\n# Prefix the ID before saving to state\nresult.id = f\"do-not-render-{result.id}\"\nreturn {\"messages\": [result]}\n```\n\n_TypeScript Example:_\n\n```typescript\nconst result = await model.invoke([messages]);\n\u002F\u002F Prefix the ID before saving to state\nresult.id = `do-not-render-${result.id}`;\nreturn { messages: [result] };\n```\n\nThis approach guarantees the message remains completely hidden from the user interface.\n\n## Rendering Artifacts\n\nThe Agent Chat UI supports rendering artifacts in the chat. Artifacts are rendered in a side panel to the right of the chat. To render an artifact, you can obtain the artifact context from the `thread.meta.artifact` field. Here's a sample utility hook for obtaining the artifact context:\n\n```tsx\nexport function useArtifact\u003CTContext = Record\u003Cstring, unknown>>() {\n  type Component = (props: {\n    children: React.ReactNode;\n    title?: React.ReactNode;\n  }) => React.ReactNode;\n\n  type Context = TContext | undefined;\n\n  type Bag = {\n    open: boolean;\n    setOpen: (value: boolean | ((prev: boolean) => boolean)) => void;\n\n    context: Context;\n    setContext: (value: Context | ((prev: Context) => Context)) => void;\n  };\n\n  const thread = useStreamContext\u003C\n    { messages: Message[]; ui: UIMessage[] },\n    { MetaType: { artifact: [Component, Bag] } }\n  >();\n\n  return thread.meta?.artifact;\n}\n```\n\nAfter which you can render additional content using the `Artifact` component from the `useArtifact` hook:\n\n```tsx\nimport { useArtifact } from \"..\u002Futils\u002Fuse-artifact\";\nimport { LoaderIcon } from \"lucide-react\";\n\nexport function Writer(props: {\n  title?: string;\n  content?: string;\n  description?: string;\n}) {\n  const [Artifact, { open, setOpen }] = useArtifact();\n\n  return (\n    \u003C>\n      \u003Cdiv\n        onClick={() => setOpen(!open)}\n        className=\"cursor-pointer rounded-lg border p-4\"\n      >\n        \u003Cp className=\"font-medium\">{props.title}\u003C\u002Fp>\n        \u003Cp className=\"text-sm text-gray-500\">{props.description}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003CArtifact title={props.title}>\n        \u003Cp className=\"p-4 whitespace-pre-wrap\">{props.content}\u003C\u002Fp>\n      \u003C\u002FArtifact>\n    \u003C\u002F>\n  );\n}\n```\n\n## Going to Production\n\nOnce you're ready to go to production, you'll need to update how you connect, and authenticate requests to your deployment. By default, the Agent Chat UI is setup for local development, and connects to your LangGraph server directly from the client. This is not possible if you want to go to production, because it requires every user to have their own LangSmith API key, and set the LangGraph configuration themselves.\n\n### Production Setup\n\nTo productionize the Agent Chat UI, you'll need to pick one of two ways to authenticate requests to your LangGraph server. Below, I'll outline the two options:\n\n### Quickstart - API Passthrough\n\nThe quickest way to productionize the Agent Chat UI is to use the [API Passthrough](https:\u002F\u002Fgithub.com\u002Fbracesproul\u002Flanggraph-nextjs-api-passthrough) package ([NPM link here](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flanggraph-nextjs-api-passthrough)). This package provides a simple way to proxy requests to your LangGraph server, and handle authentication for you.\n\nThis repository already contains all of the code you need to start using this method. The only configuration you need to do is set the proper environment variables.\n\n```bash\nNEXT_PUBLIC_ASSISTANT_ID=\"agent\"\n# This should be the deployment URL of your LangGraph server\nLANGGRAPH_API_URL=\"https:\u002F\u002Fmy-agent.default.us.langgraph.app\"\n# This should be the URL of your website + \"\u002Fapi\". This is how you connect to the API proxy\nNEXT_PUBLIC_API_URL=\"https:\u002F\u002Fmy-website.com\u002Fapi\"\n# Your LangSmith API key which is injected into requests inside the API proxy\nLANGSMITH_API_KEY=\"lsv2_...\"\n```\n\nLet's cover what each of these environment variables does:\n\n- `NEXT_PUBLIC_ASSISTANT_ID`: The ID of the assistant you want to use when fetching, and submitting runs via the chat interface. This still needs the `NEXT_PUBLIC_` prefix, since it's not a secret, and we use it on the client when submitting requests.\n- `LANGGRAPH_API_URL`: The URL of your LangGraph server. This should be the production deployment URL.\n- `NEXT_PUBLIC_API_URL`: The URL of your website + `\u002Fapi`. This is how you connect to the API proxy. For the [Agent Chat demo](https:\u002F\u002Fagentchat.vercel.app), this would be set as `https:\u002F\u002Fagentchat.vercel.app\u002Fapi`. You should set this to whatever your production URL is.\n- `LANGSMITH_API_KEY`: Your LangSmith API key to use when authenticating requests sent to LangGraph servers. Once again, do _not_ prefix this with `NEXT_PUBLIC_` since it's a secret, and is only used on the server when the API proxy injects it into the request to your deployed LangGraph server.\n\nFor in depth documentation, consult the [LangGraph Next.js API Passthrough](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flanggraph-nextjs-api-passthrough) docs.\n\n### Advanced Setup - Custom Authentication\n\nCustom authentication in your LangGraph deployment is an advanced, and more robust way of authenticating requests to your LangGraph server. Using custom authentication, you can allow requests to be made from the client, without the need for a LangSmith API key. Additionally, you can specify custom access controls on requests.\n\nTo set this up in your LangGraph deployment, please read the LangGraph custom authentication docs for [Python](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraph\u002Ftutorials\u002Fauth\u002Fgetting_started\u002F), and [TypeScript here](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002Fhow-tos\u002Fauth\u002Fcustom_auth\u002F).\n\nOnce you've set it up on your deployment, you should make the following changes to the Agent Chat UI:\n\n1. Configure any additional API requests to fetch the authentication token from your LangGraph deployment which will be used to authenticate requests from the client.\n2. Set the `NEXT_PUBLIC_API_URL` environment variable to your production LangGraph deployment URL.\n3. Set the `NEXT_PUBLIC_ASSISTANT_ID` environment variable to the ID of the assistant you want to use when fetching, and submitting runs via the chat interface.\n4. Modify the [`useTypedStream`](src\u002Fproviders\u002FStream.tsx) (extension of `useStream`) hook to pass your authentication token through headers to the LangGraph server:\n\n```tsx\nconst streamValue = useTypedStream({\n  apiUrl: process.env.NEXT_PUBLIC_API_URL,\n  assistantId: process.env.NEXT_PUBLIC_ASSISTANT_ID,\n  \u002F\u002F ... other fields\n  defaultHeaders: {\n    Authentication: `Bearer ${addYourTokenHere}`, \u002F\u002F this is where you would pass your authentication token\n  },\n});\n```\n","# 代理聊天 UI\n\n代理聊天 UI 是一个 Next.js 应用程序，它通过聊天界面使用户能够与任何具有 `messages` 键的 LangGraph 服务器进行对话。\n\n> [!NOTE]\n> 🎥 观看视频设置指南 [这里](https:\u002F\u002Fyoutu.be\u002FlInrwVnZ83o)。\n\n## 设置\n\n> [!TIP]\n> 不想在本地运行应用？请使用部署好的站点：[agentchat.vercel.app](https:\u002F\u002Fagentchat.vercel.app)！\n\n首先，克隆仓库，或者运行 [`npx` 命令](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcreate-agent-chat-app)：\n\n```bash\nnpx create-agent-chat-app\n```\n\n或者\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui.git\n\ncd agent-chat-ui\n```\n\n安装依赖：\n\n```bash\npnpm install\n```\n\n运行应用：\n\n```bash\npnpm dev\n```\n\n应用将可在 `http:\u002F\u002Flocalhost:3000` 访问。\n\n## 使用\n\n一旦应用运行起来（或使用部署好的站点），系统会提示您输入以下内容：\n\n- **部署 URL**：您想要聊天的 LangGraph 服务器的 URL。这可以是生产环境或开发环境的 URL。\n- **助手\u002F图 ID**：用于在通过聊天界面获取和提交运行时使用的图名称或助手 ID。\n- **LangSmith API 密钥**：（仅连接到已部署的 LangGraph 服务器时需要）用于对发送到 LangGraph 服务器的请求进行身份验证的 LangSmith API 密钥。\n- **由 Agent Builder 构建**：对于 Agent Builder 部署，请开启此选项。这会自动将认证方案设置为 `langsmith-api-key`。\n\n输入这些值后，点击 `继续`。随后您将被重定向到聊天界面，可以在那里开始与您的 LangGraph 服务器对话。\n\n## 环境变量\n\n您可以通过设置以下环境变量来跳过初始设置表单：\n\n```bash\nNEXT_PUBLIC_API_URL=http:\u002F\u002Flocalhost:2024\nNEXT_PUBLIC_ASSISTANT_ID=agent\nNEXT_PUBLIC_AUTH_SCHEME=\n```\n\n> [!NOTE]\n> 如果您要连接到 LangSmith Agent Builder 部署，请设置 `NEXT_PUBLIC_AUTH_SCHEME=langsmith-api-key`。\n\n> [!TIP]\n> 如果您想连接到生产环境的 LangGraph 服务器，请阅读 [进入生产环境](#going-to-production) 部分。\n\n要使用这些变量：\n\n1. 将 `.env.example` 文件复制到名为 `.env` 的新文件中。\n2. 在 `.env` 文件中填写相应的值。\n3. 重启应用程序。\n\n当设置了这些环境变量时，应用程序将直接使用它们，而不会显示设置表单。\n\n## 在聊天中隐藏消息\n\n您可以通过两种主要方式控制代理聊天 UI 中消息的可见性：\n\n**1. 阻止实时流式传输：**\n\n要阻止消息在 LLM 调用过程中“实时”显示，可以在聊天模型的配置中添加 `langsmith:nostream` 标签。UI 通常使用 `on_chat_model_stream` 事件来渲染流式消息；该标签会阻止带有此标签的模型发出这些事件。\n\n_Python 示例：_\n\n```python\nfrom langchain_anthropic import ChatAnthropic\n\n# 通过 .with_config 方法添加标签\nmodel = ChatAnthropic().with_config(\n    config={\"tags\": [\"langsmith:nostream\"]}\n)\n```\n\n_TypeScript 示例：_\n\n```typescript\nimport { ChatAnthropic } from \"@langchain\u002Fanthropic\";\n\nconst model = new ChatAnthropic()\n  \u002F\u002F 通过 .withConfig 方法添加标签\n  .withConfig({ tags: [\"langsmith:nostream\"] });\n```\n\n**注意：** 即使以这种方式隐藏了流式传输，如果消息在不作进一步修改的情况下保存到图的状态中，它仍然会在 LLM 调用完成后显示。\n\n**2. 永久隐藏消息：**\n\n要确保消息在聊天 UI 中 _始终_ 不显示（无论是在流式传输期间还是保存到状态之后），请在将其添加到图的状态之前，先为其 `id` 字段加上前缀 `do-not-render-`，同时在聊天模型的配置中添加 `langsmith:do-not-render` 标签。UI 会明确过滤掉所有 `id` 以该前缀开头的消息。\n\n_Python 示例：_\n\n```python\nresult = model.invoke([messages])\n# 在保存到状态之前给 ID 加上前缀\nresult.id = f\"do-not-render-{result.id}\"\nreturn {\"messages\": [result]}\n```\n\n_TypeScript 示例：_\n\n```typescript\nconst result = await model.invoke([messages]);\n\u002F\u002F 在保存到状态之前给 ID 加上前缀\nresult.id = `do-not-render-${result.id}`;\nreturn { messages: [result] };\n```\n\n这种方法可确保消息完全不会显示在用户界面上。\n\n## 渲染工件\n\n代理聊天 UI 支持在聊天中渲染工件。工件会显示在聊天右侧的侧边栏中。要渲染工件，您可以从 `thread.meta.artifact` 字段中获取工件上下文。以下是一个用于获取工件上下文的示例实用钩子：\n\n```tsx\nexport function useArtifact\u003CTContext = Record\u003Cstring, unknown>>() {\n  type Component = (props: {\n    children: React.ReactNode;\n    title?: React.ReactNode;\n  }) => React.ReactNode;\n\n  type Context = TContext | undefined;\n\n  type Bag = {\n    open: boolean;\n    setOpen: (value: boolean | ((prev: boolean) => boolean)) => void;\n\n    context: Context;\n    setContext: (value: Context | ((prev: Context) => Context)) => void;\n  };\n\n  const thread = useStreamContext\u003C\n    { messages: Message[]; ui: UIMessage[] },\n    { MetaType: { artifact: [Component, Bag] } }\n  >();\n\n  return thread.meta?.artifact;\n}\n```\n\n之后，您可以使用 `useArtifact` 钩子中的 `Artifact` 组件来渲染其他内容：\n\n```tsx\nimport { useArtifact } from \"..\u002Futils\u002Fuse-artifact\";\nimport { LoaderIcon } from \"lucide-react\";\n\nexport function Writer(props: {\n  title?: string;\n  content?: string;\n  description?: string;\n}) {\n  const [Artifact, { open, setOpen }] = useArtifact();\n\n  return (\n    \u003C>\n      \u003Cdiv\n        onClick={() => setOpen(!open)}\n        className=\"cursor-pointer rounded-lg border p-4\"\n      >\n        \u003Cp className=\"font-medium\">{props.title}\u003C\u002Fp>\n        \u003Cp className=\"text-sm text-gray-500\">{props.description}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003CArtifact title={props.title}>\n        \u003Cp className=\"p-4 whitespace-pre-wrap\">{props.content}\u003C\u002Fp>\n      \u003C\u002FArtifact>\n    \u003C\u002F>\n  );\n}\n```\n\n## 进入生产环境\n\n一旦您准备好进入生产环境，就需要更新连接方式以及对部署的请求进行身份验证。默认情况下，代理聊天 UI 是为本地开发设计的，它会直接从客户端连接到您的 LangGraph 服务器。但如果您想进入生产环境，这种方式就不再可行，因为这要求每个用户都拥有自己的 LangSmith API 密钥，并自行设置 LangGraph 配置。\n\n### 生产环境设置\n\n要将代理聊天 UI 投入生产，您需要选择以下两种方式之一来对发送到 LangGraph 服务器的请求进行身份验证。下面我将介绍这两种方案：\n\n### 快速入门 - API 透传\n\n将 Agent Chat UI 投入生产环境的最快方式是使用 [API 透传](https:\u002F\u002Fgithub.com\u002Fbracesproul\u002Flanggraph-nextjs-api-passthrough) 包（[NPM 链接在此](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flanggraph-nextjs-api-passthrough)）。该包提供了一种简单的方法，用于将请求代理到您的 LangGraph 服务器，并为您处理身份验证。\n\n此仓库已包含您开始使用此方法所需的所有代码。您唯一需要做的配置就是设置正确的环境变量。\n\n```bash\nNEXT_PUBLIC_ASSISTANT_ID=\"agent\"\n# 这应该是您的 LangGraph 服务器的部署 URL\nLANGGRAPH_API_URL=\"https:\u002F\u002Fmy-agent.default.us.langgraph.app\"\n# 这应该是您网站的 URL 加上 \"\u002Fapi\"。这是您连接到 API 代理的方式\nNEXT_PUBLIC_API_URL=\"https:\u002F\u002Fmy-website.com\u002Fapi\"\n# 您的 LangSmith API 密钥，它会被注入到 API 代理内部的请求中\nLANGSMITH_API_KEY=\"lsv2_...\"\n```\n\n下面我们来逐一说明这些环境变量的作用：\n\n- `NEXT_PUBLIC_ASSISTANT_ID`：当通过聊天界面获取和提交运行时，您希望使用的助手的 ID。由于这不是敏感信息，因此仍需加上 `NEXT_PUBLIC_` 前缀，并且我们在客户端提交请求时会用到它。\n- `LANGGRAPH_API_URL`：您的 LangGraph 服务器的 URL。这应该是生产环境的部署 URL。\n- `NEXT_PUBLIC_API_URL`：您网站的 URL 加上 `\u002Fapi`。这是您连接到 API 代理的方式。对于 [Agent Chat 演示](https:\u002F\u002Fagentchat.vercel.app)，此处应设置为 `https:\u002F\u002Fagentchat.vercel.app\u002Fapi`。您应该将其设置为您生产环境的实际 URL。\n- `LANGSMITH_API_KEY`：用于对发送到 LangGraph 服务器的请求进行身份验证的 LangSmith API 密钥。同样，不要为其添加 `NEXT_PUBLIC_` 前缀，因为它属于敏感信息，仅在服务器端由 API 代理将其注入到发送至您部署的 LangGraph 服务器的请求中时才会使用。\n\n如需深入了解，请参阅 [LangGraph Next.js API 透传](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flanggraph-nextjs-api-passthrough) 的文档。\n\n### 高级设置 - 自定义身份验证\n\n在您的 LangGraph 部署中使用自定义身份验证是一种更高级、更健壮的方式来验证对 LangGraph 服务器的请求。通过自定义身份验证，您可以允许来自客户端的请求无需 LangSmith API 密钥即可发起。此外，您还可以为请求指定自定义的访问控制规则。\n\n要在您的 LangGraph 部署中设置此功能，请阅读 LangGraph 自定义身份验证的相关文档，分别适用于 [Python](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraph\u002Ftutorials\u002Fauth\u002Fgetting_started\u002F) 和 [TypeScript](https:\u002F\u002Flangchain-ai.github.io\u002Flanggraphjs\u002Fhow-tos\u002Fauth\u002Fcustom_auth\u002F)。\n\n完成部署上的设置后，您需要对 Agent Chat UI 进行以下更改：\n\n1. 配置任何额外的 API 请求，以从您的 LangGraph 部署获取身份验证令牌，该令牌将用于对来自客户端的请求进行身份验证。\n2. 将 `NEXT_PUBLIC_API_URL` 环境变量设置为您的生产环境 LangGraph 部署 URL。\n3. 将 `NEXT_PUBLIC_ASSISTANT_ID` 环境变量设置为您希望在通过聊天界面获取和提交运行时使用的助手的 ID。\n4. 修改 [`useTypedStream`](src\u002Fproviders\u002FStream.tsx)（`useStream` 的扩展）钩子，以便通过请求头将您的身份验证令牌传递给 LangGraph 服务器：\n\n```tsx\nconst streamValue = useTypedStream({\n  apiUrl: process.env.NEXT_PUBLIC_API_URL,\n  assistantId: process.env.NEXT_PUBLIC_ASSISTANT_ID,\n  \u002F\u002F ... 其他字段\n  defaultHeaders: {\n    Authentication: `Bearer ${addYourTokenHere}`, \u002F\u002F 在这里您需要传递您的身份验证令牌\n  },\n});\n```","# Agent Chat UI 快速上手指南\n\nAgent Chat UI 是一个基于 Next.js 构建的应用程序，允许用户通过聊天界面与任何带有 `messages` 键的 LangGraph 服务器进行交互。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n*   **Node.js**: 建议安装 LTS 版本（推荐 v18+）。\n*   **包管理器**: 本项目推荐使用 **pnpm**。\n    *   国内开发者可配置国内镜像源加速安装：\n      ```bash\n      npm config set registry https:\u002F\u002Fregistry.npmmirror.com\n      ```\n    *   安装 pnpm (如果尚未安装):\n      ```bash\n      npm install -g pnpm\n      ```\n*   **LangGraph 服务器**: 您需要有一个正在运行的 LangGraph 服务器（本地开发或云端部署），并知晓其 URL 和 Assistant\u002FGraph ID。\n\n## 安装步骤\n\n您可以选择使用 `npx` 一键创建项目，或通过 `git` 克隆源码。\n\n### 方式一：使用 npx 快速创建（推荐）\n\n```bash\nnpx create-agent-chat-app\n```\n\n### 方式二：手动克隆仓库\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui.git\n\ncd agent-chat-ui\n```\n\n### 安装依赖并启动\n\n进入项目目录后，执行以下命令安装依赖并启动开发服务器：\n\n```bash\npnpm install\n\npnpm dev\n```\n\n启动成功后，应用将在 `http:\u002F\u002Flocalhost:3000` 运行。\n\n> **提示**: 如果您不想在本地运行，可以直接访问官方部署站点：[agentchat.vercel.app](https:\u002F\u002Fagentchat.vercel.app)。\n\n## 基本使用\n\n应用启动后（或使用在线版本时），您将看到一个初始化配置表单。请填写以下信息以连接您的 LangGraph 服务：\n\n1.  **Deployment URL**: 您要连接的 LangGraph 服务器地址（可以是本地 `http:\u002F\u002Flocalhost:2024` 或生产环境 URL）。\n2.  **Assistant\u002FGraph ID**: 用于获取和提交运行的图名称或助手 ID。\n3.  **LangSmith API Key**: （仅连接已部署的 LangGraph 服务器时需要）用于请求认证的 LangSmith API 密钥。\n4.  **Built with Agent Builder**: 如果是 Agent Builder 部署，请开启此选项，它将自动设置认证方案为 `langsmith-api-key`。\n\n填写完毕后点击 **Continue**，即可进入聊天界面开始与您的 AI 助手交互。\n\n### 进阶：通过环境变量跳过配置表单\n\n如果您希望直接启动应用而不显示配置表单，可以在项目根目录创建 `.env` 文件（复制 `.env.example`），并填入以下变量：\n\n```bash\nNEXT_PUBLIC_API_URL=http:\u002F\u002Flocalhost:2024\nNEXT_PUBLIC_ASSISTANT_ID=agent\nNEXT_PUBLIC_AUTH_SCHEME=\n```\n\n*   **注意**: 若连接 LangSmith Agent Builder 部署，需设置 `NEXT_PUBLIC_AUTH_SCHEME=langsmith-api-key`。\n*   修改 `.env` 文件后，请重启应用 (`pnpm dev`) 生效。","某金融科技团队正在开发基于 LangGraph 的多步骤合规审查智能体，需要频繁验证复杂逻辑下的对话表现。\n\n### 没有 agent-chat-ui 时\n- 开发人员只能依赖 Postman 或编写临时脚本来发送 JSON 请求，无法直观看到多轮对话的上下文流转。\n- 调试流式输出（Streaming）极其困难，必须查看后端日志才能确认内容是否按预期逐字生成。\n- 测试内部思考过程或中间状态消息时，缺乏便捷的过滤机制，导致聊天界面充斥着不应展示给用户的调试信息。\n- 非前端背景的算法工程师难以向产品经理演示智能体的实际交互效果，沟通成本高昂。\n- 每次修改图结构后，都需要重新配置请求参数，重复劳动严重拖慢迭代速度。\n\n### 使用 agent-chat-ui 后\n- 团队直接通过网页聊天界面与 LangGraph 服务器交互，实时观察多轮对话的状态变化和完整历史。\n- 利用内置的流式渲染功能，即时预览大模型的生成过程，快速定位卡顿或内容截断问题。\n- 通过在代码中添加 `langsmith:do-not-render` 标签或特定 ID 前缀，轻松隐藏内部推理步骤，只保留最终用户可见的回答。\n- 产品与算法人员共享同一个部署链接，无需环境配置即可共同体验并验收智能体行为。\n- 支持保存部署 URL 和助手 ID 到环境变量，一键启动本地服务，将测试准备时间从小时级缩短至分钟级。\n\nagent-chat-ui 将复杂的后端图调试转化为直观的聊天体验，极大提升了智能体开发的协作效率与迭代速度。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Flangchain-ai_agent-chat-ui_6dd4d64f.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",[82,86,90],{"name":83,"color":84,"percentage":85},"TypeScript","#3178c6",95.4,{"name":87,"color":88,"percentage":89},"CSS","#663399",2.8,{"name":91,"color":92,"percentage":93},"JavaScript","#f1e05a",1.8,2737,606,"2026-04-19T00:23:25","MIT","未说明",{"notes":100,"python":98,"dependencies":101},"该工具是一个基于 Next.js 的前端应用，用于与 LangGraph 服务器交互。运行需安装 Node.js 环境和 pnpm 包管理器。无需本地 GPU 或特定 Python 环境（除非后端服务有要求）。生产环境部署需配置 LangSmith API Key 及相应的环境变量，或通过 API 中转方案处理认证。",[102,103,104],"Next.js","pnpm","langgraph-nextjs-api-passthrough (可选)",[35,14,13],[107,108,109,110],"agent","chat","langgraph","llm","2026-03-27T02:49:30.150509","2026-04-19T15:38:20.900193",[114,119,124,129,133,138],{"id":115,"question_zh":116,"answer_zh":117,"source_url":118},42527,"为什么在 LangGraph Swarm 或多智能体场景中，人类中断（Human Interrupt）消息不显示或瞬间消失？","这是一个已修复的问题。此前如果状态中没有 AI 或工具消息，中断将不会渲染。维护者已合并修复补丁（PR #96），现在只要传入的对象符合 `HumanInterrupt` 架构（Python 或 JS 版本），中断消息即可正常显示。如果您仍遇到问题，请确保您的中断对象严格遵循官方定义的 Schema，并提供 LangSmith 追踪链接以便调试。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui\u002Fissues\u002F94",{"id":120,"question_zh":121,"answer_zh":122,"source_url":123},42528,"如何在子图（subgraphs）或评估器模式中正确使用中断（interrupt）功能？","在复杂的子图调用链中（例如执行器调用评估器），直接将 `interrupt` 放在被调用的工具函数内部可能导致 UI 无法渲染。解决方案是将 `interrupt` 逻辑移动到直接由 React Agent 调用的工具（如 `request_evaluator`）中，而不是在通过 `Command` 路由到的深层子图节点中调用。这样可以确保 Agent Chat UI 能正确捕获并显示中断请求。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui\u002Fissues\u002F69",{"id":125,"question_zh":126,"answer_zh":127,"source_url":128},42529,"Agent Chat UI 后端服务器的网络配置要求是什么？如何连接本地部署的 LangGraph 服务器？","Agent Chat UI 仅需要后端运行一个 LangGraph Server 即可工作（无论是本地运行还是部署在 LangGraph 平台）。对于本地局域网部署，只需将 LangGraph Server 的主机设置为 `0.0.0.0` 并指定端口（例如 2024）。用户在访问 Agent Chat UI 时，需在配置中填入该服务器的地址。不需要特殊的 UDP 端口，Token 流和多模态流均通过现有的 HTTP\u002FWebSocket 连接处理。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui\u002Fissues\u002F70",{"id":130,"question_zh":131,"answer_zh":132,"source_url":128},42530,"如何跳过启动时的初始设置表单，直接预配置 API URL 和 Assistant ID？","可以通过环境变量来预配置启动页面。如果在 `.env` 文件中同时设置了 `api url` 和 `assistant id`，系统将自动跳过初始设置表单并直接连接到指定的图服务器。这一功能已在 PR #81 中实现，适用于希望将 UI 直接绑定到已部署图服务的场景。",{"id":134,"question_zh":135,"answer_zh":136,"source_url":137},42531,"为什么我的中断在响应后会导致图表从头开始重启，而不是从当前节点恢复？","这通常是因为当前的中断格式尚未完全支持通用的恢复机制。团队正在开发一种新的通用中断及恢复格式，该功能将集成到 LangGraph 和 LangSmith 核心中。在此之前，建议检查您的代码是否严格遵循了最新的 `HumanInterrupt` 规范。如果问题依旧，可能是因为底层对非标准中断对象的恢复支持尚不完善，需等待后续版本更新以获得原生的断点续传支持。","https:\u002F\u002Fgithub.com\u002Flangchain-ai\u002Fagent-chat-ui\u002Fissues\u002F85",{"id":139,"question_zh":140,"answer_zh":141,"source_url":123},42532,"是否有针对 Python 新手集成 HITL（人机回环）图和子图的指南？","目前官方推荐的做法是参考 `langgraph.prebuilt.interrupt` 模块中的 `HumanInterrupt` 类定义。确保您的中断请求对象包含 `action_request`、`config`（配置允许的操作如忽略、回复、编辑等）以及 `description`。对于 TypeScript 不熟悉的用户，关键是确保 Python 后端发出的中断数据结构与前端预期的 `HumanInterrupt` Schema 完全匹配，这样 UI 才能正确渲染交互组件。",[]]