Skip to content

Commit 52d869e

Browse files
hallvictorialilyjma
hallvictoria
and
lilyjma
authored
Add MCP Weather App Sample (#26)
* add mcp weather app sample * remove sse * remove sse * renamed vite config to .ts * needs preview bundle, not experimental bundle; minor instruction update * removed cdn because using preview bundles * add tool metadata, update path and return of get_weather --------- Co-authored-by: lilyjma <jm4303@columbia.edu>
1 parent bc991b9 commit 52d869e

14 files changed

Lines changed: 3338 additions & 174 deletions

‎.vscode/mcp.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@
1414
],
1515
"servers": {
1616
"remote-mcp-function": {
17-
"type": "sse",
18-
"url": "https://${input:functionapp-name}.azurewebsites.net/runtime/webhooks/mcp/sse",
17+
"type": "http",
18+
"url": "https://${input:functionapp-name}.azurewebsites.net/runtime/webhooks/mcp",
1919
"headers": {
2020
"x-functions-key": "${input:functions-mcp-extension-system-key}"
2121
}
2222
},
2323
"local-mcp-function": {
24-
"type": "sse",
25-
"url": "http://0.0.0.0:7071/runtime/webhooks/mcp/sse"
24+
"type": "http",
25+
"url": "http://0.0.0.0:7071/runtime/webhooks/mcp"
2626
}
2727
}
2828
}

‎README.md‎

Lines changed: 217 additions & 85 deletions
Large diffs are not rendered by default.

‎infra/main.bicep‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ module api './app/api.bicep' = {
119119
identityId: apiUserAssignedIdentity.outputs.resourceId
120120
identityClientId: apiUserAssignedIdentity.outputs.clientId
121121
appSettings: {
122+
PYTHON_ISOLATE_WORKER_DEPENDENCIES: '1'
122123
}
123124
virtualNetworkSubnetId: vnetEnabled ? serviceVirtualNetwork.outputs.appSubnetID : ''
124125
}

‎src/app/index.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Weather Widget</title>
7+
<style>
8+
:root {
9+
--bg: linear-gradient(145deg, #0f172a 0%, #0b324f 50%, #0f766e 100%);
10+
--card: rgba(255,255,255,0.1);
11+
--text: #f8fafc;
12+
--muted: #cbd5e1;
13+
--accent: #fbbf24;
14+
--shadow: 0 20px 50px rgba(0,0,0,0.35);
15+
--radius: 18px;
16+
}
17+
* { box-sizing: border-box; }
18+
body {
19+
margin: 0;
20+
padding: 24px;
21+
font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
22+
background: var(--bg);
23+
color: var(--text);
24+
min-height: 100vh;
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
}
29+
.widget {
30+
width: min(640px, 100%);
31+
background: var(--card);
32+
backdrop-filter: blur(10px);
33+
border: 1px solid rgba(255,255,255,0.1);
34+
border-radius: var(--radius);
35+
box-shadow: var(--shadow);
36+
padding: 24px;
37+
}
38+
.header {
39+
display: flex;
40+
align-items: center;
41+
gap: 14px;
42+
margin-bottom: 16px;
43+
}
44+
.icon {
45+
width: 72px;
46+
height: 72px;
47+
border-radius: 16px;
48+
background: rgba(255,255,255,0.08);
49+
display: grid;
50+
place-items: center;
51+
font-size: 44px;
52+
}
53+
.title {
54+
font-size: 1.4rem;
55+
font-weight: 700;
56+
margin: 0;
57+
}
58+
.subtitle {
59+
margin: 4px 0 0;
60+
color: var(--muted);
61+
font-size: 0.95rem;
62+
}
63+
.grid {
64+
display: grid;
65+
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
66+
gap: 12px;
67+
margin-top: 12px;
68+
}
69+
.card {
70+
background: rgba(255,255,255,0.08);
71+
border-radius: 14px;
72+
padding: 14px;
73+
border: 1px solid rgba(255,255,255,0.08);
74+
}
75+
.label { color: var(--muted); font-size: 0.85rem; margin: 0 0 6px; }
76+
.value { margin: 0; font-size: 1.1rem; font-weight: 600; }
77+
.footer {
78+
margin-top: 12px;
79+
font-size: 0.82rem;
80+
color: var(--muted);
81+
}
82+
</style>
83+
</head>
84+
<body>
85+
<div class="widget">
86+
<div class="header">
87+
<div class="icon" id="weather-icon">🌤️</div>
88+
<div>
89+
<p class="title" id="location">Weather</p>
90+
<p class="subtitle" id="condition">Waiting for tool output…</p>
91+
</div>
92+
</div>
93+
<div class="grid">
94+
<div class="card">
95+
<p class="label">Temperature</p>
96+
<p class="value" id="temperature">—</p>
97+
</div>
98+
<div class="card">
99+
<p class="label">Humidity</p>
100+
<p class="value" id="humidity">—</p>
101+
</div>
102+
<div class="card">
103+
<p class="label">Wind</p>
104+
<p class="value" id="wind">—</p>
105+
</div>
106+
</div>
107+
<div class="footer" id="footer">Connecting...</div>
108+
</div>
109+
<script type="module" src="/weather-app.ts"></script>
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)