AI Agent 实战：自动化 90% 日常工作

AI Agent 实战：自动化 90% 日常工作 | 前端进阶之旅

Full translation

完整中文译文

2025 年，Agent 可以处理你 90% 的工作，解放你和你的团队专注于真正重要的事情。

今天，我们深入探讨 CoAgents（CopilotKit），这是一个用于构建用户交互式 agent 和 copilot 的全栈框架。

我们将探索与 LangGraph 和 CrewAI 等领先的 agent 框架的集成，讨论 workflow 自动化，并强调要避免的常见陷阱和最佳实践。

你还会获得包含源代码的真实自动化示例，帮助你实现这些策略。

简而言之，我们将详细涵盖以下主题：

CoAgents 及其核心组件是什么？

与 CrewAI 的集成（Crews + Flows）。

Workflow 自动化意味着什么以及常见的误解。

一些包含源代码的真实案例。

涉及的常见陷阱和最佳实践。

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

AI Agent 是什么

AI agent 就像真正聪明的助手。你只需告诉他们你需要什么，他们就会想办法完成！！

LLM 充当系统的大脑。当 AI 需要与外部世界通信、获取数据或执行特定任务时，它可以利用工具，这些工具是外部资源或 API。

是这样的：Copilot + Agents = CoAgents（CopilotKit），用来将任务分解为较小的步骤、协调行动并与人类合作（Human-in-the-loop）。

例如，想象销售专业人士 Dan 用错误的货币提交了差旅报销，这导致了一个重大错误。自动化的 workflow 没有让流程中的其他人轻松纠正这个错误。CoAgents 可以介入，在适当的时刻要求人工输入，并在问题变大前纠正。

帮助你构建它的框架

CopilotKit 是一个将 AI copilot 集成到产品中的框架。它提供 React 组件用于 AI 聊天、生成式 UI 和自动完成，以及一个运行时，根据用户行为用上下文、工具和技能来增强 AI agent。

开发者可以通过使用 LangGraph SDK + CoAgents（Copilotkit）为任何行业构建 CoAgents。只需构建一个与你的 workflow 相适应的 LangGraph agent，然后使用 CoAgents 集成自定义操作和生成式 UI 体验。

你可以查看 Agents 101：如何在 30 分钟内构建你的第一个 agent，这是一个帮助你构建 CoAgents 的分步指南。

查看 CopilotKit 的 GitHub ⭐️

这是在一个干净的框架内完成的，用来在你的应用中管理 CoAgents（感谢 LangGraph）。

让我们理解核心组件：

共享状态（Agent ↔ 应用） - AI agent 和应用之间的同步状态，确保双方都能实时访问相同信息。这使 agent 能够理解应用的上下文，应用也能监控 agent 的行动。

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

Agent 生成式 UI - 在聊天 UI 中渲染 agent 的实时状态，以便用户可以看到 agent 在做什么。

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

Human-in-the-Loop - 在 agent 流程中指定需要人工输入或批准的断点。这确保了更大的安全性以及更好的 agent 性能。

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

实时前端操作 - 当前端操作变得可用时，将其发送到 LangGraph agent。这使 agent 能够在实时内显式地在应用的前端采取行动，例如填写表单。

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

根据文档，未来版本将包括 agent 转向功能，使最终用户能够重新调整有缺陷的 agent，以及子图支持等。

你可以在 copilotkit.ai/coagents 上了解更多信息，那里也有说明性图表来帮助你理解。

如果你想快速了解，可以观看 Copilotkit 联合创始人 Atai 的这个 2 分钟视频！

与 CrewAI 的集成（Crews + Flows）

CrewAI 是一个用于编排角色扮演 AI agent 的框架。它允许开发者创建一个 AI agent 的团队，每个都有特定的角色和职责，在复杂任务上协同工作。

它有点模仿人类组织结构，建立在多 agent 系统的理念之上。如果你刚刚开始，CrewAI 是最初学者友好的框架之一。

如果你不了解，CrewAI 为管理 AI workflow 提供了两种不同的方法：

⚡ Crews - 定义谁（一起工作的 agent）。选择这个适用于需要自主问题解决和创意协作的任务。

⚡ Flows - 定义如何（他们遵循的流程）。选择这个适用于确定性结果、结构化 workflow 和安全执行。

CrewAI 还支持将两者组合用于混合应用，其中 Flows 编排总体流程，而 Crews 处理需要自主权的复杂子任务。你可以在文档上阅读区别、它如何一起工作等。

Copilotkit 与 CrewAI 的集成

