到 2025 年，代理可以处理 90% 的工作流程，让您和您的团队可以专注于真正重要的事情。
今天，我们将深入研究 CoAgents ( CopilotKit )，这是一个用于构建用户交互式代理和副驾驶的全栈框架。
我们将探索与 LangGraph 和 CrewAI 等领先的代理框架的集成，讨论工作流自动化，并强调常见的陷阱和避免它们的最佳实践。
您还将获得带有源代码的真实自动化示例，以帮助您实施这些策略。
让我们开始吧。
涵盖哪些内容？
简而言之，我们正在详细介绍这些主题。
具有核心组件的 CoAgents 有哪些？
与 CrewAI（Crews + Flows）集成。
工作流自动化的含义以及常见的误解。
一些带有源代码的真实示例。
涉及常见的陷阱和最佳实践。
注：Copilotkit（构建 AI Copilots 的框架）最近与 LangChain 和 CrewAI 合作推出了 CoAgents。这就是我们将在本文中讨论的内容。
1. 什么是代理？
AI 代理就像非常聪明的助手。你只需告诉他们你需要什么，他们就会想办法帮你完成任务！
LLM 充当brain系统的主体。当 AI 需要与外界沟通、获取数据或执行特定任务时，它可以利用工具，即外部资源或 API。
什么是 CoAgents？
它是这样的：Copilot + Agents = CoAgents(CopilotKit)，用于将任务分解为更小的步骤，协调动作，并与人类一起工作（Human-in-the-loop）。
例如，假设 Dan 是一名销售专业人员，他提交的差旅报销单上的货币错误，导致出现重大错误。自动化工作流程不允许流程中的其他人轻松纠正此错误。CoAgents 可以介入，在适当的时候请求人工输入，并在问题变得更严重之前纠正错误。
帮助您构建它的框架。
CopilotKit是一个将 AI 副驾驶员集成到产品的框架。它提供用于 AI 聊天、生成 UI 和自动完成的 React 组件，以及一个运行时，可根据用户行为使用上下文、工具和技能来改进 AI 代理。
开发人员可以使用LangGraph SDK+为任何垂直行业构建 CoAgent CoAgents (Copilotkit)。只需构建一个LangGraph agent与您的工作流程相适应的，然后使用它CoAgents来集成自定义操作和生成 UI 体验。
您可以按照Agents 101：如何在 30 分钟内构建您的第一个代理，这是一个分步指南，可帮助您构建 CoAgents。
核心组件。
这是在一个干净的框架内完成的，用于管理应用程序内的 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 }) => {
// ...
}
});
根据文档，未来版本将包括代理指导，使最终用户能够重新调整错误的代理和子图支持等。
2. 与 CrewAI（Crews + Flows）集成。
CrewAI是一个用于协调角色扮演 AI 代理的框架。它允许开发人员创建一个 crew of AI agents，每个代理都有特定的角色和职责，以共同完成复杂的任务。
它模仿人类的组织结构，建立在多智能体系统的概念之上。如果你刚刚起步，CrewAI 是最适合初学者的框架之一。
如果您不知道，CrewAI 提供了两种不同的方法来管理 AI 工作流程：
⚡ Crews- 定义谁（一起工作的代理）。对于需要自主解决问题和创造性协作的任务，请选择此项。
⚡ Flows- 定义如何（他们遵循的流程）。选择此项可获得确定性结果、结构化工作流程和安全执行。
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 的 repo 中克隆crewAI crews with coagents模板。它包含一个带有现成 UI 的示例 Python Agent。
⚡ CrewAI 与 CoAgents 合作
如果您之前构建过 CrewAI Flow 代理，则与 Copilotkit 集成很容易。
安装 Copilotkit 包，在本地启动代理，并在 Copilotkit Cloud 上创建远程端点以连接您的 CrewAI Flow。
接下来，设置 Copilotkit 提供程序并构建聊天 UI，如前所述。
阅读文档以获得一步一步的集成指南。
最简单的入门方法是从 Copilotkit 的 repo 中克隆crewAI 流程和 coagents模板。它包含一个带有现成 UI 的示例 Python Agent。
顺便说一句，如果你刚刚开始，那么你应该从 AndrewNg（深度学习）的这门短期课程中学习如何使用 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许多自动化工具价格实惠且易于设置，即使对于小型团队也是如此。
4. 一些带有源代码的真实示例。
在本节中，我们将探讨一些潜在的应用想法并了解其是如何实现自动化的。
您可以查看快速入门指南，因为其中有安装 Docker 和 LangGraph CLI 等先决条件。
✅研究 Agent 原生应用
假设你需要一个研究代理，但让它自主运行是有风险的。主要是因为人工智能模型会产生幻觉，从而产生不相关的数据。
这就是为什么 CoAgents 采用不同的方法，它可以自动化 90% 的工作，同时让您掌控一切。
您可以按照文档中的教程进行操作，该教程已将其分解为简单的步骤，包括技术内容。我无法涵盖所有内容，否则篇幅会太长。
它是如何工作的？
您提供提示，代理会建议结构化的部分供您批准。
从这里，您可以approve或reject每个主题在它向前移动之前进行操作。
一旦获得批准，代理将根据您批准的主题生成详细内容。
在后台，我们使用useLangGraphInterrupt钩子来处理 UI 中的批准。这是一个 React 钩子，允许您在使用interruptLangGraph 时自定义 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 会根据上下文智能地将请求路由到适当的代理。在这种情况下，我们只有一个代理，最好将所有请求锁定到该代理。
✅人工智能旅游应用程序
假设您需要一家旅行社，它将根据您的喜好搜索地点并规划完整的行程。
如果不使用 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
按照指南可以使其更容易理解。
最终输出的是行程摘要。您可以直接在屏幕上显示的 Google 地图上查看位置。
5. 常见的陷阱和最佳做法。
自动化功能强大，但很容易出错。以下是一些常见的陷阱：
❌ Automation overkill- 不要因为可以就把所有事情都自动化。有时人性化才是真正的价值，想想自动化是否改善了体验，还是让它感觉不那么人性化。
记住，CoAgents 是队友，而不是替代者。
案例研究
让我们举一个现实世界中房地产过度自动化的例子。
Zillow 的 iBuying 程序依靠人工智能房屋估价来Zestimates提供购买报价。但该模型存在盲点：
a) 当人工智能将价格定得太高时，它没有考虑到地下室漏水等隐藏问题，卖家很快就接受了，而 Zillow 最终买下了难以转售的高价房屋。
b) 当人工智能低估房屋价值时，卖家会忽略 Zillow 并选择其他买家的更好报价，从而减少优质购买量。
这导致了自我选择偏差，最终迫使他们在 2021 年巨额财务损失后关闭了 iBuying 业务。
❌ Don't set it and forget it- 尝试监控 Coagent 的性能并收集用户的反馈。在大多数情况下，您会发现一些有用的方法可以改进逻辑。
Maria on CIO写了一篇非常有趣的文章，介绍了自动化的最大陷阱以及如何避免这些陷阱。
最佳实践。
✅——Keep humans in the loop过早地将人类从工作流程循环中移除总是会带来一些不利影响。
✅ 尝试使用不同的已证实的方法减少幻觉。一些初创公司还可以帮助您检测准确的百分比。
底线是让合作代理为您服务（而不是与您作对）。
总而言之，时间大于一切，所以自动化可以帮助您节省时间。
我希望本指南能给你提供一些帮助。
如果您之前已经实现过工作流程自动化或者构建过某些东西，请在评论中与我们分享。