This commit is contained in:
2026-06-14 15:01:42 +08:00
parent 67d79b58bb
commit 6f39b960d0
15 changed files with 1709 additions and 76 deletions
+583
View File
@@ -0,0 +1,583 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Part 2 Demo - Agentic Web</title>
<style>
:root {
color-scheme: light;
--ink: #17202a;
--muted: #64717f;
--line: #d9e1e8;
--panel: #f7f9fb;
--paper: #ffffff;
--blue: #2357d4;
--green: #0f7d58;
--amber: #aa6a00;
--red: #bb3e37;
--violet: #5d4cc2;
--shadow: 0 18px 60px rgb(45 62 80 / 0.13);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family:
ui-sans-serif,
"PingFang SC",
"Microsoft YaHei",
"Noto Sans SC",
sans-serif;
color: var(--ink);
background:
linear-gradient(90deg, rgb(23 32 42 / 0.05) 1px, transparent 1px),
linear-gradient(rgb(23 32 42 / 0.05) 1px, transparent 1px),
#eef3f7;
background-size: 32px 32px;
}
a {
color: inherit;
text-decoration: none;
}
.shell {
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: 24px;
min-height: 100vh;
padding: 28px;
}
.rail,
.stage {
border: 1px solid var(--line);
background: rgb(255 255 255 / 0.88);
box-shadow: var(--shadow);
}
.rail {
position: sticky;
top: 28px;
align-self: start;
min-height: calc(100vh - 56px);
padding: 24px;
}
.eyebrow {
margin: 0 0 12px;
color: var(--blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1 {
max-width: 11ch;
margin-bottom: 18px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(42px, 5vw, 74px);
line-height: 0.92;
letter-spacing: 0;
}
.lead {
color: var(--muted);
font-size: 16px;
line-height: 1.75;
}
.quick {
display: grid;
gap: 10px;
margin: 26px 0;
}
.quick button {
width: 100%;
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink);
cursor: pointer;
display: grid;
grid-template-columns: 26px 1fr;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
text-align: left;
font: inherit;
}
.quick button:hover,
.quick button.active {
border-color: var(--blue);
background: #eef4ff;
}
.num {
display: grid;
place-items: center;
width: 26px;
height: 26px;
background: var(--ink);
color: white;
font-size: 12px;
font-weight: 800;
}
.note {
border-left: 4px solid var(--amber);
padding: 12px 14px;
background: #fff7e8;
color: #6f4b12;
font-size: 13px;
line-height: 1.65;
}
.stage {
padding: 28px;
}
.hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 22px;
align-items: stretch;
margin-bottom: 24px;
}
.statement {
min-height: 280px;
padding: 28px;
color: white;
background:
linear-gradient(135deg, rgb(23 32 42 / 0.94), rgb(35 87 212 / 0.82)),
radial-gradient(circle at 15% 20%, rgb(255 255 255 / 0.18), transparent 28%);
}
.statement h2 {
max-width: 720px;
margin-bottom: 18px;
font-size: clamp(28px, 4vw, 54px);
line-height: 1.02;
}
.statement p {
max-width: 760px;
color: rgb(255 255 255 / 0.78);
font-size: 17px;
line-height: 1.75;
}
.metric-grid {
display: grid;
gap: 12px;
}
.metric {
border: 1px solid var(--line);
background: var(--panel);
padding: 18px;
}
.metric strong {
display: block;
margin-bottom: 4px;
font-size: 28px;
}
.metric span {
color: var(--muted);
font-size: 13px;
}
.section {
margin-top: 24px;
}
.section h2 {
margin-bottom: 12px;
font-size: 26px;
}
.cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.path-card,
.resource-card {
border: 1px solid var(--line);
background: var(--paper);
padding: 18px;
}
.path-card {
min-height: 250px;
}
.tag {
display: inline-flex;
align-items: center;
min-height: 24px;
margin-bottom: 14px;
padding: 3px 9px;
color: white;
font-size: 12px;
font-weight: 800;
}
.tag.red {
background: var(--red);
}
.tag.green {
background: var(--green);
}
.tag.blue {
background: var(--blue);
}
.tag.violet {
background: var(--violet);
}
.path-card h3,
.resource-card h3 {
margin-bottom: 8px;
font-size: 20px;
}
.path-card p,
.resource-card p {
color: var(--muted);
line-height: 1.65;
}
.path-card ul {
margin: 14px 0 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.7;
}
.table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
background: var(--paper);
}
.table th,
.table td {
border: 1px solid var(--line);
padding: 14px;
text-align: left;
vertical-align: top;
}
.table th {
background: var(--ink);
color: white;
font-size: 13px;
}
.table td {
color: var(--muted);
line-height: 1.55;
}
.resources {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.resource-card {
position: relative;
min-height: 165px;
transition:
transform 160ms ease,
box-shadow 160ms ease;
}
.resource-card:hover {
box-shadow: 0 12px 32px rgb(35 87 212 / 0.13);
transform: translateY(-2px);
}
.resource-card .url {
color: var(--blue);
font-size: 13px;
overflow-wrap: anywhere;
}
.fallback {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.fallback > div {
border: 1px solid var(--line);
padding: 18px;
background: var(--panel);
}
.fallback h3 {
margin-bottom: 8px;
}
.fallback p {
color: var(--muted);
line-height: 1.65;
}
@media (max-width: 980px) {
.shell,
.hero,
.fallback {
grid-template-columns: 1fr;
}
.rail {
position: static;
min-height: auto;
}
.cards,
.resources {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<main class="shell">
<aside class="rail">
<p class="eyebrow">Part 2 Demo Desk</p>
<h1>Agentic Web</h1>
<p class="lead">
官方 demo 优先,本地页面只负责串联叙事和兜底。现场不依赖实验 flags,也不复刻所有 Chrome API。
</p>
<nav class="quick" aria-label="Demo sections">
<button class="active" data-target="paths"><span class="num">1</span><span>三种操作路径</span></button>
<button data-target="webmcp"><span class="num">2</span><span>WebMCP 可运行 demo</span></button>
<button data-target="resources"><span class="num">3</span><span>官方 demo 资料</span></button>
<button data-target="fallback"><span class="num">4</span><span>现场兜底讲法</span></button>
</nav>
<div class="note">
讲述原则:案例数据只说明趋势,不代表所有项目;实验能力必须标注支持边界和渐进增强。
</div>
</aside>
<section class="stage">
<div class="hero">
<section class="statement">
<p class="eyebrow">Core Message</p>
<h2>从“AI 猜 UI”到“网页暴露工具”。</h2>
<p>
视觉识别和 DOM 识别让 Agent 尝试理解页面表象;WebMCP 的方向是让页面主动提供结构化能力,
让 Agent 调用工具、传入参数、拿到结果。
</p>
</section>
<aside class="metric-grid" aria-label="Demo principles">
<div class="metric">
<strong>官方</strong>
<span>优先展示 Chrome 官方文档、demo 和命令示例</span>
</div>
<div class="metric">
<strong>本地</strong>
<span>WebMCP 提供可运行工程,其他实验能力用官方 demo 快闪</span>
</div>
<div class="metric">
<strong>15 分钟</strong>
<span>建议 demo 段控制在 12-15 分钟</span>
</div>
</aside>
</div>
<section id="paths" class="section">
<h2>同一个后台任务,三种 Agent 操作路径</h2>
<div class="cards">
<article class="path-card">
<span class="tag red">Vision</span>
<h3>看截图</h3>
<p>Agent 通过视觉模型识别菜单、按钮、输入框,再一步步点击。</p>
<ul>
<li>优点:不需要改造页面</li>
<li>风险:慢、贵、UI 变化敏感</li>
<li>适合:临时探索和低风险页面</li>
</ul>
</article>
<article class="path-card">
<span class="tag green">DOM / A11y</span>
<h3>读结构</h3>
<p>Agent 读取 DOM 或可访问性树,通过结构化信息定位交互元素。</p>
<ul>
<li>优点:比截图更结构化</li>
<li>风险:复杂组件和隐藏状态仍会误导</li>
<li>适合:语义清晰的表单页面</li>
</ul>
</article>
<article class="path-card">
<span class="tag blue">WebMCP</span>
<h3>调工具</h3>
<p>页面暴露工具名、描述、参数 schema 和执行逻辑,Agent 直接调用业务能力。</p>
<ul>
<li>优点:语义明确、速度快、过程可控</li>
<li>风险:仍需权限、确认和审计边界</li>
<li>适合:复杂后台和重复流程</li>
</ul>
</article>
</div>
</section>
<section class="section">
<h2>对比讲述表</h2>
<table class="table">
<thead>
<tr>
<th>维度</th>
<th>视觉识别</th>
<th>DOM / A11y</th>
<th>WebMCP</th>
</tr>
</thead>
<tbody>
<tr>
<td>交互方式</td>
<td>观察截图后猜测点击位置</td>
<td>读取结构后定位元素</td>
<td>调用页面声明的语义工具</td>
</tr>
<tr>
<td>稳定性</td>
<td>受视觉布局影响明显</td>
<td>受 DOM 结构和组件状态影响</td>
<td>受工具设计、权限和业务逻辑影响</td>
</tr>
<tr>
<td>现场讲法</td>
<td>“像让 AI 蒙着眼睛找按钮”</td>
<td>“给了地图,但地图可能不完整”</td>
<td>“给了工具入口和参数说明”</td>
</tr>
</tbody>
</table>
</section>
<section id="webmcp" class="section">
<h2>WebMCP 原始工程 demo</h2>
<div class="fallback">
<div>
<h3>运行入口</h3>
<p>
打开 <a href="./webmcp/index.html">/demo/webmcp/index.html</a>,展示声明式表单工具、
指令式 JS 工具、工具 schema 面板和复合任务调用日志。
</p>
</div>
<div>
<h3>讲述重点</h3>
<p>
先让人提交表单,再让工具面板执行同一类任务。观众会看到 Agent 不需要猜 UI,
它看到的是工具名、描述、参数 schema 和执行结果。
</p>
</div>
</div>
</section>
<section id="resources" class="section">
<h2>官方 demo 与资料入口</h2>
<div class="resources">
<a class="resource-card" href="https://developer.chrome.com/docs/ai/webmcp/imperative-api" target="_blank" rel="noreferrer">
<span class="tag blue">WebMCP</span>
<h3>Imperative API</h3>
<p>使用 document.modelContext.registerTool 暴露工具,官方示例包含 pizza layer 和 order status。</p>
<div class="url">developer.chrome.com/docs/ai/webmcp/imperative-api</div>
</a>
<a class="resource-card" href="https://developer.chrome.com/docs/modern-web-guidance" target="_blank" rel="noreferrer">
<span class="tag green">MWG</span>
<h3>Modern Web Guidance</h3>
<p>给 AI 编程工具补充现代 Web 知识、兼容性和最佳实践。</p>
<div class="url">developer.chrome.com/docs/modern-web-guidance</div>
</a>
<a class="resource-card" href="https://developer.chrome.com/docs/devtools/agents/get-started" target="_blank" rel="noreferrer">
<span class="tag violet">DevTools</span>
<h3>Chrome DevTools for agents</h3>
<p>让 coding agent 访问真实浏览器、console、network、performance trace 和 Lighthouse。</p>
<div class="url">developer.chrome.com/docs/devtools/agents/get-started</div>
</a>
<a class="resource-card" href="https://developer.chrome.com/docs/ai/prompt-api" target="_blank" rel="noreferrer">
<span class="tag blue">Prompt API</span>
<h3>Built-in AI</h3>
<p>浏览器内置语言模型能力,适合作为渐进增强展示。</p>
<div class="url">developer.chrome.com/docs/ai/prompt-api</div>
</a>
<a class="resource-card" href="https://developer.chrome.com/blog/html-in-canvas-origin-trial" target="_blank" rel="noreferrer">
<span class="tag red">Canvas</span>
<h3>HTML-in-Canvas</h3>
<p>把真实 DOM 放入 Canvas / WebGL / WebGPU 场景,同时保留浏览器能力。</p>
<div class="url">developer.chrome.com/blog/html-in-canvas-origin-trial</div>
</a>
<a class="resource-card" href="https://view-transitions.chrome.dev/" target="_blank" rel="noreferrer">
<span class="tag green">UX</span>
<h3>View Transitions</h3>
<p>官方交互 demo,用于快闪展示 Web 体验能力升级。</p>
<div class="url">view-transitions.chrome.dev</div>
</a>
</div>
</section>
<section id="fallback" class="section">
<h2>现场兜底讲法</h2>
<div class="fallback">
<div>
<h3>如果官方 demo 打不开</h3>
<p>
继续使用本页的卡片和对比表讲主线:AI 不擅长猜复杂 UI,WebMCP 的价值是结构化暴露工具。
官方链接可作为会后资料。
</p>
</div>
<div>
<h3>如果有人追问落地</h3>
<p>
只回答原则:渐进增强、权限继承、高危确认、审计日志、工具按需暴露。
不在本场扩展到厂商 SDK 选型和企业架构。
</p>
</div>
</div>
</section>
</section>
</main>
<script>
const buttons = Array.from(document.querySelectorAll(".quick button"));
buttons.forEach((button) => {
button.addEventListener("click", () => {
buttons.forEach((item) => item.classList.remove("active"));
button.classList.add("active");
document.getElementById(button.dataset.target)?.scrollIntoView({
behavior: "smooth",
block: "start",
});
});
});
</script>
</body>
</html>
+277
View File
@@ -0,0 +1,277 @@
const logEl = document.querySelector("#log");
const toolListEl = document.querySelector("#tool-list");
const nativeStatusEl = document.querySelector("#native-status");
const orderStateEl = document.querySelector("#order-state");
const nativeModelContext = window.navigator.modelContext;
const registry = new Map();
const demoOrders = {
"CHR-2026-0614": {
orderId: "CHR-2026-0614",
status: "delivered",
risk: "missing_accessory",
customerTier: "enterprise",
nextAction: "open_refund_review",
},
};
const modelContext = nativeModelContext ?? createMockModelContext();
nativeStatusEl.textContent = nativeModelContext
? "Native WebMCP detected"
: "Mock WebMCP runtime";
nativeStatusEl.className = `pill ${nativeModelContext ? "native" : "mock"}`;
registerDeclarativeForms();
registerImperativeTools();
renderTools();
log("runtime.ready", {
nativeWebMcp: Boolean(nativeModelContext),
registeredTools: Array.from(registry.keys()),
});
document.querySelector("#ticket-form").addEventListener("submit", async (event) => {
event.preventDefault();
const form = event.currentTarget;
const toolName = form.getAttribute("toolname");
const payload = Object.fromEntries(new FormData(form).entries());
const result = await runTool(toolName, payload);
log("form.submit", result);
});
document.querySelectorAll("[data-run-tool]").forEach((button) => {
button.addEventListener("click", async () => {
const name = button.getAttribute("data-run-tool");
const input = sampleInputFor(name);
const result = await runTool(name, input);
log(`tool.${name}`, result);
});
});
document.querySelector("#run-workflow").addEventListener("click", async () => {
log("agent.plan", {
task: "客户反馈缺少配件,请查询订单、判断是否进入退款审核,并生成回复草稿。",
});
const order = await runTool("lookup_order_status", { orderId: "CHR-2026-0614" });
const refund = await runTool("approve_refund_review", {
orderId: order.orderId,
reason: "missing_accessory",
});
const reply = await runTool("draft_customer_reply", {
email: "dev@example.com",
category: "refund",
orderId: order.orderId,
});
log("agent.workflow.complete", { order, refund, reply });
});
function createMockModelContext() {
return {
registerTool(tool) {
registry.set(tool.name, tool);
return Promise.resolve({ name: tool.name, mock: true });
},
};
}
function registerDeclarativeForms() {
document.querySelectorAll("form[toolname]").forEach((form) => {
const name = form.getAttribute("toolname");
const description = form.getAttribute("tooldescription") || `Submit ${name}`;
const inputSchema = schemaFromForm(form);
registerTool({
source: "declarative",
name,
description,
inputSchema,
execute: async (input) => {
const ticketId = `SUP-${Date.now().toString().slice(-6)}`;
return {
ticketId,
status: "created",
summary: `${input.category} issue for ${input.email}`,
visibleUpdate: "工单已创建,页面保留原有人类操作流程。",
};
},
});
});
}
function registerImperativeTools() {
registerTool({
source: "imperative",
name: "lookup_order_status",
description: "Look up order status, risk and recommended next action by order id.",
inputSchema: {
type: "object",
properties: {
orderId: { type: "string", description: "Order id shown in the support workspace." },
},
required: ["orderId"],
},
execute: async ({ orderId }) => {
const order = demoOrders[orderId] ?? {
orderId,
status: "unknown",
risk: "not_found",
customerTier: "unknown",
nextAction: "ask_user_for_more_information",
};
orderStateEl.textContent = order.nextAction;
return order;
},
});
registerTool({
source: "imperative",
name: "approve_refund_review",
description: "Move an eligible order into refund review after checking business policy.",
inputSchema: {
type: "object",
properties: {
orderId: { type: "string" },
reason: {
type: "string",
enum: ["missing_accessory", "damaged_item", "delivery_delay"],
},
},
required: ["orderId", "reason"],
},
execute: async ({ orderId, reason }) => {
orderStateEl.textContent = "已进入退款审核";
return {
orderId,
reason,
approvedForReview: true,
needsHumanConfirmation: true,
message: "敏感动作只进入审核,不直接退款。",
};
},
});
registerTool({
source: "imperative",
name: "draft_customer_reply",
description: "Draft a support reply based on customer issue category and order id.",
inputSchema: {
type: "object",
properties: {
email: { type: "string", format: "email" },
category: { type: "string", enum: ["refund", "delivery", "account"] },
orderId: { type: "string" },
},
required: ["email", "category", "orderId"],
},
execute: async ({ email, category, orderId }) => ({
to: email,
category,
orderId,
draft:
"我们已经定位到该订单的缺件问题,并将它提交到退款审核。审核完成前不会自动扣改账户,请等待人工确认。",
}),
});
}
function registerTool(tool) {
registry.set(tool.name, tool);
const nativePayload = {
name: tool.name,
description: tool.description,
inputSchema: tool.inputSchema,
execute: tool.execute,
};
try {
modelContext.registerTool(nativePayload);
} catch (error) {
log("register.error", { tool: tool.name, message: error.message });
}
}
async function runTool(name, input) {
const tool = registry.get(name);
if (!tool) {
throw new Error(`Unknown tool: ${name}`);
}
const result = await tool.execute(input);
return { tool: name, input, output: result };
}
function schemaFromForm(form) {
const properties = {};
const required = [];
form.querySelectorAll("input[name], select[name], textarea[name]").forEach((field) => {
const name = field.getAttribute("name");
properties[name] = {
type: inputTypeToJsonSchema(field),
description: field.closest("label")?.firstChild?.textContent?.trim() || name,
};
if (field.hasAttribute("required")) {
required.push(name);
}
});
return { type: "object", properties, required };
}
function inputTypeToJsonSchema(field) {
if (field.tagName === "SELECT" || field.tagName === "TEXTAREA") {
return "string";
}
if (field.type === "number" || field.type === "range") {
return "number";
}
if (field.type === "checkbox") {
return "boolean";
}
return "string";
}
function renderTools() {
toolListEl.innerHTML = "";
registry.forEach((tool) => {
const card = document.createElement("article");
card.className = "tool-card";
card.innerHTML = `
<h3>${tool.name}</h3>
<p>${tool.description}</p>
<span class="pill">${tool.source}</span>
<pre class="schema">${escapeHtml(JSON.stringify(tool.inputSchema, null, 2))}</pre>
`;
toolListEl.append(card);
});
}
function sampleInputFor(name) {
const samples = {
create_support_ticket: {
email: "dev@example.com",
category: "refund",
description: "订单 CHR-2026-0614 到货后发现配件缺失。",
},
lookup_order_status: { orderId: "CHR-2026-0614" },
approve_refund_review: { orderId: "CHR-2026-0614", reason: "missing_accessory" },
draft_customer_reply: {
email: "dev@example.com",
category: "refund",
orderId: "CHR-2026-0614",
},
};
return samples[name] ?? {};
}
function log(title, payload) {
const entry = document.createElement("div");
entry.className = "entry";
entry.innerHTML = `<strong>${title}</strong><pre>${escapeHtml(JSON.stringify(payload, null, 2))}</pre>`;
logEl.prepend(entry);
}
function escapeHtml(value) {
return String(value)
.replaceAll("&", "&amp;")
.replaceAll("<", "&lt;")
.replaceAll(">", "&gt;")
.replaceAll('"', "&quot;");
}
+148
View File
@@ -0,0 +1,148 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebMCP Demo - Tool Contracts</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header class="topbar">
<div>
<p class="eyebrow">Runnable demo</p>
<h1>WebMCP 工具契约演示</h1>
</div>
<div class="runtime">
<span id="native-status" class="pill">检测中</span>
<a href="https://developer.chrome.com/docs/ai/webmcp" target="_blank" rel="noreferrer">Chrome 官方文档</a>
</div>
</header>
<main class="layout">
<section class="workspace">
<div class="intro">
<p>
这个页面模拟一个售后后台:左侧是人能操作的业务 UI,右侧是页面暴露给 Agent 的工具契约。
如果当前 Chrome 没有开启 WebMCP,本页面会使用本地 mock,让现场仍然能看清楚“工具注册”和“工具调用”的流程。
</p>
</div>
<section class="panel">
<div class="panel-head">
<div>
<p class="eyebrow">Declarative API</p>
<h2>声明式:把 HTML 表单变成工具</h2>
</div>
<span class="mode">form attributes</span>
</div>
<form
id="ticket-form"
class="business-form"
toolname="create_support_ticket"
tooldescription="Create a support ticket from user supplied issue details."
>
<label>
客户邮箱
<input name="email" type="email" required value="dev@example.com" />
</label>
<label>
问题类型
<select name="category" required>
<option value="refund">退款</option>
<option value="delivery">物流</option>
<option value="account">账号</option>
</select>
</label>
<label>
问题描述
<textarea name="description" required>订单 CHR-2026-0614 到货后发现配件缺失。</textarea>
</label>
<button type="submit">提交工单</button>
</form>
<pre class="code"><code>&lt;form
toolname="create_support_ticket"
tooldescription="Create a support ticket from user supplied issue details."&gt;
&lt;input name="email" type="email" required /&gt;
&lt;select name="category" required&gt;...&lt;/select&gt;
&lt;textarea name="description" required&gt;&lt;/textarea&gt;
&lt;/form&gt;</code></pre>
</section>
<section class="panel">
<div class="panel-head">
<div>
<p class="eyebrow">Imperative API</p>
<h2>指令式:用 JavaScript 注册业务工具</h2>
</div>
<span class="mode">registerTool()</span>
</div>
<div class="order-grid">
<article>
<span>订单号</span>
<strong>CHR-2026-0614</strong>
<small>已签收,缺件风险</small>
</article>
<article>
<span>客户等级</span>
<strong>Enterprise</strong>
<small>允许优先退款审核</small>
</article>
<article>
<span>当前状态</span>
<strong id="order-state">等待处理</strong>
<small>由工具调用更新</small>
</article>
</div>
<div class="action-row">
<button data-run-tool="lookup_order_status">运行 lookup_order_status</button>
<button data-run-tool="draft_customer_reply">运行 draft_customer_reply</button>
<button data-run-tool="approve_refund_review">运行 approve_refund_review</button>
</div>
<pre class="code"><code>navigator.modelContext.registerTool({
name: "lookup_order_status",
description: "Look up order status by order id.",
inputSchema: {
type: "object",
properties: { orderId: { type: "string" } },
required: ["orderId"]
},
execute: async ({ orderId }) =&gt; lookupOrder(orderId)
});</code></pre>
</section>
</section>
<aside class="agent">
<section class="agent-panel">
<p class="eyebrow">Agent view</p>
<h2>已暴露工具</h2>
<div id="tool-list" class="tool-list"></div>
</section>
<section class="agent-panel">
<p class="eyebrow">Run script</p>
<h2>现场演示步骤</h2>
<ol class="steps">
<li>先提交左侧表单,说明“人类 UI 仍然可用”。</li>
<li>看右侧工具列表,说明 Agent 看到的是名称、描述和 JSON Schema。</li>
<li>点击工具运行按钮,说明 Agent 不需要猜按钮位置,而是调用明确工具。</li>
<li>点击“执行复合任务”,串起查询、决策和回复草稿。</li>
</ol>
<button id="run-workflow" class="primary">执行复合任务</button>
</section>
<section class="agent-panel log-panel">
<p class="eyebrow">Execution log</p>
<h2>调用日志</h2>
<div id="log" class="log"></div>
</section>
</aside>
</main>
<script type="module" src="./app.js"></script>
</body>
</html>
+346
View File
@@ -0,0 +1,346 @@
:root {
color-scheme: light;
--ink: #161a1d;
--muted: #60717c;
--paper: #fffdfa;
--panel: #f3f0e8;
--line: #d9d2c2;
--blue: #174ea6;
--green: #116b4f;
--amber: #9a5c00;
--red: #a7352a;
--code: #1b2430;
--shadow: 0 20px 70px rgb(50 45 34 / 0.16);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
color: var(--ink);
background:
linear-gradient(90deg, rgb(22 26 29 / 0.06) 1px, transparent 1px),
linear-gradient(rgb(22 26 29 / 0.06) 1px, transparent 1px),
#e7e1d6;
background-size: 28px 28px;
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: var(--blue);
font-weight: 800;
text-decoration: none;
}
.topbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 28px 32px 18px;
}
.eyebrow {
margin: 0 0 8px;
color: var(--blue);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h1,
h2,
p {
margin-top: 0;
}
h1 {
margin-bottom: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(34px, 5vw, 68px);
line-height: 0.95;
letter-spacing: 0;
}
h2 {
margin-bottom: 0;
font-size: 22px;
letter-spacing: 0;
}
.runtime {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 8px;
}
.pill,
.mode {
display: inline-flex;
align-items: center;
min-height: 28px;
border: 1px solid var(--line);
padding: 4px 10px;
background: var(--paper);
color: var(--muted);
font-size: 12px;
font-weight: 900;
}
.pill.native {
border-color: rgb(17 107 79 / 0.35);
background: #e8f4ee;
color: var(--green);
}
.pill.mock {
border-color: rgb(154 92 0 / 0.35);
background: #fff3d8;
color: var(--amber);
}
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
gap: 22px;
padding: 0 32px 32px;
}
.workspace,
.agent {
display: grid;
gap: 18px;
align-content: start;
}
.intro,
.panel,
.agent-panel {
border: 1px solid var(--line);
background: rgb(255 253 250 / 0.92);
box-shadow: var(--shadow);
}
.intro {
padding: 18px 20px;
}
.intro p {
margin-bottom: 0;
color: var(--muted);
line-height: 1.75;
}
.panel,
.agent-panel {
padding: 22px;
}
.panel-head {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.business-form {
display: grid;
gap: 14px;
}
label {
display: grid;
gap: 7px;
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
input,
select,
textarea {
width: 100%;
border: 1px solid var(--line);
background: #fff;
color: var(--ink);
padding: 11px 12px;
}
textarea {
min-height: 92px;
resize: vertical;
}
button {
border: 1px solid var(--ink);
background: var(--ink);
color: #fff;
cursor: pointer;
min-height: 42px;
padding: 10px 14px;
font-weight: 900;
}
button:hover {
transform: translateY(-1px);
}
.primary {
width: 100%;
background: var(--blue);
border-color: var(--blue);
}
.code {
overflow: auto;
margin: 18px 0 0;
border: 1px solid #303a47;
background: var(--code);
color: #d7e2ef;
padding: 16px;
font-size: 13px;
line-height: 1.55;
}
.order-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.order-grid article {
border: 1px solid var(--line);
background: var(--panel);
padding: 14px;
}
.order-grid span,
.order-grid small {
display: block;
color: var(--muted);
font-size: 12px;
}
.order-grid strong {
display: block;
margin: 8px 0 6px;
font-size: 18px;
}
.action-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.action-row button {
min-height: 56px;
background: #fff;
color: var(--ink);
}
.agent {
position: sticky;
top: 18px;
}
.tool-list {
display: grid;
gap: 12px;
}
.tool-card {
border: 1px solid var(--line);
background: var(--panel);
padding: 14px;
}
.tool-card h3 {
margin: 0 0 8px;
font-size: 16px;
}
.tool-card p {
margin-bottom: 10px;
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}
.schema {
overflow: auto;
max-height: 150px;
border: 1px solid var(--line);
background: #fff;
padding: 10px;
color: #384551;
font-size: 12px;
line-height: 1.5;
}
.steps {
margin: 0 0 16px;
padding-left: 20px;
color: var(--muted);
line-height: 1.7;
}
.log {
display: grid;
gap: 10px;
max-height: 370px;
overflow: auto;
}
.entry {
border-left: 4px solid var(--blue);
background: #fff;
padding: 10px 12px;
font-size: 13px;
line-height: 1.5;
}
.entry strong {
display: block;
margin-bottom: 5px;
}
.entry pre {
margin: 0;
white-space: pre-wrap;
}
@media (max-width: 980px) {
.topbar,
.layout {
padding-left: 18px;
padding-right: 18px;
}
.topbar,
.layout {
display: grid;
grid-template-columns: 1fr;
}
.agent {
position: static;
}
.order-grid,
.action-row {
grid-template-columns: 1fr;
}
}