showcard
Agents could speak, and act.
Now they can show.
Agent 会说，也会做。
现在，它开始展示。
Generative UI, as easy to write as a Skill.
生成式 UI，像 Skill 一样好写。
Showcard is an open standard for interactive HTML cards. Create a Mini App that calls tools, saves its state, and travels as a file.
Showcard 是交互式 HTML 卡片的开放标准。做出一个能调用工具、保存状态、随时分享的 Mini App。
Straightforward, efficient generative UI.直白高效的生成式 UI
An Agent can create a Mini App in a single turn. With host capabilities, it can access websites, persist state, and live beyond the conversation.
Agent 能在一轮对话内生成 Mini App。接入宿主能力后，它就能访问网站、保存状态，并在对话结束后继续留存与使用。
Simple, yet powerful.简单，却强大。
As easy to author as a Skill, designed to cover 95% of everyday plugin work. Each card is an HTML package you can keep, share, version, and open again, across conversations and platforms.
像 Skill 一样好写，目标是承接 95% 的日常插件工作。每张卡片都是一份 HTML 包，可以保存、分享、管理版本，也可以跨越对话与平台，随时重新打开。
The same card does more, depending on where it lives.同一张卡，放的地方不同，能干的事不同。
-
L0
Any browser任意浏览器
Open a card in a browser to view and interact with it.
在浏览器中打开卡片，即可查看和交互。
-
L1
State host状态宿主
Your app implements the minimal state read/write, and the host controls how long the card’s state is kept.
你的应用实现最小的状态存取，状态保留多久由宿主决定。
-
L2
Gateway host网关宿主
Cards can now call the tools they declared — fetch a weather update, for example — and every single item is asked of you first, then remembered.
卡片能调用它声明过的工具了——比如取一次天气数据——每一项都先问过你，答过的记住。
-
L3
Full host完全宿主
A full agent app. Cards can be pinned as small resident apps, operated by the agent itself, and exported to share — each copy an independent fork.
完整的 Agent 应用。卡片能被钉成常驻的小应用、能被 Agent 直接操作、能随时导出分享——每份拷贝都是独立的拓本。
You control which tools and resources a card can access.
卡片能访问哪些工具和资源，由你决定。
Write a “plugin” in a minute一分钟写一个“插件”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tokyo Weather</title>
</head>
<body>
<script type="application/json" data-card-manifest>
{
"spec": "1.0",
"display": { "preferredWidthPx": 384 },
"toolBindings": {
"refresh": {
"tool": "fetch.request",
"input": { "hosts": ["api.example-weather.com"] },
"description": "Refresh the weather"
}
}
}
</script>
<style>
.wx { font: 15px/1.6 system-ui; padding: 12px 16px; }
.wx b { font-size: 1.6rem; }
</style>
<div class="wx">
<h3>Tokyo Weather</h3>
<p><b><output data-persist="temp">23°C</output></b>
<span data-persist="cond">Cloudy</span></p>
<button data-invoke="refresh" data-result="refresh">Refresh</button>
</div>
</body>
</html>Validate the card:
检查卡片：
node conformance/bin/check-card.mjs my-card.card.htmlNot one line of JavaScript — three declarative markers do the wiring.
一行 JavaScript 都没有——三个声明式标记完成全部接线。
Build and test your host.接入并验证。
Build on the reference host, then test your implementation with the conformance suite.
Questions几个问题
Is this another plugin system?这是不是又一个插件系统？
No. There is nothing to install and no registry to join. A card is a document — it opens like one, travels like one, and is inspected like one.
不是。没有东西要安装，也没有市场要入驻。卡片是一份文档——像文档一样打开、像文档一样传递、像文档一样被审视。
How does it relate to plugins and Skills?它和插件、Skill 是什么关系？
A Skill teaches an Agent what to do. Showcard gives the result an interactive interface connected to the Agent’s tools.
Skill 教 Agent 做事，Showcard 为成果提供交互界面，并连接 Agent 的工具。
What can a card do without a host?没有宿主它能干嘛？
View and interact with the card. Features that require host tools remain unavailable.
查看和操作卡片。依赖宿主工具的功能暂不可用。
Can a card reach the network, or my files?卡片能碰网络或我的文件吗？
Access requires your permission. You can revoke it at any time.
访问需要你的授权，你可以随时撤销。
Can I build a host?我能实现一个宿主吗？
Follow the host integration guide to add Showcard to your Agent.
按照宿主接入指南，为你的 Agent 添加 Showcard 支持。