create-skybridge 0.0.0-dev.c971bad → 0.0.0-dev.cbadf52
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/dist/index.d.ts +1 -1
- package/dist/index.js +107 -46
- package/dist/index.test.d.ts +1 -0
- package/dist/index.test.js +23 -0
- package/index.js +6 -1
- package/package.json +7 -3
- package/template/README.md +66 -0
- package/template/_gitignore +4 -0
- package/template/alpic.json +4 -0
- package/template/package.json +21 -0
- package/template/pnpm-workspace.yaml +7 -0
- package/template/server/nodemon.json +5 -0
- package/template/server/package.json +32 -0
- package/template/server/src/index.ts +35 -0
- package/template/server/src/middleware.ts +54 -0
- package/template/server/src/server.ts +66 -0
- package/template/server/tsconfig.json +17 -0
- package/template/web/package.json +24 -0
- package/template/web/src/helpers.ts +4 -0
- package/template/web/src/index.css +30 -0
- package/template/web/src/widgets/magic-8-ball.tsx +24 -0
- package/template/web/tsconfig.app.json +34 -0
- package/template/web/tsconfig.json +13 -0
- package/template/web/tsconfig.node.json +26 -0
- package/template/web/vite.config.ts +15 -0
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export declare function init(args?: string[]): Promise<void>;
|
package/dist/index.js
CHANGED
|
@@ -1,48 +1,36 @@
|
|
|
1
1
|
import { spawnSync } from "node:child_process";
|
|
2
2
|
import fs from "node:fs";
|
|
3
3
|
import path from "node:path";
|
|
4
|
+
import { fileURLToPath } from "node:url";
|
|
4
5
|
import * as prompts from "@clack/prompts";
|
|
5
6
|
import mri from "mri";
|
|
6
|
-
const
|
|
7
|
-
boolean: ["help", "overwrite"],
|
|
8
|
-
alias: { h: "help" },
|
|
9
|
-
});
|
|
10
|
-
const cwd = process.cwd();
|
|
11
|
-
const TEMPLATE_REPO = "https://github.com/alpic-ai/apps-sdk-template";
|
|
7
|
+
const minimumPnpmVersion = 10;
|
|
12
8
|
const defaultProjectName = "skybridge-project";
|
|
13
9
|
// prettier-ignore
|
|
14
10
|
const helpMessage = `\
|
|
15
11
|
Usage: create-skybridge [OPTION]... [DIRECTORY]
|
|
16
12
|
|
|
17
|
-
Create a new Skybridge project by
|
|
13
|
+
Create a new Skybridge project by copying the starter template.
|
|
18
14
|
|
|
19
15
|
Options:
|
|
20
16
|
-h, --help show this help message
|
|
21
17
|
--overwrite remove existing files in target directory
|
|
18
|
+
--immediate install dependencies and start development server
|
|
22
19
|
|
|
23
20
|
Examples:
|
|
24
21
|
create-skybridge my-app
|
|
25
|
-
create-skybridge . --overwrite
|
|
22
|
+
create-skybridge . --overwrite --immediate
|
|
26
23
|
`;
|
|
27
|
-
function
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
if (status != null && status > 0) {
|
|
33
|
-
process.exit(status);
|
|
34
|
-
}
|
|
35
|
-
if (error) {
|
|
36
|
-
console.error(`\n${command} ${args.join(" ")} error!`);
|
|
37
|
-
console.error(error);
|
|
38
|
-
process.exit(1);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
async function init() {
|
|
24
|
+
export async function init(args = process.argv.slice(2)) {
|
|
25
|
+
const argv = mri(args, {
|
|
26
|
+
boolean: ["help", "overwrite", "immediate"],
|
|
27
|
+
alias: { h: "help" },
|
|
28
|
+
});
|
|
42
29
|
const argTargetDir = argv._[0]
|
|
43
|
-
?
|
|
30
|
+
? sanitizeTargetDir(String(argv._[0]))
|
|
44
31
|
: undefined;
|
|
45
32
|
const argOverwrite = argv.overwrite;
|
|
33
|
+
const argImmediate = argv.immediate;
|
|
46
34
|
const help = argv.help;
|
|
47
35
|
if (help) {
|
|
48
36
|
console.log(helpMessage);
|
|
@@ -59,14 +47,15 @@ async function init() {
|
|
|
59
47
|
defaultValue: defaultProjectName,
|
|
60
48
|
placeholder: defaultProjectName,
|
|
61
49
|
validate: (value) => {
|
|
62
|
-
return value.length === 0 ||
|
|
50
|
+
return value.length === 0 || sanitizeTargetDir(value).length > 0
|
|
63
51
|
? undefined
|
|
64
52
|
: "Invalid project name";
|
|
65
53
|
},
|
|
66
54
|
});
|
|
67
|
-
if (prompts.isCancel(projectName))
|
|
55
|
+
if (prompts.isCancel(projectName)) {
|
|
68
56
|
return cancel();
|
|
69
|
-
|
|
57
|
+
}
|
|
58
|
+
targetDir = sanitizeTargetDir(projectName);
|
|
70
59
|
}
|
|
71
60
|
else {
|
|
72
61
|
targetDir = defaultProjectName;
|
|
@@ -93,8 +82,9 @@ async function init() {
|
|
|
93
82
|
},
|
|
94
83
|
],
|
|
95
84
|
});
|
|
96
|
-
if (prompts.isCancel(res))
|
|
85
|
+
if (prompts.isCancel(res)) {
|
|
97
86
|
return cancel();
|
|
87
|
+
}
|
|
98
88
|
overwrite = res;
|
|
99
89
|
}
|
|
100
90
|
else {
|
|
@@ -110,30 +100,105 @@ async function init() {
|
|
|
110
100
|
return;
|
|
111
101
|
}
|
|
112
102
|
}
|
|
113
|
-
const root = path.join(cwd, targetDir);
|
|
114
|
-
// 3.
|
|
115
|
-
prompts.log.step(`
|
|
103
|
+
const root = path.join(process.cwd(), targetDir);
|
|
104
|
+
// 3. Copy the repository
|
|
105
|
+
prompts.log.step(`Copying template...`);
|
|
116
106
|
try {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
107
|
+
const templateDir = fileURLToPath(new URL("../template", import.meta.url));
|
|
108
|
+
// Copy template to target directory
|
|
109
|
+
fs.cpSync(templateDir, root, {
|
|
110
|
+
recursive: true,
|
|
111
|
+
filter: (src) => !src.endsWith(".npmrc"),
|
|
120
112
|
});
|
|
121
|
-
//
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
113
|
+
// Rename _gitignore to .gitignore
|
|
114
|
+
fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
|
|
115
|
+
// Update project name in package.json
|
|
116
|
+
const name = path.basename(root);
|
|
117
|
+
for (const dir of ["", "server", "web"]) {
|
|
118
|
+
const pkgPath = path.join(root, dir, "package.json");
|
|
119
|
+
const pkg = fs.readFileSync(pkgPath, "utf-8");
|
|
120
|
+
const fixed = pkg.replace(/apps-sdk-template/g, name);
|
|
121
|
+
fs.writeFileSync(pkgPath, fixed);
|
|
125
122
|
}
|
|
126
123
|
prompts.log.success(`Project created in ${root}`);
|
|
127
|
-
prompts.outro(`Done! Next steps:\n\n cd ${targetDir}\n pnpm install\n pnpm dev`);
|
|
128
124
|
}
|
|
129
125
|
catch (error) {
|
|
130
|
-
prompts.log.error("Failed to
|
|
126
|
+
prompts.log.error("Failed to copy repository");
|
|
127
|
+
console.error(error);
|
|
128
|
+
process.exit(1);
|
|
129
|
+
}
|
|
130
|
+
// 4. Ask about immediate installation
|
|
131
|
+
let immediate = argImmediate;
|
|
132
|
+
if (immediate === undefined) {
|
|
133
|
+
if (interactive) {
|
|
134
|
+
const immediateResult = await prompts.confirm({
|
|
135
|
+
message: `Install with pnpm and start now?`,
|
|
136
|
+
});
|
|
137
|
+
if (prompts.isCancel(immediateResult)) {
|
|
138
|
+
return cancel();
|
|
139
|
+
}
|
|
140
|
+
immediate = immediateResult;
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
immediate = false;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
const installCmd = ["pnpm", "install"];
|
|
147
|
+
const runCmd = ["pnpm", "dev"];
|
|
148
|
+
if (!immediate) {
|
|
149
|
+
prompts.outro(`Done! Next steps:
|
|
150
|
+
cd ${targetDir}
|
|
151
|
+
${installCmd.join(" ")}
|
|
152
|
+
${runCmd.join(" ")}
|
|
153
|
+
`);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
// check if pnpm is installed
|
|
157
|
+
const result = spawnSync("pnpm", ["--version"], { encoding: "utf-8" });
|
|
158
|
+
if (result.error || result.status !== 0) {
|
|
159
|
+
console.error("Error: pnpm is not installed. Please install pnpm first.");
|
|
160
|
+
process.exit(1);
|
|
161
|
+
}
|
|
162
|
+
// check if pnpm major is greater or equal to the one set in package.json packageManager, which should do the trick
|
|
163
|
+
const version = result.stdout.trim();
|
|
164
|
+
const major = Number(version.split(".")[0]);
|
|
165
|
+
if (Number.isNaN(major) || major < minimumPnpmVersion) {
|
|
166
|
+
console.error(`Error: pnpm version ${version} is too old. Minimum required version is ${minimumPnpmVersion}.`);
|
|
167
|
+
process.exit(1);
|
|
168
|
+
}
|
|
169
|
+
prompts.log.step(`Installing dependencies with pnpm...`);
|
|
170
|
+
run(installCmd, {
|
|
171
|
+
stdio: "inherit",
|
|
172
|
+
cwd: root,
|
|
173
|
+
});
|
|
174
|
+
prompts.log.step("Starting dev server...");
|
|
175
|
+
run(runCmd, {
|
|
176
|
+
stdio: "inherit",
|
|
177
|
+
cwd: root,
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
function run([command, ...args], options) {
|
|
181
|
+
const { status, error } = spawnSync(command, args, options);
|
|
182
|
+
if (status != null && status > 0) {
|
|
183
|
+
process.exit(status);
|
|
184
|
+
}
|
|
185
|
+
if (error) {
|
|
186
|
+
console.error(`\n${command} ${args.join(" ")} error!`);
|
|
131
187
|
console.error(error);
|
|
132
188
|
process.exit(1);
|
|
133
189
|
}
|
|
134
190
|
}
|
|
135
|
-
function
|
|
136
|
-
return targetDir
|
|
191
|
+
function sanitizeTargetDir(targetDir) {
|
|
192
|
+
return (targetDir
|
|
193
|
+
.trim()
|
|
194
|
+
// Only keep alphanumeric, dash, underscore, dot, @, /
|
|
195
|
+
.replace(/[^a-zA-Z0-9\-_.@/]/g, "")
|
|
196
|
+
// Prevent path traversal
|
|
197
|
+
.replace(/\.\./g, "")
|
|
198
|
+
// Collapse multiple slashes
|
|
199
|
+
.replace(/\/+/g, "/")
|
|
200
|
+
// Remove leading/trailing slashes
|
|
201
|
+
.replace(/^\/+|\/+$/g, ""));
|
|
137
202
|
}
|
|
138
203
|
function isEmpty(path) {
|
|
139
204
|
const files = fs.readdirSync(path);
|
|
@@ -150,7 +215,3 @@ function emptyDir(dir) {
|
|
|
150
215
|
fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
|
|
151
216
|
}
|
|
152
217
|
}
|
|
153
|
-
init().catch((e) => {
|
|
154
|
-
console.error(e);
|
|
155
|
-
process.exit(1);
|
|
156
|
-
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { randomBytes } from "node:crypto";
|
|
2
|
+
import fs from "node:fs/promises";
|
|
3
|
+
import path from "node:path";
|
|
4
|
+
import { afterEach, beforeEach, describe, expect, it } from "vitest";
|
|
5
|
+
import { init } from "./index.js";
|
|
6
|
+
describe("create-skybridge", () => {
|
|
7
|
+
let tempDirName;
|
|
8
|
+
beforeEach(() => {
|
|
9
|
+
tempDirName = `test-${randomBytes(2).toString("hex")}`;
|
|
10
|
+
});
|
|
11
|
+
afterEach(async () => {
|
|
12
|
+
await fs.rm(path.join(process.cwd(), tempDirName), {
|
|
13
|
+
recursive: true,
|
|
14
|
+
force: true,
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
it("should scaffold a new project", async () => {
|
|
18
|
+
const name = `../../${tempDirName}//project$`;
|
|
19
|
+
await init([name]);
|
|
20
|
+
await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
|
|
21
|
+
expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
|
|
22
|
+
});
|
|
23
|
+
});
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-skybridge",
|
|
3
|
-
"version": "0.0.0-dev.
|
|
3
|
+
"version": "0.0.0-dev.cbadf52",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Alpic",
|
|
@@ -13,10 +13,13 @@
|
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
15
|
"index.js",
|
|
16
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"template"
|
|
17
18
|
],
|
|
18
19
|
"scripts": {
|
|
19
20
|
"build": "tsc",
|
|
21
|
+
"test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
|
|
22
|
+
"test:unit": "vitest run",
|
|
20
23
|
"test:type": "tsc --noEmit",
|
|
21
24
|
"test:format": "biome ci",
|
|
22
25
|
"prepublishOnly": "pnpm run build"
|
|
@@ -27,6 +30,7 @@
|
|
|
27
30
|
},
|
|
28
31
|
"devDependencies": {
|
|
29
32
|
"@types/node": "^25.0.3",
|
|
30
|
-
"typescript": "^5.9.3"
|
|
33
|
+
"typescript": "^5.9.3",
|
|
34
|
+
"vitest": "^2.1.9"
|
|
31
35
|
}
|
|
32
36
|
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# ChatGPT Apps SDK Alpic Starter
|
|
2
|
+
|
|
3
|
+
A minimal TypeScript template for building OpenAI Apps SDK compatible MCP servers with widget rendering in ChatGPT.
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
### Prerequisites
|
|
8
|
+
|
|
9
|
+
- Node.js 22+
|
|
10
|
+
- pnpm (install with `npm install -g pnpm`)
|
|
11
|
+
- HTTP tunnel such as [ngrok](https://ngrok.com/download)
|
|
12
|
+
|
|
13
|
+
### Local Development
|
|
14
|
+
|
|
15
|
+
#### 1. Install
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm install
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
#### 2. Start your local server
|
|
22
|
+
|
|
23
|
+
Run the development server from the root directory:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
pnpm dev
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
This command starts an Express server on port 3000. This server packages:
|
|
30
|
+
|
|
31
|
+
- an MCP endpoint on `/mcp` (the app backend)
|
|
32
|
+
- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
|
|
33
|
+
|
|
34
|
+
#### 3. Connect to ChatGPT
|
|
35
|
+
|
|
36
|
+
- ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
|
|
37
|
+
```bash
|
|
38
|
+
ngrok http 3000
|
|
39
|
+
```
|
|
40
|
+
- In ChatGPT, navigate to **Settings → Connectors → Create** and add the forwarding URL provided by ngrok suffixed with `/mcp` (e.g. `https://3785c5ddc4b6.ngrok-free.app/mcp`)
|
|
41
|
+
|
|
42
|
+
### Create your first widget
|
|
43
|
+
|
|
44
|
+
#### 1. Add a new widget
|
|
45
|
+
|
|
46
|
+
- Register a widget in `server/server.ts` with a unique name (e.g., `my-widget`)
|
|
47
|
+
- Create a matching React component at `web/src/widgets/my-widget.tsx`. The file name must match the widget name exactly
|
|
48
|
+
|
|
49
|
+
#### 2. Edit widgets with Hot Module Replacement (HMR)
|
|
50
|
+
|
|
51
|
+
Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
|
|
52
|
+
|
|
53
|
+
#### 3. Edit server code
|
|
54
|
+
|
|
55
|
+
Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
|
|
56
|
+
|
|
57
|
+
## Deploy to Production
|
|
58
|
+
|
|
59
|
+
- Use [Alpic](https://alpic.ai/) to deploy your OpenAI App to production
|
|
60
|
+
- In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
|
|
61
|
+
|
|
62
|
+
## Resources
|
|
63
|
+
|
|
64
|
+
- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
|
|
65
|
+
- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
|
|
66
|
+
- [Alpic Documentation](https://docs.alpic.ai/)
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "apps-sdk-template",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": true,
|
|
5
|
+
"description": "Alpic MCP Server Template",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"packageManager": "pnpm@10.18.3",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"dev": "pnpm --filter @apps-sdk-template/server dev",
|
|
10
|
+
"build": "pnpm web:build && rm -rf server/dist && pnpm --filter=@apps-sdk-template/server --prod deploy server/dist && cp -r web/dist server/dist/assets && pnpm --filter=@apps-sdk-template/server build",
|
|
11
|
+
"start": "pnpm server:start",
|
|
12
|
+
"inspector": "pnpm --filter @apps-sdk-template/server inspector",
|
|
13
|
+
"server:build": "pnpm --filter @apps-sdk-template/server build",
|
|
14
|
+
"server:start": "pnpm --filter @apps-sdk-template/server start",
|
|
15
|
+
"web:build": "pnpm --filter @apps-sdk-template/web build",
|
|
16
|
+
"web:preview": "pnpm --filter @apps-sdk-template/web preview"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"tsx": "^4.19.4"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@apps-sdk-template/server",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": true,
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"description": "Alpic MCP Server Template",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"type": "module",
|
|
11
|
+
"scripts": {
|
|
12
|
+
"dev": "nodemon",
|
|
13
|
+
"build": "tsc",
|
|
14
|
+
"start": "node dist/index.js",
|
|
15
|
+
"inspector": "mcp-inspector http://localhost:3000/mcp"
|
|
16
|
+
},
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"@modelcontextprotocol/sdk": "^1.24.3",
|
|
19
|
+
"express": "^5.1.0",
|
|
20
|
+
"skybridge": "catalog:",
|
|
21
|
+
"vite": "^7.1.11",
|
|
22
|
+
"zod": "^4.1.13"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@modelcontextprotocol/inspector": "^0.17.5",
|
|
26
|
+
"@types/express": "^5.0.3",
|
|
27
|
+
"@types/node": "^22.15.30",
|
|
28
|
+
"nodemon": "^3.1.10",
|
|
29
|
+
"tsx": "^4.19.2",
|
|
30
|
+
"typescript": "^5.7.2"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import express, { type Express } from "express";
|
|
2
|
+
|
|
3
|
+
import { widgetsDevServer } from "skybridge/server";
|
|
4
|
+
import type { ViteDevServer } from "vite";
|
|
5
|
+
import { mcp } from "./middleware.js";
|
|
6
|
+
import server from "./server.js";
|
|
7
|
+
|
|
8
|
+
const app = express() as Express & { vite: ViteDevServer };
|
|
9
|
+
|
|
10
|
+
app.use(express.json());
|
|
11
|
+
|
|
12
|
+
app.use(mcp(server));
|
|
13
|
+
|
|
14
|
+
const env = process.env.NODE_ENV || "development";
|
|
15
|
+
|
|
16
|
+
if (env !== "production") {
|
|
17
|
+
app.use(await widgetsDevServer());
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
app.listen(3000, (error) => {
|
|
21
|
+
if (error) {
|
|
22
|
+
console.error("Failed to start server:", error);
|
|
23
|
+
process.exit(1);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
console.log(`Server listening on port 3000 - ${env}`);
|
|
27
|
+
console.log(
|
|
28
|
+
"Make your local server accessible with 'ngrok http 3000' and connect to ChatGPT with URL https://xxxxxx.ngrok-free.app/mcp",
|
|
29
|
+
);
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
process.on("SIGINT", async () => {
|
|
33
|
+
console.log("Server shutdown complete");
|
|
34
|
+
process.exit(0);
|
|
35
|
+
});
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
|
|
2
|
+
import type { NextFunction, Request, Response } from "express";
|
|
3
|
+
|
|
4
|
+
import type { McpServer } from "skybridge/server";
|
|
5
|
+
|
|
6
|
+
export const mcp =
|
|
7
|
+
(server: McpServer) =>
|
|
8
|
+
async (req: Request, res: Response, next: NextFunction) => {
|
|
9
|
+
// Only handle requests to the /mcp path
|
|
10
|
+
if (req.path !== "/mcp") {
|
|
11
|
+
return next();
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
if (req.method === "POST") {
|
|
15
|
+
try {
|
|
16
|
+
const transport = new StreamableHTTPServerTransport({
|
|
17
|
+
sessionIdGenerator: undefined,
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
res.on("close", () => {
|
|
21
|
+
transport.close();
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
await server.connect(transport);
|
|
25
|
+
|
|
26
|
+
await transport.handleRequest(req, res, req.body);
|
|
27
|
+
} catch (error) {
|
|
28
|
+
console.error("Error handling MCP request:", error);
|
|
29
|
+
if (!res.headersSent) {
|
|
30
|
+
res.status(500).json({
|
|
31
|
+
jsonrpc: "2.0",
|
|
32
|
+
error: {
|
|
33
|
+
code: -32603,
|
|
34
|
+
message: "Internal server error",
|
|
35
|
+
},
|
|
36
|
+
id: null,
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
} else if (req.method === "GET" || req.method === "DELETE") {
|
|
41
|
+
res.writeHead(405).end(
|
|
42
|
+
JSON.stringify({
|
|
43
|
+
jsonrpc: "2.0",
|
|
44
|
+
error: {
|
|
45
|
+
code: -32000,
|
|
46
|
+
message: "Method not allowed.",
|
|
47
|
+
},
|
|
48
|
+
id: null,
|
|
49
|
+
}),
|
|
50
|
+
);
|
|
51
|
+
} else {
|
|
52
|
+
next();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { McpServer } from "skybridge/server";
|
|
2
|
+
import { z } from "zod";
|
|
3
|
+
|
|
4
|
+
const Answers = [
|
|
5
|
+
"As I see it, yes",
|
|
6
|
+
"Ask again later",
|
|
7
|
+
"Better not tell you now",
|
|
8
|
+
"Cannot predict now",
|
|
9
|
+
"Concentrate and ask again",
|
|
10
|
+
"Don't count on it",
|
|
11
|
+
"It is certain",
|
|
12
|
+
"It is decidedly so",
|
|
13
|
+
"Most likely",
|
|
14
|
+
"My reply is no",
|
|
15
|
+
"My sources say no",
|
|
16
|
+
"Outlook good",
|
|
17
|
+
"Outlook not so good",
|
|
18
|
+
"Reply hazy, try again",
|
|
19
|
+
"Signs point to yes",
|
|
20
|
+
"Very doubtful",
|
|
21
|
+
"Without a doubt",
|
|
22
|
+
"Yes definitely",
|
|
23
|
+
"Yes",
|
|
24
|
+
"You may rely on it",
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
const server = new McpServer(
|
|
28
|
+
{
|
|
29
|
+
name: "alpic-openai-app",
|
|
30
|
+
version: "0.0.1",
|
|
31
|
+
},
|
|
32
|
+
{ capabilities: {} },
|
|
33
|
+
).registerWidget(
|
|
34
|
+
"magic-8-ball",
|
|
35
|
+
{
|
|
36
|
+
description: "Magic 8 Ball",
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
description: "For fortune-telling or seeking advice.",
|
|
40
|
+
inputSchema: {
|
|
41
|
+
question: z.string().describe("The user question."),
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
async ({ question }) => {
|
|
45
|
+
try {
|
|
46
|
+
// deterministic answer
|
|
47
|
+
const hash = question
|
|
48
|
+
.split("")
|
|
49
|
+
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
50
|
+
const answer = Answers[hash % Answers.length];
|
|
51
|
+
return {
|
|
52
|
+
structuredContent: { answer },
|
|
53
|
+
content: [],
|
|
54
|
+
isError: false,
|
|
55
|
+
};
|
|
56
|
+
} catch (error) {
|
|
57
|
+
return {
|
|
58
|
+
content: [{ type: "text", text: `Error: ${error}` }],
|
|
59
|
+
isError: true,
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
export default server;
|
|
66
|
+
export type AppType = typeof server;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ESNext",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"esModuleInterop": true,
|
|
7
|
+
"strict": true,
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
"forceConsistentCasingInFileNames": true,
|
|
10
|
+
"outDir": "dist",
|
|
11
|
+
"sourceMap": true,
|
|
12
|
+
"jsx": "react",
|
|
13
|
+
"inlineSources": true
|
|
14
|
+
},
|
|
15
|
+
"include": ["**/*.ts", "**/*.tsx"],
|
|
16
|
+
"exclude": ["dist", "node_modules"]
|
|
17
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@apps-sdk-template/web",
|
|
3
|
+
"private": true,
|
|
4
|
+
"version": "0.0.0",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "echo 'Not implemented",
|
|
8
|
+
"build": "tsc -b && vite build",
|
|
9
|
+
"preview": "vite preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"skybridge": "catalog:",
|
|
13
|
+
"react": "^19.1.1",
|
|
14
|
+
"react-dom": "^19.1.1"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@types/node": "^24.6.0",
|
|
18
|
+
"@types/react": "^19.1.16",
|
|
19
|
+
"@types/react-dom": "^19.1.9",
|
|
20
|
+
"@vitejs/plugin-react": "^5.0.4",
|
|
21
|
+
"typescript": "~5.9.3",
|
|
22
|
+
"vite": "^7.1.11"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ball {
|
|
9
|
+
background-color: black;
|
|
10
|
+
border-radius: 50%;
|
|
11
|
+
width: 12rem;
|
|
12
|
+
height: 12rem;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
font-family: monospace;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.question {
|
|
21
|
+
font-size: 0.75rem;
|
|
22
|
+
color: lightgrey;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.answer {
|
|
26
|
+
font-size: 1.125rem;
|
|
27
|
+
font-weight: bold;
|
|
28
|
+
margin-top: 0.5rem;
|
|
29
|
+
color: aqua;
|
|
30
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import "@/index.css";
|
|
2
|
+
|
|
3
|
+
import { mountWidget } from "skybridge/web";
|
|
4
|
+
import { useToolInfo } from "../helpers";
|
|
5
|
+
|
|
6
|
+
function Magic8Ball() {
|
|
7
|
+
const { input, output } = useToolInfo<"magic-8-ball">();
|
|
8
|
+
if (!output) {
|
|
9
|
+
return <div>Shaking...</div>;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
return (
|
|
13
|
+
<div className="container">
|
|
14
|
+
<div className="ball">
|
|
15
|
+
<div className="question">{input.question}</div>
|
|
16
|
+
<div className="answer">{output.answer}</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export default Magic8Ball;
|
|
23
|
+
|
|
24
|
+
mountWidget(<Magic8Ball />);
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
4
|
+
"target": "ES2022",
|
|
5
|
+
"useDefineForClassFields": true,
|
|
6
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
7
|
+
"module": "ESNext",
|
|
8
|
+
"types": ["vite/client"],
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
|
|
11
|
+
/* Bundler mode */
|
|
12
|
+
"moduleResolution": "bundler",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"verbatimModuleSyntax": true,
|
|
15
|
+
"moduleDetection": "force",
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
"jsx": "react-jsx",
|
|
18
|
+
|
|
19
|
+
/* Linting */
|
|
20
|
+
"strict": true,
|
|
21
|
+
"noUnusedLocals": true,
|
|
22
|
+
"noUnusedParameters": true,
|
|
23
|
+
"erasableSyntaxOnly": true,
|
|
24
|
+
"noFallthroughCasesInSwitch": true,
|
|
25
|
+
"noUncheckedSideEffectImports": true,
|
|
26
|
+
|
|
27
|
+
/* Shadcn Config */
|
|
28
|
+
"baseUrl": ".",
|
|
29
|
+
"paths": {
|
|
30
|
+
"@/*": ["./src/*"]
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
"include": ["src"]
|
|
34
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
4
|
+
"target": "ES2023",
|
|
5
|
+
"lib": ["ES2023"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"types": ["node"],
|
|
8
|
+
"skipLibCheck": true,
|
|
9
|
+
|
|
10
|
+
/* Bundler mode */
|
|
11
|
+
"moduleResolution": "bundler",
|
|
12
|
+
"allowImportingTsExtensions": true,
|
|
13
|
+
"verbatimModuleSyntax": true,
|
|
14
|
+
"moduleDetection": "force",
|
|
15
|
+
"noEmit": true,
|
|
16
|
+
|
|
17
|
+
/* Linting */
|
|
18
|
+
"strict": true,
|
|
19
|
+
"noUnusedLocals": true,
|
|
20
|
+
"noUnusedParameters": true,
|
|
21
|
+
"erasableSyntaxOnly": true,
|
|
22
|
+
"noFallthroughCasesInSwitch": true,
|
|
23
|
+
"noUncheckedSideEffectImports": true
|
|
24
|
+
},
|
|
25
|
+
"include": ["vite.config.ts"]
|
|
26
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import react from "@vitejs/plugin-react";
|
|
3
|
+
import { skybridge } from "skybridge/web";
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
|
|
6
|
+
// https://vite.dev/config/
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [skybridge(), react()],
|
|
9
|
+
|
|
10
|
+
resolve: {
|
|
11
|
+
alias: {
|
|
12
|
+
"@": path.resolve(__dirname, "./src"),
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
});
|