利用AI代理最大化您的生产力

在第十届React Summit上，演讲者分享了其在网络领域超过二十年的经验，目前专注于数据栈公司（现已被IBM收购）的生成式AI开发者关系工作。本次演讲的核心议题是探讨如何利用AI代理最大化个人和团队的生产力。生产力从基本原理上讲，是完成任务的能力。在技术出现之前，人们通过呼叫旅行代理或酒店代理来完成预订，这种模式的效率瓶颈在于人力本身。

网络是当今最常用的界面，而React是构建用户界面的核心库。然而，用户界面（UI）只是实现用户体验（UX）的手段。开发者在构建界面时所做的决策，如使用按钮和`div`，会直接影响用户体验。这种影响是巨大的，因为开发者实际上是在决定他人的生活体验质量。

作为开发者，我们所做的决定直接影响他人的生活。是否理解这责任有多大？这是一个重大的责任。

当前常见的UX问题是等待AI模型返回完整响应。例如，一次搜索可能需要等待长达7秒才能显示结果。为了解决这种延迟，可以采用流式传输技术，即不再等待`response.json()`，而是使用`for await (const chunk of response)`来增量更新状态，从而显著改善用户感知到的性能。

一次出色的用户体验胜利就是流式传输，对吗？

演讲者对本次会议的场地表示赞赏，指出其拥有会议后供参会者交流讨论的房间，并认为这是其多年演讲经历中遇到的最佳会议场地之一。

流处理涉及将响应体视为流，使用读取器（reader）和文本解码器将二进制信息解码为文本。处理过程需要递归调用读取函数，直到读取完成，否则会持续接收数据块（chunks）。这种机制允许应用程序在数据到达时就开始处理，而不是等待整个响应体。

在Web开发中，数据通常以JSON格式交换。然而，标准的JSON格式无法进行增量解析，因为解析器必须等待整个结构（如数组或对象）闭合才能成功解析。为了解决此问题，需要采用一种新的数据格式，即换行符分隔的JSON（NDJSON）。

NDJSON格式的优势在于每行包含一个完整的JSON对象，这使得客户端可以逐行处理数据流。服务器端需要确保输出符合此格式，即响应只包含NDJSON。在客户端，虽然可以立即记录每个接收到的块，但仍需确保块内容是可解析的完整JSON对象。

为了在服务器端实现可靠的流式JSON发送，可以累积接收到的块内容，直到检测到换行符。一旦检测到换行符，表明一个完整的对象已经构建完毕，此时应将该对象写入流中并重置累积器。这种方法保证了即使在流式传输过程中，发送到客户端的数据块也都是格式正确的JSON对象。

当服务器端成功实现NDJSON流式输出后，客户端可以接收到完美的JSON块，从而可以直接在客户端进行解析。这意味着可以将原本用于显示搜索结果的`div`替换为更具语义化的结构，例如无序列表（`ul`）或有序列表（`ol`）。这种方式将UI的构建与数据流紧密结合起来。

一个重要的洞察是，DOM（文档对象模型）本身就是一种结构化数据，可以被视为JSON。理论上，可以将DOM结构以流式方式返回，从而构建高度交互的UI。例如，在Movies++项目中，返回的JSON实际上是React元素结构，客户端的React库能够识别并渲染这些元素，实现完全的交互性，包括响应光标和播放媒体内容。

通过将UI的结构（如React元素）作为流式JSON返回，可以实现语义化搜索等高级AI功能。当用户查询“具有强大女性主角的电影”时，代理不仅返回结果列表，还能直接在界面中嵌入播放器，播放电影预告片，极大地提升了用户体验的沉浸感和效率。

AI代理被定义为能够倾听指令并代表用户执行操作的实体。当前的网络环境对用户而言往往是混乱且不可预测的，因为不同开发团队的实现质量参差不齐，导致用户体验波动。代理的目标是提供一个一致的、高生产力的交互层，使用户不必适应每个网站的特定UI缺陷。

