使用 AI 代理实现 90% 工作的自动化（内含真实示例和代码）🚀🤖

到 2025 年，代理可以处理 90% 的工作流程，让您和您的团队能够专注于真正重要的事情。

今天，我们将深入研究 CoAgents ( CopilotKit )，这是一个用于构建用户交互代理和副驾驶员的全栈框架。

我们将探索与 LangGraph 和 CrewAI 等领先代理框架的集成，讨论工作流自动化，并强调常见的陷阱和避免这些陷阱的最佳实践。

您还将获得带有源代码的真实自动化示例，以帮助您实施这些策略。

让我们开始吧。

涵盖哪些内容？

简而言之，我们正在详细介绍这些主题。

具有核心组件的 CoAgents 有哪些？
与 CrewAI（Crews + Flows）集成。
工作流自动化的含义以及常见的误解。
一些带有源代码的真实示例。
涉及常见的陷阱和最佳实践。

注：Copilotkit（用于构建 AI Copilot 的框架）最近与 LangChain 和 CrewAI 合作推出了 CoAgents。这正是我们本文要讨论的内容。

1.什么是代理？

AI代理就像非常聪明的助手。你只需告诉他们你的需求，他们就能帮你搞定！

LLM 充当brain系统的“核心”。当人工智能需要与外界通信、获取数据或执行特定任务时，它可以利用工具，这些工具是外部资源或 API。

什么是 CoAgents？

它是这样的：Copilot + Agents = CoAgents(CopilotKit)，用于将任务分解为更小的步骤，协调动作，并与人类一起工作（Human-in-the-loop）。

例如，假设销售专员丹提交了错误货币的差旅报销单，导致出现重大错误。自动化工作流程不允许流程中的其他人轻松纠正此错误。CoAgents 可以介入，在适当的时候请求人工输入，并在问题恶化之前进行纠正。

帮助您构建它的框架。

CopilotKit是一个用于将 AI 副驾驶集成到产品的框架。它提供用于 AI 聊天、生成式 UI 和自动完成的 React 组件，以及一个运行时，可根据用户行为，通过上下文、工具和技能来改进 AI 代理。

开发者可以使用LangGraph SDK+为任何垂直行业构建 CoAgent CoAgents (Copilotkit)。只需构建一个LangGraph agent与您的工作流程相协调的 CoAgent，然后用它CoAgents来集成自定义操作和生成式 UI 体验。

您可以按照代理 101：如何在 30 分钟内构建您的第一个代理，这是一个帮助您构建 CoAgent 的分步指南。

查看 CopilotKit 的 GitHub ⭐️

核心组件。

这是在一个干净的框架内完成的，用于管理应用程序内的 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 分钟视频！

2. 与 CrewAI（Crews + Flows）集成。

CrewAI是一个用于编排角色扮演 AI 代理的框架。它允许开发人员创建一个 crew of AI agents，每个代理都具有特定的角色和职责，以便协同完成复杂的任务。

它在某种程度上模仿了人类的组织结构，建立在多智能体系统的理念之上。如果你刚刚入门，CrewAI 是目前最适合初学者的框架之一。

如果您不知道，CrewAI 提供了两种不同的方法来管理 AI 工作流程：

⚡ Crews- 定义谁（共同协作的代理）。对于需要自主解决问题和创造性协作的任务，请选择此项。

⚡ Flows- 定义“如何做”（他们遵循的流程）。选择此选项可获得确定性的结果、结构化的工作流程和安全的执行。

CrewAI 还支持将两者结合，打造混合应用，其中 Flows 负责协调整体流程，而 Crews 则负责处理需要自主操作的复杂子任务。您可以在文档中了解两者的区别、如何协同工作等更多信息。

Copilotkit 与 CrewAI 集成

Copilotkit 最近推出了与 CrewAI 的集成。您可以在几分钟内将 Flows 和 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 提供程序。

该<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 的代码库中克隆crewAI crews with coagents模板。它包含一个带有可立即使用的 UI 的示例 Python Agent。

