代理 101：如何在 30 分钟内构建您的第一个 AI 代理！⚡️

我们将在 2025 年看到人工智能代理数量的增加。

构建自己的代理可能很复杂，并且您需要遵循的所有概念、框架和实践可能会有点让人不知所措。

好消息是，向您的应用程序添加代理很容易，我会向您展示如何操作。

在本指南中，您将学习如何在短短 30 分钟内构建您的第一个 AI 代理，即使您对 AI 代理一无所知。

让我们开始吧。

涵盖哪些内容？

简而言之，我们正在详细介绍这些主题。

什么是人工智能代理？
使用 Copilotkit 和 LangGraph 构建代理的分步指南。
一些带有源代码的真实示例。

注：Copilotkit（用于构建 AI Copilot 的框架）最近与 LangChain 合作推出了 CoAgents。我们将在本项目中使用 CoAgents。

1.什么是AI代理？

AI代理就像非常聪明的助手。你只需告诉他们你的需求，他们就能帮你搞定！

LLM 充当brain系统的“核心”。当人工智能需要与外界通信、获取数据或执行特定任务时，它可以利用工具，这些工具是外部资源或 API。

它们能够规划、决策，甚至随着时间的推移不断进步。我们可以把它想象成一个能够观察、思考和行动的数字实体，就像人类与周围环境的互动一样，只不过是以程序化和有目的的方式。

AI代理主要有两种类型：

⚡ Reactive：对来自环境的即时输入做出反应。⚡
：Proactive Agents提前计划以实现长期目标。

核心组件。

从本质上讲，人工智能代理由以下相互连接的组件组成，这些组件使它们能够感知环境、推理、行动和学习：

Perception- 收集并解释其环境中的数据。
Reasoning- 分析信息以做出决策。
Action- 根据做出的决定执行任务。
Learning- 使用 ML 算法根据过去的经验调整并提高性能。
Communication Interface- 通过 NLP 和协议与其他代理或系统交互。
Memory- 存储过去的数据和知识以供将来使用。
Profiling- 代理从其环境中收集数据的方式。

您会在不同的地方发现不同的细节，但或多或少都表达了同一件事。

如果您有兴趣了解更多信息，可以查看simform 撰写的《什么是 AI 代理》指南。

AI 代理不是什么

很多人对AI代理感到困惑。让我们来澄清一下AI代理不是什么：

❌——Not magic它们不像人类那样“思考”，而只会遵循模式。❌——
它们Not always accurate会产生幻觉，也会犯错误。

而且，它们并非总是必需的。如果你已经知道所有可能的用户操作，只需编写代码即可。例如，用户点击按钮预订酒店房间 → 显示可用日期 → 确认预订。根本不需要人工智能。

一个简单的经验法则：如果您的任务很简单、基于规则或需要 100% 的准确性，那么 AI 代理并不是正确的选择。

现在我们已经了解了 AI 代理，接下来的部分我们将构建一个。

2. 使用 Copilotkit 和 LangGraph 构建代理的分步指南。

在本节中，我们将讨论如何在几分钟内构建您的第一个代理。

CopilotKit是一个用于将 AI 副驾驶集成到产品的框架。它提供用于 AI 聊天、生成式 UI 和自动完成的 React 组件，以及一个运行时，可以根据用户行为，通过上下文、工具和技能来改进 AI 代理。他们最近发布了 CoAgents（目前处于 Beta 阶段）。

查看 CopilotKit ⭐️

借助LangGraph SDK+ CoAgents (Copilotkit)，开发者可以快速构建适用于任何垂直行业的此类应用程序。只需构建一个LangGraph agent与您的工作流程相符的平台，即可CoAgents集成自定义操作和生成式 UI 体验。

此外，这一切都在一个简洁的框架内完成，用于管理应用程序内的代理（感谢 LangGraph）。您将获得所需的一切，包括：

共享状态（代理 ↔ 应用程序）
代理生成用户界面
人机交互
实时前端操作
代理指导（LangGraph 检查点）

您可以在copilotkit.ai/coagents上阅读更多内容，其中还包含说明性图表以帮助您理解。

如果您想快速了解一下，请观看 Atai（Copilotkit 联合创始人）制作的这段 2 分钟视频！

如果你想自己探索，可以参考官方的快速入门指南。如果你不想自己探索也没关系，我会详细解释所有步骤。

如果您有 LangGraph 代理，可以直接跳到step 3。在这里，我们将克隆启动存储库以便快速启动。

为了避免这篇博客篇幅过长，我不会涵盖每一个小概念。您可以在文档的学习部分阅读，其中包括术语、概念等等。

步骤 1：克隆启动存储库。

由于我们还没有代理，只是需要开始使用。我们需要克隆CopilotKit GitHub 下的Coagents Starter 仓库。

git clone https://github.com/CopilotKit/CopilotKit
cd CopilotKit/examples/coagents-starter/agent-py

我创建了一个干净的新目录（复制粘贴），这样更容易理解。您可以对克隆的仓库执行相同的步骤。