Copilotkit 最近推出了与 CrewAI 的集成。你可以在几分钟内将 Flows 和 Crews 转变为 agent 原生应用。

使用我们之前讨论的 CoAgents 组件很容易。这是对集成流的快速了解。

⚡ CrewAI Crews 与 CoAgents

如果你之前构建过 CrewAI Crew agent，与 Copilotkit 集成很容易。

首先，在你的前端安装 CopilotKit。

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

记下你的 Crew API URL 和 Bearer 令牌，然后前往 cloud.copilotkit.ai 在 Copilot Cloud 中注册你的 crew。

你需要创建一个端点并设置 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 Flows 与 CoAgents

如果你之前构建过 CrewAI Flow agent，与 Copilotkit 集成很容易。

安装 Copilotkit 包，在本地启动 agent，并在 Copilotkit Cloud 上创建一个远程端点以连接你的 CrewAI Flow。

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

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

最简单的开始方式是从 Copilotkit 的仓库克隆 crewAI flows with coagents 模板。它包括一个带有现成 UI 的 Python Agent 示例。

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

现在，是时候学习一点 workflow 自动化并用一般术语进行分解。

Workflow 自动化意味着什么以及常见的误解

自动化是关于让任务自行运行。

在其核心，它遵循一个简单规则：当发生某事时，执行特定操作。即使是最复杂的自动化也可以分解成这个基本原则。

例如：当你从潜在客户收到新电子邮件时，然后在文本通信频道上通知我的销售团队。

Workflow 是在应用中实现结果的一组可重复步骤。许多人将其与流程混淆，但你可以这样想：

流程 - 需要做什么（发送发票）。

workflow - 你将如何做（在 PayPal 中创建发票 → 上传到 DocuSign → 发送签名邮件 → 跟进支付）

所以 Workflow 自动化意味着自动化你软件中的重复任务。你应该查看 Zapier 的这篇 workflow 自动化博文。它有示例、想法和非常有用的解释。

Ryan Hutchinson 自动化了他一人公司的 90%。这是 Whimsical 链接，你可以在那里分析流程图。

常见误解

对自动化有很多误解，所以让我们澄清一下：

❌ 只是脚本编程 - 现代自动化工具做的远不止执行简单脚本。它们连接应用、处理复杂 workflow，甚至适应情况。CoAgents 把这推得更远。

❌ 只有开发者能使用 - 虽然有强大的开发者框架，但像 Zapier 和 n8n 这样的无代码工具可以帮助任何人无需编码技能就能自动化。

❌ 昂贵且复杂 - 许多自动化工具是价格合理且易于设置的，即使对小团队也是如此。

这里有一个非常有趣的视频你可以在 YouTube 上观看。它与 AI agent 相关，但你可以了解基本想法。

一些包含源代码的真实案例

在本节中，我们将探索一些潜在的应用想法并理解它是如何自动化的。

你可以查看快速入门指南，因为有一些先决条件，如安装 Docker 和 LangGraph CLI。

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

✅ 研究 Agent 原生应用

假设你需要一个研究 agent，但让它自主运行将会有风险。主要是因为 AI 模型会幻觉，导致生成无关数据。

这就是为什么 CoAgents 采取不同的方法，它自动化 90% 的工作，同时让你保持控制。

你可以查看文档上的这个教程，它已将其分解为包括技术内容的简单步骤。否则我无法涵盖所有内容，这将太长。

你提供一个提示，agent 建议结构化部分供你批准。

从这里，你可以在它继续前进前批准或拒绝每个主题。

一旦获得批准，agent 将基于你批准的主题生成详细内容。

在后台，我们使用 useLangGraphInterrupt hook 来处理 UI 中的批准。这是一个 React hook，允许你在使用 LangGraph 的中断时自定义 UI。当触发中断事件时，hook 运行，允许你用你首选的用户体验收集用户输入。这是它如何实现的。

// ...
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 hook 在 agent 状态和 UI 之间维持双向连接。

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

这支持实时研究 workflow，用户可以在聊天 UI 中跟踪进度并根据需要进行调整。

我们只需要向应用添加生成式 UI，以便我们可以在聊天 UI 中可视化 agent 状态。

最后，如果需要任何更改，你也可以选择进一步编辑它。

默认情况下，CopilotKit 将根据上下文智能地将请求路由到适当的 agent。在这种情况下，我们只有一个 agent，将所有请求锁定到该 agent 是理想的。

你可以查看 GitHub 仓库和实时演示。

旅行 Agent

