create-skybridge 0.0.0-dev.06e9fbe → 0.0.0-dev.06f809c

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 (149) hide show
  1. package/dist/index.js +338 -210
  2. package/package.json +9 -8
  3. package/templates/blank/.dockerignore +4 -0
  4. package/templates/blank/AGENTS.md +1 -0
  5. package/templates/blank/Dockerfile +53 -0
  6. package/templates/blank/README.md +92 -0
  7. package/{template → templates/blank}/_gitignore +3 -1
  8. package/templates/blank/node_modules/.bin/alpic +21 -0
  9. package/templates/blank/node_modules/.bin/sb +21 -0
  10. package/templates/blank/node_modules/.bin/skybridge +21 -0
  11. package/templates/blank/node_modules/.bin/tsc +21 -0
  12. package/templates/blank/node_modules/.bin/tsserver +21 -0
  13. package/templates/blank/node_modules/.bin/tsx +21 -0
  14. package/templates/blank/node_modules/.bin/vite +21 -0
  15. package/templates/blank/package.json +29 -0
  16. package/templates/blank/src/helpers.ts +4 -0
  17. package/templates/blank/src/server.ts +16 -0
  18. package/templates/blank/tsconfig.json +5 -0
  19. package/templates/blank/vite.config.ts +6 -0
  20. package/templates/demo/.dockerignore +4 -0
  21. package/templates/demo/AGENTS.md +1 -0
  22. package/templates/demo/Dockerfile +53 -0
  23. package/templates/demo/README.md +95 -0
  24. package/templates/demo/_gitignore +7 -0
  25. package/templates/demo/alpic.json +3 -0
  26. package/templates/demo/node_modules/.bin/alpic +21 -0
  27. package/templates/demo/node_modules/.bin/sb +21 -0
  28. package/templates/demo/node_modules/.bin/skybridge +21 -0
  29. package/templates/demo/node_modules/.bin/tsc +21 -0
  30. package/templates/demo/node_modules/.bin/tsserver +21 -0
  31. package/templates/demo/node_modules/.bin/tsx +21 -0
  32. package/templates/demo/node_modules/.bin/vite +21 -0
  33. package/templates/demo/package.json +41 -0
  34. package/templates/demo/src/helpers.ts +4 -0
  35. package/templates/demo/src/index.css +59 -0
  36. package/templates/demo/src/server.ts +94 -0
  37. package/templates/demo/src/views/components/doc-link.tsx +22 -0
  38. package/templates/demo/src/views/components/doc.tsx +21 -0
  39. package/templates/demo/src/views/components/nav.tsx +31 -0
  40. package/templates/demo/src/views/components/progress.tsx +35 -0
  41. package/templates/demo/src/views/components/steps/outro.tsx +68 -0
  42. package/templates/demo/src/views/components/steps/state.tsx +47 -0
  43. package/templates/demo/src/views/components/steps/tool-call.tsx +53 -0
  44. package/templates/demo/src/views/components/steps/tool-output.tsx +40 -0
  45. package/templates/demo/src/views/images/mascot/beret.png +0 -0
  46. package/templates/demo/src/views/images/mascot/chapka.png +0 -0
  47. package/templates/demo/src/views/images/mascot/cowboy-hat.png +0 -0
  48. package/templates/demo/src/views/images/mascot/fez.png +0 -0
  49. package/templates/demo/src/views/images/mascot/jester-hat.png +0 -0
  50. package/templates/demo/src/views/images/mascot/mitre.png +0 -0
  51. package/templates/demo/src/views/images/mascot/non-la.png +0 -0
  52. package/templates/demo/src/views/images/mascot/original.png +0 -0
  53. package/templates/demo/src/views/images/mascot/propeller-beanie.png +0 -0
  54. package/templates/demo/src/views/images/mascot/ski-mask.png +0 -0
  55. package/templates/demo/src/views/images/mascot/sombrero.png +0 -0
  56. package/templates/demo/src/views/images/mascot/top-hat.png +0 -0
  57. package/templates/demo/src/views/images/mascot/viking-helmet.png +0 -0
  58. package/templates/demo/src/views/onboarding.tsx +63 -0
  59. package/templates/demo/src/views/use-mascot.ts +60 -0
  60. package/templates/demo/tsconfig.json +11 -0
  61. package/templates/demo/vite.config.ts +14 -0
  62. package/templates/ecom/.dockerignore +4 -0
  63. package/templates/ecom/.env.template +2 -0
  64. package/templates/ecom/.ladle/components.tsx +26 -0
  65. package/templates/ecom/.ladle/config.mjs +11 -0
  66. package/templates/ecom/.ladle/vite.config.ts +11 -0
  67. package/templates/ecom/AGENTS.md +2 -0
  68. package/templates/ecom/Dockerfile +53 -0
  69. package/templates/ecom/README.md +92 -0
  70. package/templates/ecom/_gitignore +9 -0
  71. package/templates/ecom/alpic.json +3 -0
  72. package/templates/ecom/node_modules/.bin/alpic +21 -0
  73. package/templates/ecom/node_modules/.bin/ladle +21 -0
  74. package/templates/ecom/node_modules/.bin/sb +21 -0
  75. package/templates/ecom/node_modules/.bin/skybridge +21 -0
  76. package/templates/ecom/node_modules/.bin/tsc +21 -0
  77. package/templates/ecom/node_modules/.bin/tsserver +21 -0
  78. package/templates/ecom/node_modules/.bin/tsx +21 -0
  79. package/templates/ecom/node_modules/.bin/vite +21 -0
  80. package/templates/ecom/package.json +41 -0
  81. package/templates/ecom/src/components/chip.css.ts +56 -0
  82. package/templates/ecom/src/components/chip.stories.tsx +26 -0
  83. package/templates/ecom/src/components/chip.tsx +41 -0
  84. package/templates/ecom/src/components/empty-state.stories.tsx +3 -0
  85. package/templates/ecom/src/components/empty-state.tsx +12 -0
  86. package/templates/ecom/src/components/expandable-text.css.ts +49 -0
  87. package/templates/ecom/src/components/expandable-text.stories.tsx +20 -0
  88. package/templates/ecom/src/components/expandable-text.tsx +53 -0
  89. package/templates/ecom/src/components/image-gallery.css.ts +172 -0
  90. package/templates/ecom/src/components/image-gallery.stories.tsx +30 -0
  91. package/templates/ecom/src/components/image-gallery.tsx +163 -0
  92. package/templates/ecom/src/components/product-card.css.ts +159 -0
  93. package/templates/ecom/src/components/product-card.stories.tsx +58 -0
  94. package/templates/ecom/src/components/product-card.tsx +102 -0
  95. package/templates/ecom/src/components/product-carousel.css.ts +134 -0
  96. package/templates/ecom/src/components/product-carousel.stories.tsx +64 -0
  97. package/templates/ecom/src/components/product-carousel.tsx +202 -0
  98. package/templates/ecom/src/components/variant-picker.css.ts +27 -0
  99. package/templates/ecom/src/components/variant-picker.stories.tsx +64 -0
  100. package/templates/ecom/src/components/variant-picker.tsx +82 -0
  101. package/templates/ecom/src/components/view-frame.css.ts +22 -0
  102. package/templates/ecom/src/components/view-frame.tsx +27 -0
  103. package/templates/ecom/src/config.ts +12 -0
  104. package/templates/ecom/src/design/contract.css.ts +39 -0
  105. package/templates/ecom/src/design/fonts.css +15 -0
  106. package/templates/ecom/src/design/primitives.css.ts +101 -0
  107. package/templates/ecom/src/design/recipes/typography.css.ts +75 -0
  108. package/templates/ecom/src/design/sprinkles.css.ts +128 -0
  109. package/templates/ecom/src/design/themes/dark.css.ts +36 -0
  110. package/templates/ecom/src/design/themes/light.css.ts +36 -0
  111. package/templates/ecom/src/design/tokens.ts +8 -0
  112. package/templates/ecom/src/helpers.ts +4 -0
  113. package/templates/ecom/src/i18n.ts +35 -0
  114. package/templates/ecom/src/index.css +9 -0
  115. package/templates/ecom/src/lib/cx.ts +9 -0
  116. package/templates/ecom/src/lib/format.ts +9 -0
  117. package/templates/ecom/src/lib/variants.ts +79 -0
  118. package/templates/ecom/src/server.ts +43 -0
  119. package/templates/ecom/src/tools/render-carousel.ts +241 -0
  120. package/templates/ecom/src/tools/search-products.ts +185 -0
  121. package/templates/ecom/src/types.ts +15 -0
  122. package/templates/ecom/src/views/carousel/detail/detail.css.ts +115 -0
  123. package/templates/ecom/src/views/carousel/detail/detail.stories.tsx +115 -0
  124. package/templates/ecom/src/views/carousel/detail/index.tsx +240 -0
  125. package/templates/ecom/src/views/carousel/index.tsx +234 -0
  126. package/templates/ecom/tsconfig.json +11 -0
  127. package/templates/ecom/vite.config.ts +8 -0
  128. package/dist/index.test.d.ts +0 -1
  129. package/dist/index.test.js +0 -33
  130. package/template/AGENTS.md +0 -1
  131. package/template/README.md +0 -99
  132. package/template/node_modules/.bin/alpic +0 -21
  133. package/template/node_modules/.bin/nodemon +0 -21
  134. package/template/node_modules/.bin/sb +0 -21
  135. package/template/node_modules/.bin/skybridge +0 -21
  136. package/template/node_modules/.bin/tsc +0 -21
  137. package/template/node_modules/.bin/tsserver +0 -21
  138. package/template/node_modules/.bin/tsx +0 -21
  139. package/template/node_modules/.bin/vite +0 -21
  140. package/template/nodemon.json +0 -5
  141. package/template/package.json +0 -38
  142. package/template/server/src/index.ts +0 -62
  143. package/template/tsconfig.json +0 -23
  144. package/template/tsconfig.server.json +0 -11
  145. package/template/web/src/helpers.ts +0 -4
  146. package/template/web/src/index.css +0 -154
  147. package/template/web/src/widgets/magic-8-ball.tsx +0 -27
  148. package/template/web/vite.config.ts +0 -15
  149. /package/{template → templates/blank}/alpic.json +0 -0