⚡ CrewAI 与 CoAgents 合作

如果您之前构建过 CrewAI Flow 代理，则与 Copilotkit 集成很容易。

安装 Copilotkit 包，在本地启动代理，并在 Copilotkit Cloud 上创建远程端点以连接您的 CrewAI Flow。

接下来，设置 Copilotkit 提供程序并构建聊天 UI，如前所述。

阅读文档以获取分步集成指南。

最简单的入门方法是从 Copilotkit 的代码库中克隆crewAI 流程和 coagents模板。它包含一个带有可立即使用的 UI 的示例 Python Agent。

顺便说一句，如果你刚刚开始，那么你应该从 AndrewNg（Deeplearning）的这个短期课程中学习如何使用 crewAI 构建多 AI 代理系统。

现在，是时候了解一些有关工作流自动化的知识，并用一般术语来分解它。

3. 工作流自动化的含义以及常见的误解。

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 代理有关，但你可以从中了解一些基本概念。

4. 一些带有源代码的真实示例。

在本节中，我们将探讨一些潜在的应用想法并了解其如何实现自动化。

您可以查看快速入门指南，因为其中有安装 Docker 和 LangGraph CLI 等先决条件。

这些示例涉及它们如何与技术解释一起工作，如果令人困惑，请转到每个点中提到的教程。

✅研究 Agent Native 应用程序

假设你需要一个研究代理，但让它自主运行是有风险的。主要是因为人工智能模型会产生幻觉，从而生成不相关的数据。

这就是为什么 CoAgents 采取不同的方法，它可以自动化 90% 的工作，同时让您掌控一切。

您可以按照文档中的教程进行操作，该教程已将其分解为简单的步骤，包括技术细节。我无法涵盖所有内容，否则篇幅会太长。

🎯 它是如何工作的？

您提供提示，代理会建议结构化部分供您批准。

从这里，您可以对每个主题进行approve或reject使其继续前进。

一旦获得批准，代理将根据您批准的主题生成详细内容。

在后台，我们使用这个useLangGraphInterrupt钩子来处理 UI 中的审批。它是一个 React 钩子，允许您在interruptLangGraph 中使用时自定义 UI。当触发 Interrupt 事件时，该钩子会运行，允许您以您偏好的用户体验收集用户输入。它的实现方式如下。

// ...
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 存储库和现场演示。

✅人工智能旅行应用程序

假设您需要一家旅行社，它将根据您的喜好搜索地点并规划完整的行程。

如果不使用 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 代理copilotkit_emit_state 中的 CopilotKit SDK 函数。search_node

使用 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) 

    # ...

search_progress现在我们可以通过使用钩子在 UI 中显示来呈现此状态useCoAgentStateRender。

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

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

最终输出的是行程概要。您可以直接在屏幕上显示的谷歌地图上查看位置。

您可以查看GitHub 存储库和现场演示。

您还可以在 CopilotKit 存储库中的官方示例中找到其他一些示例。

5. 常见的陷阱和最佳实践。

自动化功能强大，但容易出错。以下是一些常见的陷阱：

❌ 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社区。

副驾驶套件

React UI + 适用于 AI Copilot、应用内 AI 代理、AI 聊天机器人和 AI 驱动的文本区域的优雅基础架构🪁

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

使用 AI 代理实现 90% 工作的自动化（内含真实示例和代码）🚀🤖

使用 AI 代理实现 90% 工作的自动化（内含真实示例和代码）🚀🤖

涵盖哪些内容？

1.什么是代理？

什么是 CoAgents？

帮助您构建它的框架。

核心组件。

2. 与 CrewAI（Crews + Flows）集成。

Copilotkit 与 CrewAI 集成

3. 工作流自动化的含义以及常见的误解。

常见的误解。

4. 一些带有源代码的真实示例。

✅研究 Agent Native 应用程序

✅人工智能旅行应用程序

5. 常见的陷阱和最佳实践。

💡案例研究

最佳实践。

副驾驶套件 跟随

副驾驶套件