阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 04月03日

使用 AI 代理實現 90% 工作自動化（內含真實範例和程式碼）🚀 🤖

到 2025 年，代理商可以處理 90% 的工作流程，讓您和您的團隊專注於真正重要的事情。

今天，我們將深入研究 CoAgents ( CopilotKit )，這是一個用於建立使用者互動式代理程式和副駕駛的全端框架。

我們將探索與 LangGraph 和 CrewAI 等領先的代理框架的集成，討論工作流程自動化，並強調常見的陷阱和避免它們的最佳實踐。

您還將獲得帶有原始程式碼的真實自動化範例，以幫助您實施這些策略。

讓我們開始吧。

涵蓋哪些內容？

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

有核心元件的 CoAgents 是什麼？
與 CrewAI（Crews + Flows）整合。
工作流程自動化的含義以及常見的誤解。
一些帶有原始程式碼的真實範例。
涉及常見的陷阱和最佳實踐。

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

什麼是代理？

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

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

什麼是 CoAgents？

它是這樣的：Copilot + Agents = CoAgents(CopilotKit)，用於將任務分解為更小的步驟，協調動作，並與人類一起工作（Human-in-the-loop）。

例如，假設銷售專業人員丹以錯誤的貨幣提交了差旅報銷，從而導致了重大錯誤。自動化的工作流程不允許流程中的任何人輕易糾正這個錯誤。 CoAgents 可以介入，在適當的時機請求手動輸入，並在問題變得更嚴重之前予以糾正。

人工智慧代理與協同代理

感謝 Miraj Mohsin

幫助您建立它的框架。

CopilotKit是一個將 AI 副駕駛整合到產品的框架。它為 AI 聊天、生成式 UI 和自動完成提供 React 元件，以及根據使用者行為使用上下文、工具和技能來改進 AI 代理程式的執行時間。

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

副駕駛輔助劑圖

您可以按照Agents 101：如何在 30 分鐘內建立您的第一個代理，這是一個逐步指南，可幫助您建立 CoAgents。

