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.
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 -86
  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 -178
  69. package/template-ecom/web/src/widgets/ecom-carousel.tsx +0 -109
  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,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/)
@@ -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
- };