如何使用画布构建交互式体验

大多数开发者现在都在与 agent 协同工作，或者至少熟悉如何这样做。Agent 能帮助你探索想法并将其转化为行动，从规划项目到自动化工作流。通常，一次对话就足以推动你的工作进展。但那些不太适合对话模式的任务呢？有些任务在你能够看到并交互信息时会更容易完成。你可能需要分类积压任务、可视化复杂信息，或者将来自多个来源的信息整合在一起。可视化界面能让你更容易理解模式、发现关联并采取行动。与其通过一长串提示和响应来工作，不如使用画布直接与眼前的信息进行交互。

使用画布

这些共享的交互式界面是 Copilot 应用的扩展，称为画布。画布是 GitHub Copilot 应用中的一个界面，开发者和 agent 可以在其中实时协作。这些共享的交互式界面被称为画布扩展。Agent 可以在工作时更新画布，而你可以通过点击、编辑和其他操作与同一个工作区进行交互。你的交互可以发送回 agent，也可以由画布在本地处理。你可以通过要求 Copilot 迭代你的画布来持续塑造体验——添加新功能、优化现有功能等等。画布可以随着你的工作一起演进。

要创建画布，请在 GitHub Copilot 应用的 agent 会话中使用 /create-canvas，然后描述你希望它创建什么以及它应该支持哪些功能。由于画布是根据提示生成的，并随着你的工作流一起演进，它们可以呈现多种形式。有些帮助你可视化信息，有些帮助你采取行动，还有一些则提供更有趣的方式来处理你的积压任务。

以下是画布扩展可以实现的一些示例：

Issue 分类助手

目标：以快速、可视化的方式对 GitHub Issues 进行分类。

提示：/create-canvas 创建一个界面，让我能够以卡片格式轻松滑动浏览仓库中的 issue。向右滑动表示发布，向左滑动表示拒绝。

结果：画布显示一个基于卡片的界面，每个 issue 一次只显示一个。你可以直接从 UI 中采取行动。当你滑动时，画布会实时更新，跟踪决策并将项目移动到相应的分类中。

交互式代码库图

目标：可视化项目的结构及其组件之间的关系。

提示：/create-canvas 渲染一个色彩丰富、可交互的图表，展示该项目中的代码如何协同工作，显示事物之间的关联等。

结果：画布生成一个动态的代码库图，每个节点代表系统的不同部分。你可以悬停、拖拽和过滤来探索不同的层级。你可以直接与架构进行交互，将对代码库的静态理解转变为可以主动探索的内容。

会话工作树视图

目标：可视化所有活跃的 GitHub Copilot 应用会话及其关联的 git 工作树，清晰指示哪些是活跃的，哪些是过时的，并能够在需要时轻松清理。

提示：/create-canvas 创建一个工作树视图，帮助我查看所有当前会话，并判断它们是活跃的还是孤立的。允许我在需要时通过几次点击进行清理。

结果：画布生成一个可视化视图，显示我的工作树，并清晰指示哪些是活跃的，哪些是过时或孤立的。我可以通过点击按钮来清理过时的工作树。

Agent 提示教练

目标：通过回顾过去的交互，建议更清晰、更有效的与 agent 协作方式，从而提高提示质量。

提示：/create-canvas 创建一个交互式提示教练，建议我如何在之前的会话中利用技能、MCP 服务器等改进提示。注意任何拼写错误、语法错误等。

结果：画布显示一个之前的提示列表，并分析每个提示，建议改进之处，例如缺失的上下文、拼写问题等。你可以使用这些技巧来优化未来的提示，提高清晰度，并从 agent 那里获得更一致的结果。

知识查找器

目标：通过搜索 Slack、Teams、电子邮件和文档，找到对特定文件或主题有上下文了解的人。

提示：/create-canvas 创建一种方式，让我可以跨 Slack、Teams、电子邮件和文档进行搜索，找到对特定文件有了解或拥有更多上下文的人。

结果：基于搜索，画布会跨多个工具进行查找，并展示与给定文件或主题关联最紧密的人。它会突出显示这个人是谁，以及在哪里找到了关联。这让你能够快速了解某人与某个主题的关联，并更容易联系他们以获取更多信息。

带着这些继续前行

这些示例只是画布所能实现功能的冰山一角。画布可以将 AI 从对话工具转变为一个你可以可视化信息、探索不同工作流，并将枯燥任务变成你真正愿意完成的愉快体验的地方。画布是一个有趣、共享的工作区，你和 agent 可以在这里一起思考、探索和行动。

想尝试画布扩展吗？你可以从 GitHub Copilot 应用开始。阅读文档了解更多信息。

原文《How to build interactive experiences with canvases》首次出现在 GitHub Blog 上。