Quick Start: The Ultimate Guide to Building Your First AI Agent in 30 Minutes

Rifx.Online
Machine Learning , AI Applications , Generative AI
08 Mar, 2025

我们看到 2025 年 AI 智能体正在崛起。

构建您自己的智能体可能很复杂，需要遵循所有概念、框架和实践。

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

让我们开始吧。

涵盖了什么？

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

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

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

1. 什么是 AI 智能体？

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

LLM 充当系统的“大脑”。当 AI 必须与外界交流、获取数据或执行特定任务时，它可以利用工具，这些工具是外部资源或 API。

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

AI 智能体主要有两种类型：

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

Credits

核心组件。

在其核心，AI 智能体由以下相互连接的组件组成，这些组件允许它们感知其环境、推理、行动和学习：

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

您会在不同的地方找到不同的细节，但它或多或少都表达了相同的意思。

如果您有兴趣阅读更多内容，可以查看 simform 提供的关于什么是 AI 智能体的指南。

更大环境中的 AI 智能体

AI 智能体不是什么

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

❌ Not magic - 它们不像人类那样“思考”，而只是遵循模式。 ❌ Not always accurate - 它们可能会产生幻觉并可能出错。

此外，它们并非总是需要的。比如如果您已经知道所有可能的用户操作，只需对其进行编码即可。例如，用户点击一个按钮预订酒店房间 → 显示可用日期 → 确认预订。根本不需要 AI。

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

现在我们已经了解了 AI 智能体，是时候在下一节中构建一个了。

2. 使用 Copilotkit 和 LangGraph 构建您的智能体的分步指南。

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

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

借助 LangGraph SDK + CoAgents (Copilotkit)，开发人员可以快速构建这些类型的应用程序，适用于任何垂直领域。只需构建一个适应您的工作流程的 LangGraph 智能体，然后使用 CoAgents 集成自定义操作和生成式 UI 体验。

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

共享状态（智能体 ↔ 应用程序）
智能体生成式 UI
人机协同
实时前端操作
智能体引导（LangGraph 检查点）

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

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

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

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

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

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

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

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

这就是我们的目录的样子。agent 目录将保存 LangGraph Agent，而 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 包允许 co-agent 与 React 状态值交互，并在应用程序内做出决策。

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

如果你想使用 LangGraph JS，你可以使用 agent-js 目录，我将使用 Python 版本 (agent-py) 来涵盖本博客的范围。

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

cd agent/agent-py
poetry install

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

LangSmith API 密钥

OpenAI API 密钥

步骤 3：启动你的 LangGraph Agent。

你可以通过各种方式启动你的代理，例如使用自托管 (FastAPI)，这仅支持 Python 代理，或者通过遵循官方生产指南部署到 LangGraph 平台。

对于本文的范围，我们将使用本地开发，在这里我们使用 LangGraph CLI 启动开发服务器和 LangGraph 工作室会话。

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

在运行主命令之前，你需要确保安装了 CopilotKit。你可以通过以下命令来完成。

python -m pip show copilotkit

如果未安装，你可以使用以下命令进行安装：python -m pip install copilotkit。

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

langgraph dev --host localhost --port 8000

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

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

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

本地 LangGraph 工作室

API 文档

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

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

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

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

npx copilotkit@latest dev

你将获得安装 copilotkit 包的选项，以及在未登录的情况下使用 Copilot Cloud 进行身份验证的选项。

正如你所看到的，本地隧道已启动并链接到 Copilot Cloud！

![](https://wsrv.nl/?url=

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

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

你可以在 ui/app/layout.tsx 中找到它。你将在 cloud.copilotkit.ai 上的 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，因此我们必须在 CopilotKit 组件中省略 runtimeUrl 属性并提供有效的 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>
  );
}