create-skybridge 0.0.0-dev.b0a1d24 → 0.0.0-dev.b0f5d5c
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.js +101 -64
- package/dist/index.test.js +13 -1
- package/package.json +9 -9
- package/template/.dockerignore +4 -0
- package/template/AGENTS.md +1 -0
- package/template/Dockerfile +53 -0
- package/template/README.md +39 -22
- package/template/_gitignore +6 -0
- package/template/alpic.json +1 -2
- package/template/node_modules/.bin/alpic +21 -0
- package/template/node_modules/.bin/sb +21 -0
- package/template/node_modules/.bin/skybridge +21 -0
- package/template/node_modules/.bin/tsc +2 -2
- package/template/node_modules/.bin/tsserver +2 -2
- package/template/node_modules/.bin/tsx +2 -2
- package/template/node_modules/.bin/vite +2 -2
- package/template/package.json +24 -25
- package/template/src/helpers.ts +4 -0
- package/template/src/index.css +59 -0
- package/template/src/server.ts +77 -0
- package/template/src/views/components/doc-link.tsx +22 -0
- package/template/src/views/components/doc.tsx +21 -0
- package/template/src/views/components/nav.tsx +31 -0
- package/template/src/views/components/progress.tsx +35 -0
- package/template/src/views/components/steps/outro.tsx +68 -0
- package/template/src/views/components/steps/state.tsx +47 -0
- package/template/src/views/components/steps/tool-call.tsx +53 -0
- package/template/src/views/components/steps/tool-output.tsx +40 -0
- package/template/src/views/images/mascot/beret.png +0 -0
- package/template/src/views/images/mascot/chapka.png +0 -0
- package/template/src/views/images/mascot/cowboy-hat.png +0 -0
- package/template/src/views/images/mascot/fez.png +0 -0
- package/template/src/views/images/mascot/jester-hat.png +0 -0
- package/template/src/views/images/mascot/mitre.png +0 -0
- package/template/src/views/images/mascot/non-la.png +0 -0
- package/template/src/views/images/mascot/original.png +0 -0
- package/template/src/views/images/mascot/propeller-beanie.png +0 -0
- package/template/src/views/images/mascot/ski-mask.png +0 -0
- package/template/src/views/images/mascot/sombrero.png +0 -0
- package/template/src/views/images/mascot/top-hat.png +0 -0
- package/template/src/views/images/mascot/viking-helmet.png +0 -0
- package/template/src/views/onboarding.tsx +63 -0
- package/template/src/views/use-mascot.ts +60 -0
- package/template/src/vite-manifest.d.ts +4 -0
- package/template/tsconfig.json +7 -19
- package/template/{web/vite.config.ts → vite.config.ts} +3 -4
- package/template/node_modules/.bin/mcp-inspector +0 -21
- package/template/node_modules/.bin/nodemon +0 -21
- package/template/node_modules/.bin/shx +0 -21
- package/template/nodemon.json +0 -5
- package/template/server/src/index.ts +0 -39
- package/template/server/src/middleware.ts +0 -54
- package/template/server/src/server.ts +0 -61
- package/template/tsconfig.server.json +0 -11
- package/template/web/src/helpers.ts +0 -4
- package/template/web/src/index.css +0 -31
- package/template/web/src/widgets/magic-8-ball.tsx +0 -24
- package/template-ecom/README.md +0 -86
- package/template-ecom/alpic.json +0 -4
- package/template-ecom/nodemon.json +0 -5
- package/template-ecom/package.json +0 -40
- package/template-ecom/server/src/index.ts +0 -39
- package/template-ecom/server/src/middleware.ts +0 -54
- package/template-ecom/server/src/server.ts +0 -73
- package/template-ecom/tsconfig.json +0 -23
- package/template-ecom/tsconfig.server.json +0 -11
- package/template-ecom/web/src/helpers.ts +0 -4
- package/template-ecom/web/src/index.css +0 -178
- package/template-ecom/web/src/widgets/ecom-carousel.tsx +0 -109
- package/template-ecom/web/vite.config.ts +0 -15
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { useEffect } from "react";
|
|
2
|
+
import { useViewState } from "skybridge/web";
|
|
3
|
+
import beret from "./images/mascot/beret.png";
|
|
4
|
+
import chapka from "./images/mascot/chapka.png";
|
|
5
|
+
import cowboyHat from "./images/mascot/cowboy-hat.png";
|
|
6
|
+
import fez from "./images/mascot/fez.png";
|
|
7
|
+
import jesterHat from "./images/mascot/jester-hat.png";
|
|
8
|
+
import mitre from "./images/mascot/mitre.png";
|
|
9
|
+
import nonLa from "./images/mascot/non-la.png";
|
|
10
|
+
import original from "./images/mascot/original.png";
|
|
11
|
+
import propellerBeanie from "./images/mascot/propeller-beanie.png";
|
|
12
|
+
import skiMask from "./images/mascot/ski-mask.png";
|
|
13
|
+
import sombrero from "./images/mascot/sombrero.png";
|
|
14
|
+
import topHat from "./images/mascot/top-hat.png";
|
|
15
|
+
import vikingHelmet from "./images/mascot/viking-helmet.png";
|
|
16
|
+
|
|
17
|
+
const Hats = {
|
|
18
|
+
beret,
|
|
19
|
+
chapka,
|
|
20
|
+
"cowboy hat": cowboyHat,
|
|
21
|
+
fez,
|
|
22
|
+
"jester hat": jesterHat,
|
|
23
|
+
mitre,
|
|
24
|
+
"nón lá": nonLa,
|
|
25
|
+
"propeller beanie": propellerBeanie,
|
|
26
|
+
"ski mask": skiMask,
|
|
27
|
+
sombrero,
|
|
28
|
+
"top hat": topHat,
|
|
29
|
+
"viking helmet": vikingHelmet,
|
|
30
|
+
} as const;
|
|
31
|
+
|
|
32
|
+
type HatLabel = keyof typeof Hats;
|
|
33
|
+
|
|
34
|
+
const LABELS = Object.keys(Hats) as HatLabel[];
|
|
35
|
+
|
|
36
|
+
export function useMascot() {
|
|
37
|
+
// useViewState: persist UI state on the host and surface it to the model.
|
|
38
|
+
const [state, setState] = useViewState<{ hat?: HatLabel }>({});
|
|
39
|
+
const { hat } = state;
|
|
40
|
+
const img = hat ? Hats[hat] : original;
|
|
41
|
+
|
|
42
|
+
// Preload all hats once so swaps are instant.
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
for (const src of Object.values(Hats)) {
|
|
45
|
+
new Image().src = src;
|
|
46
|
+
}
|
|
47
|
+
}, []);
|
|
48
|
+
|
|
49
|
+
return {
|
|
50
|
+
img,
|
|
51
|
+
hat,
|
|
52
|
+
changeHat: () => {
|
|
53
|
+
setState((prev) => {
|
|
54
|
+
const others = LABELS.filter((l) => l !== prev.hat);
|
|
55
|
+
const next = others[Math.floor(Math.random() * others.length)];
|
|
56
|
+
return { ...prev, hat: next };
|
|
57
|
+
});
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
}
|
package/template/tsconfig.json
CHANGED
|
@@ -1,23 +1,11 @@
|
|
|
1
1
|
{
|
|
2
|
-
"
|
|
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,
|
|
2
|
+
"extends": "skybridge/tsconfig",
|
|
18
3
|
|
|
19
|
-
|
|
4
|
+
"compilerOptions": {
|
|
5
|
+
"paths": {
|
|
6
|
+
"@/*": ["./src/*"]
|
|
7
|
+
}
|
|
20
8
|
},
|
|
21
|
-
|
|
22
|
-
"
|
|
9
|
+
|
|
10
|
+
"include": ["src", ".skybridge/**/*.d.ts"]
|
|
23
11
|
}
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import path from "node:path";
|
|
2
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
2
3
|
import react from "@vitejs/plugin-react";
|
|
3
|
-
import { skybridge } from "skybridge/
|
|
4
|
+
import { skybridge } from "skybridge/vite";
|
|
4
5
|
import { defineConfig } from "vite";
|
|
5
6
|
|
|
6
|
-
// https://vite.dev/config/
|
|
7
7
|
export default defineConfig({
|
|
8
|
-
plugins: [skybridge(), react()],
|
|
9
|
-
root: __dirname,
|
|
8
|
+
plugins: [skybridge(), react(), tailwindcss()],
|
|
10
9
|
resolve: {
|
|
11
10
|
alias: {
|
|
12
11
|
"@": path.resolve(__dirname, "./src"),
|
|
@@ -1,21 +0,0 @@
|
|
|
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/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/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/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/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/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
|
|
19
|
-
else
|
|
20
|
-
exec node "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
|
|
21
|
-
fi
|
|
@@ -1,21 +0,0 @@
|
|
|
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
|
|
@@ -1,21 +0,0 @@
|
|
|
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/shx@0.4.0/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.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/shx@0.4.0/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.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/../shx/lib/cli.js" "$@"
|
|
19
|
-
else
|
|
20
|
-
exec node "$basedir/../shx/lib/cli.js" "$@"
|
|
21
|
-
fi
|
package/template/nodemon.json
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import express, { type Express } from "express";
|
|
2
|
-
import { devtoolsStaticServer, widgetsDevServer } from "skybridge/server";
|
|
3
|
-
import type { ViteDevServer } from "vite";
|
|
4
|
-
import { mcp } from "./middleware.js";
|
|
5
|
-
import server from "./server.js";
|
|
6
|
-
|
|
7
|
-
const app = express() as Express & { vite: ViteDevServer };
|
|
8
|
-
|
|
9
|
-
app.use(express.json());
|
|
10
|
-
|
|
11
|
-
app.use(mcp(server));
|
|
12
|
-
|
|
13
|
-
const env = process.env.NODE_ENV || "development";
|
|
14
|
-
|
|
15
|
-
if (env !== "production") {
|
|
16
|
-
app.use(await devtoolsStaticServer());
|
|
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
|
-
if (env !== "production") {
|
|
32
|
-
console.log("Devtools available at http://localhost:3000");
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
process.on("SIGINT", async () => {
|
|
37
|
-
console.log("Server shutdown complete");
|
|
38
|
-
process.exit(0);
|
|
39
|
-
});
|
|
@@ -1,54 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { McpServer } from "skybridge/server";
|
|
2
|
-
import { z } from "zod";
|
|
3
|
-
|
|
4
|
-
const Answers = [
|
|
5
|
-
"As I see it, yes",
|
|
6
|
-
"Don't count on it",
|
|
7
|
-
"It is certain",
|
|
8
|
-
"It is decidedly so",
|
|
9
|
-
"Most likely",
|
|
10
|
-
"My reply is no",
|
|
11
|
-
"My sources say no",
|
|
12
|
-
"Outlook good",
|
|
13
|
-
"Outlook not so good",
|
|
14
|
-
"Signs point to yes",
|
|
15
|
-
"Very doubtful",
|
|
16
|
-
"Without a doubt",
|
|
17
|
-
"Yes definitely",
|
|
18
|
-
"Yes",
|
|
19
|
-
"You may rely on it",
|
|
20
|
-
];
|
|
21
|
-
|
|
22
|
-
const server = new McpServer(
|
|
23
|
-
{
|
|
24
|
-
name: "alpic-openai-app",
|
|
25
|
-
version: "0.0.1",
|
|
26
|
-
},
|
|
27
|
-
{ capabilities: {} },
|
|
28
|
-
).registerWidget(
|
|
29
|
-
"magic-8-ball",
|
|
30
|
-
{
|
|
31
|
-
description: "Magic 8 Ball",
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
description: "For fortune-telling or seeking advice.",
|
|
35
|
-
inputSchema: {
|
|
36
|
-
question: z.string().describe("The user question."),
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
async ({ question }) => {
|
|
40
|
-
try {
|
|
41
|
-
// deterministic answer
|
|
42
|
-
const hash = question
|
|
43
|
-
.split("")
|
|
44
|
-
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
45
|
-
const answer = Answers[hash % Answers.length];
|
|
46
|
-
return {
|
|
47
|
-
structuredContent: { answer },
|
|
48
|
-
content: [],
|
|
49
|
-
isError: false,
|
|
50
|
-
};
|
|
51
|
-
} catch (error) {
|
|
52
|
-
return {
|
|
53
|
-
content: [{ type: "text", text: `Error: ${error}` }],
|
|
54
|
-
isError: true,
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
);
|
|
59
|
-
|
|
60
|
-
export default server;
|
|
61
|
-
export type AppType = typeof server;
|
|
@@ -1,31 +0,0 @@
|
|
|
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
|
-
text-align: center;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.question {
|
|
22
|
-
font-size: 0.75rem;
|
|
23
|
-
color: lightgrey;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.answer {
|
|
27
|
-
font-size: 1.125rem;
|
|
28
|
-
font-weight: bold;
|
|
29
|
-
margin-top: 0.5rem;
|
|
30
|
-
color: aqua;
|
|
31
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
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 />);
|
package/template-ecom/README.md
DELETED
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
# Ecommerce Carousel Example
|
|
2
|
-
|
|
3
|
-
## What This Example Showcases
|
|
4
|
-
This "Ecommerce Carousel" example demonstrates key Skybridge capabilities:
|
|
5
|
-
- **Interactive Widget Rendering**: A React-based widget that displays an interactive product carousel directly in ChatGPT
|
|
6
|
-
- **Tool Info Access**: Widgets access tool input, output, and metadata via `useToolInfo()` hook
|
|
7
|
-
- **Theme Support**: Adapts to light/dark mode using the `useLayout()` hook
|
|
8
|
-
- **Localization**: Translates UI based on user locale via `useUser()` hook
|
|
9
|
-
- **External API Integration**: Demonstrates fetching data from REST APIs
|
|
10
|
-
- **Hot Module Replacement**: Live reloading of widget components during development
|
|
11
|
-
|
|
12
|
-
This example serves as a comprehensive reference for building sophisticated, interactive widgets that leverage Skybridge's full feature set.
|
|
13
|
-
|
|
14
|
-
## Getting Started
|
|
15
|
-
|
|
16
|
-
### Prerequisites
|
|
17
|
-
|
|
18
|
-
- Node.js 22+
|
|
19
|
-
- HTTP tunnel such as [ngrok](https://ngrok.com/download)
|
|
20
|
-
|
|
21
|
-
### Local Development
|
|
22
|
-
|
|
23
|
-
#### 1. Install
|
|
24
|
-
|
|
25
|
-
```bash
|
|
26
|
-
npm install
|
|
27
|
-
# or
|
|
28
|
-
yarn install
|
|
29
|
-
# or
|
|
30
|
-
pnpm install
|
|
31
|
-
# or
|
|
32
|
-
bun install
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
#### 2. Start your local server
|
|
36
|
-
|
|
37
|
-
Run the development server from the root directory:
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
npm run dev
|
|
41
|
-
# or
|
|
42
|
-
yarn dev
|
|
43
|
-
# or
|
|
44
|
-
pnpm dev
|
|
45
|
-
# or
|
|
46
|
-
bun dev
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
This command starts an Express server on port 3000. This server packages:
|
|
50
|
-
|
|
51
|
-
- an MCP endpoint on `/mcp` (the app backend)
|
|
52
|
-
- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
|
|
53
|
-
|
|
54
|
-
#### 3. Connect to ChatGPT
|
|
55
|
-
|
|
56
|
-
- ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
|
|
57
|
-
```bash
|
|
58
|
-
ngrok http 3000
|
|
59
|
-
```
|
|
60
|
-
- 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`)
|
|
61
|
-
|
|
62
|
-
### Create your first widget
|
|
63
|
-
|
|
64
|
-
#### 1. Add a new widget
|
|
65
|
-
|
|
66
|
-
- Register a widget in `server/server.ts` with a unique name (e.g., `my-widget`)
|
|
67
|
-
- Create a matching React component at `web/src/widgets/my-widget.tsx`. The file name must match the widget name exactly
|
|
68
|
-
|
|
69
|
-
#### 2. Edit widgets with Hot Module Replacement (HMR)
|
|
70
|
-
|
|
71
|
-
Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
|
|
72
|
-
|
|
73
|
-
#### 3. Edit server code
|
|
74
|
-
|
|
75
|
-
Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
|
|
76
|
-
|
|
77
|
-
## Deploy to Production
|
|
78
|
-
|
|
79
|
-
- Use [Alpic](https://alpic.ai/) to deploy your OpenAI App to production
|
|
80
|
-
- In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
|
|
81
|
-
|
|
82
|
-
## Resources
|
|
83
|
-
|
|
84
|
-
- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
|
|
85
|
-
- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
|
|
86
|
-
- [Alpic Documentation](https://docs.alpic.ai/)
|
package/template-ecom/alpic.json
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "ecom-carousel",
|
|
3
|
-
"version": "0.0.1",
|
|
4
|
-
"private": true,
|
|
5
|
-
"description": "An e-commerce carousel example",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"dev": "nodemon",
|
|
9
|
-
"build": "vite build -c web/vite.config.ts && shx rm -rf server/dist && tsc -p tsconfig.server.json && shx cp -r web/dist server/dist/assets",
|
|
10
|
-
"start": "node server/dist/index.js",
|
|
11
|
-
"inspector": "mcp-inspector http://localhost:3000/mcp",
|
|
12
|
-
"server:build": "tsc -p tsconfig.server.json",
|
|
13
|
-
"server:start": "node server/dist/index.js",
|
|
14
|
-
"web:build": "tsc -b web && vite build -c web/vite.config.ts",
|
|
15
|
-
"web:preview": "vite preview -c web/vite.config.ts"
|
|
16
|
-
},
|
|
17
|
-
"dependencies": {
|
|
18
|
-
"@modelcontextprotocol/sdk": "^1.25.1",
|
|
19
|
-
"express": "^5.2.1",
|
|
20
|
-
"react": "^19.2.3",
|
|
21
|
-
"react-dom": "^19.2.3",
|
|
22
|
-
"skybridge": ">=0.16.8 <1.0.0",
|
|
23
|
-
"vite": "^7.3.0",
|
|
24
|
-
"zod": "^4.3.5"
|
|
25
|
-
},
|
|
26
|
-
"devDependencies": {
|
|
27
|
-
"@modelcontextprotocol/inspector": "^0.18.0",
|
|
28
|
-
"@skybridge/devtools": "^0.16.2",
|
|
29
|
-
"@types/express": "^5.0.6",
|
|
30
|
-
"@types/node": "^22.19.3",
|
|
31
|
-
"@types/react": "^19.2.7",
|
|
32
|
-
"@types/react-dom": "^19.2.3",
|
|
33
|
-
"@vitejs/plugin-react": "^5.1.2",
|
|
34
|
-
"nodemon": "^3.1.11",
|
|
35
|
-
"shx": "^0.4.0",
|
|
36
|
-
"tsx": "^4.21.0",
|
|
37
|
-
"typescript": "^5.9.3"
|
|
38
|
-
},
|
|
39
|
-
"workspaces": []
|
|
40
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import express, { type Express } from "express";
|
|
2
|
-
import { devtoolsStaticServer, widgetsDevServer } from "skybridge/server";
|
|
3
|
-
import type { ViteDevServer } from "vite";
|
|
4
|
-
import { mcp } from "./middleware.js";
|
|
5
|
-
import server from "./server.js";
|
|
6
|
-
|
|
7
|
-
const app = express() as Express & { vite: ViteDevServer };
|
|
8
|
-
|
|
9
|
-
app.use(express.json());
|
|
10
|
-
|
|
11
|
-
app.use(mcp(server));
|
|
12
|
-
|
|
13
|
-
const env = process.env.NODE_ENV || "development";
|
|
14
|
-
|
|
15
|
-
if (env !== "production") {
|
|
16
|
-
app.use(await devtoolsStaticServer());
|
|
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
|
-
if (env !== "production") {
|
|
32
|
-
console.log("Devtools available at http://localhost:3000");
|
|
33
|
-
}
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
process.on("SIGINT", async () => {
|
|
37
|
-
console.log("Server shutdown complete");
|
|
38
|
-
process.exit(0);
|
|
39
|
-
});
|
|
@@ -1,54 +0,0 @@
|
|
|
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
|
-
};
|