30分钟快速构建你的AI代理！

大家好，这里是架构资源栈！点击上方关注，添加“星标”，一起学习大厂前沿架构！

前言

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

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

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

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

让我们开始吧。

涵盖哪些内容？

总之，我们正在详细介绍这些主题。

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

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

AI代理？

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

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

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

AI代理主要有以下两种类型：

⚡ Reactive：对来自环境的即时输入做出反应。 ⚡

：Proactive Agents提前计划以实现长期目标。

電子郵件

感谢 Abhishek Reddy（中）

核心组件。

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

Perception- 收集并解释其环境中的数据。

Reasoning- 分析信息以制定决策。

Action- 根据做出的决定执行任务。

Learning- 使用ML算法根据过去的经验调整并提高性能。

Communication Interface- 通过NLP和协议与其他代理或系统交互。

Memory- 存储过去的数据和知识以供将来使用。

Profiling- 代理从其环境收集数据的方法。

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

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

更大环境中的人工智能代理

扩大人工智能代理的发布

AI 代理是什么

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

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

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

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

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

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

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

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

查看 CopilotKit ⭐

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

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

共享状态（代理 ↔ 应用程序）代理生成协议

人机交互

前端操作员

代理指导（LangGraph检查点）

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

语言剂

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

CoAgents Public Beta

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

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

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

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

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

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

copilotkit repo 克隆

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

我们的目录如下图。该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如果您想使用，您可以使用目录，我将使用 Python 版本（）作为本博客的范围。LangGraph JSagent-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

检查是否安装了 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进行身份验证的选项。

copilotkit 云

如您所见，本地隧道某个活动状态并链接到 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 sinc

// 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>

);

}