Skip to content

Commit 038b702

Browse files
Add checkpoints and callouts to quickstart guide (#93)
- Add top-level note linking to complete example project - Convert "Full files:" references to [!NOTE] callouts - Add verification checkpoint after server creation (tsc --noEmit) - Add verification checkpoint after UI build (ls dist/) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <[email protected]>
1 parent 4ca20f2 commit 038b702

File tree

1 file changed

+23
-4
lines changed

1 file changed

+23
-4
lines changed

docs/quickstart.md

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ This tutorial walks you through building an MCP App—a tool with an interactive
1010

1111
A simple app that fetches the current server time and displays it in a clickable UI. You'll learn the core pattern: **MCP Apps = Tool + UI Resource**.
1212

13+
> [!NOTE]
14+
> The complete example is available at [`examples/basic-server-vanillajs`](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-server-vanillajs).
15+
1316
## Prerequisites
1417

1518
- Node.js 18+
@@ -77,7 +80,8 @@ Add to your `package.json`:
7780
}
7881
```
7982

80-
**Full files:** [`package.json`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/package.json), [`tsconfig.json`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/tsconfig.json), [`vite.config.ts`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/vite.config.ts)
83+
> [!NOTE]
84+
> **Full files:** [`package.json`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/package.json), [`tsconfig.json`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/tsconfig.json), [`vite.config.ts`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/vite.config.ts)
8185
8286
## 2. Create the Server
8387

@@ -162,7 +166,16 @@ app.listen(3001, (err) => {
162166
});
163167
```
164168

165-
**Full file:** [`server.ts`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/server.ts)
169+
> [!NOTE]
170+
> **Full file:** [`server.ts`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/server.ts)
171+
172+
Then, verify your server compiles:
173+
174+
```bash
175+
npx tsc --noEmit server.ts
176+
```
177+
178+
No output means success. If you see errors, check for typos in `server.ts`.
166179

167180
## 3. Build the UI
168181

@@ -220,9 +233,15 @@ Build the UI:
220233
npm run build
221234
```
222235

223-
This produces `dist/mcp-app.html` containing your bundled app.
236+
> [!NOTE]
237+
> **Full files:** [`mcp-app.html`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/mcp-app.html), [`src/mcp-app.ts`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/src/mcp-app.ts)
224238
225-
**Full files:** [`mcp-app.html`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/mcp-app.html), [`src/mcp-app.ts`](https://github.com/modelcontextprotocol/ext-apps/blob/main/examples/basic-server-vanillajs/src/mcp-app.ts)
239+
This produces `dist/mcp-app.html` which contains your bundled app:
240+
241+
```console
242+
$ ls dist/mcp-app.html
243+
dist/mcp-app.html
244+
```
226245

227246
## 4. Test It
228247

0 commit comments

Comments
 (0)