我们的目录如下所示。该agent目录将包含 LangGraph 代理和ui我们的前端应用程序。

如果您没有前端，可以使用 TypeScript 创建一个新的 Next.js 应用，然后安装 Copilotkit React 包。克隆的仓库中已经包含该包，因此您只需在目录pnpm i下安装依赖项即可ui。

// creates a nextjs app with typescript

npx create-next-app@latest ui --typescript

// install copilotkit packages

npm install @copilotkit/react-ui @copilotkit/react-core

CopilotKit 包允许共同代理与 React 状态值交互并在应用程序内做出决策。

您需要使用运行前端pnpm run dev。

agent-js如果您想使用，可以使用目录LangGraph JS，我将使用 Python 版本（agent-py）作为本博客的范围。

在目录内，使用Poetryagent-py安装项目依赖项。

cd agent/agent-py
poetry install

然后，使用以下命令运行演示：poetry run demo。

第 2 步：添加必要的 API 密钥。

在该目录下创建一个.env文件agent-py。然后将你的OpenAI API 密钥和LangSmith API 密钥添加到该.env文件中。我已附上文档链接，方便查看。

这将是命名约定。

OPENAI_API_KEY=your_openai_api_key
LANGSMITH_API_KEY=your_langsmith_api_key

步骤 3：启动您的 LangGraph 代理。

您可以通过多种方式启动代理，例如使用仅支持 Python 代理的自托管（FastAPI）或按照官方生产指南部署到 LangGraph 平台。

就本文的范围而言，我们将使用本地开发，其中我们使用LangGraph CLI启动开发服务器和 LangGraph 工作室会话。

您需要一个LangSmith 帐户才能使用此方法。您需要确保系统中已安装 docker，然后使用安装 CLI pip install langgraph-cli。

在运行主命令之前，你需要确保CopilotKit已安装。你可以按照以下命令进行操作。

python -m pip show copilotkit

如果尚未安装，您可以使用以下方式安装：python -m pip install copilotkit。

然后，只需运行以下命令即可在本地托管它。

langgraph dev --host localhost --port 8000
# our deployment URL will be http://localhost:8000

此命令启动 LangGraph 开发服务器并使用langgraph.json从此文件读取设置（如路由、节点、行为）来配置应用程序。

如果运行成功，您将获得一个本地的 LangGraph 工作室。它有助于可视化 steps_node，然后搜索结果、汇总结果并提取关键点。

您可以以交互方式运行和测试不同的流程，同时通过逐步执行来调试问题。

步骤 4：将您的 LangGraph 代理连接到 CopilotKit。

现在，您需要使用自托管云运行时或 Copilot Cloud（推荐）将您的 LangGraph 代理连接到 CopilotKit，我们将在此处使用它。

使用Copilot Cloud时，您需要将远程端点连接到您的 LangGraph 代理。如果您对自托管（FastAPI）或 LangGraph 平台感兴趣，可以阅读相关文档。

我们将使用 LangGraph Studio 在本地进行设置。在本地运行 LangGraph 代理时，您需要打开一个隧道，以便 Copilot Cloud 能够连接到它。使用以下命令：

npx copilotkit@latest dev --port 8000

您将获得安装该 copilotkit 包的选项，如果您尚未安装，还可以获得使用 Copilot Cloud 进行身份验证的选项。

如您所见，本地隧道处于活动状态并链接到 Copilot Cloud！

您还将在 CopilotKit 云仪表板上收到确认。

步骤 5：设置 CopilotKit 提供程序。

该<CopilotKit>组件必须包裹应用中支持 Copilot 的部分。大多数情况下，最好将其放置在整个应用的周围，例如layout.tsx。

您可以在中找到它。您将在cloud.copilotkit.aiui/app/layout.tsx提供的 copilotkit 云上获得此 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>
        {/* Use the public api key you got from Copilot Cloud  */}
        <CopilotKit
          agent="sample_agent" // lock the agent to the sample_agent since we only have one agent
          //  runtimeUrl="/api/copilotkit"
          showDevConsole={false}
          publicApiKey="<your-copilot-cloud-public-api-key>"
        >
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}

由于我们正在使用Copilot Cloud，因此我们必须省略组件runtimeUrl中的属性CopilotKit并提供有效的 API 密钥。

在这个例子中，我们只使用一个代理，但如果您希望运行多个 LangGraph 代理，请查看官方的多代理指南。

步骤 6：设置 Copilot UI。

最后一步是使用 CopilotKit 的 UI 组件来渲染与客服人员的聊天交互。大多数情况下，此操作会与核心页面组件一起完成，例如在您的page.tsx文件中。

import "@copilotkit/react-ui/styles.css";
import { CopilotPopup } from "@copilotkit/react-ui";

export function YourApp() {
  return (
    <main>
      <h1>Your main content</h1>

      <CopilotPopup
        labels={{
            title: "Popup Assistant",
            initial: "Hi! I'm connected to an agent. How can I help?",
        }}
      />
    </main>
  );
}