Agent-Chat-UI结合LangChain Agent安装配置

Evergreen 2026年04月23日 aigc, ai大模型预计阅读 5 分钟

1. 下载前端UI项目`agent-chat-ui`， 地址：https://github.com/langchain-ai/agent-chat-ui，下载依赖`pnpm install`，修改配置文件`.env.example`， 启动`pnpm dev`，参考地址:   https://docs.langchain.com/oss/python/langchain/ui

> 错误修复：  修改页面 **JSX 属性命名规范** 错误。打开文件 `src/components/icons/langgraph.tsx`，将所有`clip-path`替换成的`clipPath`

2. 后端Studio安装步骤：参考地址：https://docs.langchain.com/oss/python/langchain/studio

- 安装langgraph脚手架 `pip install --upgrade "langgraph-cli[inmem]"`，Python >= 3.11

- 创建项目：

```
     my-app/
     ├── src
     │   └── agent.py
     ├── .env
     └── langgraph.json
     ```

- langgraph.json配置

```json
     {
       "dependencies": ["."],
       "graphs": {
         "agent": "./src/agent.py:agent"
       },
       "env": ".env"
     }
     ```

- 创建你的agent，根据需要安装对应的依赖包

```python
     from langgraph.prebuilt import create_react_agent
     from langchain_openai import ChatOpenAI
     
     def send_email(to: str, subject: str, body: str):
         """发送一封电子邮件"""
         email = {
             "to": to,
             "subject": subject,
             "body": body
         }
         # ... 邮件发送逻辑
     
         return f"Email sent to {to}"
     
     # 创建提示模板
     # llm = ChatOpenAI(
     #     model="deepseek-chat",  # 或 "deepseek-reasoner"（R1 推理模型）
     #     api_key="sk-xx",  # 你的 DeepSeek API Key
     #     base_url="https://api.deepseek.com/v1",  # DeepSeek API 地址
     #     temperature=0.7,
     # )
     llm = ChatOpenAI(
         model="kimi-k2.6",  # 或 "deepseek-reasoner"（R1 推理模型）
         api_key="sk-xx",  # 你的 DeepSeek API Key
         base_url="https://api.moonshot.cn/v1",  # DeepSeek API 地址
         temperature=0.7,
     )
     
     agent = create_react_agent(
         model=llm,
         tools=[send_email],
         prompt="You are an email assistant. Always use the send_email tool.",
     )
     ```

- 环境变量`.env`配置LangSminthAPI密钥：地址: https://smith.langchain.com/settings

```
     LANGSMITH_API_KEY=lsv2...
     ```

- 启动后台langgraph脚手架：`langgraph dev`

- 服务器运行后，你的代理既可以通过 API 访问，也可以通过 Studio 界面访问：`http://127.0.0.1:2024``https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024`, 可以不用安装ui

通过将Studio连接到您的本地代理，您可以快速迭代代理的行为。运行测试输入，检查完整的执行跟踪，包括提示词、工具参数、返回值以及令牌/延迟指标。当出现问题时，Studio 会捕捉周围状态的异常，帮助你理解发生了什么。开发服务器支持热重载——只需修改代码中的提示或工具签名，Studio 就会立即反映出来。从任何步骤重新运行对话线程，测试你的更改，无需重新开始。该工作流程从简单的单工具代理扩展到复杂的多节点图表。关于如何运行Studio的更多信息，请参阅以下指南[LangSmith 文档](https://docs.langchain.com/langsmith/home):

- [运行应用程序](https://docs.langchain.com/langsmith/use-studio#run-application)
- [管理助理](https://docs.langchain.com/langsmith/use-studio#manage-assistants)
- [管理线程](https://docs.langchain.com/langsmith/use-studio#manage-threads)
- [不断反复调整提示](https://docs.langchain.com/langsmith/observability-studio)
- [调试 LangSmith 跟踪](https://docs.langchain.com/langsmith/observability-studio#debug-langsmith-traces)
- [将节点添加到数据集](https://docs.langchain.com/langsmith/observability-studio#add-node-to-dataset)

依赖包：pip install langchain langchain-core langchain-community langgraph langchain-openai langchain-anthropic

评论区