@@ -0,0 +1,234 @@
1
+ import "../../index.css";
2
+
3
+ import {
4
+ type ReactNode,
5
+ useEffect,
6
+ useLayoutEffect,
7
+ useRef,
8
+ useState,
9
+ } from "react";
10
+ import { useDisplayMode, useViewState } from "skybridge/web";
11
+ import { EmptyState } from "../../components/empty-state";
12
+ import {
13
+ ProductCard,
14
+ ProductCardSkeleton,
15
+ } from "../../components/product-card";
16
+ import * as cardStyles from "../../components/product-card.css";
17
+ import { ProductCarousel } from "../../components/product-carousel";
18
+ import { ViewFrame } from "../../components/view-frame";
19
+ import { sprinkles } from "../../design/tokens";
20
+ import { useToolInfo } from "../../helpers.js";
21
+ import { useLabels } from "../../i18n";
22
+ import { formatPrice } from "../../lib/format";
23
+ import type { Product } from "../../tools/render-carousel.js";
24
+ import type { Price, Spec } from "../../types.js";
25
+ import { DetailView } from "./detail";
26
+
27
+ const SKELETON_COUNT = 4;
28
+
29
+ // One narration line per on-screen product. `id` ties the card back to its full
30
+ // record in structuredContent.
31
+ function narrate(product: Product, index: number): string {
32
+ const { card } = product;
33
+ const price = card.price ? ` - ${formatPrice(card.price)}` : "";
34
+ const oos = card.outOfStock ? " [out of stock]" : "";
35
+ return `${index + 1}. ${card.title} (id: ${product.id})${price}${oos}`;
36
+ }
37
+
38
+ // View state, persisted on the host so an open detail survives a remount (e.g.
39
+ // after a follow-up message). scrollLeft restores the carousel position on the
40
+ // way back; spec is the full product spec (every variant) the model can answer
41
+ // from while the detail is open.
42
+ type VariantSpec = {
43
+ selection: Record<string, string>; // option label -> chosen value label
44
+ price?: Price;
45
+ available: boolean;
46
+ specs: Spec[];
47
+ };
48
+ type ProductSpec = { id: string; title: string; variants: VariantSpec[] };
49
+ type ViewState = {
50
+ selectedId: string | null;
51
+ scrollLeft: number;
52
+ spec: ProductSpec | null;
53
+ };
54
+
55
+ // The complete spec of the open product — every variant, not just the visible
56
+ // one — pushed to view state so the model can answer any detail question. The
57
+ // on-screen variant is narrated separately (data-llm, in the detail view). Keep
58
+ // it to a single product; a very large spec trips the view-state size warning.
59
+ function buildProductSpec(product: Product): ProductSpec {
60
+ const variants: VariantSpec[] = [];
61
+ for (const variant of product.variants) {
62
+ const selection: Record<string, string> = {};
63
+ for (const option of product.options) {
64
+ const valueId = variant.selection[option.id];
65
+ if (!valueId) {
66
+ continue;
67
+ }
68
+ let label = valueId;
69
+ for (const value of option.values) {
70
+ if (value.id === valueId) {
71
+ label = value.label;
72
+ break;
73
+ }
74
+ }
75
+ selection[option.label] = label;
76
+ }
77
+ variants.push({
78
+ selection,
79
+ price: variant.price,
80
+ available: !variant.outOfStock,
81
+ specs: variant.specs,
82
+ });
83
+ }
84
+ return { id: product.id, title: product.card.title, variants };
85
+ }
86
+
87
+ /**
88
+ * Carousel view + product detail, in one view. The carousel is the inline
89
+ * surface; tapping a card opens the detail fullscreen over it (the carousel is
90
+ * hidden, not unmounted). Both read the full products from `_meta`; the detail
91
+ * needs no extra fetch.
92
+ */
93
+ function Carousel() {
94
+ const { responseMetadata } = useToolInfo<"render-carousel">();
95
+ const labels = useLabels();
96
+ const trackRef = useRef<HTMLElement>(null);
97
+ const [visibleIndices, setVisibleIndices] = useState<number[]>([]);
98
+ const [mode, setMode] = useDisplayMode();
99
+ const [nav, setNav] = useViewState<ViewState>({
100
+ selectedId: null,
101
+ scrollLeft: 0,
102
+ spec: null,
103
+ });
104
+ // True between requesting fullscreen and the host applying it, so the
105
+ // collapse-is-back effect below does not fire mid-transition.
106
+ const enteringRef = useRef(false);
107
+
108
+ const selectedId = nav.selectedId;
109
+ // The detail only mounts once the host is actually fullscreen: rendering the
110
+ // tall page inside the small inline frame would flash a cramped layout.
111
+ const showDetail = selectedId != null && mode === "fullscreen";
112
+
113
+ // A host-driven exit from fullscreen (the user used host chrome) means "back".
114
+ useEffect(() => {
115
+ if (mode === "fullscreen") {
116
+ enteringRef.current = false;
117
+ return;
118
+ }
119
+ if (selectedId != null && !enteringRef.current) {
120
+ setNav((prev) => ({ ...prev, selectedId: null, spec: null }));
121
+ }
122
+ }, [mode, selectedId, setNav]);
123
+
124
+ // Restore carousel scroll when back on the carousel. display:none resets
125
+ // scrollLeft, so re-apply once it is visible again (layout effect, not mount).
126
+ useLayoutEffect(() => {
127
+ if (!showDetail && trackRef.current) {
128
+ trackRef.current.scrollLeft = nav.scrollLeft;
129
+ }
130
+ }, [showDetail, nav.scrollLeft]);
131
+
132
+ function openProduct(id: string) {
133
+ enteringRef.current = true;
134
+ const list = responseMetadata?.products ?? [];
135
+ let spec: ProductSpec | null = null;
136
+ for (const product of list) {
137
+ if (product.id === id) {
138
+ spec = buildProductSpec(product);
139
+ break;
140
+ }
141
+ }
142
+ setNav({
143
+ selectedId: id,
144
+ scrollLeft: trackRef.current?.scrollLeft ?? 0,
145
+ spec,
146
+ });
147
+ setMode("fullscreen");
148
+ }
149
+
150
+ // Tool still resolving: reserve the layout with skeleton cards.
151
+ if (responseMetadata == null) {
152
+ const skeletons: ReactNode[] = [];
153
+ for (let i = 0; i < SKELETON_COUNT; i++) {
154
+ skeletons.push(<ProductCardSkeleton key={i} />);
155
+ }
156
+ return (
157
+ <ViewFrame>
158
+ <div className={sprinkles({ p: "3xs" })}>
159
+ <ProductCarousel loading>{skeletons}</ProductCarousel>
160
+ </div>
161
+ </ViewFrame>
162
+ );
163
+ }
164
+
165
+ const products = responseMetadata.products ?? [];
166
+
167
+ if (products.length === 0) {
168
+ return (
169
+ <ViewFrame>
170
+ <EmptyState message={labels.noProducts} />
171
+ </ViewFrame>
172
+ );
173
+ }
174
+
175
+ // Guard against a stale id (e.g. the model rendered a new carousel while a
176
+ // detail was open): fall back to the carousel rather than an empty page.
177
+ const selectedProduct =
178
+ selectedId != null
179
+ ? products.find((product) => product.id === selectedId)
180
+ : undefined;
181
+ // The detail actually renders only when we have a product to show. Everything
182
+ // that hides the carousel keys off this, so a stale id shows the carousel, not
183
+ // a blank page.
184
+ const detailProduct = showDetail ? selectedProduct : undefined;
185
+
186
+ const cards: ReactNode[] = [];
187
+ for (const [index, product] of products.entries()) {
188
+ const { card } = product;
189
+ cards.push(
190
+ <div key={product.id} className={cardStyles.cardClickable}>
191
+ <ProductCard
192
+ // Drop per-card grounding while the detail owns the screen.
193
+ data-llm={
194
+ !detailProduct && visibleIndices.includes(index)
195
+ ? narrate(product, index)
196
+ : ""
197
+ }
198
+ title={card.title}
199
+ price={card.price}
200
+ media={card.media}
201
+ outOfStock={card.outOfStock}
202
+ />
203
+ <button
204
+ type="button"
205
+ aria-label={card.title}
206
+ className={cardStyles.cardButton}
207
+ onClick={() => openProduct(product.id)}
208
+ />
209
+ </div>,
210
+ );
211
+ }
212
+
213
+ const narration = `Carousel of ${products.length} product(s); the user scrolls horizontally. On screen now:`;
214
+
215
+ return (
216
+ <ViewFrame>
217
+ <div
218
+ className={sprinkles({ p: "3xs" })}
219
+ style={{ display: detailProduct ? "none" : undefined }}
220
+ >
221
+ <ProductCarousel
222
+ trackRef={trackRef}
223
+ onVisibleChange={setVisibleIndices}
224
+ data-llm={detailProduct ? "" : narration}
225
+ >
226
+ {cards}
227
+ </ProductCarousel>
228
+ </div>
229
+ {detailProduct ? <DetailView product={detailProduct} /> : null}
230
+ </ViewFrame>
231
+ );
232
+ }
233
+
234
+ export default Carousel;
@@ -0,0 +1,11 @@
1
+ {
2
+ "extends": "skybridge/tsconfig",
3
+
4
+ "compilerOptions": {
5
+ "module": "ESNext",
6
+ "moduleResolution": "Bundler",
7
+ "types": ["node", "vite/client"]
8
+ },
9
+
10
+ "include": ["src", ".skybridge/**/*.d.ts"]
11
+ }
@@ -0,0 +1,8 @@
1
+ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
2
+ import react from "@vitejs/plugin-react";
3
+ import { skybridge } from "skybridge/vite";
4
+ import { defineConfig, type PluginOption } from "vite";
5
+
6
+ export default defineConfig({
7
+ plugins: [skybridge() as PluginOption, react(), vanillaExtractPlugin()],
8
+ });
@@ -1 +0,0 @@
1
- export {};
@@ -1,33 +0,0 @@
1
- import { randomBytes } from "node:crypto";
2
- import fs from "node:fs/promises";
3
- import path from "node:path";
4
- import { afterEach, beforeEach, describe, expect, it } from "vitest";
5
- import { init } from "./index.js";
6
- describe("create-skybridge", () => {
7
- let tempDirName;
8
- beforeEach(() => {
9
- tempDirName = `test-${randomBytes(2).toString("hex")}`;
10
- });
11
- afterEach(async () => {
12
- await fs.rm(path.join(process.cwd(), tempDirName), {
13
- recursive: true,
14
- force: true,
15
- });
16
- });
17
- it("should copy the template", async () => {
18
- const name = `../../${tempDirName}//project$`;
19
- await init([name]);
20
- await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
21
- expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
22
- });
23
- it("should download template from repo", async () => {
24
- const name = `../../${tempDirName}//project$`;
25
- await init([
26
- name,
27
- "--repo",
28
- "github:alpic-ai/skybridge/examples/ecom-carousel",
29
- ]);
30
- await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
31
- expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
32
- });
33
- });
@@ -1 +0,0 @@
1
- Before writing code, first explore the project structure, then invoke the chatgpt-app-builder skill for documentation.
@@ -1,99 +0,0 @@
1
- # Skybridge Starter
2
-
3
- A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech/home) framework.
4
-
5
- ## Getting Started
6
-
7
- ### Prerequisites
8
-
9
- - Node.js 24+
10
- - HTTP tunnel such as [ngrok](https://ngrok.com/download) if you want to test with remote MCP hosts like ChatGPT or Claude.ai.
11
-
12
- ### Local Development
13
-
14
- #### 1. Install
15
-
16
- ```bash
17
- npm install
18
- # or
19
- yarn install
20
- # or
21
- pnpm install
22
- # or
23
- bun install
24
- ```
25
-
26
- #### 2. Start your local server
27
-
28
- Run the development server from the root directory:
29
-
30
- ```bash
31
- npm run dev
32
- # or
33
- yarn dev
34
- # or
35
- pnpm dev
36
- # or
37
- bun dev
38
- ```
39
-
40
- This command starts:
41
- - Your MCP server at `http://localhost:3000/mcp`.
42
- - Skybridge DevTools UI at `http://localhost:3000/`.
43
-
44
- #### 3. Project structure
45
-
46
- ```
47
- ├── server/
48
- │ └── src/
49
- │ ├── index.ts # Entry point
50
- │ ├── middleware.ts # MCP middleware
51
- │ └── server.ts # Widget registry & routes
52
- ├── web/
53
- │ ├── src/
54
- │ │ ├── widgets/ # React components (one per widget)
55
- │ │ ├── helpers.ts # Shared utilities
56
- │ │ └── index.css # Global styles
57
- │ └── vite.config.ts
58
- ├── alpic.json # Deployment config
59
- ├── nodemon.json # Dev server config
60
- └── package.json
61
- ```
62
-
63
- ### Create your first widget
64
-
65
- #### 1. Add a new widget
66
-
67
- - Register a widget in `server/src/server.ts` with a unique name (e.g., `my-widget`) using [`registerWidget`](https://docs.skybridge.tech/api-reference/register-widget)
68
- - Create a matching React component at `web/src/widgets/my-widget.tsx`. **The file name must match the widget name exactly**.
69
-
70
- #### 2. Edit widgets with Hot Module Replacement (HMR)
71
-
72
- Edit and save components in `web/src/widgets/` — changes will appear instantly inside your App.
73
-
74
- #### 3. Edit server code
75
-
76
- Modify files in `server/` and refresh the connection with your testing MCP Client to see the changes.
77
-
78
- ### Testing your App
79
-
80
- You can test your App locally by using our DevTools UI on `localhost:3000` while running the `pnpm dev` command.
81
-
82
- To test your app with other MCP Clients like ChatGPT, Claude or VSCode, see [Testing Your App](https://docs.skybridge.tech/quickstart/test-your-app).
83
-
84
-
85
- ## Deploy to Production
86
-
87
- Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
88
-
89
- The simplest way to deploy your App in minutes is [Alpic](https://alpic.ai/).
90
- 1. Create an account on [Alpic platform](https://app.alpic.ai/).
91
- 2. Connect your GitHub repository to automatically deploy at each commit.
92
- 3. Use your remote App URL to connect it to MCP Clients, or use the Alpic Playground to easily test your App.
93
-
94
- ## Resources
95
- - [Skybridge Documentation](https://docs.skybridge.tech/)
96
- - [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
97
- - [MCP Apps Documentation](https://github.com/modelcontextprotocol/ext-apps/tree/main)
98
- - [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
99
- - [Alpic Documentation](https://docs.alpic.ai/)
@@ -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/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.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/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.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/../alpic/bin/run.js" "$@"
19
- else
20
- exec node "$basedir/../alpic/bin/run.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/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/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/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/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/../skybridge/bin/run.js" "$@"
19
- else
20
- exec node "$basedir/../skybridge/bin/run.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/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/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/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.29.1_@modelcontextprotocol+sdk@1.26.0_zod@4.3.6__@types+node@25.2.2_@types+_7023033a14d97e7a1ad4af54831f1601/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/../skybridge/bin/run.js" "$@"
19
- else
20
- exec node "$basedir/../skybridge/bin/run.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/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.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@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.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
@@ -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/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.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@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.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
@@ -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/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.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.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.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
@@ -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/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/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/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/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/../vite/bin/vite.js" "$@"
19
- else
20
- exec node "$basedir/../vite/bin/vite.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,38 +0,0 @@
1
- {
2
- "name": "apps-sdk-template",
3
- "version": "0.0.1",
4
- "private": true,
5
- "description": "Alpic MCP Server Template",
6
- "type": "module",
7
- "scripts": {
8
- "dev": "skybridge dev",
9
- "build": "skybridge build",
10
- "start": "skybridge start",
11
- "deploy": "alpic deploy"
12
- },
13
- "dependencies": {
14
- "@modelcontextprotocol/sdk": "^1.26.0",
15
- "cors": "^2.8.6",
16
- "express": "^5.2.1",
17
- "react": "^19.2.4",
18
- "react-dom": "^19.2.4",
19
- "skybridge": ">=0.29.1 <1.0.0",
20
- "vite": "^7.3.1",
21
- "zod": "^4.3.6"
22
- },
23
- "devDependencies": {
24
- "@skybridge/devtools": ">=0.26.1 <1.0.0",
25
- "@types/cors": "^2.8.19",
26
- "@types/express": "^5.0.6",
27
- "@types/react": "^19.2.13",
28
- "@types/react-dom": "^19.2.3",
29
- "@vitejs/plugin-react": "^5.1.4",
30
- "alpic": "^1.85.0",
31
- "nodemon": "^3.1.11",
32
- "tsx": "^4.21.0",
33
- "typescript": "^5.9.3"
34
- },
35
- "engines": {
36
- "node": ">=24.13.1"
37
- }
38
- }