许多网站的界面设计存在可用性问题，例如复杂的列表导航或不直观的交互元素，这会造成认知负担，降低用户生产力。例如，在某个食谱网站上，点击复选框或关闭按钮需要精确对准特定区域，否则操作无效。AI代理可以抽象化这些底层UI的复杂性。

你永远不知道。这太糟糕了，以至于欧盟不得不通过立法来强制我们做出可访问的东西，否则我们将面临巨额罚款。让这件事沉淀一下。

为了构建能够导航网络的代理，可以使用Langflow。Langflow是一个开源工具，它允许用户以可视化的方式创建AI代理，无需编写代码。构建代理需要定义输入、输出，集成LLM（如OpenAI），并为其提供工具，例如访问特定URL（如React Summit日程表）的能力。

并非所有用户都会自托管Langflow。模型上下文协议（MCP）提供了一种客户端-服务器架构，允许外部客户端（如ChatGPT或Claude Desktop）通过与MCP服务器通信来获取新工具和能力。演讲者将Langflow代理发布为一个MCP服务器，并调整了描述，使其客户端能够识别并使用该日程查询工具。

为了进一步最大化生产力，可以创建第二个工具：Google日历管理器代理。该代理利用Composeio提供的Google日历工具，并将其封装为MCP服务器。用户可以直接通过代理指令，例如查询某人的演讲时间并将其添加到自己的日历中，并邀请同事参与。

在现场演示中，日历事件的创建功能遇到了故障，尽管工具已被添加并暴露。这突显了实时演示中调试的挑战。经过一番尝试和重启后，代理最终成功获取了日程信息并完成了添加操作，证明了即使在复杂的跨工具集成中，代理流程也是可行的。

总结来看，UX正在发生深刻变化。随着代理能够自主浏览互联网并提供信息，传统的浏览器作为信息获取入口的必要性可能会降低。演讲者鼓励对Langflow感兴趣的人士进行探索，并推广了自己主持的、专注于AI和React的长篇播客。

在问答环节，演讲者确认日历代理最终成功运行，这带来了极大的满足感。当被问及最喜欢的代理类型时，演讲者表示更倾向于使用AI进行网络浏览，而非纯粹的代码生成代理（如Cursor）。这是因为网络界面（如轮播图、广告）的混乱特性使得代理导航成为一个高价值的应用场景。

处理流式响应中的嵌套对象和确保块的正确性，推荐使用Zod库进行严格的Schema验证。在服务器端，应当使用`try-catch`块，只有在JSON解析成功后才将数据发送出去。如果连续重试验证失败，则需要明确地向客户端发送无法处理的信号。

演讲者分享了其播客的自动化流程：当嘉宾通过Cal.com安排会议时，Webhook会触发一个代理。该代理负责进行背景调查、创建讨论大纲的Google文档，确保了录制阶段的高效性。后期制作的大部分工作也是由代理完成的，只有大型视频文件的上传需要人工干预。

在流式UI组件构建中，AI不应负责组件本身的结构，因为这会带来不可预测性。开发者应预先编写好React元素（即组件的标记结构）。LLM的作用是根据自然语言输入，动态生成组件所需的属性（props），例如电影标题和URL，这些属性随后被注入到预先定义好的组件结构中。

你永远不希望组件是由AI构建的，因为它不可预测。所以它是预先构建好的。

对于Langflow的工作流编辑器引擎，它基于React Flow构建，是一个高度打磨的React应用。在调试方面，Langflow作为服务器，其日志可以通过Sentry或LangSmith等可观测性工具导出和分析。关于AI在编码中的参与度，演讲者表示享受手动编码的过程，但会使用AI来生成复杂的正则表达式等特定任务。

Langflow与N8N的主要区别在于设计哲学。Langflow从第一天起就是为AI代理优先（Agent-first）的应用而构建的，具有更好的第一类支持。而N8N传统上是一个工作流引擎，AI功能是后来附加的，因此在AI原生支持方面存在关键区别。