Build Custom Site Annotations with ChatGPT
介绍ChatGPT应用新增WebMCP工具与注解扩展,演示如何让网站支持AI代理操作。
快捷键:空格 播放 / 暂停 ← → 上一句 / 下一句 R 重播这句 L 单句循环
We recently added support in the ChatGPT app for WebMCP tools.
我们最近在 ChatGPT 应用里加入了对 WebMCP 工具的支持。
These are actions that you expose on your website to be available to agents, like searching a catalog or updating something on the page.
这些是你在自己网站上开放出来、供智能体使用的操作,比如搜索商品目录,或者更新页面上的某些内容。
You might also be familiar with annotations already.
你可能已经对标注(annotations)比较熟悉了。
They're a way for you to point at something specific on a page and ask ChatGPT to change it.
它们让你可以指向页面上某个具体的东西,然后让 ChatGPT 去修改它。
Well now, we've extended annotations to be more useful to your users.
而现在,我们扩展了标注功能,让它对用户更有用。
As a developer, you can create custom controls for these annotations and you can also trigger them programmatically with suggested prompts to help users discover what they can do on your page.
作为开发者,你可以为这些标注创建自定义控件,也可以通过建议提示词以编程方式触发它们,帮助用户发现他们能在你的页面上做什么。
Combined with WebMCP tools, custom annotations make your app more agent-friendly.
结合 WebMCP 工具,自定义标注能让你的应用对智能体更友好。
Your users can now use the ChatGPT app to perform these actions right from the in-app browser.
你的用户现在可以直接在应用内浏览器里,用 ChatGPT 应用执行这些操作。
Let me show you a couple examples.
我来给你看几个例子。
Okay, so here, let's say you want to edit the scene without having to go through the catalog and find items and drag things yourself.
好,那么这里,假设你想编辑场景,但又不想自己去翻目录、找物品、拖来拖去。
With WebMCP, you can already ask ChatGPT to edit things for you.
有了 WebMCP,你已经可以让 ChatGPT 帮你编辑东西了。
But annotations give you a better idea of what's possible.
但标注能让你更清楚地知道有哪些可能性。
For example, if I click on this in annotation mode, the custom controls give me an easy way to swap with similar items, or if I click here, I have a picker for the color.
比如,如果我在标注模式下点这个,自定义控件就让我能轻松换成相似的物品;或者我点这里,就有一个颜色选择器。
This is all defined in the site's code as HTML attributes or JavaScript.
这些都是在网站代码里用 HTML 属性或 JavaScript 定义的。
And it pairs well with WebMCP tools because it gives ChatGPT additional context about what I'm clicking on and what I want to do.
而且它和 WebMCP 工具配合得很好,因为它给 ChatGPT 提供了额外的上下文,让它知道我点击的是什么、我想做什么。
But the real power of WebMCP is that a user's agent knows its specific context, so you can use tools to interact with the site leveraging that context.
但 WebMCP 真正的强大之处在于,用户的 agent 了解自己的具体上下文,所以你可以利用这些上下文,用工具与网站进行交互。
And with annotation extensibility, you can also suggest prompts for the user to try with their agent.
通过标注扩展功能,你还可以向用户推荐一些提示词,让他们用自己的 agent 试试。
For example, here I'm on an app that lists my expenses and I can click here and get a suggested prompt for ChatGPT to search through my app and find context on this expense that the site doesn't have, and then it can add the right metadata through the provided WebMCP tool.
举个例子,我现在在一个列出我开支的应用上,我可以点这里,得到一个推荐给 ChatGPT 的提示词,让它搜索我的应用,找到这个网站没有的关于这笔开支的上下文,然后它可以通过提供的 WebMCP 工具添加正确的元数据。
The user's agent has context on their preferences, can access their data through plugins, and more generally, it knows the user much better than your site ever will.
用户的 agent 了解他们的偏好,可以通过插件访问他们的数据,而且更普遍地说,它比你网站更了解用户。
So as more people use agents on the web, build your app to work well with them.
所以随着越来越多人在网上使用 agent,把你的应用做得能和它们良好配合吧。
With annotation extensibility, you can steer the user and agent and show them what's possible on your site, through custom controls or suggested prompts.
通过标注扩展功能,你可以引导用户和 agent,通过自定义控件或推荐提示词,向他们展示你的网站能做什么。
With this feature, we're opening up new ways for people to use the web with their agent, helping them go from what they want to do on a web app to getting it done.
有了这个功能,我们为人们用 agent 上网开辟了新方式,帮助他们从想在网上应用里做什么,到真正把它完成。
— 共 22 句 —