Build an MCP App changedextensions/apps/build
Nearest release: v2.1.314, published 17 hours before upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.
Upstream edited this page at 30 Oct 2026 18:11 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 30 Oct 2026 18:37 UTC.
Upstream edited
Recorded here
Lines+53added
Lines−53removed
From line
4
where the diff opens
First seen
14 Aug 2026
this site's first read of the page
Recorded edits6to this page, all time
The whole hunk
from line 4, old and new numbered
/
from line 4
44
55## Prerequisites
66
7You'll need [Node.js](https://nodejs.org/en/download) 18 or higher. Familiarity
7You'll need [Node.js](https://nodejs.org/en/download) 20 or higher. Familiarity
88with [MCP tools](https://modelcontextprotocol.io/specification/latest/server/tools.md) and
99[resources](https://modelcontextprotocol.io/specification/latest/server/resources.md) is recommended since MCP
1010Apps combine both primitives. Experience with the
from line 160
160160
161161**3. Configure the project**
162162
163**package.json**
163> [tab] package.json
164>
165> The `"type": "module"` setting enables ES module syntax. The `build` script uses the `INPUT` environment variable to tell Vite which HTML file to bundle. The `serve` script runs your server using `tsx` for TypeScript execution.
166>
167> ```json theme={null}
168> {
169> "type": "module",
170> "scripts": {
171> "build": "INPUT=mcp-app.html vite build",
172> "serve": "npx tsx server.ts"
173> }
174> }
175> ```
164176
165The `"type": "module"` setting enables ES module syntax. The `build` script uses the `INPUT` environment variable to tell Vite which HTML file to bundle. The `serve` script runs your server using `tsx` for TypeScript execution.
177> [tab] tsconfig.json
178>
179> The TypeScript configuration targets modern JavaScript (`ES2022`) and uses ESNext modules with bundler resolution, which works well with Vite. The `include` array covers both the server code in the root and UI code in `src/`.
180>
181> ```json theme={null}
182> {
183> "compilerOptions": {
184> "target": "ES2022",
185> "module": "ESNext",
186> "moduleResolution": "bundler",
187> "strict": true,
188> "esModuleInterop": true,
189> "skipLibCheck": true,
190> "outDir": "dist"
191> },
192> "include": ["*.ts", "src/**/*.ts"]
193> }
194> ```
166195
167```json theme={null}
168{
169 "type": "module",
170 "scripts": {
171 "build": "INPUT=mcp-app.html vite build",
172 "serve": "npx tsx server.ts"
173 }
174}
175```
196> [tab] vite.config.ts
197>
198> ```typescript theme={null}
199> import { defineConfig } from "vite";
200> import { viteSingleFile } from "vite-plugin-singlefile";
201>
202> export default defineConfig({
203> plugins: [viteSingleFile()],
204> build: {
205> outDir: "dist",
206> rollupOptions: {
207> input: process.env.INPUT,
208> },
209> },
210> });
211> ```
176212
177**tsconfig.json**
178
179The TypeScript configuration targets modern JavaScript (`ES2022`) and uses ESNext modules with bundler resolution, which works well with Vite. The `include` array covers both the server code in the root and UI code in `src/`.
180
181```json theme={null}
182{
183 "compilerOptions": {
184 "target": "ES2022",
185 "module": "ESNext",
186 "moduleResolution": "bundler",
187 "strict": true,
188 "esModuleInterop": true,
189 "skipLibCheck": true,
190 "outDir": "dist"
191 },
192 "include": ["*.ts", "src/**/*.ts"]
193}
194```
195
196**vite.config.ts**
197
198```typescript theme={null}
199import { defineConfig } from "vite";
200import { viteSingleFile } from "vite-plugin-singlefile";
201
202export default defineConfig({
203 plugins: [viteSingleFile()],
204 build: {
205 outDir: "dist",
206 rollupOptions: {
207 input: process.env.INPUT,
208 },
209 },
210});
211```
212
213213**4. Build the project**
214214
215215With the project structure and configuration in place, continue to [Building an MCP App](#building-an-mcp-app) below to implement the server and UI.
from line 472
472472
473473## Learn more
474474
475> **[API Documentation](https://apps.extensions.modelcontextprotocol.io/api/)**
475> [card] [API Documentation](https://apps.extensions.modelcontextprotocol.io/api/)
476476>
477477> Full SDK reference and API details
478478
479> **[GitHub Repository](https://github.com/modelcontextprotocol/ext-apps)**
479> [card] [GitHub Repository](https://github.com/modelcontextprotocol/ext-apps)
480480>
481481> Source code, examples, and issue tracker
482482
483> **[Specification](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx)**
483> [card] [Specification](https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/draft/apps.mdx)
484484>
485485> Technical specification for implementers
486486
No line in this hunk matches that.