我們將在 2025 年看到人工智慧代理數量的增加。

建立自己的代理可能很複雜，您需要遵循的所有概念、框架和實踐可能會有點不知所措。

好訊息是，向您的應用程式加入代理程式很容易，我將向您展示如何操作。

在本指南中，您將學習如何在短短 30 分鐘內建立您的第一個 AI 代理，即使您對 AI 代理一無所知。

讓我們開始吧。

涵蓋哪些內容？

簡而言之，我們正在詳細介紹這些主題。

1. 什麼是 AI 代理？

2. 使用 Copilotkit 和 LangGraph 建立代理程式的逐步指南。

3. 一些帶有原始程式碼的真實範例。

附註：Copilotkit（建構 AI Copilots 的框架）最近與 LangChain 合作推出了 CoAgents。這就是我們在此要用到的。

1.什麼是AI代理？

人工智慧代理就像是真正智能的助手。您只需告訴他們您需要什麼，他們就會想辦法完成它！

LLM 是該系統的brain 。當人工智慧需要與外界溝通、獲取資料或執行特定任務時，它可以利用工具，即外部資源或 API。

他們可以製定計劃、做出決定，甚至隨著時間的推移變得更好。可以將其視為一個可以觀察、思考和行動的數位實體，類似於人類與周圍環境的互動，但以一種程序化和有目的的方式。

AI代理主要有兩種類型：

⚡ Reactive ：對來自環境的即時輸入做出反應。

⚡ Proactive Agents ：提前製定計劃以實現長期目標。

感謝 Abhishek Reddy (Medium)

核心元件。

從本質上講，人工智慧代理由以下相互連接的元件組成，這些元件使它們能夠感知環境、推理、行動和學習：

• Perception ——收集並解釋來自其環境的資料。

• Reasoning ——分析資訊以做出決策。

• Action ——根據所做的決定執行任務。

• Learning －利用 ML 演算法根據過去的經驗調整並提高效能。

• Communication Interface - 透過 NLP 和協定與其他代理或系統互動。

• Memory －儲存過去的資料和知識以供將來使用。

• Profiling －代理從其環境中收集資料的方法。

你會在不同的地方發現不同的細節，但或多或少都表達了同一件事。

如果您有興趣了解更多訊息，可以查看 simform 撰寫的《什麼是 AI 代理》指南。

更大環境中的 AI 代理

AI 代理不是什麼

事實上，很多人對人工智慧代理感到困惑。讓我們明確一下什麼不是 AI 代理：

❌ Not magic ——它們不像人類那樣“思考”，而只會遵循模式。

❌ Not always accurate ——他們可能會產生幻覺並犯錯。

另外，它們並不總是需要的。例如，如果你已經知道所有可能的使用者操作，只需對其進行編碼。例如，使用者點擊按鈕預訂飯店房間→顯示可用日期→確認預訂。根本不需要人工智慧。

一個簡單的規則：如果您的任務很簡單、基於規則或需要 100% 的準確性，那麼 AI 代理並不是正確的選擇。

現在我們已經了解了 AI 代理，接下來的部分我們將建立一個 AI 代理。

2. 使用 Copilotkit 和 LangGraph 建立代理程式的逐步指南。

在本節中，我們將討論如何在幾分鐘內建立您的第一個代理程式。

CopilotKit是一個將 AI 副駕駛整合到產品的框架。它為 AI 聊天、生成式 UI 和自動完成提供 React 元件，以及根據使用者行為使用上下文、工具和技能來改進 AI 代理程式的執行時間。他們最近宣布了 CoAgents（目前處於測試階段）。

https://go.copilotkit.ai/Anmol-agents-101 看看 CopilotKit ⭐️

借助LangGraph SDK + CoAgents (Copilotkit) ，開發人員可以為任何垂直行業快速建立此類應用程式。只需建立一個適合您的工作流程的LangGraph agent ，然後使用CoAgents整合自訂操作和產生的 UI 體驗。

另外，這一切都在一個乾淨的框架內，用於管理應用程式內的代理程式（感謝 LangGraph）。您將獲得所需的一切，包括：

• 共享狀態（代理 ↔ 應用程式）

• 代理生成使用者介面

• 人機交互

• 即時前端操作

