此示例将帮助你从本地代码检出开始，部署一个带有可用聊天界面的 LangChain 深度代理。后端运行在 LangSmith Deployment 上，前端是一个能够从该服务获取流式响应的 Vite + React 应用。 当你希望在本地运行代理、将其部署到 LangSmith，并让 UI 连接到已部署的 Agent Server 时，可以使用本指南。 源代码位于部署示例仓库中的 js-langsmith。

​
你要部署的内容

LangSmith Deployment 会在 LangSmith 托管的 Agent Server 上运行 LangGraph 图。在此示例中：
  • agent/ 包含深度代理图、子代理、中间件和工具。
  • langgraph.json 告诉 LangGraph CLI 要提供和部署哪个图。
  • src/ 包含 React 聊天界面。
  • UI 通过 LangGraph SDK 和 @langchain/react 与 Agent Server API 通信。
部署后的代理是一个协调器，包含两个子代理：
  • researcher 使用本地的 search_web 工具。
  • math-whiz 使用本地的 calculator 工具。

​
各部分如何协同工作

在本地开发期间，pnpm run dev 会同时启动 LangGraph 开发服务器和 Vite 应用。在生产环境中，LangSmith 托管代理，静态托管服务提供构建后的 Vite UI。

​
前置条件

  • 一个具有部署权限的 LangSmith API 密钥。
  • 用于代理模型的 OpenAI API 密钥。
  • pnpm。

​
在本地运行

1

Install dependencies

2

Create your environment file

打开 .env 并设置：
在本地开发时，将 LANGSMITH_API_KEY 和 VITE_AGENT_API_URL 留空。只有在部署，或针对远程 LangSmith 部署测试 UI 时，才需要设置 LANGSMITH_API_KEY。
3

Start the agent and UI

这会启动两个进程：
4

Open the chat

打开 http://localhost:5173。尝试使用两个子代理的提示：
当 VITE_AGENT_API_URL 为空时，Vite 应用会使用位于 /api/langgraph 的本地代理，将请求转发到 LangGraph 开发服务器，从而避免 CORS 问题。

​
将代理部署到 LangSmith

1

Confirm your environment

你的 .env 必须包含：
也可以设置部署名称：
如果未设置 LANGSMITH_DEPLOYMENT_NAME，部署名称默认为目录名称。
2

Deploy the agent to LangSmith

此命令会运行 langgraphjs deploy。CLI 使用 langgraph.json，从 agent/index.ts 部署 agent 图。
3

Copy the deployment API URL

部署完成后，在 LangSmith 中打开该部署并复制其 API URL。它应类似于：
只使用根 URL。不要添加任何 API 路径后缀。
4

Test the UI against the remote deployment

在 .env 中设置 VITE_AGENT_API_URL：
然后运行 UI：
浏览器客户端在与远程部署通信时会复用 LANGSMITH_API_KEY。
此演示会将 LANGSMITH_API_KEY 暴露给浏览器构建包，以便 UI 直接调用 LangSmith 部署。这对于本地测试很方便，但不适合生产环境。对于实际应用，请通过你自己的后端代理请求，并将密钥保留在服务器端。

​
部署前端

代理和 UI 分别部署。在 pnpm run deploy 成功后，将 Vite 构建产物（dist/）托管到任意静态平台，并让它指向你的 LangSmith 部署 URL。
1

Import the repository

点击下方的 Deploy with Vercel，或手动导入 langchain-ai/deployment-cookbook。Deploy with Vercel
2

Configure the project

  1. 将 Root Directory 设置为 js-langsmith。
  2. 使用默认的 Vite 构建配置。构建输出目录为 dist/。
  3. 设置以下环境变量：
    • VITE_AGENT_API_URL：LangSmith 部署的根 URL。
    • LANGSMITH_API_KEY：演示客户端使用的 LangSmith API 密钥。

​
故障排除

  • pnpm run dev 能够启动，但 UI 无法连接：本地开发时将 VITE_AGENT_API_URL 留空，然后重新运行 pnpm run dev。
  • 代理在本地无法回答：确认 .env 中已设置 OPENAI_API_KEY。
  • pnpm run deploy 因身份验证错误失败：确认 LANGSMITH_API_KEY 具有部署权限。
  • 远程 UI 无法连接：确认 VITE_AGENT_API_URL 是部署根 URL，且没有路径后缀。
  • 重启本地开发服务后线程消失：本地 langgraph dev 使用内存中的 MemorySaver；LangSmith Deployment 在生产环境中提供持久化存储。
  • 修改了 agent/ 中的文件，但生产环境没有变化：再次运行 pnpm run deploy。

​
了解项目

LangSmith 后端位于 agent/ 中：
agent/index.ts 导出 LangGraph 在本地提供服务并由 LangSmith 部署的图。本地 MemorySaver 检查点保存器仅由 langgraph dev 使用。在生产环境中，LangSmith Deployment 会将其替换为基于 Postgres 的持久化存储，无需修改代码。
langgraph.json 将 CLI 指向该图：
图 ID 为 agent。前端在进行流式传输时会将该 ID 用作助手 ID。
src/ 中的 React 应用提供流式聊天、线程历史记录、子代理渲染以及工具调用渲染功能。前端使用：
  • client.threads.search() 获取线程侧边栏。
  • client.threads.create() 和 client.threads.delete() 管理对话。
  • 使用 assistantId: "agent" 的 StreamProvider 实现流式聊天。
有关底层线程和流式 API，请参阅 Agent Server API 参考。
运行两个本地进程：
分别运行：
构建并预览前端：
当 js-langsmith/agent/ 或共享配置文件中的文件发生变化时，代理会通过 GitHub Actions 部署：前端通过静态托管服务的 Git 集成进行部署，例如 Vercel、Netlify 或 Cloudflare Pages。

​
另请参阅

Connect these docs to Claude, VSCode, and more via MCP for real-time answers.
Edit this page on GitHub or file an issue.