30 分钟快速上手 AI Agent 开发

构建你自己的 Agent 可能很复杂，你需要遵循的所有概念、框架和实践可能会让人有些不知所措。

好消息是，向应用程序添加 Agent 可以很容易，我会告诉你怎么做。

在这个指南中，你将学会如何在仅仅 30 分钟内构建你的第一个 AI Agent，即使你对 AI Agent 一无所知。

简而言之，我们将详细介绍以下主题：

• 使用 Copilotkit 和 LangGraph 构建 Agent 的分步指南
• 一些包含源代码的真实示例

注意：Copilotkit（用于构建 AI Copilots 的框架）最近与 LangChain 合作推出了 CoAgents。这就是我们将在本指南中使用的东西。

1. 什么是 AI Agent？

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

LLM 充当系统的大脑。当 AI 需要与外部世界通信、获取数据或执行特定任务时，它可以利用工具，这些是外部资源或 API。

他们可以规划、做出决定，甚至随着时间的推移变得更好。把它想象成一个数字实体，可以观察、思考和行动，很像人类与周围环境互动的方式，但以一种有程序化且有目的的方式。

AI Agent 主要分为两种类型：

⚡ 反应式：对环境中的即时输入做出响应。

⚡ 主动式 Agent：提前规划以实现长期目标。

鸣谢 Abhishek Reddy (Medium)

AI Agent 的核心由以下相互连接的组件组成，使其能够感知环境、推理、行动和学习：

• 感知 - 从环境中收集和解释数据
• 推理 - 分析信息以做出决定
• 行动 - 基于做出的决定执行任务
• 学习 - 利用 ML 算法从过去的经验中适应并改进性能
• 通信接口 - 通过 NLP 和协议与其他 Agent 或系统进行交互
• 记忆 - 存储过去的数据和知识以供将来使用
• 性能分析 - Agent 从其环境中收集数据的手段

你会在不同的地方找到不同的细节，但它们基本上说的是同一件事。

如果你想了解更多，可以查看 simform 的《What is an AI Agent》指南。

AI Agent 在更大环境中的应用

AI Agent 不是什么

很多人实际上对 AI Agent 感到困惑。让我们澄清一下 AI Agent 不是什么：

❌ 不是魔法 - 他们不像人类那样"思考"，只是遵循模式。

❌ 不总是准确的 - 他们可能会产生幻觉并可能出错。

此外，他们并不总是必要的。比如如果你已经知道所有可能的用户操作，就直接编码即可。例如，用户点击按钮预订酒店房间 → 显示可用日期 → 确认预订。根本不需要 AI。

一个简单的经验法则：如果你的任务是直接的、基于规则的或需要 100% 准确性，AI Agent 不是正确的选择。

既然我们已经理解了 AI Agent，现在是时候在下一部分中构建一个了。

2. 使用 Copilotkit 和 LangGraph 构建 Agent 的分步指南

在本部分中，我们将讨论如何在几分钟内构建你的第一个 Agent。

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

查看 CopilotKit ⭐️

使用 LangGraph SDK + CoAgents (Copilotkit)，开发者可以快速为任何行业构建这类应用。只需构建一个适合你的工作流的 LangGraph Agent，然后使用 CoAgents 来集成自定义操作和生成式 UI 体验。

此外，这一切都在一个清洁的框架内来管理应用程序内的 Agent（感谢 LangGraph）。你获得了你需要的一切，包括：

• Shared State（Agent ↔ 应用程序）
• Agentic 生成式 UI
• 实时前端操作
• Agent 控制（LangGraph 检查点）

你可以在 CopilotKit 文档中读到更多信息，其中也有说明性的图表来帮助你理解。

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

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

如果你已经有 LangGraph Agent，你可以直接跳到第 3 步。这里我们将克隆启动程序仓库以快速开始。

为了避免这篇博客过长，我不会涵盖所有细微的概念。你可以在文档的学习部分中阅读，包括术语、概念等等。

步骤 1：克隆启动程序仓库

由于我们没有 Agent，只是需要开始。我们需要在 CopilotKit GitHub 下克隆 coagents 启动程序仓库。

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

我创建了一个新的干净目录（复制粘贴），这样更容易理解。你可以使用克隆的仓库按照相同的步骤操作。

这是我们目录的样子。agent 目录将保存 LangGraph Agent，ui 将包含我们的前端应用程序。

