create-skybridge 0.0.0-dev.89c05f6 → 0.0.0-dev.89c759f

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.
Files changed (70) hide show
  1. package/dist/index.js +101 -64
  2. package/dist/index.test.js +13 -1
  3. package/package.json +9 -9
  4. package/template/.dockerignore +4 -0
  5. package/template/AGENTS.md +1 -0
  6. package/template/Dockerfile +53 -0
  7. package/template/README.md +39 -22
  8. package/template/_gitignore +6 -0
  9. package/template/alpic.json +1 -2
  10. package/template/node_modules/.bin/alpic +21 -0
  11. package/template/node_modules/.bin/sb +21 -0
  12. package/template/node_modules/.bin/skybridge +21 -0
  13. package/template/node_modules/.bin/tsc +2 -2
  14. package/template/node_modules/.bin/tsserver +2 -2
  15. package/template/node_modules/.bin/tsx +2 -2
  16. package/template/node_modules/.bin/vite +2 -2
  17. package/template/package.json +24 -25
  18. package/template/src/helpers.ts +4 -0
  19. package/template/src/index.css +59 -0
  20. package/template/src/server.ts +77 -0
  21. package/template/src/views/components/doc-link.tsx +22 -0
  22. package/template/src/views/components/doc.tsx +21 -0
  23. package/template/src/views/components/nav.tsx +31 -0
  24. package/template/src/views/components/progress.tsx +35 -0
  25. package/template/src/views/components/steps/outro.tsx +68 -0
  26. package/template/src/views/components/steps/state.tsx +47 -0
  27. package/template/src/views/components/steps/tool-call.tsx +53 -0
  28. package/template/src/views/components/steps/tool-output.tsx +40 -0
  29. package/template/src/views/images/mascot/beret.png +0 -0
  30. package/template/src/views/images/mascot/chapka.png +0 -0
  31. package/template/src/views/images/mascot/cowboy-hat.png +0 -0
  32. package/template/src/views/images/mascot/fez.png +0 -0
  33. package/template/src/views/images/mascot/jester-hat.png +0 -0
  34. package/template/src/views/images/mascot/mitre.png +0 -0
  35. package/template/src/views/images/mascot/non-la.png +0 -0
  36. package/template/src/views/images/mascot/original.png +0 -0
  37. package/template/src/views/images/mascot/propeller-beanie.png +0 -0
  38. package/template/src/views/images/mascot/ski-mask.png +0 -0
  39. package/template/src/views/images/mascot/sombrero.png +0 -0
  40. package/template/src/views/images/mascot/top-hat.png +0 -0
  41. package/template/src/views/images/mascot/viking-helmet.png +0 -0
  42. package/template/src/views/onboarding.tsx +63 -0
  43. package/template/src/views/use-mascot.ts +60 -0
  44. package/template/src/vite-manifest.d.ts +4 -0
  45. package/template/tsconfig.json +7 -19
  46. package/template/{web/vite.config.ts → vite.config.ts} +3 -4
  47. package/template/node_modules/.bin/mcp-inspector +0 -21
  48. package/template/node_modules/.bin/nodemon +0 -21
  49. package/template/node_modules/.bin/shx +0 -21
  50. package/template/nodemon.json +0 -5
  51. package/template/server/src/index.ts +0 -39
  52. package/template/server/src/middleware.ts +0 -54
  53. package/template/server/src/server.ts +0 -61
  54. package/template/tsconfig.server.json +0 -11
  55. package/template/web/src/helpers.ts +0 -4
  56. package/template/web/src/index.css +0 -31
  57. package/template/web/src/widgets/magic-8-ball.tsx +0 -24
  58. package/template-ecom/README.md +0 -89
  59. package/template-ecom/alpic.json +0 -4
  60. package/template-ecom/nodemon.json +0 -5
  61. package/template-ecom/package.json +0 -40
  62. package/template-ecom/server/src/index.ts +0 -39
  63. package/template-ecom/server/src/middleware.ts +0 -54
  64. package/template-ecom/server/src/server.ts +0 -73
  65. package/template-ecom/tsconfig.json +0 -23
  66. package/template-ecom/tsconfig.server.json +0 -11
  67. package/template-ecom/web/src/helpers.ts +0 -4
  68. package/template-ecom/web/src/index.css +0 -194
  69. package/template-ecom/web/src/widgets/ecom-carousel.tsx +0 -181
  70. 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
