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 +17 -22
- package/dist/index.js +71 -30
- package/dist/skills-config.d.ts +8 -0
- package/dist/skills-config.d.ts.map +1 -0
- package/dist/templates/blank/README.md +2 -0
- package/dist/templates/blank/mcp-env.d.ts +10 -0
- package/dist/templates/blank/package.json +1 -1
- package/dist/templates/blank/tsconfig.json +1 -1
- package/dist/templates/mcp-apps/README.md +2 -0
- package/dist/templates/mcp-apps/mcp-env.d.ts +2 -2
- package/dist/templates/mcp-apps/package.json +1 -1
- package/dist/templates/mcp-apps/tsconfig.json +1 -1
- package/dist/templates/mcp-apps/views/my-view/icons.tsx +0 -17
- package/dist/templates/mcp-apps/views/my-view/view.tsx +35 -54
- package/dist/templates/mcp-server/README.md +2 -0
- package/dist/templates/mcp-server/index.ts +1 -1
- package/dist/templates/mcp-server/mcp-env.d.ts +10 -0
- package/dist/templates/mcp-server/package.json +1 -1
- package/dist/templates/mcp-server/tsconfig.json +1 -1
- package/package.json +1 -1
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/
|
|
31
|
-
| [@mcp-use/cli](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/cli) | Build tool for MCP apps | [](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 | [](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 | [](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 #
|
|
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
|
-
|
|
|
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
|
|
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://
|
|
515
|
-
- [Building
|
|
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(
|
|
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
|
-
|
|
1482
|
-
"
|
|
1483
|
-
|
|
1484
|
-
|
|
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"]
|
|
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 .
|
|
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:
|
|
@@ -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:
|
|
@@ -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
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
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
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
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=
|
|
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
|
|
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:
|