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

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

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

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

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

让我们开始吧。

涵盖哪些内容？

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

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

注意：Copilotkit（构建 AI Copilots 的框架）最近与 LangChain 合作推出了 CoAgents。这就是我们将要使用的。

1.什么是AI代理？

AI 代理就像非常聪明的助手。你只需告诉他们你需要什么，他们就会想办法帮你完成任务！

LLM 充当brain系统的主体。当 AI 需要与外界沟通、获取数据或执行特定任务时，它可以利用工具，即外部资源或 API。

它们可以规划、决策，甚至随着时间的推移变得更好。可以将其视为可以观察、思考和行动的数字实体，就像人类与周围环境的互动方式一样，但方式是经过编程且有目的的。

AI代理主要有两种类型：

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

感谢 Abhishek Reddy (Medium)

核心组件。

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

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

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

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

更大环境中的 AI 代理

AI 代理不是什么

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

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

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

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

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

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

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

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

查看 CopilotKit ⭐️

借助LangGraph SDK+ CoAgents (Copilotkit)，开发人员可以快速为任何垂直行业构建此类应用程序。只需构建一个LangGraph agent与您的工作流程相适应的，然后使用它CoAgents来集成自定义操作和生成 UI 体验。

此外，这一切都在一个干净的框架内进行，用于管理应用程序内的代理（感谢 LangGraph）。您可以获得所需的一切，包括：

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

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

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

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

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

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

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

由于我们没有代理，只需要开始。我们需要克隆CopilotKit GitHub 下的coagents 启动存储库。

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

langsmith API 密钥

openai API 密钥

步骤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，然后搜索结果、总结结果并提取关键点。

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

本地 LangGraph 工作室

API 文档

步骤 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 云仪表板上收到确认。

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>
  );
}

在克隆的存储库中，CopilotSidebar使用适当的样式。这两种方式都可以，我使用这个，这样很容易理解。

如果您正在寻找其他聊天组件选项（CopilotPopup，CopilotChat...），您可以查看Agentic 聊天 UI 指南。

就这样。恭喜！🎉

您已成功将 LangGraph 代理集成到您的应用程序中。首先，尝试向您的代理询问几个问题。