{% cta https://go.copilotkit.ai/copilotkit %}查看 CopilotKit 的 GitHub ⭐️ {% endcta %}

核心元件。

這是在一個乾淨的框架內完成的，用於管理應用程式內的 CoAgents（感謝 LangGraph）。

讓我們了解核心元件：

Shared State (Agent ↔ Application) ——AI 代理程式和應用程式之間的同步狀態，以確保兩者都能即時存取相同的資訊。這使得代理能夠了解應用程式的上下文，並且應用程式能夠監視代理的操作。

const {state, setState} = useCoAgent("the agent name")

共享狀態

Agentic Generative UI - 在聊天 UI 中呈現代理程式的即時狀態，以便使用者可以看到代理正在做什麼。

useCoagentStateRender(
  name: "research_agent",
  node: "download_progress",
  render: ({ state, nodeName, status }) => {
    return Progress logs={state.logs} /;
  });

代理生成使用者介面

Human-in-the-Loop - 在代理流程中指定需要人工輸入或批准的斷點。這確保了更高的安全性以及更好的代理性能。

useCopilotAction({
 name: "ApprovePlan",
 parameters: [
    { name: "planSteps", type: "string[]" }
 ],
 renderAndWait: ({ args, handler }) => (
    <ConfirmPlan
       planSteps={args.planSteps}
       onApprove={(approvedSteps) => handler({ ... })}
        onDeny={() => handler({ ... })}
     />
  );

人機交互

Realtime frontend actions - 在前端操作可用時將其傳送至 LangGraph 代理程式。這使得代理商能夠即時在應用程式的前端明確地採取行動，例如填寫表格。

useCopilotAction({
 name: "InsertItemInList",
 parameters: [ 
    { name: "city", type: "string" }, 
    { name: "country", type: "string" } 
 ], 
 handler: ({ args, status }) => { 
   // ... 
 } 
});

即時前端操作

根據文件，未來版本將包括代理指導，使最終用戶能夠重新調整錯誤的代理和子圖支援等。

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

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

{% 嵌入 https://youtu.be/tVjVYJE-Nic %}

與 CrewAI（Crews + Flows）整合。

船員人工智慧

CrewAI是一個用於協調角色扮演 AI 代理的框架。它允許開發人員建立一crew of AI agents ，每個代理都有特定的角色和職責，共同完成複雜的任務。

它模仿人類的組織結構，建立在多智能體系統的概念上。如果您剛開始，CrewAI 是最適合初學者的框架之一。

如果你不知道，CrewAI 提供了兩種不同的方法來管理 AI 工作流程：

⚡ Crews －定義誰（一起工作的特務）。對於需要自主解決問題和創造性協作的任務，請選擇此專案。

⚡ Flows －定義如何（他們遵循的流程）。選擇此專案可獲得確定性結果、結構化工作流程和安全執行。

人員和流程

CrewAI 還支援將兩者結合起來用於混合應用程式，其中 Flows 協調整個流程，而 Crews 處理需要自主的複雜子任務。您可以在文件中了解差異、它們如何協同工作以及更多內容。

Copilotkit 與 CrewAI 的集成

Copilotkit 最近推出了與 CrewAI 的整合。您可以在幾分鐘內將 Flows and Crews 轉變為代理原生應用程式。

使用我們之前討論過的 CoAgents 元件非常簡單。下面我們來快速看一下整合的流程。

⚡ CrewAI 與 CoAgents 合作

如果您之前建立過 CrewAI Crew 代理，則與 Copilotkit 整合很容易。

首先，在您的前端安裝 CopilotKit。

npm install @copilotkit/react-ui @copilotkit/react-core

記下您的 Crew API URL 和 Bearer 令牌，然後前往cloud.copilotkit.ai在 Copilot Cloud 註冊您的工作人員。

您將需要建立一個端點並設定 Copilotkit 提供者。

{% 嵌入 https://youtu.be/N0ju60Uxys0 %}

<CopilotKit>元件必須包裝應用程式中支援 Copilot 的部分。大多數情況下，最好將其放置在整個應用程式周圍，例如在layout.tsx中。

import "./globals.css";
import { ReactNode } from "react";
import { CopilotKit } from "@copilotkit/react-core"; 

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body> 
        {/* Use the public api key you got from Copilot Cloud  */}
        <CopilotKit 
          publicApiKey="<your-copilot-cloud-public-api-key>"
          agent="sample_agent" // the name of the agent you want to use
        > 
          {children}
        </CopilotKit>
      </body>
    </html>
  );
}

然後您需要設定您的 Copilot UI 來完成整合。

import { CopilotPopup } from "@copilotkit/react-ui";

export function YourApp() {
  return (
    <>
      <YourMainContent />
      <CopilotPopup
        instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
        labels={{
          title: "Popup Assistant",
          initial: "Need any help?",
        }}
      />
    </>
  );
}

查看他們的Restaurant Finder Crew 演示和文件以了解完整流程。

最簡單的開始方式是從 Copilotkit 的 repo 中克隆crewAI crews 和 coagents模板。它包括一個帶有可立即使用的 UI 的範例 Python 代理程式。

crewai 船員合作者

⚡ CrewAI 與 CoAgents 合作

如果您之前建立過 CrewAI Flow 代理，則與 Copilotkit 整合很容易。

安裝 Copilotkit 包，在本地啟動代理，並在 Copilotkit Cloud 上建立遠端端點以連接您的 CrewAI Flow。

接下來，設定 Copilotkit 提供者並建立聊天 UI，如前所述。

閱讀文件以獲得逐步整合指南。

最簡單的開始方式是從 Copilotkit 的 repo 中克隆crewAI 流程和 coagents模板。它包括一個帶有可立即使用的 UI 的範例 Python 代理程式。

副駕駛套件船員 wai flow

順便說一句，如果你剛開始，那麼你應該從 AndrewNg（深度學習）的這門短期課程中學習如何使用 crewAI 建立多 AI 代理系統。

crewai 上的深度學習課程

現在，是時候了解一些關於工作流程自動化的知識，並用一般術語來分解它。

工作流程自動化的意義以及常見的誤解。

Automation就是讓任務自行運作。

從本質上講，它遵循一個簡單的規則：當某事發生時，採取具體行動。即使最複雜的自動化也可以分解為這個基本原理。

例如： When您收到潛在客戶的新電子郵件時， Then透過文字通訊管道通知我的銷售團隊。

Workflow是應用程式內為實現結果而可重複的一組步驟。許多人將其與過程混淆，但你可以這樣思考：

process －需要做什麼（發送發票）。
workflow - 您將如何進行操作（在 PayPal 中建立發票 → 將其上傳至 DocuSign → 透過電子郵件發送以供簽署 → 跟進付款）

因此， Workflow automation意味著在軟體中自動執行重複任務。您應該查看 Zapier 的這個工作流程自動化部落格。它有例子、想法和非常有用的解釋。

瑞安·哈欽森 (Ryan Hutchinson) 的個人生意有 90% 實現了自動化。這是 Whimsical 連結，您可以在其中分析流程圖。

工作流程自動化

常見的誤解。

關於自動化有許多誤解，所以讓我們澄清一下：

❌ It's just scripting ——現代自動化工具不僅僅是執行簡單的腳本。它們連接應用程式、處理複雜的工作流程，甚至適應情況。 CoAgents 則更進一步。

❌ Only developers can use it ——雖然有強大的開發人員框架，但像 Zapier 和 n8n 這樣的無程式碼工具可以幫助任何人實現自動化，而無需編碼技能。

❌ Expensive and complex ——許多自動化工具價格實惠且易於設置，即使對於小團隊也是如此。

YouTube 上有一個非常有趣的影片您可以觀看。它與 AI 代理相關，但您可以了解一個基本的了解。

{% 嵌入 https://www.youtube.com/watch?v=QFc7jXZ2pdE

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

在本節中，我們將探討一些潛在的應用想法並了解其是如何自動化的。

您可以查看快速入門指南，因為其中有安裝 Docker 和 LangGraph CLI 等先決條件。

這些範例涉及它們如何與技術解釋一起工作，如果令人困惑，請轉到每個點中提到的教程。

✅ 研究 Agent 原生應用

研究應用程式

假設您需要一個研究代理，但讓它自主運作會有風險。主要是因為AI模型產生了幻覺，導致了不相關資料的產生。

這就是為什麼 CoAgents 採用不同的方法，它可以自動化 90% 的工作，同時讓您掌控一切。

您可以按照文件中的教程進行操作，該教程將其分為包括技術內容在內的簡單步驟。我無法涵蓋所有內容，否則它會太長。

🎯 它是如何運作的？

您提供提示，代理商會建議結構化的部分供您批准。

給出輸入

提交研究提示

從這裡，您可以在每個主題繼續前進之前approve或reject它。

拒絕或批准提議的主題

一旦獲得批准，代理商將根據您批准的主題產生詳細內容。

在後台，我們使用useLangGraphInterrupt鉤子來處理 UI 中的核准。它是一個 React hook，可讓您在使用 LangGraph interrupt時自訂 UI。當觸發中斷事件時，鉤子就會執行，讓您能夠以您喜歡的使用者體驗收集使用者輸入。這是它的實現方式。

// ...
import { useLangGraphInterrupt } from "@copilotkit/react-core"; 
// ...

export default function HomePage() {
    // ...
    const { state: researchState, setResearchState } = useResearch()

    const streamingSection = useStreamingContent(researchState);

    useLangGraphInterrupt<Proposal>({
      render: ({ resolve, event }) => {
        return <ProposalViewer
          proposal={event.value}
          onSubmit={(approved, proposal) => resolve(
            JSON.stringify({
              ...proposal,
              approved,
            })
          )}
        />
      }
    })
    // ...
}

一旦主題最終確定， useCoAgent鉤子就會在代理狀態和 UI 之間維持雙向連接。

const { state, setState, run } = useCoAgent<ResearchState>({
    name: 'agent',
    initialState: {},
});

這實現了即時研究工作流程，用戶可以在聊天 UI 中追蹤進度並根據需要進行調整。

我們只需要在應用程式中新增生成 UI，以便我們可以在聊天 UI 中視覺化代理程式狀態。

批准主題

根據批准生成回复

最後，如果您需要任何更改，您也可以選擇進一步編輯它。

編輯更改

預設情況下，CopilotKit 會根據上下文智慧地將請求路由到適當的代理程式。在這種情況下，我們只有一個代理，理想的做法是將所有請求鎖定到該代理。

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

✅人工智慧旅遊應用程式

ai旅遊應用程式演示

假設您需要一家旅行社，它將根據您的喜好搜尋地點並規劃完整的行程。

如果不使用 CoAgents，它要么不準確，要么需要大量的手動工作。我們可以使用CopilotKit 、 LangGraph和Google Maps API來自動執行此操作。

您可以按照文件中的教程進行操作，該教程將其分為包括技術內容在內的簡單步驟。我無法涵蓋所有內容，否則它會太長。

🎯 它是如何運作的？

假設你問經紀人： Plan a trip to England but focus on filming set locations. Also, include a hotel near the area and some decent food. I will be there for 10 days.

提交提示

代理商會建議旅行地點，您可以根據需要加入。

要將代理程式整合到此狀態，您需要設定一個遠端端點並使用useCoAgent鉤子來連接它。安裝 LangGraph Studio 後，您可以執行並視覺化該 LangGraph 代理程式。

語言代理

在後台，它使用useCoAgent鉤子來允許 UI 和代理執行之間共用狀態。對於工作流程中的人機循環，請使用useCoAgentStateRender掛鉤。

// ...
import { Trip, Place, AgentState, defaultTrips} from "@/lib/trips"; 
import { useCoAgent } from "@copilotkit/react-core"; 

export const TripsProvider = ({ children }: { children: ReactNode }) => {
  const { state, setState } = useCoAgent<AgentState>({
    name: "travel",
    initialState: {
      trips: defaultTrips,
      selected_trip_id: defaultTrips[0].id,
    },
  });

  // ...

您可以指定一個代表 LangGraph 代理程式狀態的類型。只要注意狀態類型與 LangGraph 代理的狀態相符即可。

串流搜尋進度

一旦您整合了 LangGraph 代理，您將需要即時向使用者傳輸搜尋進度。在 LangGraph 代理程式的search_node中使用copilotkit_emit_state CopilotKit SDK 函數。

使用 CoAgents，LangGraph 代理程式的狀態僅當節點發生變化（如遍歷邊）時才會更新。這意味著預設不會向使用者顯示正在進行的工作。但是，我們可以使用copilotkit_emit_state函數手動發出狀態。

將自訂 CopilotKit 配置新增至「search_node」來描述我們將發出的中間狀態。

# ...
from copilotkit.langgraph import copilotkit_emit_state, copilotkit_customize_config 

async def search_node(state: AgentState, config: RunnableConfig):
    """
    The search node is responsible for searching for places.
    """
    ai_message = cast(AIMessage, state["messages"][-1])

    config = copilotkit_customize_config(
        config,
        emit_intermediate_state=[{
            "state_key": "search_progress",
            "tool": "search_for_places",
            "tool_argument": "search_progress",
        }],
    )

    # ...

現在我們可以呼叫copilotkit_emit_state來在我們想要的任何地方發射中間狀態。在這種情況下，我們將在搜尋開始時和收到結果時發布其進度。

# ...
async def search_node(state: AgentState, config: RunnableConfig):
    """
    The search node is responsible for searching for places.
    """
    ai_message = cast(AIMessage, state["messages"][-1])

    config = copilotkit_customize_config(
        config,
        emit_intermediate_state=[{
            "state_key": "search_progress",
            "tool": "search_for_places",
            "tool_argument": "search_progress",
        }],
    )

    # ^ Previous code

    state["search_progress"] = state.get("search_progress", [])
    queries = ai_message.tool_calls[0]["args"]["queries"]

    for query in queries:
        state["search_progress"].append({
            "query": query,
            "results": [],
            "done": False
        })

    await copilotkit_emit_state(config, state) 

    # ...

我們的搜尋狀態將透過search_progress鍵傳送給 CopilotKit。當我們收到搜尋結果時，我們可以新增此程式碼來更新此狀態。

# ... 
    places = []
    for i, query in enumerate(queries):
        response = gmaps.places(query)
        for result in response.get("results", []):
            place = {
                "id": result.get("place_id", f"{result.get('name', '')}-{i}"),
                "name": result.get("name", ""),
                "address": result.get("formatted_address", ""),
                "latitude": result.get("geometry", {}).get("location", {}).get("lat", 0),
                "longitude": result.get("geometry", {}).get("location", {}).get("lng", 0),
                "rating": result.get("rating", 0),
            }
            places.append(place)
        state["search_progress"][i]["done"] = True
        await copilotkit_emit_state(config, state) 

    state["search_progress"] = []
    await copilotkit_emit_state(config, state) 

    # ...

現在，我們可以透過使用useCoAgentStateRender鉤子顯示search_progress來在 UI 中呈現此狀態。

// ...
import { useCoAgent } from "@copilotkit/react-core"; 
import { useCoAgent, useCoAgentStateRender } from "@copilotkit/react-core"; 
import { SearchProgress } from "@/components/SearchProgress"; 

export const TripsProvider = ({ children }: { children: ReactNode }) => {
  // ...

  const { state, setState } = useCoAgent<AgentState>({
    name: "travel",
    initialState: {
      trips: defaultTrips,
      selected_trip_id: defaultTrips[0].id,
    },
  });

  useCoAgentStateRender<AgentState>({
    name: "travel",
    render: ({ state }) => {
      if (state.search_progress) {
        return <SearchProgress progress={state.search_progress} />
      }
      return null;
    },
  });

  // ...
}

在循環中實現人類（這是最後一步）是使用Breakpoints來實現的。它就像一個暫停按鈕，讓用戶在代理執行之前批准其操作。

人類參與

這裡， trips_node充當perform_trips_node的代理。在trips_node上新增斷點會暫停執行，直到使用者批准該操作。

# ...

graph = graph_builder.compile(
    checkpointer=MemorySaver(),
    interrupt_after=["trips_node"], 
)

您必須更新perform_trips_node來處理使用者的決定，然後發出工具呼叫，更新前端以顯示該決定，並將使用者的決定傳回代理。

您可以將useCopilotAction鉤子與renderAndWait一起用於每次工具呼叫。

按照指南可以使其更容易理解。

作為最終的輸出，您將獲得一份行程摘要。您可以直接在螢幕上顯示的 Google 地圖上查看位置。

您的旅行總結

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

{% 嵌入 https://www.youtube.com/watch?v=9v3kXiOY3vg

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

常見的陷阱和最佳做法。

自動化功能強大，但很容易出錯。以下是一些常見的陷阱：

❌ Automation overkill －不要因為你可以就把所有事情都自動化。有時人性化的接觸才是真正的價值，想想自動化是否改善了體驗或使其感覺不那麼人性化。

記住， CoAgents 是隊友，而不是替代者。

💡案例研究

讓我們舉一個現實世界房地產過度自動化的例子。

Zillow 的 iBuying 計畫依靠名為Zestimates的人工智慧房屋估價來提出購買報價。但模型存在盲點：

a) 當人工智慧將價格定得太高時，它沒有考慮到地下室漏水等隱藏問題，賣家很快就接受了，而 Zillow 最終買下了難以轉售的高價房屋。

b) 當人工智慧低估房屋價值時，賣家會忽略 Zillow 並選擇其他買家的更好報價，從而減少優質購買量。

這導致了自我選擇偏差，最終迫使他們在 2021 年巨額財務損失後關閉了 iBuying 業務。

以下是 CNET 對Zillow 發生了什麼事的報導？一個備受青睞的房地產網站是如何在 iBuying 上失敗的。

❌ Don't set it and forget it - 嘗試監控您的 Coagent 的性能並收集用戶的回饋。在大多數情況下，你會發現一些有用的東西來改善邏輯。

Maria on CIO 寫了一篇非常有趣的文章，介紹了自動化的最大陷阱以及如何避免這些陷阱。

最佳實踐。

✅ Keep humans in the loop －過早地將人類從工作流程循環中移除總是有弊端的。

人類參與

✅ 嘗試使用不同的已證實的方法來減少幻覺。一些新創公司也可以幫助您檢測準確的百分比。

底線是讓合作代理為您服務（而不是與您作對）。

總而言之，時間大於一切，所以自動化可以幫助您節省時間。

我希望本指南能為你提供一些幫助。

如果您之前已經實現過工作流程自動化或建立過某些東西，請在評論中與我們分享。

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

|您可以檢查
我在anmolbaranwal.com上工作。
感謝您的閱讀！ 🥰 | |

| --------- | -------- |

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

{% 嵌入 https://dev.to/copilotkit %}

原文出處：https://dev.to/copilotkit/automate-90-of-your-work-with-ai-agents-real-examples-code-inside-46ke

0個讚 0留言 283瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

使用 AI 代理實現 90% 工作自動化（內含真實範例和程式碼）🚀 🤖

使用 AI 代理實現 90% 工作自動化（內含真實範例和程式碼）🚀 🤖

涵蓋哪些內容？

什麼是代理？

什麼是 CoAgents？

幫助您建立它的框架。

核心元件。

與 CrewAI（Crews + Flows）整合。

Copilotkit 與 CrewAI 的集成

工作流程自動化的意義以及常見的誤解。

常見的誤解。

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

✅ 研究 Agent 原生應用

✅人工智慧旅遊應用程式

常見的陷阱和最佳做法。

💡案例研究

最佳實踐。

阿川私房教材：學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

阿川私房教材：
學 JavaScript 前端，帶作品集去面試！