Skip to content

Commit 8378a8c

Browse files
chelojimenezclaude
chelojimenez
and
claude
committed
Replace create-status-card with minimal display-mcp-app tool
Simplifies the MCP App demo to a clean two-input card (title + body) and adds a GitHub Actions workflow for auto-deploy on push to main. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent b6c77b8 commit 8378a8c

13 files changed

Lines changed: 2032 additions & 1368 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
name: Deploy
2+
3+
on:
4+
push:
5+
branches: [main]
6+
7+
jobs:
8+
deploy:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v4
12+
- uses: actions/setup-node@v4
13+
with:
14+
node-version: 22
15+
- run: npm ci
16+
- run: npm run deploy
17+
env:
18+
CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

‎main.ts‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎mcp-app.html‎

Lines changed: 14 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -4,93 +4,30 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta name="color-scheme" content="light dark">
7-
<title>IO Explainer</title>
7+
<title>MCP App Demo</title>
88
</head>
99
<body>
1010
<main class="main">
1111

12-
<!-- Phase banner shown while waiting -->
13-
<div id="waiting" class="phase-banner">
14-
<div class="phase-icon">
15-
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
16-
<circle cx="12" cy="12" r="10"/>
17-
<path d="M12 6v6l4 2"/>
18-
</svg>
19-
</div>
20-
<p class="phase-text">Waiting for tool call&hellip;</p>
21-
<p class="phase-sub">Ask the model to call <code>create-status-card</code></p>
12+
<!-- Waiting state -->
13+
<div id="waiting" class="waiting">
14+
<div class="waiting-dot"></div>
15+
<p class="waiting-label">Waiting for tool call&hellip;</p>
16+
<p class="waiting-hint">Ask the model to call <code>display-mcp-app</code></p>
2217
</div>
2318

2419
<!-- Streaming preview -->
25-
<div id="streaming" class="phase-banner hidden">
26-
<div class="phase-icon pulse">
27-
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
28-
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
29-
</svg>
30-
</div>
31-
<p class="phase-text">Streaming inputs&hellip;</p>
20+
<div id="streaming" class="waiting hidden">
21+
<div class="waiting-dot pulse"></div>
22+
<p class="waiting-label">Streaming&hellip;</p>
3223
<pre id="streaming-json" class="streaming-json"></pre>
3324
</div>
3425

35-
<!-- Main 3-panel explainer (hidden until tool completes) -->
36-
<div id="explainer" class="explainer hidden">
37-
38-
<!-- Header -->
39-
<div class="explainer-header">
40-
<h2 class="explainer-title">How Tool I/O Drives the UI</h2>
41-
<p class="explainer-subtitle">Every visual element traces back to a tool input or output</p>
42-
</div>
43-
44-
<!-- 3-column layout -->
45-
<div class="columns">
46-
47-
<!-- LEFT: Inputs -->
48-
<section class="panel panel-inputs">
49-
<h3 class="panel-heading">
50-
<span class="panel-dot dot-input"></span>
51-
Tool Inputs
52-
</h3>
53-
<p class="panel-desc">Arguments the model sent</p>
54-
<ul class="field-list" id="input-fields"></ul>
55-
</section>
56-
57-
<!-- CENTER: Rendered Card -->
58-
<section class="panel panel-card">
59-
<h3 class="panel-heading">Rendered UI</h3>
60-
<p class="panel-desc">What the user sees</p>
61-
<div class="card" id="rendered-card">
62-
<div class="card-status-bar" id="card-status-bar"></div>
63-
<div class="card-body">
64-
<div class="card-icon" id="card-icon"></div>
65-
<h4 class="card-title" id="card-title"></h4>
66-
<p class="card-message" id="card-message"></p>
67-
<div class="progress-track">
68-
<div class="progress-fill" id="card-progress"></div>
69-
</div>
70-
<span class="progress-label" id="card-progress-label"></span>
71-
</div>
72-
<div class="card-footer" id="card-footer"></div>
73-
</div>
74-
</section>
75-
76-
<!-- RIGHT: Outputs -->
77-
<section class="panel panel-outputs">
78-
<h3 class="panel-heading">
79-
<span class="panel-dot dot-output"></span>
80-
Tool Outputs
81-
</h3>
82-
<p class="panel-desc">Structured result returned</p>
83-
<ul class="field-list" id="output-fields"></ul>
84-
</section>
85-
86-
</div>
87-
88-
<!-- Connection legend -->
89-
<div class="legend">
90-
<span class="legend-item"><span class="legend-line legend-input"></span> Input &rarr; Visual</span>
91-
<span class="legend-item"><span class="legend-line legend-output"></span> Output &rarr; Visual</span>
92-
</div>
93-
26+
<!-- Rendered card -->
27+
<div id="card" class="card hidden">
28+
<h1 id="card-title" class="card-title"></h1>
29+
<p id="card-body" class="card-body"></p>
30+
<time id="card-time" class="card-time"></time>
9431
</div>
9532

9633
</main>

0 commit comments

Comments
 (0)