我们注意到在2025年，AI助手的数量在增加。
自己搭建一个代理可能会很复杂，你需要掌握的概念和框架可能会让你觉得有些难以应对。可能会让你感到有些手足无措。
好消息是，给您的应用程序添加代理其实很简单，我来教你怎么做。
在这份指南中，你将学习如何即使你之前从未接触过AI代理，也能在30分钟内创建你的第一个AI代理。
咱们跳进去吧
此处无内容
这里包含了哪些内容？简单来说，我们将详细讲讲这些话题。
- AI代理是什么呢？
- 使用Copilotkit和LangGraph一步步构建代理的指南。
- 一些实际应用示例，附有源代码。
提醒：Copilotkit（用于构建AI副驾的框架）最近与LangChain合作发布了CoAgents。我们在这里会用到的就是这个。
此处省略内容
1. 智能代理是什么？AI代理就像是超级聪明的助手。你只需要告诉它们你需要什么就行，它们就会想办法搞定。
LLM 是系统的大脑。当AI需要与外界交流、获取数据或执行特定任务时，它可以使用各种工具，这些工具包括外部资源和API。
它们可以规划、做决定，就像人一样，甚至随着时间的推移变得越来越好。可以将其视为一个能够观察、思考并行动的数字体，就像人与环境互动一样，但以编程方式且有目的性地进行。
常见的AI代理分为两种类型。
⚡ Reactive: 对其环境中的即时输入作出反应，
⚡ Proactive: 提前规划以实现长期目标。
特别感谢 Abhishek Reddy（来自Medium平台）
重要组件。
本质上，一个AI代理由以下相互连接的组件构成，使它们能够感知环境，进行推理，采取行动并学习。
感知- 收集并解释来自其环境的数据。推理- 分析信息以做出决策。行动- 根据做出的决策执行任务。学习- 使用机器学习算法从过去的经历中适应并提高性能。通信接口- 通过NLP和其他协议与其它代理或系统进行交互。记忆- 存储过去的数据和知识以备将来使用。环境感知- 代理从其环境中收集数据的方式。
你可以在不同的地方找到不同的细节，但基本上说的差不多。
如果你想了解更多，可以看看 simform 的什么是 AI 代理文章。
更大的环境中的AI代理人
关于 AI 代理不是
很多人实际上对AI代理感到困惑。让我们来澄清一下AI代理究竟是什么：
❌ 不是魔法般思考 - 它们并不像人类那样“思考”，只是依照模式行事。
❌ 不一定总是准确 - 它们会胡言乱语，也会犯错误。
而且，有时候并不一定需要它们。例如，如果你已经知道所有可能的用户操作，直接写代码就好。比如，用户点击按钮预订房间 → 显示日期 → 确认。根本不需要用到AI。
一个简单的规则：如果你的任务简单且基于规则，需要100%的准确性，AI代理不是最好的选择。
既然我们已经了解了AI智能体，接下来就来构建一个吧。
此处省略了内容。请注意，原文中使用了 "……" 来表示省略或未指定的内容。
2. 使用Copilotkit和LangGraph一步一步构建代理程序的指南。接下来，我们将介绍如何在几分钟里创建您的第一个智能助手。
CopilotKit 是一个用于将 AI 副驾集成到产品中的框架。它提供了用于 AI 聊天、生成式 UI 和自动完成功能的 React 组件，以及一个可以增强 AI 代理上下文、工具和技能的运行时，根据用户行为。他们最近宣布了 CoAgents（目前处于测试版阶段），这是一个新功能。
使用 LangGraph SDK 和 CoAgents (Copilotkit)，开发人员可以快速为任何垂直领域构建此类应用。只需构建一个适合您工作流程的 LangGraph 代理，然后使用 CoAgents 集成自定义操作和生成式 UI。
而且，这一切都在一个简洁的框架内管理应用程序内的代理（这要感谢LangGraph）。您将得到所需的一切，包括：
- 共享状态（Agent ↔ 应用）
- 生成式代理UI
- 人机协同
- 实时前端动作
- 代理指导（LangGraph检查点）
你可以在 copilotkit.ai/coagents 上了解更多相关信息，网站上还有帮助理解的图示。
想快速了解的话，看看 Atai（Copilotkit 的联合创办人）做的这个 2 分钟视频，
如果你想探索自己，你可以参考官方的快速入门指南。如果不感兴趣也没问题，我会详细解释每一步。
如果你已经有了一个LangGraph代理的话，可以直接跳到第三步。接下来，我们将克隆启动仓库来快速开始。
为了不让这篇博客太长，我不会详细讲解每一个小概念。更多相关知识可以在文档的学习部分找到，包括术语和概念等。
第一步：克隆初始仓库。
因为我们没有自己的代理，只需要开始就行了。我们需要克隆一下coagents starter 仓库，这个仓库在CopilotKit的GitHub项目下。
请在终端输入以下命令:
git clone https://github.com/CopilotKit/CopilotKit // 这将克隆CopilotKit仓库到你的本地机器
cd CopilotKit/examples/coagents-starter/agent-py // 然后切换到Python代理示例目录
全屏模式。退出全屏
我已经新建了一个干净的目录（可以复制粘贴），这样就更清楚了。你也可以对克隆的仓库使用同样的步骤。
我们的目录就是这样。agent 文件夹将包含 LangGraph Agent，而 ui 文件夹包含我们的前端应用。
来看看这个图片，显示的是一个目录结构。
如果没有前端，你可以创建一个新的使用 TypeScript 的 Next.js 应用程序，然后安装 Copilotkit 提供的 React 包。在已克隆的仓库中，这个包已经存在了，所以你只需在 ui 目录下运行 pnpm i 来安装依赖项。
// 安装依赖的步骤
// 创建一个使用 TypeScript 的 Next.js 应用
npx create-next-app@latest ui --typescript
// 安装 copilotkit 相关包
npm install @copilotkit/react-ui @copilotkit/react-core全屏模式 退出全屏
CopilotKit 包允许协助手与 React 状态值进行交互，并在应用程序中作出决策。
你可以用 pnpm run dev 来启动前端。
你可以使用 agent-js 文件夹来使用 LangGraph JS（如果你感兴趣的话），而我在这篇博客中会用到 Python 版本（agent-py 文件夹）。
注：这里保留了原始链接，因为Markdown中的链接在中文里通常不需要翻译。
在 agent-py 目录下，使用 Poetry 来安装项目的依赖项。
请切换到agent-py目录并安装依赖。
cd agent/agent-py
安装 poetry切换到全屏模式；结束全屏模式
poetry install
然后，通过命令:poetry run demo运行演示程序。
添加所需的API密钥
在 agent-py 目录下创建一个名为 .env 的文件。然后将你的 OpenAI API 密钥 和 LangSmith API 密钥 并将其添加到 .env 文件中。我已经附上了相关文档链接，这样方便你查看。
这就是命名规则。
OPENAI_API_KEY=OPENAI_API_KEY
LANGSMITH_API_KEY=LANGSMITH_API_KEY全屏 退出全屏
点击图片查看langsmith API key
langsmith api key
这是OpenAI API密钥的图片
openai api key
第三步：启动你的 LangGraph Agent
你可以通过多种方式启动你的代理，比如使用自托管（FastAPI，仅支持Python代理）或者按照官方生产指南部署到LangGraph平台。
在本文中，我们将采用本地开发，使用LangGraph CLI启动开发服务器，并开启LangGraph工作室的会话。
你需要一个LangSmith账户来使用这个方法。你需要确保系统中已经安装了docker，然后通过pip install langgraph-cli安装命令行工具。
点击这里查看langgraph图像
在运行主要命令之前，你需要确保安装了 CopilotKit。你可以通过下面的命令来安装它。请参考以下命令。
python -m pip show copilotkit
# 运行此命令来查看copilotkit的安装信息进入全屏
退出全屏
用这个命令安装：python -m pip install copilotkit。
然后，运行下面的命令在本地启动它。
langgraph dev --host localhost --port 8000
# 我们的部署 URL 将是 http://localhost:8000，这是一个开发环境的地址。全屏模式, 退出全屏
这条命令会启动一个LangGraph的开发服务器，然后从langgraph.json文件中读取设置，比如路由、节点和行为，来配置应用程序。
本地部署的图片如下：
如果运行成功，你将获得一个本地的LangGraph工作台。它帮助你将steps_node可视化，然后搜索结果，总结并提取其中的关键点。
你可以通过一步步地执行来交互式地运行和测试不同的流程，同时排查和解决相关问题。
LangGraph 本地工作室
API 文档
第 4 步：将您的 LangGraph 代理接入 CopilotKit
现在，你需要将你的LangGraph代理程序连接到CopilotKit，你可以通过自托管云运行时或使用Copilot Cloud（推荐）来完成连接，我们在这里将使用Copilot Cloud。
使用 Copilot Cloud，你需要将一个远程端点连接到你的 LangGraph 代理。如果你想了解更多关于自托管 (FastAPI) 或 LangGraph 平台的信息，可以查看 文档。
我们将使用LangGraph Studio来本地设置它。当你本地运行LangGraph代理程序时，需要打开一个隧道以让Copilot Cloud连接到它。请使用以下命令：
运行此命令以启动开发服务器，监听端口8000：npx copilotkit@latest dev --port 8000
全屏/退出全屏
你可以选择安装copilotkit包，如果还没有认证，还可以选择通过Copilot Cloud认证。
你看，Local tunnel 已经连接到 Copilot Cloud。
您也会通过CopilotKit云平台收到确认。
CopilotKit 云仪表盘
步骤 5：配置 CopilotKit 提供程序。
<CopilotKit> 组件必须包裹你应用中需要 Copilot 功能的部分。在大多数情况下，最好将其包裹整个应用，例如在 layout.tsx 文件中。
你可以在 ui/app/layout.tsx 找到它。你可以在这个 CopilotKit 云平台（cloud.copilotkit.ai）获取这个 API 密钥。
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
import "./globals.css";
export const metadata: Metadata = {
title: "CoAgents Starter",
description: "CoAgents Starter",
};
export default function RootLayout({ children }: { children: any }) {
return (
<html lang="en">
<body>
{/* 使用你在 Copilot Cloud 获取的公共 API 密钥，如下所示： */}
<CopilotKit
agent="sample_agent" // 将代理锁定为 sample_agent，因为我们只有一个可用的代理
// 注释：runtimeUrl="/api/copilotkit"
showDevConsole={false} // 注释
publicApiKey="你的 Copilot Cloud 公共 API 密钥"
>
{children}
</CopilotKit>
</body>
</html>
);
}
全屏（退出）
由于我们使用的是 Copilot Cloud，我们需要在 CopilotKit 组件里去掉 runtimeUrl 属性，并提供一个有效的 API 键。
在这个示例中，我们只使用了一个智能体，但如果你想运行多个LangGraph代理程序，可以参考官方多代理程序指南。
步骤 6：配置 Copilot 界面。
最后一步是用CopilotKit的UI组件来展示与代理助手的聊天互动。这通常会在你的核心页面组件中一起完成，比如在你的 page.tsx 文件里。
import "@copilotkit/react-ui/styles.css";
import { CopilotPopup } from "@copilotkit/react-ui";
export function YourApp() {
return (
<main>
<h1>您的主要內容</h1>
<CopilotPopup
labels={{
title: "弹出助手",
initial: "嗨！我已经连接到一个代理人了。有什么我可以帮忙的吗？",
}}
/>
</main>
);
}
进入全屏，退出全屏
在克隆的仓库里，CopilotSidebar 使用了正确的样式。这两种方式都完全可以，我这样做是为了让理解更简单。
如果你想找其他的聊天组件选项 (CopilotPopup, CopilotChat 等)，你可以查看我们的Agentic 聊天 UI 指南页面来获取更多信息。
就这样吧！恭喜啦！🎉
你已成功地将一个LangGraph代理集成到了你的应用程序中。现在开始吧，试着向你的代理问几个问题。
这是最终生成的UI图
我也建议你读一下介绍CoAgents的文章（在官方CopilotKit博客上），里面深入探讨了一些可能让你感兴趣的更深层次的概念。
在下一节中，我们可以看看一些我们可以看看的应用示例。
3. 一些真实世界中的带源代码示例
你可以创建很多创新的人工智能代理，让我们看看几个特别突出的例子。所有这些项目都有源代码（GitHub仓库）可以查看。
搞定 AI旅行规划应用程序
（看看这个AI旅行app的演示吧！）
你可以阅读这篇博客，使用这些工具（CopilotKit、LangGraph 和 Google Maps API）来构建一个 AI 旅行应用。你可以让代理帮你规划一次去英国的旅行，它会提供所有细节，你可以根据这些细节采取行动。
✅ 研究框架
（研究蓝图）
你可以构建一个与用户界面共享状态的虚拟助手。它使用LangGraph和CoAgents（CopilotKit）。
✅ 困惑度克隆版本
你可以参考这篇教程博客，利用 LangGraph、Tavily 和 CopilotKit 创建一个像 Perplexity 一样的程序。
你可以去看看 GitHub 代码仓库 和 实时演示。
你也可以在 CopilotKit 仓库的官方示例页面上找到其他的内容。
很多开发者认为开发AI代理不容易。
希望这份指南能让你更轻松地创建你的第一个智能代理。
如果有其他想法，或者你以前有没有做过类似的软件代理，告诉我。
祝你今天过得愉快！下次聊:)
| 你可以在这里查看我的作品：在这里。 感谢您的阅读！🥰 |
   |
|---|
请在 Twitter 关注 @CopilotKit 并打个招呼，如果你想做一些有趣的事情，可以加入我们的 Discord 社区。
React UI + 优雅的基础设施，支持 AI 副驾、应用程序内的 AI 代理、AI 聊天机器人和带有 AI 功能的文本框 🪁 .
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
