create-skybridge 0.0.0-dev.fb3f63e → 0.0.0-dev.fb985cd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +426 -208
- package/package.json +9 -8
- package/templates/blank/.dockerignore +4 -0
- package/templates/blank/AGENTS.md +1 -0
- package/templates/blank/Dockerfile +53 -0
- package/templates/blank/README.md +93 -0
- package/{template → templates/blank}/_gitignore +3 -1
- package/templates/blank/node_modules/.bin/alpic +21 -0
- package/templates/blank/node_modules/.bin/sb +21 -0
- package/templates/blank/node_modules/.bin/skybridge +21 -0
- package/templates/blank/node_modules/.bin/tsc +21 -0
- package/templates/blank/node_modules/.bin/tsserver +21 -0
- package/templates/blank/node_modules/.bin/tsx +21 -0
- package/templates/blank/node_modules/.bin/vite +21 -0
- package/templates/blank/package.json +30 -0
- package/templates/blank/src/helpers.ts +4 -0
- package/templates/blank/src/index.ts +3 -0
- package/templates/blank/src/server.ts +12 -0
- package/templates/blank/tsconfig.json +5 -0
- package/templates/blank/vite.config.ts +12 -0
- package/templates/demo/.dockerignore +4 -0
- package/templates/demo/AGENTS.md +1 -0
- package/templates/demo/Dockerfile +53 -0
- package/templates/demo/README.md +97 -0
- package/templates/demo/_gitignore +7 -0
- package/templates/demo/alpic.json +3 -0
- package/templates/demo/evals/start.eval.ts +11 -0
- package/templates/demo/node_modules/.bin/alpic +21 -0
- package/templates/demo/node_modules/.bin/sb +21 -0
- package/templates/demo/node_modules/.bin/skybridge +21 -0
- package/templates/demo/node_modules/.bin/tsc +21 -0
- package/templates/demo/node_modules/.bin/tsserver +21 -0
- package/templates/demo/node_modules/.bin/tsx +21 -0
- package/templates/demo/node_modules/.bin/vite +21 -0
- package/templates/demo/node_modules/.bin/vitest +21 -0
- package/templates/demo/package.json +47 -0
- package/templates/demo/src/helpers.ts +4 -0
- package/templates/demo/src/index.css +59 -0
- package/templates/demo/src/index.ts +3 -0
- package/templates/demo/src/server.ts +92 -0
- package/templates/demo/src/views/components/doc-link.tsx +22 -0
- package/templates/demo/src/views/components/doc.tsx +21 -0
- package/templates/demo/src/views/components/nav.tsx +31 -0
- package/templates/demo/src/views/components/progress.tsx +35 -0
- package/templates/demo/src/views/components/steps/outro.tsx +68 -0
- package/templates/demo/src/views/components/steps/state.tsx +47 -0
- package/templates/demo/src/views/components/steps/tool-call.tsx +53 -0
- package/templates/demo/src/views/components/steps/tool-output.tsx +40 -0
- package/templates/demo/src/views/images/mascot/beret.png +0 -0
- package/templates/demo/src/views/images/mascot/chapka.png +0 -0
- package/templates/demo/src/views/images/mascot/cowboy-hat.png +0 -0
- package/templates/demo/src/views/images/mascot/fez.png +0 -0
- package/templates/demo/src/views/images/mascot/jester-hat.png +0 -0
- package/templates/demo/src/views/images/mascot/mitre.png +0 -0
- package/templates/demo/src/views/images/mascot/non-la.png +0 -0
- package/templates/demo/src/views/images/mascot/original.png +0 -0
- package/templates/demo/src/views/images/mascot/propeller-beanie.png +0 -0
- package/templates/demo/src/views/images/mascot/ski-mask.png +0 -0
- package/templates/demo/src/views/images/mascot/sombrero.png +0 -0
- package/templates/demo/src/views/images/mascot/top-hat.png +0 -0
- package/templates/demo/src/views/images/mascot/viking-helmet.png +0 -0
- package/templates/demo/src/views/onboarding.tsx +63 -0
- package/templates/demo/src/views/use-mascot.ts +60 -0
- package/templates/demo/tsconfig.evals.json +11 -0
- package/templates/demo/tsconfig.json +11 -0
- package/templates/demo/vite.config.ts +20 -0
- package/templates/ecom/.dockerignore +4 -0
- package/templates/ecom/.env.template +7 -0
- package/templates/ecom/.ladle/components.tsx +26 -0
- package/templates/ecom/.ladle/config.mjs +11 -0
- package/templates/ecom/.ladle/vite.config.ts +11 -0
- package/templates/ecom/AGENTS.md +2 -0
- package/templates/ecom/Dockerfile +53 -0
- package/templates/ecom/README.md +93 -0
- package/templates/ecom/_gitignore +9 -0
- package/templates/ecom/alpic.json +3 -0
- package/templates/ecom/node_modules/.bin/alpic +21 -0
- package/templates/ecom/node_modules/.bin/ladle +21 -0
- package/templates/ecom/node_modules/.bin/sb +21 -0
- package/templates/ecom/node_modules/.bin/skybridge +21 -0
- package/templates/ecom/node_modules/.bin/tsc +21 -0
- package/templates/ecom/node_modules/.bin/tsserver +21 -0
- package/templates/ecom/node_modules/.bin/tsx +21 -0
- package/templates/ecom/node_modules/.bin/vite +21 -0
- package/templates/ecom/package.json +42 -0
- package/templates/ecom/src/catalog/index.ts +19 -0
- package/templates/ecom/src/catalog/mock.ts +134 -0
- package/templates/ecom/src/catalog/shopify.ts +264 -0
- package/templates/ecom/src/components/chip.css.ts +63 -0
- package/templates/ecom/src/components/chip.stories.tsx +27 -0
- package/templates/ecom/src/components/chip.tsx +49 -0
- package/templates/ecom/src/components/empty-state.stories.tsx +3 -0
- package/templates/ecom/src/components/empty-state.tsx +12 -0
- package/templates/ecom/src/components/expandable-text.css.ts +49 -0
- package/templates/ecom/src/components/expandable-text.stories.tsx +20 -0
- package/templates/ecom/src/components/expandable-text.tsx +53 -0
- package/templates/ecom/src/components/image-gallery.css.ts +172 -0
- package/templates/ecom/src/components/image-gallery.stories.tsx +30 -0
- package/templates/ecom/src/components/image-gallery.tsx +163 -0
- package/templates/ecom/src/components/product-card.css.ts +159 -0
- package/templates/ecom/src/components/product-card.stories.tsx +58 -0
- package/templates/ecom/src/components/product-card.tsx +102 -0
- package/templates/ecom/src/components/product-carousel.css.ts +134 -0
- package/templates/ecom/src/components/product-carousel.stories.tsx +64 -0
- package/templates/ecom/src/components/product-carousel.tsx +202 -0
- package/templates/ecom/src/components/variant-picker.css.ts +27 -0
- package/templates/ecom/src/components/variant-picker.stories.tsx +67 -0
- package/templates/ecom/src/components/variant-picker.tsx +70 -0
- package/templates/ecom/src/components/view-frame.css.ts +22 -0
- package/templates/ecom/src/components/view-frame.tsx +27 -0
- package/templates/ecom/src/config.ts +12 -0
- package/templates/ecom/src/design/contract.css.ts +39 -0
- package/templates/ecom/src/design/fonts.css +15 -0
- package/templates/ecom/src/design/primitives.css.ts +101 -0
- package/templates/ecom/src/design/recipes/typography.css.ts +75 -0
- package/templates/ecom/src/design/sprinkles.css.ts +128 -0
- package/templates/ecom/src/design/themes/dark.css.ts +36 -0
- package/templates/ecom/src/design/themes/light.css.ts +36 -0
- package/templates/ecom/src/design/tokens.ts +8 -0
- package/templates/ecom/src/helpers.ts +4 -0
- package/templates/ecom/src/i18n.ts +35 -0
- package/templates/ecom/src/index.css +9 -0
- package/templates/ecom/src/index.ts +3 -0
- package/templates/ecom/src/lib/cx.ts +9 -0
- package/templates/ecom/src/lib/format.ts +9 -0
- package/templates/ecom/src/lib/variants.ts +150 -0
- package/templates/ecom/src/server.ts +39 -0
- package/templates/ecom/src/tools/render-carousel.ts +161 -0
- package/templates/ecom/src/tools/search-products.ts +196 -0
- package/templates/ecom/src/types.ts +87 -0
- package/templates/ecom/src/views/carousel/detail/detail.css.ts +115 -0
- package/templates/ecom/src/views/carousel/detail/detail.stories.tsx +133 -0
- package/templates/ecom/src/views/carousel/detail/index.tsx +254 -0
- package/templates/ecom/src/views/carousel/index.tsx +233 -0
- package/templates/ecom/tsconfig.json +11 -0
- package/templates/ecom/vite.config.ts +8 -0
- package/dist/index.test.d.ts +0 -1
- package/dist/index.test.js +0 -33
- package/template/AGENTS.md +0 -1
- package/template/README.md +0 -99
- package/template/node_modules/.bin/alpic +0 -21
- package/template/node_modules/.bin/nodemon +0 -21
- package/template/node_modules/.bin/sb +0 -21
- package/template/node_modules/.bin/skybridge +0 -21
- package/template/node_modules/.bin/tsc +0 -21
- package/template/node_modules/.bin/tsserver +0 -21
- package/template/node_modules/.bin/tsx +0 -21
- package/template/node_modules/.bin/vite +0 -21
- package/template/nodemon.json +0 -5
- package/template/package.json +0 -38
- package/template/server/src/index.ts +0 -62
- package/template/tsconfig.json +0 -23
- package/template/tsconfig.server.json +0 -11
- package/template/web/src/helpers.ts +0 -4
- package/template/web/src/index.css +0 -154
- package/template/web/src/widgets/magic-8-ball.tsx +0 -27
- package/template/web/vite.config.ts +0 -15
- /package/{template → templates/blank}/alpic.json +0 -0
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { useToolInfo } from "@/helpers.js";
|
|
2
|
+
import Doc from "@/views/components/doc.js";
|
|
3
|
+
import DocLink from "@/views/components/doc-link.js";
|
|
4
|
+
|
|
5
|
+
export default function ToolOutput() {
|
|
6
|
+
// useToolInfo: read the input, output and metadata of the tool that opened this view.
|
|
7
|
+
const { output } = useToolInfo<"start">();
|
|
8
|
+
const name = output?.name;
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<>
|
|
12
|
+
<div className="flex flex-1 flex-col justify-center gap-3">
|
|
13
|
+
<h1 className="type-display-xs font-mozilla font-semibold">
|
|
14
|
+
Greetings,{" "}
|
|
15
|
+
<span className="text-primary">{name ?? "stranger"} !</span>
|
|
16
|
+
</h1>
|
|
17
|
+
{name ? (
|
|
18
|
+
<p>
|
|
19
|
+
You're wondering how do I know your name, don't you? Well, it's
|
|
20
|
+
because the view reads the <strong>tool output</strong>. The LLM
|
|
21
|
+
knows about it too.
|
|
22
|
+
</p>
|
|
23
|
+
) : (
|
|
24
|
+
<p>
|
|
25
|
+
The view reads the <strong>tool output</strong>, but no{" "}
|
|
26
|
+
<code>name</code> was passed this time. Try again with your surname
|
|
27
|
+
to see how this view personalizes.
|
|
28
|
+
</p>
|
|
29
|
+
)}
|
|
30
|
+
</div>
|
|
31
|
+
<Doc>
|
|
32
|
+
Use{" "}
|
|
33
|
+
<DocLink href="https://docs.skybridge.tech/api-reference/use-tool-info">
|
|
34
|
+
useToolInfo
|
|
35
|
+
</DocLink>{" "}
|
|
36
|
+
to hydrate the view with tool input, output and metadata.
|
|
37
|
+
</Doc>
|
|
38
|
+
</>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import "@/index.css";
|
|
2
|
+
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { useUser } from "skybridge/web";
|
|
5
|
+
import Nav from "./components/nav.js";
|
|
6
|
+
import Progress from "./components/progress.js";
|
|
7
|
+
import Outro from "./components/steps/outro.js";
|
|
8
|
+
import State from "./components/steps/state.js";
|
|
9
|
+
import ToolCall from "./components/steps/tool-call.js";
|
|
10
|
+
import ToolOutput from "./components/steps/tool-output.js";
|
|
11
|
+
import { useMascot } from "./use-mascot.js";
|
|
12
|
+
|
|
13
|
+
const STEPS = [
|
|
14
|
+
{ label: "Reading tool output", Component: ToolOutput },
|
|
15
|
+
{ label: "Sharing view state", Component: State },
|
|
16
|
+
{ label: "Calling tools", Component: ToolCall },
|
|
17
|
+
{ label: "Examples & docs", Component: Outro },
|
|
18
|
+
] as const;
|
|
19
|
+
|
|
20
|
+
export default function Onboarding() {
|
|
21
|
+
// useUser: read user environment info (theme, locale, user agent).
|
|
22
|
+
const { theme } = useUser();
|
|
23
|
+
|
|
24
|
+
const [step, setStep] = useState(0);
|
|
25
|
+
const { img } = useMascot();
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<div
|
|
29
|
+
className={`${theme === "dark" ? "dark" : ""} mx-auto w-full max-w-4xl border border-border overflow-hidden bg-background text-foreground`}
|
|
30
|
+
>
|
|
31
|
+
<div className="min-h-136 md:min-h-95 flex flex-col items-center gap-6 p-6 bg-linear-to-br from-purple-50 via-white to-cyan-50 dark:from-purple-950/30 dark:via-zinc-950 dark:to-cyan-900/30 bg-size-[200%_200%] animate-aurora md:flex-row md:items-stretch">
|
|
32
|
+
<div className="shrink-0 self-center animate-float">
|
|
33
|
+
<img
|
|
34
|
+
src={img}
|
|
35
|
+
alt="Skybridge mascot"
|
|
36
|
+
className="h-32 w-32 md:h-50 md:w-50 object-contain animate-twirl"
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
39
|
+
<div className="flex w-full flex-1 flex-col gap-6">
|
|
40
|
+
<Progress
|
|
41
|
+
steps={STEPS.map(({ label }) => label)}
|
|
42
|
+
current={step}
|
|
43
|
+
onSelect={setStep}
|
|
44
|
+
/>
|
|
45
|
+
<div className="grid flex-1">
|
|
46
|
+
{STEPS.map(({ label, Component }, i) => (
|
|
47
|
+
<div
|
|
48
|
+
key={label}
|
|
49
|
+
className={`col-start-1 row-start-1 flex flex-col gap-6 ${
|
|
50
|
+
step === i ? "" : "invisible pointer-events-none"
|
|
51
|
+
}`}
|
|
52
|
+
aria-hidden={step !== i}
|
|
53
|
+
>
|
|
54
|
+
<Component />
|
|
55
|
+
</div>
|
|
56
|
+
))}
|
|
57
|
+
</div>
|
|
58
|
+
<Nav current={step} total={STEPS.length} onChange={setStep} />
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
@@ -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 currentIndex = prev.hat ? LABELS.indexOf(prev.hat) : -1;
|
|
55
|
+
const next = LABELS[(currentIndex + 1) % LABELS.length];
|
|
56
|
+
return { ...prev, hat: next };
|
|
57
|
+
});
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { skybridge } from "@skybridge/vite-plugin";
|
|
3
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
4
|
+
import react from "@vitejs/plugin-react";
|
|
5
|
+
import { defineConfig } from "vite";
|
|
6
|
+
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [skybridge({ evals: {} }), react(), tailwindcss()],
|
|
9
|
+
server: {
|
|
10
|
+
forwardConsole: {
|
|
11
|
+
unhandledErrors: true,
|
|
12
|
+
logLevels: ["error"],
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
resolve: {
|
|
16
|
+
alias: {
|
|
17
|
+
"@": path.resolve(import.meta.dirname, "./src"),
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
# Copy to .env and fill in. Sourced by the server at startup.
|
|
2
|
+
API_KEY=
|
|
3
|
+
|
|
4
|
+
# Only for the Shopify catalog provider (src/catalog/shopify.ts).
|
|
5
|
+
# The token is the public Storefront API access token, not an Admin key.
|
|
6
|
+
SHOPIFY_STORE_DOMAIN=
|
|
7
|
+
SHOPIFY_STOREFRONT_TOKEN=
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { GlobalProvider } from "@ladle/react";
|
|
2
|
+
import "../src/index.css";
|
|
3
|
+
import { viewFrame } from "../src/components/view-frame.css";
|
|
4
|
+
import { darkTheme, lightTheme } from "../src/design/tokens";
|
|
5
|
+
import { cx } from "../src/lib/cx";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Ladle's built-in theme toggle (sun/moon in the toolbar) drives
|
|
9
|
+
* globalState.theme. We reuse it to flip the widget's own palette, so the
|
|
10
|
+
* preview theme and the widget theme always match. The Provider applies the
|
|
11
|
+
* real ViewFrame surface (viewFrame + theme class), and index.css loads the
|
|
12
|
+
* brand @font-face rules, so stories preview against the actual frame.
|
|
13
|
+
*/
|
|
14
|
+
export const Provider: GlobalProvider = ({ children, globalState }) => {
|
|
15
|
+
const themeClass = globalState.theme === "dark" ? darkTheme : lightTheme;
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<div
|
|
19
|
+
className={cx(viewFrame, themeClass)}
|
|
20
|
+
data-theme={globalState.theme}
|
|
21
|
+
style={{ minHeight: "100vh", padding: 32 }}
|
|
22
|
+
>
|
|
23
|
+
{children}
|
|
24
|
+
</div>
|
|
25
|
+
);
|
|
26
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
|
|
2
|
+
import { defineConfig } from "vite";
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Ladle-only vite config. Intentionally omits the Skybridge plugin (which
|
|
6
|
+
* transforms MCP view boilerplate and crashes Ladle's bundler) and the
|
|
7
|
+
* @vitejs/plugin-react call (Ladle provides its own).
|
|
8
|
+
*/
|
|
9
|
+
export default defineConfig({
|
|
10
|
+
plugins: [vanillaExtractPlugin()],
|
|
11
|
+
});
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# syntax=docker/dockerfile:1
|
|
2
|
+
|
|
3
|
+
# Dockerfile for a Skybridge MCP server.
|
|
4
|
+
#
|
|
5
|
+
# Detects npm, yarn, or pnpm from the lockfile in your project.
|
|
6
|
+
# (For bun or deno, adapt the install/build/prune commands below.)
|
|
7
|
+
|
|
8
|
+
# Build stage: install deps, compile the app, then prune dev deps.
|
|
9
|
+
FROM node:24.18.0-slim AS build
|
|
10
|
+
WORKDIR /app
|
|
11
|
+
|
|
12
|
+
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
|
|
13
|
+
RUN --mount=type=cache,target=/root/.npm \
|
|
14
|
+
--mount=type=cache,target=/usr/local/share/.cache/yarn \
|
|
15
|
+
--mount=type=cache,target=/root/.local/share/pnpm/store \
|
|
16
|
+
if [ -f package-lock.json ]; then \
|
|
17
|
+
npm ci; \
|
|
18
|
+
elif [ -f yarn.lock ]; then \
|
|
19
|
+
corepack enable yarn && yarn install --frozen-lockfile; \
|
|
20
|
+
elif [ -f pnpm-lock.yaml ]; then \
|
|
21
|
+
corepack enable pnpm && pnpm install --frozen-lockfile; \
|
|
22
|
+
else \
|
|
23
|
+
echo "No lockfile found." && exit 1; \
|
|
24
|
+
fi
|
|
25
|
+
|
|
26
|
+
ENV NODE_ENV=production
|
|
27
|
+
|
|
28
|
+
COPY . .
|
|
29
|
+
RUN if [ -f package-lock.json ]; then \
|
|
30
|
+
npm run build && npm prune --omit=dev; \
|
|
31
|
+
elif [ -f yarn.lock ]; then \
|
|
32
|
+
corepack enable yarn && yarn build && yarn install --frozen-lockfile --production=true; \
|
|
33
|
+
elif [ -f pnpm-lock.yaml ]; then \
|
|
34
|
+
corepack enable pnpm && pnpm build && pnpm prune --prod; \
|
|
35
|
+
fi
|
|
36
|
+
|
|
37
|
+
# Runtime stage: copy built artifacts and prod deps, run as non-root.
|
|
38
|
+
FROM node:24.18.0-slim AS runtime
|
|
39
|
+
WORKDIR /app
|
|
40
|
+
ENV NODE_ENV=production
|
|
41
|
+
|
|
42
|
+
USER node
|
|
43
|
+
|
|
44
|
+
COPY --from=build --chown=node:node /app/node_modules ./node_modules
|
|
45
|
+
COPY --from=build --chown=node:node /app/dist ./dist
|
|
46
|
+
COPY --from=build --chown=node:node /app/package.json ./package.json
|
|
47
|
+
|
|
48
|
+
EXPOSE 3000
|
|
49
|
+
|
|
50
|
+
# Run the built server directly rather than via `npm start` / `skybridge start`.
|
|
51
|
+
# Each wrapper adds a process layer that can swallow SIGTERM, which makes
|
|
52
|
+
# graceful shutdowns time out on platforms like Cloud Run, Fly, and k8s.
|
|
53
|
+
CMD ["node", "dist/__entry.js"]
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Skybridge Boilerplate
|
|
2
|
+
|
|
3
|
+
A minimal TypeScript boilerplate for building MCP apps and ChatGPT plugins with the [Skybridge](https://docs.skybridge.tech) framework.
|
|
4
|
+
|
|
5
|
+
## Getting Started
|
|
6
|
+
|
|
7
|
+
### Prerequisites
|
|
8
|
+
|
|
9
|
+
- Node.js 24+
|
|
10
|
+
|
|
11
|
+
### Local Development
|
|
12
|
+
|
|
13
|
+
#### 1. Install
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install
|
|
17
|
+
# or
|
|
18
|
+
pnpm install
|
|
19
|
+
# or
|
|
20
|
+
bun install
|
|
21
|
+
# or
|
|
22
|
+
deno install
|
|
23
|
+
# or
|
|
24
|
+
yarn install
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
#### 2. Start your local server
|
|
28
|
+
|
|
29
|
+
Run the development server from the root directory:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm run dev
|
|
33
|
+
# or
|
|
34
|
+
pnpm dev
|
|
35
|
+
# or
|
|
36
|
+
bun dev
|
|
37
|
+
# or
|
|
38
|
+
deno task dev
|
|
39
|
+
# or
|
|
40
|
+
yarn dev
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
This command starts:
|
|
44
|
+
- Your MCP server at `http://localhost:3000/mcp`.
|
|
45
|
+
- Skybridge DevTools UI at `http://localhost:3000`.
|
|
46
|
+
|
|
47
|
+
#### 3. Project structure
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
├── src/
|
|
51
|
+
│ ├── index.ts # Entry point (starts the app)
|
|
52
|
+
│ ├── server.ts # App definition (tools, views)
|
|
53
|
+
│ └── helpers.ts # Shared utilities
|
|
54
|
+
├── vite.config.ts
|
|
55
|
+
├── alpic.json # Deployment config
|
|
56
|
+
└── package.json
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Create your first view
|
|
60
|
+
|
|
61
|
+
#### 1. Add a new view
|
|
62
|
+
|
|
63
|
+
- Register a tool in `src/server.ts` with a unique name (e.g., `my-view`) using [`registerTool`](https://docs.skybridge.tech/api-reference/register-tool) and a `view` config.
|
|
64
|
+
- Create a matching React component at `src/views/my-view.tsx`. **The file name must match the view name exactly**.
|
|
65
|
+
|
|
66
|
+
#### 2. Edit views with Hot Module Replacement (HMR)
|
|
67
|
+
|
|
68
|
+
Edit and save components in `src/views/` — changes will appear instantly inside your App.
|
|
69
|
+
|
|
70
|
+
#### 3. Edit server code
|
|
71
|
+
|
|
72
|
+
Modify files in `src/` and refresh the tool list with your MCP Client to see the changes.
|
|
73
|
+
|
|
74
|
+
### Testing your App
|
|
75
|
+
|
|
76
|
+
You can test your app locally by using our DevTools UI on `http://localhost:3000` while running the `dev` command.
|
|
77
|
+
|
|
78
|
+
To connect your app with web clients like ChatGPT or Claude, expose your server on the internet by adding the `--tunnel` flag.
|
|
79
|
+
By enabling the tunnel, you'll also be able to access a playground to chat with your app and a real LLM. Learn more by reading the [test guide](https://docs.skybridge.tech/quickstart/test-your-app).
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
## Deploy to Production
|
|
83
|
+
|
|
84
|
+
Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
|
|
85
|
+
|
|
86
|
+
The simplest way to deploy your app is by running the `deploy` command, which will push your MCP server to the [Alpic](https://alpic.ai/) cloud for free.
|
|
87
|
+
|
|
88
|
+
## Resources
|
|
89
|
+
- [Skybridge Documentation](https://docs.skybridge.tech/)
|
|
90
|
+
- [ChatGPT Plugins Documentation](https://developers.openai.com/plugins)
|
|
91
|
+
- [MCP Apps Documentation](https://github.com/modelcontextprotocol/ext-apps/tree/main)
|
|
92
|
+
- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
|
|
93
|
+
- [Alpic Documentation](https://docs.alpic.ai/)
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../alpic/bin/run.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../alpic/bin/run.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/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/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/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/../@ladle/react/lib/cli/cli.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../@ladle/react/lib/cli/cli.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../skybridge/bin/run.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../skybridge/bin/run.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../skybridge/bin/run.js" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../skybridge/bin/run.js" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../typescript/bin/tsc" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../typescript/bin/tsc" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../typescript/bin/tsserver" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../typescript/bin/tsserver" "$@"
|
|
21
|
+
fi
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
#!/bin/sh
|
|
2
|
+
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
|
|
3
|
+
|
|
4
|
+
case `uname` in
|
|
5
|
+
*CYGWIN*|*MINGW*|*MSYS*)
|
|
6
|
+
if command -v cygpath > /dev/null 2>&1; then
|
|
7
|
+
basedir=`cygpath -w "$basedir"`
|
|
8
|
+
fi
|
|
9
|
+
;;
|
|
10
|
+
esac
|
|
11
|
+
|
|
12
|
+
if [ -z "$NODE_PATH" ]; then
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
|
|
14
|
+
else
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
|
|
16
|
+
fi
|
|
17
|
+
if [ -x "$basedir/node" ]; then
|
|
18
|
+
exec "$basedir/node" "$basedir/../tsx/dist/cli.mjs" "$@"
|
|
19
|
+
else
|
|
20
|
+
exec node "$basedir/../tsx/dist/cli.mjs" "$@"
|
|
21
|
+
fi
|