create-mcp-use-app 2.0.0-beta.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -27,8 +27,7 @@
27
27
 
28
28
  | Package | Description | Version |
29
29
  | ---------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
30
- | [mcp-use](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/mcp-use) | Core MCP framework | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use) |
31
- | [@mcp-use/cli](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/cli) | Build tool for MCP apps | [![npm](https://img.shields.io/npm/v/@mcp-use/cli.svg)](https://www.npmjs.com/package/@mcp-use/cli) |
30
+ | [mcp-use](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/server) | MCP framework and CLI | [![npm](https://img.shields.io/npm/v/mcp-use.svg)](https://www.npmjs.com/package/mcp-use) |
32
31
  | [@mcp-use/inspector](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/inspector) | Web-based MCP inspector | [![npm](https://img.shields.io/npm/v/@mcp-use/inspector.svg)](https://www.npmjs.com/package/@mcp-use/inspector) |
33
32
 
34
33
  ---
@@ -57,7 +56,7 @@ my-mcp-server/
57
56
  ├── index.ts # MCP server entry point
58
57
  ├── package.json # Scripts and dependencies
59
58
  ├── tsconfig.json # TypeScript configuration
60
- ├── mcp-env.d.ts # Generated view typing bridge
59
+ ├── mcp-env.d.ts # Managed view typing bridge
61
60
  ├── public/ # Static assets
62
61
  └── views/ # Included by the mcp-apps template
63
62
  └── product-search-result/
@@ -66,15 +65,16 @@ my-mcp-server/
66
65
 
67
66
  ### Pre-configured Features
68
67
 
69
- | Feature | Description |
70
- | ----------------------- | ------------------------------------------------- |
71
- | **📝 TypeScript** | Full TypeScript setup with proper types |
72
- | **🔥 Hot Reload** | Auto-restart on code changes during development |
73
- | **🔍 Auto Inspector** | Inspector UI opens automatically in dev mode |
74
- | **🎨 MCP Apps Views** | React views discovered and bundled by the CLI |
75
- | **🛠️ Example Tools** | Sample MCP tools, resources, and prompts |
76
- | **📦 Build Scripts** | Ready-to-use development and production scripts |
77
- | **🚀 Production Ready** | Optimized build configuration |
68
+ | Feature | Description |
69
+ | ----------------------- | ---------------------------------------------------- |
70
+ | **📝 TypeScript** | Full TypeScript setup with proper types |
71
+ | **🔥 Hot Reload** | Auto-restart on code changes during development |
72
+ | **🔍 Auto Inspector** | Inspector UI opens automatically in dev mode |
73
+ | **🎨 MCP Apps Views** | React views discovered and bundled by the CLI |
74
+ | **🛠️ Example Tools** | Sample MCP tools, resources, and prompts |
75
+ | **📦 Build Scripts** | Ready-to-use development and production scripts |
76
+ | **✅ Type Checking** | Refreshes MCP view types, then runs local TypeScript |
77
+ | **🚀 Production Ready** | Optimized build configuration |
78
78
 
79
79
  ---
80
80
 
@@ -202,14 +202,11 @@ The scaffolded project includes these dependencies:
202
202
 
203
203
  ### Core Dependencies
204
204
 
205
- - `mcp-use` - The MCP framework
206
- - `@mcp-use/cli` - Build and development tool
207
- - `@mcp-use/inspector` - Web-based debugger
205
+ - `mcp-use` - The MCP framework, including its CLI and built-in Inspector
208
206
 
209
207
  ### Development Dependencies
210
208
 
211
209
  - `typescript` - TypeScript compiler
212
- - `tsx` - TypeScript executor for development
213
210
  - `@types/node` - Node.js type definitions
214
211
 
215
212
  ### Template-Specific Dependencies
@@ -285,7 +282,7 @@ The inspector automatically opens at `http://localhost:3000/mcp/inspector` where
285
282
  Bind a tool to a view with the tool definition's `view` field:
286
283
 
287
284
  ```typescript
288
- server.tool(
285
+ export const showAnalytics = server.tool(
289
286
  {
290
287
  name: "show-analytics",
291
288
  description: "Show analytics for a reporting period",
@@ -316,9 +313,7 @@ interface Analytics {
316
313
 
317
314
  export default function AnalyticsDashboard() {
318
315
  const view = useToolContext();
319
- const refresh = useCallTool<{ period: string }, Analytics>(
320
- "show-analytics"
321
- );
316
+ const refresh = useCallTool("show-analytics");
322
317
 
323
318
  if (view.status === "pending") return <p>Loading analytics…</p>;
324
319
  if (view.status === "error") return <p>{view.error.message}</p>;
@@ -511,8 +506,8 @@ See our [contributing guide](https://github.com/mcp-use/mcp-use/blob/main/CONTRI
511
506
 
512
507
  - [mcp-use Documentation](https://github.com/mcp-use/mcp-use)
513
508
  - [Model Context Protocol Spec](https://modelcontextprotocol.io)
514
- - [Creating MCP Tools](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/mcp-use#-mcp-server-framework)
515
- - [Building UI Widgets](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/cli#-creating-ui-widgets)
509
+ - [Creating MCP Tools](https://mcp-use.com/docs/typescript/server/tools)
510
+ - [Building MCP App Views](https://mcp-use.com/docs/typescript/mcp-apps)
516
511
  - [Using the Inspector](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/inspector)
517
512
  - [Supabase Edge Functions](https://supabase.com/docs/guides/functions)
518
513
 
package/dist/index.js CHANGED
@@ -1334,6 +1334,35 @@ function updateIndexTs(projectPath, projectName) {
1334
1334
  writeFileSync(indexPath, content);
1335
1335
  }
1336
1336
 
1337
+ // src/skills-config.ts
1338
+ var SKILLS_REPO = "https://github.com/mcp-use/mcp-use.git";
1339
+ var SKILLS_SPARSE_PATH = "skills/mcp-apps-builder";
1340
+ var SKILLS_AGENT_DIRS = [".cursor", ".claude", ".agents"];
1341
+ function getDefaultDistTag(packageVersion) {
1342
+ return packageVersion.includes("-beta.") ? "beta" : "latest";
1343
+ }
1344
+ function getSkillsBranch(packageVersion) {
1345
+ return getDefaultDistTag(packageVersion) === "beta" ? "beta" : "main";
1346
+ }
1347
+ function getSkillsManualInstallCommand(packageVersion) {
1348
+ const branch = getSkillsBranch(packageVersion);
1349
+ return `npx --yes skills add mcp-use/mcp-use#${branch} --yes --skill mcp-apps-builder -a cursor -a claude-code -a codex`;
1350
+ }
1351
+ function getSkillsCloneArgs(repoDir, packageVersion) {
1352
+ return [
1353
+ "clone",
1354
+ "--depth",
1355
+ "1",
1356
+ "--filter=blob:none",
1357
+ "--sparse",
1358
+ "--single-branch",
1359
+ "--branch",
1360
+ getSkillsBranch(packageVersion),
1361
+ SKILLS_REPO,
1362
+ repoDir
1363
+ ];
1364
+ }
1365
+
1337
1366
  // src/index.ts
1338
1367
  var __filename = fileURLToPath(import.meta.url);
1339
1368
  var __dirname = dirname2(__filename);
@@ -1455,10 +1484,6 @@ function sendInstallTelemetryEvent(agents, skills) {
1455
1484
  } catch {
1456
1485
  }
1457
1486
  }
1458
- var SKILLS_REPO = "https://github.com/mcp-use/mcp-use.git";
1459
- var SKILLS_SPARSE_PATH = "skills/mcp-apps-builder";
1460
- var SKILLS_AGENT_DIRS = [".cursor", ".claude", ".agent"];
1461
- var SKILLS_MANUAL_INSTALL_CMD = "npx --yes skills add mcp-use/mcp-use --yes --skill mcp-apps-builder -a cursor -a claude-code -a codex";
1462
1487
  function isGitAvailable() {
1463
1488
  const result = spawnSync("git", ["--version"], {
1464
1489
  stdio: "ignore",
@@ -1469,7 +1494,11 @@ function isGitAvailable() {
1469
1494
  function warnSkillsInstallFailed(missingGit) {
1470
1495
  const reason = missingGit ? "Failed to install skills: git is not installed or not in PATH." : "Failed to install skills.";
1471
1496
  console.log(yellow(`\u26A0\uFE0F ${reason}`));
1472
- console.log(yellow(` Run manually: ${SKILLS_MANUAL_INSTALL_CMD}`));
1497
+ console.log(
1498
+ yellow(
1499
+ ` Run manually: ${getSkillsManualInstallCommand(packageJson.version)}`
1500
+ )
1501
+ );
1473
1502
  }
1474
1503
  async function installSkills(projectPath) {
1475
1504
  const tempDir = mkdtempSync(join3(tmpdir(), "mcp-use-skills-"));
@@ -1477,17 +1506,11 @@ async function installSkills(projectPath) {
1477
1506
  try {
1478
1507
  const clone = spawnSync(
1479
1508
  "git",
1480
- [
1481
- "clone",
1482
- "--depth",
1483
- "1",
1484
- "--filter=blob:none",
1485
- "--sparse",
1486
- "--single-branch",
1487
- SKILLS_REPO,
1488
- repoDir
1489
- ],
1490
- { stdio: "ignore", shell: false }
1509
+ getSkillsCloneArgs(repoDir, packageJson.version),
1510
+ {
1511
+ stdio: "ignore",
1512
+ shell: false
1513
+ }
1491
1514
  );
1492
1515
  if (clone.status !== 0 || clone.error) {
1493
1516
  throw new Error("git clone failed");
@@ -1532,17 +1555,6 @@ function renderLogo() {
1532
1555
  var packageJson = JSON.parse(
1533
1556
  readFileSync2(join3(__dirname, "../package.json"), "utf-8")
1534
1557
  );
1535
- function getCurrentPackageVersions(isDevelopment = false, sdkVersion) {
1536
- if (isDevelopment) {
1537
- return {
1538
- "mcp-use": "workspace:*"
1539
- };
1540
- }
1541
- const requestedSdk = sdkVersion ?? "latest";
1542
- return {
1543
- "mcp-use": requestedSdk
1544
- };
1545
- }
1546
1558
  function processTemplateFile(filePath, versions, isDevelopment = false) {
1547
1559
  const content = readFileSync2(filePath, "utf-8");
1548
1560
  let processedContent = content;
@@ -1553,7 +1565,7 @@ function processTemplateFile(filePath, versions, isDevelopment = false) {
1553
1565
  version
1554
1566
  );
1555
1567
  }
1556
- const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"] || "latest";
1568
+ const mcpUseVersion = isDevelopment ? "workspace:*" : versions["mcp-use"];
1557
1569
  if (isDevelopment) {
1558
1570
  processedContent = processedContent.replace(
1559
1571
  /"mcp-use": "\^[^"]+"/,
@@ -2026,11 +2038,38 @@ async function main() {
2026
2038
  );
2027
2039
  process.exit(1);
2028
2040
  }
2041
+ }
2042
+ let mcpUseVersion;
2043
+ if (options.dev) {
2044
+ mcpUseVersion = "workspace:*";
2045
+ } else if (options.sdkVersion) {
2046
+ mcpUseVersion = options.sdkVersion;
2047
+ } else {
2048
+ const defaultDistTag = getDefaultDistTag(packageJson.version);
2049
+ const response = await fetch("https://registry.npmjs.org/mcp-use", {
2050
+ headers: { Accept: "application/vnd.npm.install-v1+json" },
2051
+ signal: AbortSignal.timeout(1e4)
2052
+ });
2053
+ if (!response.ok) {
2054
+ throw new Error(
2055
+ `Failed to resolve the mcp-use ${defaultDistTag} dist-tag from npm (${response.status})`
2056
+ );
2057
+ }
2058
+ const metadata = await response.json();
2059
+ const defaultVersion = metadata["dist-tags"]?.[defaultDistTag];
2060
+ if (!defaultVersion) {
2061
+ throw new Error(
2062
+ `npm did not return a ${defaultDistTag} version for mcp-use`
2063
+ );
2064
+ }
2065
+ mcpUseVersion = defaultVersion;
2066
+ }
2067
+ const versions = { "mcp-use": mcpUseVersion };
2068
+ if (!useCurrentDir) {
2029
2069
  mkdirSync(projectPath, { recursive: true });
2030
2070
  }
2031
2071
  console.log(cyan(`\u{1F680} Creating MCP server "${displayName}"...`));
2032
2072
  const validatedTemplate = validateTemplateName(selectedTemplate);
2033
- const versions = getCurrentPackageVersions(options.dev, options.sdkVersion);
2034
2073
  await copyTemplate(projectPath, validatedTemplate, versions, options.dev);
2035
2074
  updatePackageJson(projectPath, packageName);
2036
2075
  updateIndexTs(projectPath, packageName);
@@ -2140,12 +2179,13 @@ async function main() {
2140
2179
  console.log(bold("\u{1F4C1} Project structure:"));
2141
2180
  console.log(` ${useCurrentDir ? "." : displayName}/`);
2142
2181
  if (skillsInstalled) {
2143
- console.log(" \u251C\u2500\u2500 .agent/skills/");
2182
+ console.log(" \u251C\u2500\u2500 .agents/skills/");
2144
2183
  console.log(" \u251C\u2500\u2500 .claude/skills/");
2145
2184
  console.log(" \u251C\u2500\u2500 .cursor/skills/");
2146
2185
  }
2147
2186
  if (validatedTemplate === "blank") {
2148
2187
  console.log(" \u251C\u2500\u2500 public/");
2188
+ console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
2149
2189
  console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
2150
2190
  console.log(" \u251C\u2500\u2500 package.json");
2151
2191
  console.log(" \u251C\u2500\u2500 tsconfig.json");
@@ -2167,6 +2207,7 @@ async function main() {
2167
2207
  console.log(" \u251C\u2500\u2500 tsconfig.json");
2168
2208
  console.log(" \u2514\u2500\u2500 README.md");
2169
2209
  } else if (validatedTemplate === "mcp-server") {
2210
+ console.log(" \u251C\u2500\u2500 mcp-env.d.ts");
2170
2211
  console.log(" \u251C\u2500\u2500 index.ts (server entry point)");
2171
2212
  console.log(" \u251C\u2500\u2500 package.json");
2172
2213
  console.log(" \u251C\u2500\u2500 tsconfig.json");
@@ -0,0 +1,8 @@
1
+ export declare const SKILLS_REPO = "https://github.com/mcp-use/mcp-use.git";
2
+ export declare const SKILLS_SPARSE_PATH = "skills/mcp-apps-builder";
3
+ export declare const SKILLS_AGENT_DIRS: readonly [".cursor", ".claude", ".agents"];
4
+ export declare function getDefaultDistTag(packageVersion: string): "beta" | "latest";
5
+ export declare function getSkillsBranch(packageVersion: string): "beta" | "main";
6
+ export declare function getSkillsManualInstallCommand(packageVersion: string): string;
7
+ export declare function getSkillsCloneArgs(repoDir: string, packageVersion: string): string[];
8
+ //# sourceMappingURL=skills-config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skills-config.d.ts","sourceRoot":"","sources":["../src/skills-config.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,2CAA2C,CAAC;AACpE,eAAO,MAAM,kBAAkB,4BAA4B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,4CAA6C,CAAC;AAE5E,wBAAgB,iBAAiB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAE3E;AAED,wBAAgB,eAAe,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAEvE;AAED,wBAAgB,6BAA6B,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,MAAM,GACrB,MAAM,EAAE,CAaV"}
@@ -15,6 +15,8 @@ Open [http://localhost:3000/mcp/inspector](http://localhost:3000/mcp/inspector)
15
15
 
16
16
  You can start building by editing the entry file. Add tools, resources, and prompts — the server auto-reloads as you edit.
17
17
 
18
+ Run `npm run typecheck` to refresh MCP view types and check the project with its local TypeScript compiler.
19
+
18
20
  ## Learn More
19
21
 
20
22
  To learn more about mcp-use and MCP:
@@ -0,0 +1,10 @@
1
+ // Generated by mcp-use. Do not edit.
2
+ import "mcp-use/vite-client";
3
+
4
+ declare module "mcp-use/react" {
5
+ interface Register {
6
+ tools: typeof import("./index.js");
7
+ }
8
+ }
9
+
10
+ export {};
@@ -24,7 +24,7 @@
24
24
  "dev": "mcp-use dev",
25
25
  "start": "mcp-use start",
26
26
  "deploy": "mcp-use deploy",
27
- "typecheck": "tsc --noEmit"
27
+ "typecheck": "mcp-use typecheck"
28
28
  },
29
29
  "dependencies": {
30
30
  "mcp-use": "workspace:*"
@@ -10,7 +10,7 @@
10
10
  "forceConsistentCasingInFileNames": true,
11
11
  "skipLibCheck": true,
12
12
  "noEmit": true,
13
- "noUncheckedSideEffectImports": false
13
+ "noUncheckedSideEffectImports": true
14
14
  },
15
15
  "include": [
16
16
  "index.ts",
@@ -15,6 +15,8 @@ Open [http://localhost:3000/mcp/inspector](http://localhost:3000/mcp/inspector)
15
15
 
16
16
  You can start building by editing the entry file. Add tools, resources, and prompts — the server auto-reloads as you edit.
17
17
 
18
+ Run `npm run typecheck` to refresh MCP view types and check the project with its local TypeScript compiler. Statically declared tools used by views must be assigned to exported constants.
19
+
18
20
  ## Learn More
19
21
 
20
22
  To learn more about mcp-use and MCP:
@@ -1,5 +1,5 @@
1
- // mcp-use auto-generated typing
2
- declare module "*.css";
1
+ // Generated by mcp-use. Do not edit.
2
+ import "mcp-use/vite-client";
3
3
 
4
4
  declare module "mcp-use/react" {
5
5
  interface Register {
@@ -24,7 +24,7 @@
24
24
  "dev": "mcp-use dev",
25
25
  "start": "mcp-use start",
26
26
  "deploy": "mcp-use deploy",
27
- "typecheck": "tsc --noEmit"
27
+ "typecheck": "mcp-use typecheck"
28
28
  },
29
29
  "dependencies": {
30
30
  "mcp-use": "workspace:*",
@@ -10,7 +10,7 @@
10
10
  "forceConsistentCasingInFileNames": true,
11
11
  "skipLibCheck": true,
12
12
  "noEmit": true,
13
- "noUncheckedSideEffectImports": false
13
+ "noUncheckedSideEffectImports": true
14
14
  },
15
15
  "include": [
16
16
  "index.ts",
@@ -31,23 +31,6 @@ export function PipIcon() {
31
31
  );
32
32
  }
33
33
 
34
- export function CloseIcon() {
35
- return (
36
- <svg
37
- width="14"
38
- height="14"
39
- viewBox="0 0 24 24"
40
- fill="none"
41
- stroke="currentColor"
42
- strokeWidth="2"
43
- aria-hidden
44
- >
45
- <line x1="18" y1="6" x2="6" y2="18" />
46
- <line x1="6" y1="6" x2="18" y2="18" />
47
- </svg>
48
- );
49
- }
50
-
51
34
  export function SunIcon() {
52
35
  return (
53
36
  <svg
@@ -16,7 +16,6 @@ import { useState } from "react";
16
16
  import { z } from "zod";
17
17
 
18
18
  import {
19
- CloseIcon,
20
19
  ExpandIcon,
21
20
  ExternalLinkIcon,
22
21
  MonitorIcon,
@@ -124,65 +123,47 @@ export default function McpApp() {
124
123
  </span>
125
124
  </Tooltip>
126
125
  </div>
127
- <div className="flex items-center gap-2">
128
- {!isFullscreen && !isPip && (
129
- <>
130
- {availableDisplayModes.includes("pip") && (
131
- <Tooltip
132
- label="MCP Apps display mode: picture-in-picture"
133
- multiline
126
+ {!isPip && (
127
+ <div className="flex items-center gap-2">
128
+ {availableDisplayModes.includes("pip") && (
129
+ <Tooltip
130
+ label="MCP Apps display mode: picture-in-picture"
131
+ multiline
132
+ >
133
+ <button
134
+ type="button"
135
+ className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
136
+ aria-label="Picture-in-picture"
137
+ onClick={() => void requestDisplayMode({ mode: "pip" })}
134
138
  >
135
- <button
136
- type="button"
137
- className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
138
- aria-label="Picture-in-picture"
139
- onClick={() => void requestDisplayMode({ mode: "pip" })}
140
- >
141
- <PipIcon />
142
- </button>
143
- </Tooltip>
144
- )}
145
- {availableDisplayModes.includes("fullscreen") && (
146
- <Tooltip
147
- label="MCP Apps display mode: fullscreen"
148
- multiline
139
+ <PipIcon />
140
+ </button>
141
+ </Tooltip>
142
+ )}
143
+ {availableDisplayModes.includes("fullscreen") && (
144
+ <Tooltip label="MCP Apps display mode: fullscreen" multiline>
145
+ <button
146
+ type="button"
147
+ className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
148
+ aria-label="Fullscreen"
149
+ onClick={() =>
150
+ void requestDisplayMode({ mode: "fullscreen" })
151
+ }
149
152
  >
150
- <button
151
- type="button"
152
- className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
153
- aria-label="Fullscreen"
154
- onClick={() =>
155
- void requestDisplayMode({ mode: "fullscreen" })
156
- }
157
- >
158
- <ExpandIcon />
159
- </button>
160
- </Tooltip>
161
- )}
162
- </>
163
- )}
164
- {(isFullscreen || isPip) && (
165
- <Tooltip
166
- label="MCP Apps display mode: return to inline"
167
- multiline
168
- >
169
- <button
170
- type="button"
171
- className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
172
- aria-label="Exit"
173
- onClick={() => void requestDisplayMode({ mode: "inline" })}
174
- >
175
- <CloseIcon />
176
- </button>
177
- </Tooltip>
178
- )}
179
- </div>
153
+ <ExpandIcon />
154
+ </button>
155
+ </Tooltip>
156
+ )}
157
+ </div>
158
+ )}
180
159
  </div>
181
160
  )}
182
161
  {!isMobile && (
183
162
  <button
184
163
  type="button"
185
- className="absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
164
+ className={`absolute left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50 ${
165
+ isFullscreen ? "top-6" : "bottom-6"
166
+ }`}
186
167
  disabled={!canOpenExternal}
187
168
  title="mcp-use on GitHub"
188
169
  onClick={() =>
@@ -202,7 +183,7 @@ export default function McpApp() {
202
183
  <div
203
184
  className={`relative z-10 flex flex-col items-center text-center ${
204
185
  isFullscreen
205
- ? "min-h-0 flex-1 justify-center overflow-y-auto px-6 py-8"
186
+ ? "min-h-0 flex-1 justify-center overflow-y-auto px-6 pt-24 pb-8"
206
187
  : isMobile
207
188
  ? "px-6 py-10"
208
189
  : "min-h-[400px] px-8 py-8 pb-16 sm:min-h-[440px] sm:px-10 sm:py-10 sm:pb-16"
@@ -15,6 +15,8 @@ Open [http://localhost:3000/mcp/inspector](http://localhost:3000/mcp/inspector)
15
15
 
16
16
  You can start building by editing the entry file. Add tools and prompts — the server auto-reloads as you edit.
17
17
 
18
+ Run `npm run typecheck` to refresh MCP view types and check the project with its local TypeScript compiler.
19
+
18
20
  ## Learn More
19
21
 
20
22
  To learn more about mcp-use and MCP:
@@ -8,7 +8,7 @@ const server = new MCPServer({
8
8
  description: "An MCP server built with mcp-use",
9
9
  });
10
10
 
11
- server.tool(
11
+ export const fetchWeather = server.tool(
12
12
  {
13
13
  name: "fetch-weather",
14
14
  description: "Return demo weather for a city",
@@ -0,0 +1,10 @@
1
+ // Generated by mcp-use. Do not edit.
2
+ import "mcp-use/vite-client";
3
+
4
+ declare module "mcp-use/react" {
5
+ interface Register {
6
+ tools: typeof import("./index.js");
7
+ }
8
+ }
9
+
10
+ export {};
@@ -24,7 +24,7 @@
24
24
  "dev": "mcp-use dev",
25
25
  "start": "mcp-use start",
26
26
  "deploy": "mcp-use deploy",
27
- "typecheck": "tsc --noEmit"
27
+ "typecheck": "mcp-use typecheck"
28
28
  },
29
29
  "dependencies": {
30
30
  "mcp-use": "workspace:*",
@@ -10,7 +10,7 @@
10
10
  "forceConsistentCasingInFileNames": true,
11
11
  "skipLibCheck": true,
12
12
  "noEmit": true,
13
- "noUncheckedSideEffectImports": false
13
+ "noUncheckedSideEffectImports": true
14
14
  },
15
15
  "include": [
16
16
  "index.ts",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-mcp-use-app",
3
- "version": "2.0.0-beta.8",
3
+ "version": "2.0.0",
4
4
  "type": "module",
5
5
  "description": "Create MCP-Use apps with one command",
6
6
  "author": "mcp-use, Inc.",