create-skybridge 0.0.0-dev.5b3dd8c → 0.0.0-dev.5b83f68
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/LICENSE +21 -0
- package/dist/index.js +163 -29
- package/dist/index.test.js +13 -7
- package/package.json +11 -12
- package/template/AGENTS.md +1 -0
- package/template/README.md +54 -21
- package/template/_gitignore +2 -1
- package/template/alpic.json +1 -2
- package/template/node_modules/.bin/alpic +21 -0
- package/template/node_modules/.bin/nodemon +21 -0
- package/template/node_modules/.bin/sb +21 -0
- package/template/node_modules/.bin/skybridge +21 -0
- package/template/node_modules/.bin/tsc +21 -0
- package/template/node_modules/.bin/tsserver +21 -0
- package/template/node_modules/.bin/tsx +21 -0
- package/template/node_modules/.bin/vite +21 -0
- package/template/nodemon.json +5 -0
- package/template/package.json +27 -10
- package/template/server/src/index.ts +16 -8
- package/template/server/src/server.ts +4 -20
- package/template/tsconfig.json +23 -0
- package/template/tsconfig.server.json +11 -0
- package/template/web/src/index.css +130 -6
- package/template/web/src/widgets/magic-8-ball.tsx +3 -1
- package/template/web/vite.config.ts +3 -3
- package/template/pnpm-workspace.yaml +0 -7
- package/template/server/nodemon.json +0 -5
- package/template/server/package.json +0 -34
- package/template/server/src/env.ts +0 -12
- package/template/server/tsconfig.json +0 -17
- package/template/web/package.json +0 -24
- package/template/web/tsconfig.app.json +0 -34
- package/template/web/tsconfig.json +0 -13
- package/template/web/tsconfig.node.json +0 -26
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Alpic
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { spawnSync } from "node:child_process";
|
|
1
2
|
import fs from "node:fs";
|
|
2
3
|
import path from "node:path";
|
|
3
4
|
import { fileURLToPath } from "node:url";
|
|
4
5
|
import * as prompts from "@clack/prompts";
|
|
6
|
+
import { downloadTemplate } from "giget";
|
|
5
7
|
import mri from "mri";
|
|
6
8
|
const defaultProjectName = "skybridge-project";
|
|
7
9
|
// prettier-ignore
|
|
@@ -12,21 +14,32 @@ Create a new Skybridge project by copying the starter template.
|
|
|
12
14
|
|
|
13
15
|
Options:
|
|
14
16
|
-h, --help show this help message
|
|
17
|
+
--repo <uri> use a git repository instead of the built-in template
|
|
15
18
|
--overwrite remove existing files in target directory
|
|
19
|
+
--immediate install dependencies and start development server
|
|
20
|
+
|
|
21
|
+
Repository URI formats:
|
|
22
|
+
github:user/repo
|
|
23
|
+
gitlab:user/repo/subdirectory
|
|
24
|
+
bitbucket:user/repo#branch
|
|
16
25
|
|
|
17
26
|
Examples:
|
|
18
27
|
create-skybridge my-app
|
|
19
|
-
create-skybridge
|
|
28
|
+
create-skybridge my-app --repo github:alpic-ai/skybridge/examples/ecom-carousel
|
|
29
|
+
create-skybridge . --overwrite --immediate
|
|
20
30
|
`;
|
|
21
31
|
export async function init(args = process.argv.slice(2)) {
|
|
22
32
|
const argv = mri(args, {
|
|
23
|
-
boolean: ["help", "overwrite"],
|
|
33
|
+
boolean: ["help", "overwrite", "immediate"],
|
|
34
|
+
string: ["repo"],
|
|
24
35
|
alias: { h: "help" },
|
|
25
36
|
});
|
|
26
37
|
const argTargetDir = argv._[0]
|
|
27
38
|
? sanitizeTargetDir(String(argv._[0]))
|
|
28
39
|
: undefined;
|
|
40
|
+
const argRepo = argv.repo;
|
|
29
41
|
const argOverwrite = argv.overwrite;
|
|
42
|
+
const argImmediate = argv.immediate;
|
|
30
43
|
const help = argv.help;
|
|
31
44
|
if (help) {
|
|
32
45
|
console.log(helpMessage);
|
|
@@ -48,8 +61,9 @@ export async function init(args = process.argv.slice(2)) {
|
|
|
48
61
|
: "Invalid project name";
|
|
49
62
|
},
|
|
50
63
|
});
|
|
51
|
-
if (prompts.isCancel(projectName))
|
|
64
|
+
if (prompts.isCancel(projectName)) {
|
|
52
65
|
return cancel();
|
|
66
|
+
}
|
|
53
67
|
targetDir = sanitizeTargetDir(projectName);
|
|
54
68
|
}
|
|
55
69
|
else {
|
|
@@ -77,8 +91,9 @@ export async function init(args = process.argv.slice(2)) {
|
|
|
77
91
|
},
|
|
78
92
|
],
|
|
79
93
|
});
|
|
80
|
-
if (prompts.isCancel(res))
|
|
94
|
+
if (prompts.isCancel(res)) {
|
|
81
95
|
return cancel();
|
|
96
|
+
}
|
|
82
97
|
overwrite = res;
|
|
83
98
|
}
|
|
84
99
|
else {
|
|
@@ -90,32 +105,132 @@ export async function init(args = process.argv.slice(2)) {
|
|
|
90
105
|
emptyDir(targetDir);
|
|
91
106
|
break;
|
|
92
107
|
case "no":
|
|
93
|
-
|
|
94
|
-
|
|
108
|
+
prompts.log.error("Target directory is not empty.");
|
|
109
|
+
process.exit(1);
|
|
95
110
|
}
|
|
96
111
|
}
|
|
97
112
|
const root = path.join(process.cwd(), targetDir);
|
|
98
|
-
// 3.
|
|
99
|
-
prompts.log.step(`Copying template...`);
|
|
113
|
+
// 3. Download from repo or copy template
|
|
100
114
|
try {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
115
|
+
if (argRepo) {
|
|
116
|
+
prompts.log.step(`Downloading ${argRepo}...`);
|
|
117
|
+
await downloadTemplate(argRepo, { dir: root });
|
|
118
|
+
prompts.log.success(`Project created in ${root}`);
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
prompts.log.step(`Copying template...`);
|
|
122
|
+
const templateDir = fileURLToPath(new URL("../template", import.meta.url));
|
|
123
|
+
// Copy template to target directory
|
|
124
|
+
fs.cpSync(templateDir, root, {
|
|
125
|
+
recursive: true,
|
|
126
|
+
filter: (src) => [".npmrc"].every((file) => !src.endsWith(file)),
|
|
127
|
+
});
|
|
128
|
+
// Rename _gitignore to .gitignore
|
|
129
|
+
fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
|
|
130
|
+
prompts.log.success(`Project created in ${root}`);
|
|
113
131
|
}
|
|
114
|
-
prompts.log.success(`Project created in ${root}`);
|
|
115
|
-
prompts.outro(`Done! Next steps:\n\n cd ${targetDir}\n pnpm install\n pnpm dev`);
|
|
116
132
|
}
|
|
117
133
|
catch (error) {
|
|
118
|
-
prompts.log.error("Failed to
|
|
134
|
+
prompts.log.error("Failed to create project from template");
|
|
135
|
+
console.error(error);
|
|
136
|
+
process.exit(1);
|
|
137
|
+
}
|
|
138
|
+
// Update project name in package.json
|
|
139
|
+
const pkgPath = path.join(root, "package.json");
|
|
140
|
+
if (!fs.existsSync(pkgPath)) {
|
|
141
|
+
prompts.log.error("No package.json found in project");
|
|
142
|
+
process.exit(1);
|
|
143
|
+
}
|
|
144
|
+
try {
|
|
145
|
+
const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
|
|
146
|
+
pkg.name = path.basename(root);
|
|
147
|
+
fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
|
|
148
|
+
}
|
|
149
|
+
catch (error) {
|
|
150
|
+
prompts.log.error("Failed to update project name in package.json");
|
|
151
|
+
console.error(error);
|
|
152
|
+
process.exit(1);
|
|
153
|
+
}
|
|
154
|
+
const userAgent = process.env.npm_config_user_agent;
|
|
155
|
+
const pkgManager = userAgent?.split(" ")[0]?.split("/")[0] || "npm";
|
|
156
|
+
// 4. Ask about skills installation
|
|
157
|
+
if (interactive) {
|
|
158
|
+
const skillsResult = await prompts.confirm({
|
|
159
|
+
message: "Install the coding agents skills? (recommended)",
|
|
160
|
+
initialValue: true,
|
|
161
|
+
});
|
|
162
|
+
if (prompts.isCancel(skillsResult)) {
|
|
163
|
+
return cancel();
|
|
164
|
+
}
|
|
165
|
+
if (skillsResult) {
|
|
166
|
+
run([
|
|
167
|
+
...getPkgExecCmd(pkgManager, "skills"),
|
|
168
|
+
"add",
|
|
169
|
+
"alpic-ai/skybridge",
|
|
170
|
+
"-s",
|
|
171
|
+
"chatgpt-app-builder",
|
|
172
|
+
], {
|
|
173
|
+
stdio: "inherit",
|
|
174
|
+
cwd: targetDir,
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
// 5. Ask about immediate installation
|
|
179
|
+
let immediate = argImmediate;
|
|
180
|
+
if (immediate === undefined) {
|
|
181
|
+
if (interactive) {
|
|
182
|
+
const immediateResult = await prompts.confirm({
|
|
183
|
+
message: `Install with ${pkgManager} and start now?`,
|
|
184
|
+
});
|
|
185
|
+
if (prompts.isCancel(immediateResult)) {
|
|
186
|
+
return cancel();
|
|
187
|
+
}
|
|
188
|
+
immediate = immediateResult;
|
|
189
|
+
}
|
|
190
|
+
else {
|
|
191
|
+
immediate = false;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
const installCmd = [pkgManager, "install"];
|
|
195
|
+
const runCmd = [pkgManager];
|
|
196
|
+
switch (pkgManager) {
|
|
197
|
+
case "yarn":
|
|
198
|
+
case "pnpm":
|
|
199
|
+
case "bun":
|
|
200
|
+
break;
|
|
201
|
+
case "deno":
|
|
202
|
+
runCmd.push("task");
|
|
203
|
+
break;
|
|
204
|
+
default:
|
|
205
|
+
runCmd.push("run");
|
|
206
|
+
}
|
|
207
|
+
runCmd.push("dev");
|
|
208
|
+
if (!immediate) {
|
|
209
|
+
prompts.outro(`Done! Next steps:
|
|
210
|
+
cd ${targetDir}
|
|
211
|
+
${installCmd.join(" ")}
|
|
212
|
+
${runCmd.join(" ")}
|
|
213
|
+
`);
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
prompts.log.step(`Installing dependencies with ${pkgManager}...`);
|
|
217
|
+
run(installCmd, {
|
|
218
|
+
stdio: "inherit",
|
|
219
|
+
cwd: root,
|
|
220
|
+
});
|
|
221
|
+
prompts.log.step("Starting dev server...");
|
|
222
|
+
run(runCmd, {
|
|
223
|
+
stdio: "inherit",
|
|
224
|
+
cwd: root,
|
|
225
|
+
});
|
|
226
|
+
}
|
|
227
|
+
function run([command, ...args], options) {
|
|
228
|
+
const { status, error } = spawnSync(command, args, options);
|
|
229
|
+
if (status != null && status > 0) {
|
|
230
|
+
process.exit(status);
|
|
231
|
+
}
|
|
232
|
+
if (error) {
|
|
233
|
+
console.error(`\n${command} ${args.join(" ")} error!`);
|
|
119
234
|
console.error(error);
|
|
120
235
|
process.exit(1);
|
|
121
236
|
}
|
|
@@ -132,18 +247,37 @@ function sanitizeTargetDir(targetDir) {
|
|
|
132
247
|
// Remove leading/trailing slashes
|
|
133
248
|
.replace(/^\/+|\/+$/g, ""));
|
|
134
249
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
return
|
|
250
|
+
// Skip user's SPEC.md and IDE/agent preferences (.idea, .claude, etc.)
|
|
251
|
+
function isSkippedEntry(entry) {
|
|
252
|
+
return ((entry.name.startsWith(".") && entry.isDirectory()) ||
|
|
253
|
+
entry.name === "SPEC.md");
|
|
254
|
+
}
|
|
255
|
+
function isEmpty(dirPath) {
|
|
256
|
+
const entries = fs.readdirSync(dirPath, { withFileTypes: true });
|
|
257
|
+
return entries.every(isSkippedEntry);
|
|
138
258
|
}
|
|
139
259
|
function emptyDir(dir) {
|
|
140
260
|
if (!fs.existsSync(dir)) {
|
|
141
261
|
return;
|
|
142
262
|
}
|
|
143
|
-
for (const
|
|
144
|
-
if (
|
|
263
|
+
for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
|
|
264
|
+
if (isSkippedEntry(entry)) {
|
|
145
265
|
continue;
|
|
146
266
|
}
|
|
147
|
-
fs.rmSync(path.
|
|
267
|
+
fs.rmSync(path.join(dir, entry.name), { recursive: true, force: true });
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
function getPkgExecCmd(pkgManager, cmd) {
|
|
271
|
+
switch (pkgManager) {
|
|
272
|
+
case "yarn":
|
|
273
|
+
return ["yarn", "dlx", cmd];
|
|
274
|
+
case "pnpm":
|
|
275
|
+
return ["pnpm", "dlx", cmd];
|
|
276
|
+
case "bun":
|
|
277
|
+
return ["bunx", cmd];
|
|
278
|
+
case "deno":
|
|
279
|
+
return ["deno", "run", "-A", `npm:${cmd}`];
|
|
280
|
+
default:
|
|
281
|
+
return ["npx", cmd];
|
|
148
282
|
}
|
|
149
283
|
}
|
package/dist/index.test.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { randomBytes } from "node:crypto";
|
|
2
2
|
import fs from "node:fs/promises";
|
|
3
3
|
import path from "node:path";
|
|
4
|
-
import { afterEach, beforeEach, describe,
|
|
4
|
+
import { afterEach, beforeEach, describe, expect, it } from "vitest";
|
|
5
5
|
import { init } from "./index.js";
|
|
6
6
|
describe("create-skybridge", () => {
|
|
7
7
|
let tempDirName;
|
|
@@ -14,14 +14,20 @@ describe("create-skybridge", () => {
|
|
|
14
14
|
force: true,
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
|
-
it("should
|
|
17
|
+
it("should copy the template", async () => {
|
|
18
18
|
const name = `../../${tempDirName}//project$`;
|
|
19
19
|
await init([name]);
|
|
20
20
|
await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
21
|
+
expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
|
|
22
|
+
});
|
|
23
|
+
it("should download template from repo", async () => {
|
|
24
|
+
const name = `../../${tempDirName}//project$`;
|
|
25
|
+
await init([
|
|
26
|
+
name,
|
|
27
|
+
"--repo",
|
|
28
|
+
"github:alpic-ai/skybridge/examples/ecom-carousel",
|
|
29
|
+
]);
|
|
30
|
+
await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
|
|
31
|
+
expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
|
|
26
32
|
});
|
|
27
33
|
});
|
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.5b83f68",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Alpic",
|
|
@@ -16,21 +16,20 @@
|
|
|
16
16
|
"dist",
|
|
17
17
|
"template"
|
|
18
18
|
],
|
|
19
|
-
"scripts": {
|
|
20
|
-
"build": "tsc",
|
|
21
|
-
"test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
|
|
22
|
-
"test:unit": "vitest run",
|
|
23
|
-
"test:type": "tsc --noEmit",
|
|
24
|
-
"test:format": "biome ci",
|
|
25
|
-
"prepublishOnly": "pnpm run build"
|
|
26
|
-
},
|
|
27
19
|
"dependencies": {
|
|
28
20
|
"@clack/prompts": "^0.11.0",
|
|
21
|
+
"giget": "^2.0.0",
|
|
29
22
|
"mri": "^1.2.0"
|
|
30
23
|
},
|
|
31
24
|
"devDependencies": {
|
|
32
|
-
"@types/node": "^25.0.3",
|
|
33
25
|
"typescript": "^5.9.3",
|
|
34
|
-
"vitest": "^
|
|
26
|
+
"vitest": "^4.0.17"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsc",
|
|
30
|
+
"test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
|
|
31
|
+
"test:unit": "vitest run",
|
|
32
|
+
"test:type": "tsc --noEmit",
|
|
33
|
+
"test:format": "biome ci"
|
|
35
34
|
}
|
|
36
|
-
}
|
|
35
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Before writing code, first explore the project structure, then invoke the chatgpt-app-builder skill for documentation.
|
package/template/README.md
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Skybridge Starter
|
|
2
2
|
|
|
3
|
-
A minimal TypeScript template for building
|
|
3
|
+
A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech/home) framework.
|
|
4
4
|
|
|
5
5
|
## Getting Started
|
|
6
6
|
|
|
7
7
|
### Prerequisites
|
|
8
8
|
|
|
9
|
-
- Node.js
|
|
10
|
-
-
|
|
11
|
-
- HTTP tunnel such as [ngrok](https://ngrok.com/download)
|
|
9
|
+
- Node.js 24+
|
|
10
|
+
- HTTP tunnel such as [ngrok](https://ngrok.com/download) if you want to test with remote MCP hosts like ChatGPT or Claude.ai.
|
|
12
11
|
|
|
13
12
|
### Local Development
|
|
14
13
|
|
|
15
14
|
#### 1. Install
|
|
16
15
|
|
|
17
16
|
```bash
|
|
17
|
+
npm install
|
|
18
|
+
# or
|
|
19
|
+
yarn install
|
|
20
|
+
# or
|
|
18
21
|
pnpm install
|
|
22
|
+
# or
|
|
23
|
+
bun install
|
|
19
24
|
```
|
|
20
25
|
|
|
21
26
|
#### 2. Start your local server
|
|
@@ -23,44 +28,72 @@ pnpm install
|
|
|
23
28
|
Run the development server from the root directory:
|
|
24
29
|
|
|
25
30
|
```bash
|
|
31
|
+
npm run dev
|
|
32
|
+
# or
|
|
33
|
+
yarn dev
|
|
34
|
+
# or
|
|
26
35
|
pnpm dev
|
|
36
|
+
# or
|
|
37
|
+
bun dev
|
|
27
38
|
```
|
|
28
39
|
|
|
29
|
-
This command starts
|
|
40
|
+
This command starts:
|
|
41
|
+
- Your MCP server at `http://localhost:3000/mcp`.
|
|
42
|
+
- Skybridge DevTools UI at `http://localhost:3000/`.
|
|
30
43
|
|
|
31
|
-
|
|
32
|
-
- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
|
|
44
|
+
#### 3. Project structure
|
|
33
45
|
|
|
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
46
|
```
|
|
40
|
-
|
|
47
|
+
├── server/
|
|
48
|
+
│ └── src/
|
|
49
|
+
│ ├── index.ts # Entry point
|
|
50
|
+
│ ├── middleware.ts # MCP middleware
|
|
51
|
+
│ └── server.ts # Widget registry & routes
|
|
52
|
+
├── web/
|
|
53
|
+
│ ├── src/
|
|
54
|
+
│ │ ├── widgets/ # React components (one per widget)
|
|
55
|
+
│ │ ├── helpers.ts # Shared utilities
|
|
56
|
+
│ │ └── index.css # Global styles
|
|
57
|
+
│ └── vite.config.ts
|
|
58
|
+
├── alpic.json # Deployment config
|
|
59
|
+
├── nodemon.json # Dev server config
|
|
60
|
+
└── package.json
|
|
61
|
+
```
|
|
41
62
|
|
|
42
63
|
### Create your first widget
|
|
43
64
|
|
|
44
65
|
#### 1. Add a new widget
|
|
45
66
|
|
|
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
|
|
67
|
+
- Register a widget in `server/src/server.ts` with a unique name (e.g., `my-widget`) using [`registerWidget`](https://docs.skybridge.tech/api-reference/register-widget)
|
|
68
|
+
- Create a matching React component at `web/src/widgets/my-widget.tsx`. **The file name must match the widget name exactly**.
|
|
48
69
|
|
|
49
70
|
#### 2. Edit widgets with Hot Module Replacement (HMR)
|
|
50
71
|
|
|
51
|
-
Edit and save components in `web/src/widgets/` — changes appear instantly
|
|
72
|
+
Edit and save components in `web/src/widgets/` — changes will appear instantly inside your App.
|
|
52
73
|
|
|
53
74
|
#### 3. Edit server code
|
|
54
75
|
|
|
55
|
-
Modify files in `server/` and
|
|
76
|
+
Modify files in `server/` and refresh the connection with your testing MCP Client to see the changes.
|
|
77
|
+
|
|
78
|
+
### Testing your App
|
|
79
|
+
|
|
80
|
+
You can test your App locally by using our DevTools UI on `localhost:3000` while running the `pnpm dev` command.
|
|
81
|
+
|
|
82
|
+
To test your app with other MCP Clients like ChatGPT, Claude or VSCode, see [Testing Your App](https://docs.skybridge.tech/quickstart/test-your-app).
|
|
83
|
+
|
|
56
84
|
|
|
57
85
|
## Deploy to Production
|
|
58
86
|
|
|
59
|
-
|
|
60
|
-
- In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
|
|
87
|
+
Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
|
|
61
88
|
|
|
62
|
-
|
|
89
|
+
Deploy your app in minutes with [Alpic](https://alpic.ai/).
|
|
90
|
+
1. Create an account on [Alpic platform](https://app.alpic.ai/).
|
|
91
|
+
2. Connect your GitHub repository to automatically deploy at each commit.
|
|
92
|
+
3. Use your remote App URL to connect it to MCP Clients, or use the Alpic Playground to easily test your App.
|
|
63
93
|
|
|
94
|
+
## Resources
|
|
95
|
+
- [Skybridge Documentation](https://docs.skybridge.tech/)
|
|
64
96
|
- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
|
|
97
|
+
- [MCP Apps Documentation](https://github.com/modelcontextprotocol/ext-apps/tree/main)
|
|
65
98
|
- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
|
|
66
99
|
- [Alpic Documentation](https://docs.alpic.ai/)
|
package/template/_gitignore
CHANGED
package/template/alpic.json
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.83.1/node_modules/alpic/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.83.1/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.83.1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.83.1/node_modules/alpic/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.83.1/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.83.1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../alpic/bin/run.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../alpic/bin/run.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../nodemon/bin/nodemon.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../nodemon/bin/nodemon.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../skybridge/bin/run.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../skybridge/bin/run.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_c63f9c05f537b629dd808079c96120bf/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../skybridge/bin/run.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../skybridge/bin/run.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../typescript/bin/tsc" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../typescript/bin/tsc" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../typescript/bin/tsserver" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../typescript/bin/tsserver" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../tsx/dist/cli.mjs" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../tsx/dist/cli.mjs" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../vite/bin/vite.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../vite/bin/vite.js" "$@"
|
|
21
|
+
fi
|
package/template/package.json
CHANGED
|
@@ -4,18 +4,35 @@
|
|
|
4
4
|
"private": true,
|
|
5
5
|
"description": "Alpic MCP Server Template",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"packageManager": "pnpm@10.18.3",
|
|
8
7
|
"scripts": {
|
|
9
|
-
"dev": "
|
|
10
|
-
"build": "
|
|
11
|
-
"start": "
|
|
12
|
-
"
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
"
|
|
16
|
-
"
|
|
8
|
+
"dev": "skybridge dev",
|
|
9
|
+
"build": "skybridge build",
|
|
10
|
+
"start": "skybridge start",
|
|
11
|
+
"deploy": "alpic deploy"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"@modelcontextprotocol/sdk": "^1.25.2",
|
|
15
|
+
"cors": "^2.8.5",
|
|
16
|
+
"express": "^5.2.1",
|
|
17
|
+
"react": "^19.2.3",
|
|
18
|
+
"react-dom": "^19.2.3",
|
|
19
|
+
"skybridge": ">=0.29.1 <1.0.0",
|
|
20
|
+
"vite": "^7.3.1",
|
|
21
|
+
"zod": "^4.3.5"
|
|
17
22
|
},
|
|
18
23
|
"devDependencies": {
|
|
19
|
-
"
|
|
24
|
+
"@skybridge/devtools": ">=0.26.1 <1.0.0",
|
|
25
|
+
"@types/cors": "^2.8.19",
|
|
26
|
+
"@types/express": "^5.0.6",
|
|
27
|
+
"@types/react": "^19.2.8",
|
|
28
|
+
"@types/react-dom": "^19.2.3",
|
|
29
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
30
|
+
"alpic": "^1.83.1",
|
|
31
|
+
"nodemon": "^3.1.11",
|
|
32
|
+
"tsx": "^4.21.0",
|
|
33
|
+
"typescript": "^5.9.3"
|
|
34
|
+
},
|
|
35
|
+
"engines": {
|
|
36
|
+
"node": ">=24.13.0"
|
|
20
37
|
}
|
|
21
38
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { fileURLToPath } from "node:url";
|
|
3
|
+
import cors from "cors";
|
|
1
4
|
import express, { type Express } from "express";
|
|
2
|
-
|
|
3
5
|
import { widgetsDevServer } from "skybridge/server";
|
|
4
6
|
import type { ViteDevServer } from "vite";
|
|
5
|
-
import { env } from "./env.js";
|
|
6
7
|
import { mcp } from "./middleware.js";
|
|
7
8
|
import server from "./server.js";
|
|
8
9
|
|
|
@@ -12,20 +13,27 @@ app.use(express.json());
|
|
|
12
13
|
|
|
13
14
|
app.use(mcp(server));
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
const env = process.env.NODE_ENV || "development";
|
|
17
|
+
|
|
18
|
+
if (env !== "production") {
|
|
19
|
+
const { devtoolsStaticServer } = await import("@skybridge/devtools");
|
|
20
|
+
app.use(await devtoolsStaticServer());
|
|
16
21
|
app.use(await widgetsDevServer());
|
|
17
22
|
}
|
|
18
23
|
|
|
24
|
+
if (env === "production") {
|
|
25
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
26
|
+
const __dirname = path.dirname(__filename);
|
|
27
|
+
|
|
28
|
+
app.use("/assets", cors());
|
|
29
|
+
app.use("/assets", express.static(path.join(__dirname, "assets")));
|
|
30
|
+
}
|
|
31
|
+
|
|
19
32
|
app.listen(3000, (error) => {
|
|
20
33
|
if (error) {
|
|
21
34
|
console.error("Failed to start server:", error);
|
|
22
35
|
process.exit(1);
|
|
23
36
|
}
|
|
24
|
-
|
|
25
|
-
console.log(`Server listening on port 3000 - ${env.NODE_ENV}`);
|
|
26
|
-
console.log(
|
|
27
|
-
"Make your local server accessible with 'ngrok http 3000' and connect to ChatGPT with URL https://xxxxxx.ngrok-free.app/mcp",
|
|
28
|
-
);
|
|
29
37
|
});
|
|
30
38
|
|
|
31
39
|
process.on("SIGINT", async () => {
|
|
@@ -3,10 +3,6 @@ import { z } from "zod";
|
|
|
3
3
|
|
|
4
4
|
const Answers = [
|
|
5
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
6
|
"Don't count on it",
|
|
11
7
|
"It is certain",
|
|
12
8
|
"It is decidedly so",
|
|
@@ -15,7 +11,6 @@ const Answers = [
|
|
|
15
11
|
"My sources say no",
|
|
16
12
|
"Outlook good",
|
|
17
13
|
"Outlook not so good",
|
|
18
|
-
"Reply hazy, try again",
|
|
19
14
|
"Signs point to yes",
|
|
20
15
|
"Very doubtful",
|
|
21
16
|
"Without a doubt",
|
|
@@ -41,26 +36,15 @@ const server = new McpServer(
|
|
|
41
36
|
question: z.string().describe("The user question."),
|
|
42
37
|
},
|
|
43
38
|
},
|
|
44
|
-
async ({ question
|
|
39
|
+
async ({ question }) => {
|
|
45
40
|
try {
|
|
46
41
|
// deterministic answer
|
|
47
|
-
const hash = question
|
|
42
|
+
const hash = question
|
|
43
|
+
.split("")
|
|
44
|
+
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
48
45
|
const answer = Answers[hash % Answers.length];
|
|
49
46
|
return {
|
|
50
|
-
/**
|
|
51
|
-
* Arbitrary JSON passed only to the component.
|
|
52
|
-
* Use it for data that should not influence the model’s reasoning, like the full set of locations that backs a dropdown.
|
|
53
|
-
* _meta is never shown to the model.
|
|
54
|
-
*/
|
|
55
|
-
_meta: {},
|
|
56
|
-
/**
|
|
57
|
-
* Structured data that is used to hydrate your component.
|
|
58
|
-
* ChatGPT injects this object into your iframe as window.openai.toolOutput
|
|
59
|
-
*/
|
|
60
47
|
structuredContent: { answer },
|
|
61
|
-
/**
|
|
62
|
-
* Optional free-form text that the model receives verbatim
|
|
63
|
-
*/
|
|
64
48
|
content: [],
|
|
65
49
|
isError: false,
|
|
66
50
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
7
|
+
"jsx": "react-jsx",
|
|
8
|
+
|
|
9
|
+
"strict": true,
|
|
10
|
+
"skipLibCheck": true,
|
|
11
|
+
"esModuleInterop": true,
|
|
12
|
+
"forceConsistentCasingInFileNames": true,
|
|
13
|
+
"verbatimModuleSyntax": true,
|
|
14
|
+
|
|
15
|
+
"noUnusedLocals": true,
|
|
16
|
+
"noUnusedParameters": true,
|
|
17
|
+
"noFallthroughCasesInSwitch": true,
|
|
18
|
+
|
|
19
|
+
"noEmit": true
|
|
20
|
+
},
|
|
21
|
+
"include": ["server/src", "web/src", "web/vite.config.ts"],
|
|
22
|
+
"exclude": ["dist", "node_modules"]
|
|
23
|
+
}
|
|
@@ -1,12 +1,23 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap");
|
|
2
|
+
|
|
1
3
|
.container {
|
|
2
4
|
display: flex;
|
|
3
5
|
justify-content: center;
|
|
4
6
|
align-items: center;
|
|
5
|
-
height: 100%;
|
|
7
|
+
min-height: 100%;
|
|
8
|
+
max-height: 100%;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
padding: 1rem;
|
|
11
|
+
box-sizing: border-box;
|
|
6
12
|
}
|
|
7
13
|
|
|
8
14
|
.ball {
|
|
9
|
-
background
|
|
15
|
+
background: radial-gradient(
|
|
16
|
+
circle at 30% 30%,
|
|
17
|
+
#454565 0%,
|
|
18
|
+
#1c1c30 40%,
|
|
19
|
+
#0a0a10 100%
|
|
20
|
+
);
|
|
10
21
|
border-radius: 50%;
|
|
11
22
|
width: 12rem;
|
|
12
23
|
height: 12rem;
|
|
@@ -15,16 +26,129 @@
|
|
|
15
26
|
align-items: center;
|
|
16
27
|
justify-content: center;
|
|
17
28
|
font-family: monospace;
|
|
29
|
+
text-align: center;
|
|
30
|
+
position: relative;
|
|
31
|
+
box-shadow:
|
|
32
|
+
0 10px 30px rgba(0, 0, 0, 0.5),
|
|
33
|
+
0 5px 15px rgba(0, 0, 0, 0.3),
|
|
34
|
+
inset 0 -20px 40px rgba(0, 0, 0, 0.6);
|
|
35
|
+
animation:
|
|
36
|
+
float 3s ease-in-out infinite,
|
|
37
|
+
colorShift 15s ease-in-out infinite;
|
|
38
|
+
transition: transform 0.3s ease;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
border: 1px solid rgba(30, 30, 50, 0.6);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.ball:hover {
|
|
44
|
+
transform: scale(1.05) translateY(-8px);
|
|
45
|
+
animation: colorShift 15s ease-in-out infinite;
|
|
46
|
+
box-shadow:
|
|
47
|
+
0 20px 50px rgba(0, 0, 0, 0.6),
|
|
48
|
+
0 10px 25px rgba(0, 0, 0, 0.4),
|
|
49
|
+
inset 0 -20px 40px rgba(0, 0, 0, 0.6);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@keyframes float {
|
|
53
|
+
0%,
|
|
54
|
+
100% {
|
|
55
|
+
transform: translateY(0);
|
|
56
|
+
}
|
|
57
|
+
50% {
|
|
58
|
+
transform: translateY(-8px);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@keyframes colorShift {
|
|
63
|
+
0%,
|
|
64
|
+
100% {
|
|
65
|
+
background: radial-gradient(
|
|
66
|
+
circle at 30% 30%,
|
|
67
|
+
#454565 0%,
|
|
68
|
+
#1c1c30 40%,
|
|
69
|
+
#0a0a10 100%
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
25% {
|
|
73
|
+
background: radial-gradient(
|
|
74
|
+
circle at 30% 30%,
|
|
75
|
+
#3f4a65 0%,
|
|
76
|
+
#181e30 40%,
|
|
77
|
+
#090a10 100%
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
50% {
|
|
81
|
+
background: radial-gradient(
|
|
82
|
+
circle at 30% 30%,
|
|
83
|
+
#3a5065 0%,
|
|
84
|
+
#152230 40%,
|
|
85
|
+
#080a10 100%
|
|
86
|
+
);
|
|
87
|
+
}
|
|
88
|
+
75% {
|
|
89
|
+
background: radial-gradient(
|
|
90
|
+
circle at 30% 30%,
|
|
91
|
+
#3f4a65 0%,
|
|
92
|
+
#181e30 40%,
|
|
93
|
+
#090a10 100%
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.ball::before {
|
|
99
|
+
content: "";
|
|
100
|
+
position: absolute;
|
|
101
|
+
top: 8%;
|
|
102
|
+
left: 20%;
|
|
103
|
+
width: 30%;
|
|
104
|
+
height: 20%;
|
|
105
|
+
background: radial-gradient(
|
|
106
|
+
ellipse,
|
|
107
|
+
rgba(255, 255, 255, 0.3) 0%,
|
|
108
|
+
transparent 70%
|
|
109
|
+
);
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
pointer-events: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ball::after {
|
|
115
|
+
content: "";
|
|
116
|
+
position: absolute;
|
|
117
|
+
bottom: 8%;
|
|
118
|
+
right: 25%;
|
|
119
|
+
width: 25%;
|
|
120
|
+
height: 10%;
|
|
121
|
+
background: radial-gradient(
|
|
122
|
+
ellipse,
|
|
123
|
+
rgba(255, 255, 255, 0.1) 0%,
|
|
124
|
+
transparent 70%
|
|
125
|
+
);
|
|
126
|
+
border-radius: 50%;
|
|
127
|
+
pointer-events: none;
|
|
18
128
|
}
|
|
19
129
|
|
|
20
130
|
.question {
|
|
21
|
-
font-size: 0.75rem;
|
|
131
|
+
font-size: clamp(0.5rem, 2vw, 0.75rem);
|
|
22
132
|
color: lightgrey;
|
|
133
|
+
max-width: 90%;
|
|
134
|
+
word-wrap: break-word;
|
|
135
|
+
overflow-wrap: break-word;
|
|
136
|
+
text-align: center;
|
|
137
|
+
line-height: 1.3;
|
|
138
|
+
font-style: italic;
|
|
23
139
|
}
|
|
24
140
|
|
|
25
141
|
.answer {
|
|
26
|
-
font-
|
|
27
|
-
font-
|
|
142
|
+
font-family: "Playfair Display", serif;
|
|
143
|
+
font-style: italic;
|
|
144
|
+
font-size: 1.25rem;
|
|
145
|
+
font-weight: 600;
|
|
28
146
|
margin-top: 0.5rem;
|
|
29
|
-
color:
|
|
147
|
+
color: #7dd3fc;
|
|
148
|
+
text-shadow: 0 0 10px rgba(125, 211, 252, 0.5);
|
|
149
|
+
max-width: 90%;
|
|
150
|
+
word-wrap: break-word;
|
|
151
|
+
overflow-wrap: break-word;
|
|
152
|
+
text-align: center;
|
|
153
|
+
line-height: 1.3;
|
|
30
154
|
}
|
|
@@ -5,7 +5,9 @@ import { useToolInfo } from "../helpers";
|
|
|
5
5
|
|
|
6
6
|
function Magic8Ball() {
|
|
7
7
|
const { input, output } = useToolInfo<"magic-8-ball">();
|
|
8
|
-
if (!output)
|
|
8
|
+
if (!output) {
|
|
9
|
+
return <div>Shaking...</div>;
|
|
10
|
+
}
|
|
9
11
|
|
|
10
12
|
return (
|
|
11
13
|
<div className="container">
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
2
|
import react from "@vitejs/plugin-react";
|
|
3
3
|
import { skybridge } from "skybridge/web";
|
|
4
|
-
import { defineConfig } from "vite";
|
|
4
|
+
import { defineConfig, type PluginOption } from "vite";
|
|
5
5
|
|
|
6
6
|
// https://vite.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
8
|
-
plugins: [skybridge(), react()],
|
|
9
|
-
|
|
8
|
+
plugins: [skybridge() as PluginOption, react()],
|
|
9
|
+
root: __dirname,
|
|
10
10
|
resolve: {
|
|
11
11
|
alias: {
|
|
12
12
|
"@": path.resolve(__dirname, "./src"),
|
|
@@ -1,34 +0,0 @@
|
|
|
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
|
-
"@t3-oss/env-core": "^0.13.8",
|
|
20
|
-
"dotenv": "^17.2.3",
|
|
21
|
-
"express": "^5.1.0",
|
|
22
|
-
"skybridge": "catalog:",
|
|
23
|
-
"vite": "^7.1.11",
|
|
24
|
-
"zod": "^4.1.13"
|
|
25
|
-
},
|
|
26
|
-
"devDependencies": {
|
|
27
|
-
"@modelcontextprotocol/inspector": "^0.17.5",
|
|
28
|
-
"@types/express": "^5.0.3",
|
|
29
|
-
"@types/node": "^22.15.30",
|
|
30
|
-
"nodemon": "^3.1.10",
|
|
31
|
-
"tsx": "^4.19.2",
|
|
32
|
-
"typescript": "^5.7.2"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import "dotenv/config";
|
|
2
|
-
|
|
3
|
-
import { createEnv } from "@t3-oss/env-core";
|
|
4
|
-
import { z } from "zod";
|
|
5
|
-
|
|
6
|
-
export const env = createEnv({
|
|
7
|
-
server: {
|
|
8
|
-
NODE_ENV: z.enum(["development", "production"]).default("development"),
|
|
9
|
-
},
|
|
10
|
-
runtimeEnv: process.env,
|
|
11
|
-
emptyStringAsUndefined: true,
|
|
12
|
-
});
|
|
@@ -1,17 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,34 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
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
|
-
}
|