如果你没有前端，你可以创建一个新的 Next.js 应用并使用 TypeScript，然后安装 Copilotkit react 包。在克隆的仓库中，它已经存在了，所以你只需要在 ui 目录下使用 pnpm i 安装依赖。

// 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 包允许 co-agent 与 React 状态值交互并在应用程序内做出决定。

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

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

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

cd agent/agent-py
poetry install

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

步骤 2：添加必要的 API 密钥

在 agent-py 目录下创建 .env 文件。然后将你的 OpenAI API 密钥和 LangSmith API 密钥添加到 .env 文件。我已经附加了文档链接，这样很容易跟上。

这将是命名约定：

OPENAI_API_KEY=your_openai_api_key
LANGSMITH_API_KEY=your_langsmith_api_key

步骤 3：启动你的 LangGraph Agent

你可以通过多种方式启动 Agent，例如使用自托管（FastAPI），这仅支持 Python Agent，或按照官方生产指南部署到 LangGraph Platform。

在本文章范围内，我们将使用本地开发，其中我们使用 LangGraph CLI 启动开发服务器和 LangGraph studio 会话。

你需要一个 LangSmith 账户来使用此方法。你需要确保在你的系统上安装了 docker，然后使用 pip install langgraph-cli 安装 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 studio。它有助于可视化 steps_node，然后搜索结果、总结它们并提取关键点。

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

本地 LangGraph studio

步骤 4：将你的 LangGraph Agent 连接到 CopilotKit

现在，你需要使用自托管云运行时或 Copilot Cloud（推荐）之一将你的 LangGraph Agent 连接到 CopilotKit，我们将在这里使用。

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

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

npx copilotkit@latest dev --port 8000

你将获得安装 copilotkit 包的选项，以及在尚未进行身份验证时与 Copilot Cloud 进行身份验证的选项。

如你所见，本地隧道已上线并链接到 Copilot Cloud！

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

copilotkit 云仪表板

步骤 5：设置 CopilotKit 提供程序

<CopilotKit> 组件必须包装应用程序的 Copilot 感知部分。在大多数情况下，最好将其放在整个应用周围，如 layout.tsx 中。

你可以在 ui/app/layout.tsx 中找到它。你将在 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>
        {/* 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，我们必须在 CopilotKit 组件中省略 runtimeUrl 属性并提供有效的 API 密钥。

在此示例中，我们只使用单个 Agent，但如果你想运行多个 LangGraph Agent，请查看官方 Multi-Agent 指南。

步骤 6：设置 Copilot UI

最后一步是使用 CopilotKit 的 UI 组件来渲染与 Agent 的聊天交互。在大多数情况下，这与你的核心页面组件一起完成，如在你的 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 Chat UI 指南。

就这样。恭喜！🎉

你已经成功将 LangGraph Agent 集成到你的应用程序中。要开始，尝试向你的 Agent 提出几个问题。

我还推荐阅读官方 copilotkit 博客上的《Introducing CoAgents: Everything You Need To Build Agent-Native Applications Powered by LangGraph》。它深入讲解了你可能感兴趣的概念。

在下一部分中，我们将查看一些我们可以构建的应用程序示例。

3. 一些包含源代码的真实示例

你可以构建许多创新的 AI Agent，所以让我们探索一些突出的例子。所有这些都包括源代码（GitHub 仓库）。

你可以阅读此博客来使用 CopilotKit、LangGraph 和 Google Maps API 构建 AI 旅行应用。你可以要求 Agent：Plan a Trip to England，它将提供所有你可以采取行动的细节。

你可以查看文档和实时演示。

你可以构建一个虚拟研究助手，它与用户界面具有共享状态。它使用 LangGraph 和 CoAgents（CopilotKit）。

你可以查看实时演示。

你可以查看此教程博客以使用 LangGraph、Tavily 和 CopilotKit 构建 Perplexity 风格的应用程序。

你也可以在 CopilotKit 仓库的官方示例中找到其他一些。

许多开发者认为构建 AI Agent 很困难。

希望本指南能让你更容易地构建你的第一个 Agent。

在 Twitter 上关注 CopilotKit 并打个招呼，如果你想构建一些酷的东西，加入 Discord 社区。

订阅我们的博客并在你的收件箱中获取 CopilotKit 的更新。