create-skybridge 0.0.0-dev.e205b05 → 0.0.0-dev.e38035c
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 +50 -7
- package/package.json +12 -13
- package/template/README.md +1 -1
- package/template/node_modules/.bin/mcp-inspector +2 -2
- package/template/node_modules/.bin/nodemon +0 -0
- package/template/node_modules/.bin/shx +2 -2
- package/template/node_modules/.bin/tsc +0 -0
- package/template/node_modules/.bin/tsserver +0 -0
- package/template/node_modules/.bin/tsx +0 -0
- package/template/node_modules/.bin/vite +2 -2
- package/template/package.json +21 -18
- package/template/server/src/index.ts +6 -2
- package/template-ecom/README.md +89 -0
- package/template-ecom/alpic.json +4 -0
- package/template-ecom/nodemon.json +5 -0
- package/template-ecom/package.json +40 -0
- package/template-ecom/server/src/index.ts +39 -0
- package/template-ecom/server/src/middleware.ts +54 -0
- package/template-ecom/server/src/server.ts +73 -0
- package/template-ecom/tsconfig.json +23 -0
- package/template-ecom/tsconfig.server.json +11 -0
- package/template-ecom/web/src/helpers.ts +4 -0
- package/template-ecom/web/src/index.css +194 -0
- package/template-ecom/web/src/widgets/ecom-carousel.tsx +181 -0
- package/template-ecom/web/vite.config.ts +15 -0
- package/template/_gitignore +0 -4
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
|
@@ -5,6 +5,10 @@ import { fileURLToPath } from "node:url";
|
|
|
5
5
|
import * as prompts from "@clack/prompts";
|
|
6
6
|
import mri from "mri";
|
|
7
7
|
const defaultProjectName = "skybridge-project";
|
|
8
|
+
const templates = [
|
|
9
|
+
{ value: "default", label: "a minimal implementation" },
|
|
10
|
+
{ value: "ecom", label: "a functional ecommerce carousel" },
|
|
11
|
+
];
|
|
8
12
|
// prettier-ignore
|
|
9
13
|
const helpMessage = `\
|
|
10
14
|
Usage: create-skybridge [OPTION]... [DIRECTORY]
|
|
@@ -15,6 +19,10 @@ Options:
|
|
|
15
19
|
-h, --help show this help message
|
|
16
20
|
--overwrite remove existing files in target directory
|
|
17
21
|
--immediate install dependencies and start development server
|
|
22
|
+
--template <template> use a specific template
|
|
23
|
+
|
|
24
|
+
Available templates:
|
|
25
|
+
${templates.map((t) => ` ${t.value.padEnd(23)} ${t.label}`).join("\n")}
|
|
18
26
|
|
|
19
27
|
Examples:
|
|
20
28
|
create-skybridge my-app
|
|
@@ -23,13 +31,14 @@ Examples:
|
|
|
23
31
|
export async function init(args = process.argv.slice(2)) {
|
|
24
32
|
const argv = mri(args, {
|
|
25
33
|
boolean: ["help", "overwrite", "immediate"],
|
|
26
|
-
alias: { h: "help" },
|
|
34
|
+
alias: { h: "help", t: "template" },
|
|
27
35
|
});
|
|
28
36
|
const argTargetDir = argv._[0]
|
|
29
37
|
? sanitizeTargetDir(String(argv._[0]))
|
|
30
38
|
: undefined;
|
|
31
39
|
const argOverwrite = argv.overwrite;
|
|
32
40
|
const argImmediate = argv.immediate;
|
|
41
|
+
const argTemplate = argv.template;
|
|
33
42
|
const help = argv.help;
|
|
34
43
|
if (help) {
|
|
35
44
|
console.log(helpMessage);
|
|
@@ -60,7 +69,38 @@ export async function init(args = process.argv.slice(2)) {
|
|
|
60
69
|
targetDir = defaultProjectName;
|
|
61
70
|
}
|
|
62
71
|
}
|
|
63
|
-
// 2.
|
|
72
|
+
// 2. Select a template
|
|
73
|
+
const hasInvalidTemplate = argTemplate && !templates.some((t) => t.value === argTemplate);
|
|
74
|
+
let template = argTemplate;
|
|
75
|
+
if (interactive) {
|
|
76
|
+
if (!argTemplate || hasInvalidTemplate) {
|
|
77
|
+
let message = "Please choose a template:";
|
|
78
|
+
if (hasInvalidTemplate) {
|
|
79
|
+
message = `${argTemplate} is not a valid template. Please choose one of the following:`;
|
|
80
|
+
}
|
|
81
|
+
template = await prompts.select({
|
|
82
|
+
message,
|
|
83
|
+
options: templates.map((t) => ({
|
|
84
|
+
value: t.value,
|
|
85
|
+
label: `${t.value}: ${t.label}`,
|
|
86
|
+
})),
|
|
87
|
+
});
|
|
88
|
+
if (prompts.isCancel(template)) {
|
|
89
|
+
return cancel();
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
else if (hasInvalidTemplate) {
|
|
94
|
+
prompts.log.error(`Template is not a valid template. Please choose one of the following: ${templates.map((t) => t.value).join(", ")}`);
|
|
95
|
+
process.exit(1);
|
|
96
|
+
}
|
|
97
|
+
let templatePath = "../template";
|
|
98
|
+
switch (template) {
|
|
99
|
+
case "ecom":
|
|
100
|
+
templatePath = "../template-ecom";
|
|
101
|
+
break;
|
|
102
|
+
}
|
|
103
|
+
// 3. Handle directory if exist and not empty
|
|
64
104
|
if (fs.existsSync(targetDir) && !isEmpty(targetDir)) {
|
|
65
105
|
let overwrite = argOverwrite ? "yes" : undefined;
|
|
66
106
|
if (!overwrite) {
|
|
@@ -100,17 +140,20 @@ export async function init(args = process.argv.slice(2)) {
|
|
|
100
140
|
}
|
|
101
141
|
}
|
|
102
142
|
const root = path.join(process.cwd(), targetDir);
|
|
103
|
-
//
|
|
143
|
+
// 4. Copy the template
|
|
104
144
|
prompts.log.step(`Copying template...`);
|
|
105
145
|
try {
|
|
106
|
-
const templateDir = fileURLToPath(new URL(
|
|
146
|
+
const templateDir = fileURLToPath(new URL(templatePath, import.meta.url));
|
|
107
147
|
// Copy template to target directory
|
|
108
148
|
fs.cpSync(templateDir, root, {
|
|
109
149
|
recursive: true,
|
|
110
150
|
filter: (src) => [".npmrc"].every((file) => !src.endsWith(file)),
|
|
111
151
|
});
|
|
112
|
-
//
|
|
113
|
-
fs.
|
|
152
|
+
// Write .gitignore
|
|
153
|
+
fs.writeFileSync(path.join(root, ".gitignore"), `node_modules/
|
|
154
|
+
dist/
|
|
155
|
+
.env*
|
|
156
|
+
.DS_store`);
|
|
114
157
|
// Update project name in package.json
|
|
115
158
|
const name = path.basename(root);
|
|
116
159
|
const pkgPath = path.join(root, "package.json");
|
|
@@ -126,7 +169,7 @@ export async function init(args = process.argv.slice(2)) {
|
|
|
126
169
|
}
|
|
127
170
|
const userAgent = process.env.npm_config_user_agent;
|
|
128
171
|
const pkgManager = userAgent?.split(" ")[0]?.split("/")[0] || "npm";
|
|
129
|
-
//
|
|
172
|
+
// 5. Ask about immediate installation
|
|
130
173
|
let immediate = argImmediate;
|
|
131
174
|
if (immediate === undefined) {
|
|
132
175
|
if (interactive) {
|
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.e38035c",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Alpic",
|
|
@@ -14,23 +14,22 @@
|
|
|
14
14
|
"files": [
|
|
15
15
|
"index.js",
|
|
16
16
|
"dist",
|
|
17
|
-
"template"
|
|
17
|
+
"template",
|
|
18
|
+
"template-ecom"
|
|
18
19
|
],
|
|
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
20
|
"dependencies": {
|
|
28
21
|
"@clack/prompts": "^0.11.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.16"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsc && node copyExamples.js",
|
|
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
|
+
}
|
package/template/README.md
CHANGED
|
@@ -10,9 +10,9 @@ case `uname` in
|
|
|
10
10
|
esac
|
|
11
11
|
|
|
12
12
|
if [ -z "$NODE_PATH" ]; then
|
|
13
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.
|
|
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
14
|
else
|
|
15
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.
|
|
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
16
|
fi
|
|
17
17
|
if [ -x "$basedir/node" ]; then
|
|
18
18
|
exec "$basedir/node" "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
|
|
File without changes
|
|
@@ -10,9 +10,9 @@ case `uname` in
|
|
|
10
10
|
esac
|
|
11
11
|
|
|
12
12
|
if [ -z "$NODE_PATH" ]; then
|
|
13
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.
|
|
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
14
|
else
|
|
15
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.
|
|
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
16
|
fi
|
|
17
17
|
if [ -x "$basedir/node" ]; then
|
|
18
18
|
exec "$basedir/node" "$basedir/../shx/lib/cli.js" "$@"
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -10,9 +10,9 @@ case `uname` in
|
|
|
10
10
|
esac
|
|
11
11
|
|
|
12
12
|
if [ -z "$NODE_PATH" ]; then
|
|
13
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
14
|
else
|
|
15
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
16
|
fi
|
|
17
17
|
if [ -x "$basedir/node" ]; then
|
|
18
18
|
exec "$basedir/node" "$basedir/../vite/bin/vite.js" "$@"
|
package/template/package.json
CHANGED
|
@@ -15,25 +15,28 @@
|
|
|
15
15
|
"web:preview": "vite preview -c web/vite.config.ts"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@modelcontextprotocol/sdk": "^1.
|
|
19
|
-
"express": "^5.1
|
|
20
|
-
"react": "^19.
|
|
21
|
-
"react-dom": "^19.
|
|
22
|
-
"skybridge": ">=0.16.
|
|
23
|
-
"vite": "^7.
|
|
24
|
-
"zod": "^4.
|
|
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
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@modelcontextprotocol/inspector": "^0.
|
|
28
|
-
"@
|
|
29
|
-
"@types/
|
|
30
|
-
"@types/react": "^19.
|
|
31
|
-
"@types/react-dom": "^19.
|
|
32
|
-
"@vitejs/plugin-react": "^5.
|
|
33
|
-
"nodemon": "^3.1.
|
|
34
|
-
"shx": "^0.
|
|
35
|
-
"tsx": "^4.
|
|
36
|
-
"typescript": "^5.
|
|
27
|
+
"@modelcontextprotocol/inspector": "^0.18.0",
|
|
28
|
+
"@skybridge/devtools": ">=0.16.2 <1.0.0",
|
|
29
|
+
"@types/express": "^5.0.6",
|
|
30
|
+
"@types/react": "^19.2.7",
|
|
31
|
+
"@types/react-dom": "^19.2.3",
|
|
32
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
33
|
+
"nodemon": "^3.1.11",
|
|
34
|
+
"shx": "^0.4.0",
|
|
35
|
+
"tsx": "^4.21.0",
|
|
36
|
+
"typescript": "^5.9.3"
|
|
37
37
|
},
|
|
38
|
-
"workspaces": []
|
|
38
|
+
"workspaces": [],
|
|
39
|
+
"engines": {
|
|
40
|
+
"node": ">=24.0.0"
|
|
41
|
+
}
|
|
39
42
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import express, { type Express } from "express";
|
|
2
|
-
|
|
3
|
-
import { widgetsDevServer } from "skybridge/server";
|
|
2
|
+
import { devtoolsStaticServer, widgetsDevServer } from "skybridge/server";
|
|
4
3
|
import type { ViteDevServer } from "vite";
|
|
5
4
|
import { mcp } from "./middleware.js";
|
|
6
5
|
import server from "./server.js";
|
|
@@ -14,6 +13,7 @@ app.use(mcp(server));
|
|
|
14
13
|
const env = process.env.NODE_ENV || "development";
|
|
15
14
|
|
|
16
15
|
if (env !== "production") {
|
|
16
|
+
app.use(await devtoolsStaticServer());
|
|
17
17
|
app.use(await widgetsDevServer());
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -27,6 +27,10 @@ app.listen(3000, (error) => {
|
|
|
27
27
|
console.log(
|
|
28
28
|
"Make your local server accessible with 'ngrok http 3000' and connect to ChatGPT with URL https://xxxxxx.ngrok-free.app/mcp",
|
|
29
29
|
);
|
|
30
|
+
|
|
31
|
+
if (env !== "production") {
|
|
32
|
+
console.log("Devtools available at http://localhost:3000");
|
|
33
|
+
}
|
|
30
34
|
});
|
|
31
35
|
|
|
32
36
|
process.on("SIGINT", async () => {
|
|
@@ -0,0 +1,89 @@
|
|
|
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/)
|
|
@@ -0,0 +1,40 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
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
|
+
});
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
|
|
2
|
+
import type { NextFunction, Request, Response } from "express";
|
|
3
|
+
|
|
4
|
+
import type { McpServer } from "skybridge/server";
|
|
5
|
+
|
|
6
|
+
export const mcp =
|
|
7
|
+
(server: McpServer) =>
|
|
8
|
+
async (req: Request, res: Response, next: NextFunction) => {
|
|
9
|
+
// Only handle requests to the /mcp path
|
|
10
|
+
if (req.path !== "/mcp") {
|
|
11
|
+
return next();
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
if (req.method === "POST") {
|
|
15
|
+
try {
|
|
16
|
+
const transport = new StreamableHTTPServerTransport({
|
|
17
|
+
sessionIdGenerator: undefined,
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
res.on("close", () => {
|
|
21
|
+
transport.close();
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
await server.connect(transport);
|
|
25
|
+
|
|
26
|
+
await transport.handleRequest(req, res, req.body);
|
|
27
|
+
} catch (error) {
|
|
28
|
+
console.error("Error handling MCP request:", error);
|
|
29
|
+
if (!res.headersSent) {
|
|
30
|
+
res.status(500).json({
|
|
31
|
+
jsonrpc: "2.0",
|
|
32
|
+
error: {
|
|
33
|
+
code: -32603,
|
|
34
|
+
message: "Internal server error",
|
|
35
|
+
},
|
|
36
|
+
id: null,
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
} else if (req.method === "GET" || req.method === "DELETE") {
|
|
41
|
+
res.writeHead(405).end(
|
|
42
|
+
JSON.stringify({
|
|
43
|
+
jsonrpc: "2.0",
|
|
44
|
+
error: {
|
|
45
|
+
code: -32000,
|
|
46
|
+
message: "Method not allowed.",
|
|
47
|
+
},
|
|
48
|
+
id: null,
|
|
49
|
+
}),
|
|
50
|
+
);
|
|
51
|
+
} else {
|
|
52
|
+
next();
|
|
53
|
+
}
|
|
54
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { McpServer } from "skybridge/server";
|
|
2
|
+
import { z } from "zod";
|
|
3
|
+
|
|
4
|
+
interface Product {
|
|
5
|
+
id: number;
|
|
6
|
+
title: string;
|
|
7
|
+
price: number;
|
|
8
|
+
description: string;
|
|
9
|
+
category: string;
|
|
10
|
+
image: string;
|
|
11
|
+
rating: {
|
|
12
|
+
rate: number;
|
|
13
|
+
count: number;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const server = new McpServer(
|
|
18
|
+
{
|
|
19
|
+
name: "ecom-carousel-app",
|
|
20
|
+
version: "0.0.1",
|
|
21
|
+
},
|
|
22
|
+
{ capabilities: {} },
|
|
23
|
+
).registerWidget(
|
|
24
|
+
"ecom-carousel",
|
|
25
|
+
{
|
|
26
|
+
description: "E-commerce Product Carousel",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
description: "Display a carousel of products from the store.",
|
|
30
|
+
inputSchema: {
|
|
31
|
+
category: z
|
|
32
|
+
.enum(["electronics", "jewelery", "men's clothing", "women's clothing"])
|
|
33
|
+
.optional()
|
|
34
|
+
.describe("Filter by product category"),
|
|
35
|
+
maxPrice: z.number().optional().describe("Maximum price filter"),
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
async ({ category, maxPrice }) => {
|
|
39
|
+
try {
|
|
40
|
+
const response = await fetch("https://fakestoreapi.com/products");
|
|
41
|
+
if (!response.ok) {
|
|
42
|
+
throw new Error(`API request failed: ${response.status}`);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const products: Product[] = await response.json();
|
|
46
|
+
const filtered: Product[] = [];
|
|
47
|
+
|
|
48
|
+
for (const product of products) {
|
|
49
|
+
if (category && product.category !== category) {
|
|
50
|
+
continue;
|
|
51
|
+
}
|
|
52
|
+
if (maxPrice !== undefined && product.price > maxPrice) {
|
|
53
|
+
continue;
|
|
54
|
+
}
|
|
55
|
+
filtered.push(product);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return {
|
|
59
|
+
structuredContent: { products: filtered },
|
|
60
|
+
content: [{ type: "text", text: JSON.stringify(filtered) }],
|
|
61
|
+
isError: false,
|
|
62
|
+
};
|
|
63
|
+
} catch (error) {
|
|
64
|
+
return {
|
|
65
|
+
content: [{ type: "text", text: `Error: ${error}` }],
|
|
66
|
+
isError: true,
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
export default server;
|
|
73
|
+
export type AppType = typeof server;
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
.light {
|
|
2
|
+
--bg: #fff;
|
|
3
|
+
--bg-alt: #f5f5f5;
|
|
4
|
+
--text: #333;
|
|
5
|
+
--text-muted: #666;
|
|
6
|
+
--shadow: rgba(0, 0, 0, 0.1);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.dark {
|
|
10
|
+
--bg: #2a2a2a;
|
|
11
|
+
--bg-alt: #333;
|
|
12
|
+
--text: #eee;
|
|
13
|
+
--text-muted: #aaa;
|
|
14
|
+
--shadow: rgba(0, 0, 0, 0.3);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.container,
|
|
18
|
+
.checkout {
|
|
19
|
+
--accent: mediumseagreen;
|
|
20
|
+
--accent-text: #fff;
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
font-family: sans-serif;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.carousel {
|
|
27
|
+
display: flex;
|
|
28
|
+
gap: 1rem;
|
|
29
|
+
padding: 1rem;
|
|
30
|
+
overflow-x: auto;
|
|
31
|
+
scrollbar-width: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.product-wrapper {
|
|
35
|
+
flex: 0 0 150px;
|
|
36
|
+
max-width: 150px;
|
|
37
|
+
display: flex;
|
|
38
|
+
flex-direction: column;
|
|
39
|
+
gap: 0.5rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.product-card {
|
|
43
|
+
background: var(--bg);
|
|
44
|
+
border: none;
|
|
45
|
+
border-radius: 8px;
|
|
46
|
+
box-shadow: 0 2px 8px var(--shadow);
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
padding: 0;
|
|
49
|
+
text-align: left;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.product-card.selected {
|
|
53
|
+
outline: 2px solid var(--accent);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.product-image {
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 100px;
|
|
59
|
+
object-fit: contain;
|
|
60
|
+
background: var(--bg-alt);
|
|
61
|
+
padding: 0.5rem;
|
|
62
|
+
box-sizing: border-box;
|
|
63
|
+
border-radius: 8px 8px 0 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.product-info {
|
|
67
|
+
padding: 0.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.product-title {
|
|
71
|
+
font-size: 0.75rem;
|
|
72
|
+
color: var(--text);
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
text-overflow: ellipsis;
|
|
75
|
+
white-space: nowrap;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.product-price {
|
|
79
|
+
font-size: 0.875rem;
|
|
80
|
+
font-weight: bold;
|
|
81
|
+
color: var(--accent);
|
|
82
|
+
margin-top: 0.25rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.product-detail {
|
|
86
|
+
margin: 0 1rem 1rem;
|
|
87
|
+
padding: 1rem;
|
|
88
|
+
background: var(--bg);
|
|
89
|
+
border-radius: 8px;
|
|
90
|
+
box-shadow: 0 2px 8px var(--shadow);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.detail-title {
|
|
94
|
+
font-weight: bold;
|
|
95
|
+
color: var(--text);
|
|
96
|
+
margin-bottom: 0.5rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.detail-rating {
|
|
100
|
+
font-size: 0.875rem;
|
|
101
|
+
color: var(--text-muted);
|
|
102
|
+
margin-bottom: 0.5rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.detail-description {
|
|
106
|
+
font-size: 0.8rem;
|
|
107
|
+
color: var(--text-muted);
|
|
108
|
+
line-height: 1.4;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.message {
|
|
112
|
+
margin: 1rem;
|
|
113
|
+
padding: 1rem;
|
|
114
|
+
background: var(--bg);
|
|
115
|
+
border-radius: 8px;
|
|
116
|
+
box-shadow: 0 2px 8px var(--shadow);
|
|
117
|
+
color: var(--text-muted);
|
|
118
|
+
text-align: center;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.cart-indicator {
|
|
122
|
+
padding: 0.5rem 1rem;
|
|
123
|
+
align-self: flex-end;
|
|
124
|
+
color: var(--accent-text);
|
|
125
|
+
background: var(--accent);
|
|
126
|
+
border: none;
|
|
127
|
+
border-radius: 6px;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
margin-right: 1rem;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.cart-indicator:disabled {
|
|
134
|
+
background: var(--bg-alt);
|
|
135
|
+
color: var(--text-muted);
|
|
136
|
+
cursor: default;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cart-button {
|
|
140
|
+
padding: 0.5rem;
|
|
141
|
+
border: none;
|
|
142
|
+
border-radius: 6px;
|
|
143
|
+
cursor: pointer;
|
|
144
|
+
background: var(--accent);
|
|
145
|
+
color: var(--accent-text);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.cart-button.in-cart {
|
|
149
|
+
background: var(--bg-alt);
|
|
150
|
+
color: var(--text-muted);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.checkout {
|
|
154
|
+
gap: 1rem;
|
|
155
|
+
padding: 1.25rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.checkout-title {
|
|
159
|
+
font-weight: bold;
|
|
160
|
+
font-size: 1rem;
|
|
161
|
+
color: var(--text);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.checkout-items {
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: column;
|
|
167
|
+
gap: 0.5rem;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.checkout-item {
|
|
171
|
+
display: flex;
|
|
172
|
+
justify-content: space-between;
|
|
173
|
+
font-size: 0.875rem;
|
|
174
|
+
color: var(--text);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.checkout-total {
|
|
178
|
+
display: flex;
|
|
179
|
+
justify-content: space-between;
|
|
180
|
+
font-weight: bold;
|
|
181
|
+
color: var(--text);
|
|
182
|
+
border-top: 1px solid var(--bg-alt);
|
|
183
|
+
padding-top: 0.5rem;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.checkout-button {
|
|
187
|
+
padding: 0.75rem;
|
|
188
|
+
border: none;
|
|
189
|
+
border-radius: 6px;
|
|
190
|
+
cursor: pointer;
|
|
191
|
+
background: var(--accent);
|
|
192
|
+
color: var(--accent-text);
|
|
193
|
+
font-weight: bold;
|
|
194
|
+
}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import "@/index.css";
|
|
2
|
+
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import {
|
|
5
|
+
mountWidget,
|
|
6
|
+
useLayout,
|
|
7
|
+
useOpenExternal,
|
|
8
|
+
useRequestModal,
|
|
9
|
+
useUser,
|
|
10
|
+
useWidgetState,
|
|
11
|
+
} from "skybridge/web";
|
|
12
|
+
import { useToolInfo } from "../helpers.js";
|
|
13
|
+
|
|
14
|
+
const translations: Record<string, Record<string, string>> = {
|
|
15
|
+
en: {
|
|
16
|
+
loading: "Loading products...",
|
|
17
|
+
noProducts: "No product found",
|
|
18
|
+
addToCart: "Add to cart",
|
|
19
|
+
removeFromCart: "Remove",
|
|
20
|
+
},
|
|
21
|
+
fr: {
|
|
22
|
+
loading: "Chargement des produits...",
|
|
23
|
+
noProducts: "Aucun produit trouvé",
|
|
24
|
+
addToCart: "Ajouter",
|
|
25
|
+
removeFromCart: "Retirer",
|
|
26
|
+
},
|
|
27
|
+
es: {
|
|
28
|
+
loading: "Cargando productos...",
|
|
29
|
+
noProducts: "No se encontraron productos",
|
|
30
|
+
addToCart: "Añadir",
|
|
31
|
+
removeFromCart: "Quitar",
|
|
32
|
+
},
|
|
33
|
+
de: {
|
|
34
|
+
loading: "Produkte werden geladen...",
|
|
35
|
+
noProducts: "Keine Produkte gefunden",
|
|
36
|
+
addToCart: "Hinzufügen",
|
|
37
|
+
removeFromCart: "Entfernen",
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
const CHECKOUT_URL = "https://alpic.ai";
|
|
42
|
+
|
|
43
|
+
function EcomCarousel() {
|
|
44
|
+
const { theme } = useLayout();
|
|
45
|
+
const { locale } = useUser();
|
|
46
|
+
const { open, isOpen } = useRequestModal();
|
|
47
|
+
const openExternal = useOpenExternal();
|
|
48
|
+
|
|
49
|
+
const lang = locale?.split("-")[0] ?? "en";
|
|
50
|
+
|
|
51
|
+
function translate(key: string) {
|
|
52
|
+
return translations[lang]?.[key] ?? translations.en[key];
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const { output, isPending } = useToolInfo<"ecom-carousel">();
|
|
56
|
+
type Product = NonNullable<typeof output>["products"][number];
|
|
57
|
+
const [selected, setSelected] = useState<Product | null>(null);
|
|
58
|
+
|
|
59
|
+
const [cart, setCart] = useWidgetState<{ ids: number[] }>({ ids: [] });
|
|
60
|
+
|
|
61
|
+
function toggleCart(productId: number) {
|
|
62
|
+
if (cart.ids.includes(productId)) {
|
|
63
|
+
setCart({ ids: cart.ids.filter((id) => id !== productId) });
|
|
64
|
+
} else {
|
|
65
|
+
setCart({ ids: [...cart.ids, productId] });
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
if (isPending) {
|
|
70
|
+
return (
|
|
71
|
+
<div className={`${theme} container`}>
|
|
72
|
+
<div className="message">{translate("loading")}</div>
|
|
73
|
+
</div>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
if (!output || output.products.length === 0) {
|
|
78
|
+
return (
|
|
79
|
+
<div className={`${theme} container`}>
|
|
80
|
+
<div className="message">{translate("noProducts")}</div>
|
|
81
|
+
</div>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
if (isOpen) {
|
|
86
|
+
const cartItems: Product[] = [];
|
|
87
|
+
let total = 0;
|
|
88
|
+
for (const p of output.products) {
|
|
89
|
+
if (cart.ids.includes(p.id)) {
|
|
90
|
+
cartItems.push(p);
|
|
91
|
+
total += p.price;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
const checkoutUrl = new URL(CHECKOUT_URL);
|
|
95
|
+
checkoutUrl.searchParams.set("cart", cart.ids.join(","));
|
|
96
|
+
|
|
97
|
+
return (
|
|
98
|
+
<div className={`${theme} checkout`}>
|
|
99
|
+
<div className="checkout-title">Order summary</div>
|
|
100
|
+
<div className="checkout-items">
|
|
101
|
+
{cartItems.map((item) => (
|
|
102
|
+
<div key={item.id} className="checkout-item">
|
|
103
|
+
<span>{item.title}</span>
|
|
104
|
+
<span>${item.price.toFixed(2)}</span>
|
|
105
|
+
</div>
|
|
106
|
+
))}
|
|
107
|
+
</div>
|
|
108
|
+
<div className="checkout-total">
|
|
109
|
+
<span>Total</span>
|
|
110
|
+
<span>${total.toFixed(2)}</span>
|
|
111
|
+
</div>
|
|
112
|
+
<button
|
|
113
|
+
type="button"
|
|
114
|
+
className="checkout-button"
|
|
115
|
+
onClick={() => openExternal(checkoutUrl.toString())}
|
|
116
|
+
>
|
|
117
|
+
Checkout
|
|
118
|
+
</button>
|
|
119
|
+
</div>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
const activeProduct = selected ?? output.products[0];
|
|
124
|
+
|
|
125
|
+
return (
|
|
126
|
+
<div className={`${theme} container`}>
|
|
127
|
+
<button
|
|
128
|
+
type="button"
|
|
129
|
+
className="cart-indicator"
|
|
130
|
+
onClick={() => open({ title: "Proceed to checkout ?" })}
|
|
131
|
+
disabled={cart.ids.length === 0}
|
|
132
|
+
>
|
|
133
|
+
🛒 {cart.ids.length}
|
|
134
|
+
</button>
|
|
135
|
+
<div className="carousel">
|
|
136
|
+
{output.products.map((product) => {
|
|
137
|
+
const inCart = cart.ids.includes(product.id);
|
|
138
|
+
return (
|
|
139
|
+
<div key={product.id} className="product-wrapper">
|
|
140
|
+
<button
|
|
141
|
+
type="button"
|
|
142
|
+
className={`product-card ${activeProduct?.id === product.id ? "selected" : ""}`}
|
|
143
|
+
onClick={() => setSelected(product)}
|
|
144
|
+
>
|
|
145
|
+
<img
|
|
146
|
+
src={product.image}
|
|
147
|
+
alt={product.title}
|
|
148
|
+
className="product-image"
|
|
149
|
+
/>
|
|
150
|
+
<div className="product-info">
|
|
151
|
+
<div className="product-title">{product.title}</div>
|
|
152
|
+
<div className="product-price">
|
|
153
|
+
${product.price.toFixed(2)}
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</button>
|
|
157
|
+
<button
|
|
158
|
+
type="button"
|
|
159
|
+
className={`cart-button ${inCart ? "in-cart" : ""}`}
|
|
160
|
+
onClick={() => toggleCart(product.id)}
|
|
161
|
+
>
|
|
162
|
+
{inCart ? translate("removeFromCart") : translate("addToCart")}
|
|
163
|
+
</button>
|
|
164
|
+
</div>
|
|
165
|
+
);
|
|
166
|
+
})}
|
|
167
|
+
</div>
|
|
168
|
+
<div className="product-detail">
|
|
169
|
+
<div className="detail-title">{activeProduct.title}</div>
|
|
170
|
+
<div className="detail-rating">
|
|
171
|
+
⭐ {activeProduct.rating.rate} ({activeProduct.rating.count} reviews)
|
|
172
|
+
</div>
|
|
173
|
+
<div className="detail-description">{activeProduct.description}</div>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
export default EcomCarousel;
|
|
180
|
+
|
|
181
|
+
mountWidget(<EcomCarousel />);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import react from "@vitejs/plugin-react";
|
|
3
|
+
import { skybridge } from "skybridge/web";
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
|
|
6
|
+
// https://vite.dev/config/
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [skybridge(), react()],
|
|
9
|
+
root: __dirname,
|
|
10
|
+
resolve: {
|
|
11
|
+
alias: {
|
|
12
|
+
"@": path.resolve(__dirname, "./src"),
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
});
|
package/template/_gitignore
DELETED