使用 Mesop 新的聊天 UI 框架构建 CrewAI 应用程序

在我上一篇文章中，我们探讨了如何将 AutoGen 与谷歌的实验性 UI 框架 Mesop 集成，以快速可视化多智能体应用程序。然而，多智能体领域提供的不止一个引人注目的选择。今天，我们将目光转向另一个强有力的竞争者：CrewAI。对于利用这个强大框架的开发者，我们将深入探讨将 CrewAI 集成到 Mesop UI 中的激动人心的可能性。

Mesop

如果你对 Mesop 不熟悉，可以查看我之前的教程或访问他们的 GitHub 页面 以获取全面的概述。

简而言之，Mesop 是一个用户友好的 Python 框架，旨在快速原型设计和测试基于 LLM 的应用程序。它提供了丰富的预构建组件库，使开发者能够以最小的努力构建直观的 UI。该框架由谷歌内部开发团队开源，并经过实际验证。

[使用 Mesop 创建多智能体应用程序，谷歌的新聊天 UI 框架

使用 Mesop 开发 AutoGen 应用程序的快速教程](https://levelup.gitconnected.com/create-a-multi-agent-app-with-mesop-a-new-chat-ui-framework-from-google-0c03b5e1d686)

CrewAI

对于不熟悉 CrewAI 的人来说，CrewAI 是另一个强大且实用的多智能体开发解决方案。

它专注于效率、明确的角色分配、确定性的交互以及与 LangChain 的无缝集成，使其成为寻求强大且可生产的框架的开发者的一个引人注目的选择。CrewAI 使开发者能够构建复杂的多智能体 LLM 应用程序，充分利用丰富的工具集和可靠的任务工作流。

本教程将演示如何构建一个简单的 Mesop 应用程序，利用 CrewAI 实现多智能体工作流。我们将创建一个聊天界面，用户可以输入一个主题，然后两个智能体——研究员和作家——将协作生成一篇技术博客文章，输出部分将包含所有智能体的推理过程。

Web 应用演示

代码讲解

让我们逐步分析代码。

0. 安装软件包（确保版本正确！）

到目前为止，Mesop 和 CrewAI 的最新版本之间仍存在版本冲突，因此我们必须安装 CrewAI 的版本不高于 0.30.8。

!pip install --upgrade crewai==0.30.8 mesop==0.12.0

1. 导入必要的库：

from crewai import Crew, Process, Agent, Task
from langchain_openai import ChatOpenAI
from langchain_core.callbacks import BaseCallbackHandler
from typing import Any, Dict, Optional

import mesop as me
import mesop.labs as mel

在这里，我们导入了 CrewAI 组件、用于 LLM 交互的 LangChain 以及自定义回调处理程序 Mesop 和它的实验性 “.labs” 方法。

2. 初始化智能体

llm = ChatOpenAI(model="gpt-4o", openai_api_key="sk-your-openai-key")

writer = Agent(
    role='Tech Writer',
    backstory='''你是一名技术作家，能够深入撰写技术博客文章。''',
    goal="撰写并迭代高质量的博客文章。",
    llm=llm,
    callbacks=[MyCustomHandler("Writer")],
)
researcher = Agent(
    role='Tech Researcher',
    backstory='''你是一名专业的技术主题研究员，擅长列出给定主题的潜在知识和趋势。''',
    goal="列出关于给定主题的关键知识和趋势。",
    llm=llm,
    callbacks=[MyCustomHandler("Researcher")],
)

作为第一步，我们初始化我们的语言模型（在此案例中为 GPT-4o），并定义两个智能体：writer 和 researcher。每个智能体都有特定的 role、backstory 和 goal，提供上下文并指导它们的行为。callbacks 参数确保自定义处理程序捕获它们的消息，这将在本项目中将智能体的输出重定向到 Mesop UI 聊天小部件的关键。

由于 callbacks 列表应包括在 LangChain 框架中定义的链，我们应该基于 LangChain 的内部类构建自己的自定义处理程序。

class MyCustomHandler(BaseCallbackHandler):
    def __init__(self, agent_name: str) -> None:
        self.agent_name = agent_name

    def on_chain_start(
        self, serialized: Dict[str, Any], inputs: Dict[str, Any], **kwargs: Any
    ) -> None:
        state = me.state(State)
        state.agent_messages.append(f"## Assistant: 
{inputs['input']}")

    def on_chain_end(self, outputs: Dict[str, Any], **kwargs: Any) -> None:
        state = me.state(State)
        state.agent_messages.append(f"## {self.agent_name}: 
{outputs['output']}")

这个自定义回调处理程序对于捕获和显示每个智能体在工作流中生成的中间消息至关重要。我们利用 on_chain_start() 和 on_chain_end() 方法从 BaseCallbackHandler 将消息附加到 state.agent_messages 列表中，基于工作流的不同阶段。这使我们能够在 Mesop UI 的 “Workflow” 部分可视化整个智能体的推理过程。

变量 state 及其成员 agent_messages 是由 Mesop 的装饰类 State() 创建的，后面章节将介绍它以及 Mesop 组件的整体描述。

3. 创建工作流

def StartCrew(prompt):
    
    task1 = Task(
      description=f"""列出关于给定主题的关键知识和趋势：{prompt}。""",
      agent=researcher,
      expected_output="关于需要改进的内置点。",
    )
    task2 = Task(
      description=f"""根据给定的研究结果，撰写关于 {prompt} 的博客文章。""",
      agent=writer,
      expected_output="一篇文章"
    )

    project_crew = Crew(
        tasks=[task1, task2],
        agents=[researcher, writer],
        manager_llm=llm,
        process=Process.sequential
    )

    result = project_crew.kickoff()

    return result

这个函数 StartCrew() 协调整个 CrewAI 工作流。它定义了两个任务：task1 让研究员收集信息，task2 让作家根据研究生成博客文章。然后，它创建一个包含这些任务和智能体的 Crew，指定一个 sequential 过程。kickoff 方法以同步过程启动工作流，最终结果将返回以显示在 “Output” 部分。

4. 构建 Mesop 页面

现在我们已经完成了 CrewAI 工作流的设置，接下来应该构建 Mesop 页面以促进多智能体工作流。

a) 定义状态类和样式：

@me.stateclass
class State:
    agent_messages: list[str]

_DEFAULT_BORDER = me.Border.all(
    me.BorderSide(color="#e0e0e0", width=1, style="solid")
)
_BOX_STYLE = me.Style(display="grid", border=_DEFAULT_BORDER,
                      padding=me.Padding.all(15),
                      overflow_y="scroll",
                      box_shadow=("0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f"),
                      )

这一部分定义了 State 类，它保存 agent_messages 列表以在网络会话中显示工作流。为了实现这一点，该类应在装饰器 me.stateclass 下定义。它还通过调用 me.Style() 方法包含 Mesop 组件的样式，确保界面视觉上吸引人。

b) 创建 Mesop 页面：

@me.page(
    security_policy=me.SecurityPolicy(
        allowed_iframe_parents=["https://google.github.io"]
    ),
    path="/crewai",
    title="CrewAI on Mesop",
)
def app():
    state = me.state(State)
    with me.box():
        mel.text_to_text(
            StartCrew,
            title="CrewAI Chat",
        )
    with me.box(style=_BOX_STYLE):
        me.text(text="Workflow...", type="headline-6")
        for message in state.agent_messages:
            with me.box(style=_BOX_STYLE):
                me.markdown(message)

最后，我们定义了 Mesop 页面，为用户在 “Input” 和 “Output” 部分之间的交互创建了一个 text-to-text 组件，并使用 me.markdown() 函数显示存储在 state.agent_messages 中的工作流消息。如果你读过我关于 AutoGen+Mesop 开发的最后一篇教程，你一定知道 text-to-text 组件。它是一个高级组件，抽象了构建基本文本生成 UI 的复杂性，使开发者的代码尽可能整洁。

text_to_text() 组件的第一个参数是处理用户输入的处理函数，输入参数传递给它，返回值将被显示。因此，在这里，我们将 StartCrew(prompt) 函数放入其中。

5. 运行测试

这段代码将 CrewAI 工作流和 Mesop UI 结合在一起，为我们的多智能体应用程序提供了用户友好的界面。

要运行代码，你需要将代码封装在一个 .py 文件中，例如 mesop_crewai.py，然后在控制台中运行 Mesop 命令。

mesop mesop_crewai.py

如果一切正常，你将看到以下日志打印：

然后你可以通过默认端口 32123 的 IP 地址访问你的 Web 应用。别忘了在 URL 后面加上 /your_path。在这个例子中，它是 http://localhost:32123/crewai，由 @me.page 装饰器中的 path="/crewai" 语句定义。

现在，轮到你使用这个易于使用的 UI 工具构建你自己的复杂多智能体应用程序了！

感谢你的阅读。如果你觉得这篇文章有帮助，请为这篇文章点赞 👏。你的鼓励和评论对我来说意义重大，无论是精神上还是经济上。🍔

在你离开之前：

✍️ 如果你有任何问题，请给我留言或在 X 和 Discord 上找到我，在那里你可以获得我在开发和部署方面的积极支持。

☕️ 如果你想获得独家资源和技术服务，订阅我在 Ko-fi 上的服务将是一个不错的选择。

💯 我也欢迎任何创新和全栈开发工作的聘用。