• 代理程式指導（LangGraph 檢查點）

您可以在copilotkit.ai/coagents上閱讀更多內容，其中還有說明圖表來幫助您理解。

如果您想快速了解，請觀看 Atai（Copilotkit 聯合創始人）的這段 2 分鐘影片！

https://www.youtube.com/watch?v=tVjVYJE-Nic

如果您想自己探索，可以按照官方的快速入門指南進行操作。如果你不想也沒關係，我會詳細解釋所有的步驟。

如果您有 LangGraph 代理，則可直接跳至step 3 。在這裡，我們將克隆啟動存儲庫以便快速啟動。

為了避免這篇部落格太長，我不會介紹每一個小概念。您可以在文件的學習部分閱讀，其中包括術語、概念等。

步驟 1：克隆啟動儲存庫。

因為我們沒有代理，所以只需要開始。我們需要複製 CopilotKit GitHub 下的coagents 啟動儲存庫。

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

我建立了一個新的乾淨目錄（複製貼上），因此更容易理解。您可以對克隆的 repo 執行相同的步驟。

我們的目錄看起來是這樣的。 agent目錄將保存 LangGraph Agent， ui將包含我們的前端應用程式。

如果您沒有前端，您可以使用 TypeScript 建立一個新的 Next.js 應用程式，然後安裝 Copilotkit 反應套件。在複製的儲存庫中，它已經存在，因此您只需要在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 套件允許聯合代理與 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

langsmith API 金鑰

openai API 金鑰

步驟3：啟動您的 LangGraph 代理程式。

您可以透過多種方式啟動代理，例如使用僅支援 Python 代理程式的自架（FastAPI）或按照官方生產指南部署到 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
# 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中。

您可以在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>
  );
}

在克隆的 repo 中， CopilotSidebar使用了適當的樣式。這兩種方式都可以，我用過這個，所以很容易理解。

如果您正在尋找其他聊天元件選項（ CopilotPopup 、 CopilotChat ...），您可以查看Agentic Chat UI 指南。

就是這樣。恭喜！ 🎉

您已成功將 LangGraph 代理整合到您的應用程式中。首先，嘗試向您的經紀人詢問幾個問題。

我還建議閱讀 copilotkit 官方部落格上的《CoAgents 簡介：建立由 LangGraph 提供支援的代理原生應用程式所需的一切》 。它深入探討了你可能會感興趣的更深層次的概念。

在下一節中，我們將查看一些我們可以建立的應用程式範例。

3. 一些帶有原始程式碼的真實範例。

您可以建立許多創新的 AI 代理，因此讓我們來探索一些脫穎而出的代理。所有這些都包括原始程式碼（GitHub 儲存庫）。

✅ 人工智慧旅遊應用程式

您可以閱讀此博客，使用CopilotKit 、 LangGraph和Google Maps API建立 AI 旅行應用程式。您可以詢問代理商： Plan a Trip to England ，它將提供您可以採取行動的所有細節。

您可以查看GitHub 儲存庫、文件和現場演示。

https://www.youtube.com/watch?v=9v3kXiOY3vg

✅研究畫布

您可以建立一個與使用者介面具有共享狀態的虛擬研究助理。它使用LangGraph和CoAgents (CopilotKit) 。

您可以查看GitHub 儲存庫和現場演示。

https://youtu.be/0b6BVqPwqA0

✅Perplexity Clone

您可以查看此教學博客，了解如何使用LangGraph 、 Tavily和CopilotKit建立 Perplexity 風格的應用程式。

您可以查看GitHub 儲存庫和現場演示。

https://youtu.be/HvzmwwDF4aM

您也可以在 CopilotKit 儲存庫中的官方範例中找到其他一些內容。

許多開發人員認為建立人工智慧代理很困難。

希望本指南可以幫助您更輕鬆地建立您的第一個代理程式。

如果您有任何其他想法或之前建立過任何代理，請告訴我。

祝你有美好的一天！直到下次:)

在Twitter上關注 CopilotKit 並打招呼，如果您想建立一些很酷的東西，請加入Discord社群。

https://dev.to/copilotkit

原文出處：https://dev.to/copilotkit/agents-101-how-to-build-your-first-ai-agent-in-30-minutes-1042