+ }
@@ -0,0 +1,4 @@
1
+ // Typed shim for the Vite manifest emitted by `skybridge build`. The actual
2
+ // `vite-manifest.js` is generated alongside this file and gitignored.
3
+ declare const manifest: Record<string, { file: string }>;
4
+ export default manifest;
@@ -1,23 +1,11 @@
1
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,
2
+ "extends": "skybridge/tsconfig",
18
3
 
19
- "noEmit": true
4
+ "compilerOptions": {
5
+ "paths": {
6
+ "@/*": ["./src/*"]
7
+ }
20
8
  },
21
- "include": ["server/src", "web/src", "web/vite.config.ts"],
22
- "exclude": ["dist", "node_modules"]
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/web";
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
@@ -1,5 +0,0 @@
1
- {
2
- "watch": ["server/src"],
3
- "ext": "ts,json",
4
- "exec": "tsx server/src/index.ts"
5
- }
@@ -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,11 +0,0 @@
1
- {
2
- "extends": "./tsconfig.json",
3
- "compilerOptions": {
4
- "noEmit": false,
5
- "outDir": "server/dist",
6
- "sourceMap": true,
7
- "declaration": true
8
- },
9
- "include": ["server/src"],
10
- "exclude": ["dist", "node_modules"]
11
- }
@@ -1,4 +0,0 @@
1
- import { generateHelpers } from "skybridge/web";
2
- import type { AppType } from "../../server/src/server";
3
-
4
- export const { useToolInfo } = generateHelpers<AppType>();
@@ -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 />);
@@ -1,89 +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
- - **Persistent State**: Maintains cart state across re-renders using `useWidgetState()` hook
10
- - **Modal Dialogs**: Opens checkout modal via `useRequestModal()` hook
11
- - **External Links**: Opens external URL for checkout completion via `useOpenExternal()` hook
12
- - **External API Integration**: Demonstrates fetching data from REST APIs
13
- - **Hot Module Replacement**: Live reloading of widget components during development
14
-
15
- This example serves as a comprehensive reference for building sophisticated, interactive widgets that leverage Skybridge's full feature set.
16
-
17
- ## Getting Started
18
-
19
- ### Prerequisites
20
-
21
- - Node.js 22+
22
- - HTTP tunnel such as [ngrok](https://ngrok.com/download)
23
-
24
- ### Local Development
25
-
26
- #### 1. Install
27
-
28
- ```bash
29
- npm install
30
- # or
31
- yarn install
32
- # or
33
- pnpm install
34
- # or
35
- bun install
36
- ```
37
-
38
- #### 2. Start your local server
39
-
40
- Run the development server from the root directory:
41
-
42
- ```bash
43
- npm run dev
44
- # or
45
- yarn dev
46
- # or
47
- pnpm dev
48
- # or
49
- bun dev
50
- ```
51
-
52
- This command starts an Express server on port 3000. This server packages:
53
-
54
- - an MCP endpoint on `/mcp` (the app backend)
55
- - a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
56
-
57
- #### 3. Connect to ChatGPT
58
-
59
- - ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
60
- ```bash
61
- ngrok http 3000
62
- ```
63
- - 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`)
64
-
65
- ### Create your first widget
66
-
67
- #### 1. Add a new widget
68
-
69
- - Register a widget in `server/server.ts` with a unique name (e.g., `my-widget`)
70
- - Create a matching React component at `web/src/widgets/my-widget.tsx`. The file name must match the widget name exactly
71
-
72
- #### 2. Edit widgets with Hot Module Replacement (HMR)
73
-
74
- Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
75
-
76
- #### 3. Edit server code
77
-
78
- Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
79
-
80
- ## Deploy to Production
81
-
82
- - Use [Alpic](https://alpic.ai/) to deploy your OpenAI App to production
83
- - In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
84
-
85
- ## Resources
86
-
87
- - [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
88
- - [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
89
- - [Alpic Documentation](https://docs.alpic.ai/)
@@ -1,4 +0,0 @@
1
- {
2
- "$schema": "https://assets.alpic.ai/alpic.json",
3
- "buildOutputDir": "server/dist"
4
- }
@@ -1,5 +0,0 @@
1
- {
2
- "watch": ["server/src"],
3
- "ext": "ts,json",
4
- "exec": "tsx server/src/index.ts"
5
- }
@@ -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
- };