假设你需要一个旅行 agent，它将根据你的偏好搜索位置并规划完整的旅行。

不使用 CoAgents，它要么不准确，要么需要大量手工工作。我们可以使用 CopilotKit、LangGraph 和 Google Maps API 来自动化这一点。

你可以查看文档上的这个教程，它已将其分解为包括技术内容的简单步骤。否则我无法涵盖所有内容，这将太长。

假设你要求 agent：规划一次去英国的旅行，但重点关注电影拍摄地点。还要包括该地区附近的酒店和一些不错的食物。我将在那里待 10 天。

Agent 建议旅行地点，你可以根据需要添加它们。

要将 agent 集成到这个状态中，你需要设置一个远程端点并使用 useCoAgent hook 连接它。安装了 LangGraph Studio，你可以运行并可视化该 LangGraph agent。

在后台，它使用 useCoAgent hook 允许在你的 UI 和 agent 执行之间共享状态。对于 workflow 中的 human-in-the-loop，使用 useCoAgentStateRender hook。

// ...
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 agent 的状态。只需小心状态类型与你的 LangGraph agent 的状态匹配。

流式搜索进度

一旦集成了 LangGraph agent，你需要实时向用户流式传输搜索进度。在 LangGraph agent 的搜索节点中使用 copilotkit_emit_state CopilotKit SDK 函数。

使用 CoAgents，LangGraph agent 的状态仅在节点改变时更新（如边被遍历）。这意味着进行中的工作默认情况下不会向用户显示。但是，我们可以使用 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 hook 显示 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;
    },
  });

  // ...
}

实现 Humans in the loop（这是最后一步）使用断点工作。它就像一个暂停按钮，让用户在 agent 运行之前批准其行动。

这里，trips_node 充当 perform_trips_node 的代理。向 trips_node 添加断点会暂停执行，直到用户批准操作。

# ...

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

你需要更新 perform_trips_node 来处理用户的决定，然后发出工具调用、更新前端来显示，并将用户的决定发送回 agent。

你可以对每个工具调用使用 useCopilotAction hook 与 renderAndWait。

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

作为最终输出，你会得到一个旅行摘要。你可以直接在屏幕上显示的 Google 地图上查看这些位置。

你可以查看 GitHub 仓库和实时演示。

你也可以在 CopilotKit 仓库的官方示例中找到一些其他的。

涉及的常见陷阱和最佳实践

自动化很强大，但很容易出错。这里有一些常见陷阱：

❌ 自动化过度 - 不要因为可以就自动化所有事情。有时候人工接触才是真正的价值，考虑自动化是否改进了体验或使其感觉不够个性化。

记住，CoAgents 是队友，不是替代品。

让我们举一个房地产中过度自动化的真实例子。

Zillow 的 iBuying 项目依赖于称为 Zestimates 的 AI 驱动的房屋评估来做出购买报价。但该模型有盲点：

a) 当 AI 将价格设定得过高时，它没有考虑隐藏的问题，比如漏水的地下室。卖家迅速接受，Zillow 最终购买了价格过高、难以转售的房屋。

b) 当 AI 低估房屋价值时，卖家忽略了 Zillow，转而接受来自其他买家的更好报价，减少了好购买的数量。

这导致了自选偏差，最终迫使他们在 2021 年因大量财务损失而关闭 iBuying 业务。

这是 CNET 报告关于 Zillow 发生了什么？一个备受瞩目的房地产网站在 iBuying 上的失败。

❌ 不要设定后就忘记 - 尝试监控你的 Coagent 的性能并从用户那里收集反馈。在大多数情况下，你会发现有用的东西来改进逻辑。

Maria 在 CIO 上有一篇非常有趣的文章关于自动化的主要陷阱以及如何避免它们。

✅ 保持人类在循环中 - 过早地从 workflow 循环中移除人类总是有缺点的。

✅ 尝试使用不同的经过验证的方法来减少幻觉。一些初创公司可以帮助你检测准确百分比。

底线是让 CoAgents 为你工作（而不是反对你）。

在一天结束时，时间比一切都重要，所以自动化帮助你节省时间。

我希望这个指南给了你一些有用的东西。

如果你已经自动化了一个 workflow 或之前构建了什么，请在评论中与我们分享。

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

在 Twitter 上关注 CopilotKit 并打个招呼，如果你想构建很酷的东西，加入 Discord 社区。

一些评论可能仅对登录的访问者可见。登录查看所有评论。

如需进一步操作，你可能需要考虑屏蔽此人和/或举报滥用行为