create-skybridge 0.0.0-dev.e1f5ed6 → 0.0.0-dev.e210492
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.test.js +2 -0
- package/package.json +4 -5
- package/template/.dockerignore +4 -0
- package/template/Dockerfile +53 -0
- package/template/README.md +15 -18
- package/template/_gitignore +2 -1
- package/template/node_modules/.bin/alpic +2 -2
- package/template/node_modules/.bin/sb +2 -2
- package/template/node_modules/.bin/skybridge +2 -2
- package/template/node_modules/.bin/tsc +2 -2
- package/template/node_modules/.bin/tsserver +2 -2
- package/template/node_modules/.bin/vite +2 -2
- package/template/package.json +14 -8
- package/template/src/helpers.ts +4 -0
- package/template/src/index.css +38 -0
- package/template/src/server.ts +44 -0
- package/template/src/views/components/intro.tsx +43 -0
- package/template/src/views/images/mascot/beret.png +0 -0
- package/template/src/views/images/mascot/chapka.png +0 -0
- package/template/src/views/images/mascot/classic.png +0 -0
- package/template/src/views/images/mascot/conical.png +0 -0
- package/template/src/views/images/mascot/cownboy.png +0 -0
- package/template/src/views/images/mascot/fez.png +0 -0
- package/template/src/views/images/mascot/formal.png +0 -0
- package/template/src/views/images/mascot/jester.png +0 -0
- package/template/src/views/images/mascot/mitre.png +0 -0
- package/template/src/views/images/mascot/propeller.png +0 -0
- package/template/src/views/images/mascot/sombrero.png +0 -0
- package/template/src/views/images/mascot/viking.png +0 -0
- package/template/src/views/start.tsx +87 -0
- package/template/src/vite-manifest.d.ts +4 -0
- package/template/tsconfig.json +2 -4
- package/template/vite.config.ts +14 -0
- package/template/server/src/index.ts +0 -62
- package/template/web/src/helpers.ts +0 -4
- package/template/web/src/index.css +0 -152
- package/template/web/src/widgets/magic-8-ball.tsx +0 -27
- package/template/web/vite.config.ts +0 -15
package/dist/index.test.js
CHANGED
|
@@ -18,6 +18,8 @@ describe("create-skybridge", () => {
|
|
|
18
18
|
const name = `../../${tempDirName}//project$`;
|
|
19
19
|
await init([name]);
|
|
20
20
|
await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
|
|
21
|
+
await fs.access(path.join(process.cwd(), tempDirName, "project", ".dockerignore"));
|
|
22
|
+
await fs.access(path.join(process.cwd(), tempDirName, "project", "Dockerfile"));
|
|
21
23
|
expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
|
|
22
24
|
});
|
|
23
25
|
it("should download template from repo", { timeout: 10000 }, async () => {
|
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.e210492",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Alpic",
|
|
@@ -17,19 +17,18 @@
|
|
|
17
17
|
"template"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@clack/prompts": "^1.
|
|
20
|
+
"@clack/prompts": "^1.1.0",
|
|
21
21
|
"giget": "^3.2.0",
|
|
22
22
|
"mri": "^1.2.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"typescript": "^6.0.
|
|
25
|
+
"typescript": "^6.0.2",
|
|
26
26
|
"vitest": "^4.1.4"
|
|
27
27
|
},
|
|
28
28
|
"scripts": {
|
|
29
29
|
"build": "tsc",
|
|
30
|
-
"test": "pnpm run test:unit && pnpm run test:
|
|
30
|
+
"test": "pnpm run test:unit && pnpm run test:format",
|
|
31
31
|
"test:unit": "vitest run",
|
|
32
|
-
"test:type": "tsc --noEmit",
|
|
33
32
|
"format": "biome check --write --error-on-warnings",
|
|
34
33
|
"test:format": "biome ci"
|
|
35
34
|
}
|
|
@@ -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-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-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/server.js"]
|
package/template/README.md
CHANGED
|
@@ -23,7 +23,7 @@ pnpm install
|
|
|
23
23
|
bun install
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
#### 2.
|
|
26
|
+
#### 2. Onboarding your local server
|
|
27
27
|
|
|
28
28
|
Run the development server from the root directory:
|
|
29
29
|
|
|
@@ -44,34 +44,31 @@ This command starts:
|
|
|
44
44
|
#### 3. Project structure
|
|
45
45
|
|
|
46
46
|
```
|
|
47
|
-
├──
|
|
48
|
-
│
|
|
49
|
-
│
|
|
50
|
-
├──
|
|
51
|
-
│ ├──
|
|
52
|
-
│
|
|
53
|
-
|
|
54
|
-
│ │ └── index.css # Global styles
|
|
55
|
-
│ └── vite.config.ts
|
|
47
|
+
├── src/
|
|
48
|
+
│ ├── server.ts # Server entry point
|
|
49
|
+
│ ├── views/ # React components (one per view)
|
|
50
|
+
│ ├── components/ # Shared UI components
|
|
51
|
+
│ ├── helpers.ts # Shared utilities
|
|
52
|
+
│ └── index.css # Global styles
|
|
53
|
+
├── vite.config.ts
|
|
56
54
|
├── alpic.json # Deployment config
|
|
57
|
-
├── nodemon.json # Dev server config
|
|
58
55
|
└── package.json
|
|
59
56
|
```
|
|
60
57
|
|
|
61
|
-
### Create your first
|
|
58
|
+
### Create your first view
|
|
62
59
|
|
|
63
|
-
#### 1. Add a new
|
|
60
|
+
#### 1. Add a new view
|
|
64
61
|
|
|
65
|
-
- Register a
|
|
66
|
-
- Create a matching React component at `
|
|
62
|
+
- 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.
|
|
63
|
+
- Create a matching React component at `src/views/my-view.tsx`. **The file name must match the view name exactly**.
|
|
67
64
|
|
|
68
|
-
#### 2. Edit
|
|
65
|
+
#### 2. Edit views with Hot Module Replacement (HMR)
|
|
69
66
|
|
|
70
|
-
Edit and save components in `
|
|
67
|
+
Edit and save components in `src/views/` — changes will appear instantly inside your App.
|
|
71
68
|
|
|
72
69
|
#### 3. Edit server code
|
|
73
70
|
|
|
74
|
-
Modify files in `
|
|
71
|
+
Modify files in `src/` and refresh the connection with your testing MCP Client to see the changes.
|
|
75
72
|
|
|
76
73
|
### Testing your App
|
|
77
74
|
|
package/template/_gitignore
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/alpic@1.
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.104.1_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@6.0.2/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.104.1_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@6.0.2/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/alpic@1.
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.104.1_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@6.0.2/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.104.1_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@6.0.2/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/../alpic/bin/run.js" "$@"
|
|
@@ -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/
|
|
13
|
+
export NODE_PATH="/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/
|
|
15
|
+
export NODE_PATH="/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/../skybridge/bin/run.js" "$@"
|
|
@@ -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/
|
|
13
|
+
export NODE_PATH="/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/
|
|
15
|
+
export NODE_PATH="/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/../skybridge/bin/run.js" "$@"
|
|
@@ -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/typescript@6.0.
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/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/typescript@6.0.
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/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/../typescript/bin/tsc" "$@"
|
|
@@ -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/typescript@6.0.
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/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/typescript@6.0.
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.2/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/../typescript/bin/tsserver" "$@"
|
|
@@ -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@8.0.3_@types+node@24.12.
|
|
13
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.0.3_@types+node@24.12.0_esbuild@0.27.2_jiti@2.6.1_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@8.0.3_@types+node@24.12.0_esbuild@0.27.2_jiti@2.6.1_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
14
|
else
|
|
15
|
-
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.0.3_@types+node@24.12.
|
|
15
|
+
export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.0.3_@types+node@24.12.0_esbuild@0.27.2_jiti@2.6.1_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@8.0.3_@types+node@24.12.0_esbuild@0.27.2_jiti@2.6.1_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
16
|
fi
|
|
17
17
|
if [ -x "$basedir/node" ]; then
|
|
18
18
|
exec "$basedir/node" "$basedir/../vite/bin/vite.js" "$@"
|
package/template/package.json
CHANGED
|
@@ -12,24 +12,30 @@
|
|
|
12
12
|
"deploy": "alpic deploy"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
+
"@alpic-ai/ui": "^1.122.0",
|
|
15
16
|
"@modelcontextprotocol/sdk": "^1.29.0",
|
|
16
|
-
"react": "^
|
|
17
|
-
"react
|
|
18
|
-
"
|
|
17
|
+
"lucide-react": "^1.14.0",
|
|
18
|
+
"react": "^19.2.4",
|
|
19
|
+
"react-dom": "^19.2.4",
|
|
20
|
+
"skybridge": ">=0.0.0-dev.e210492",
|
|
21
|
+
"sonner": "^2.0.7",
|
|
22
|
+
"tw-animate-css": "^1.4.0",
|
|
19
23
|
"vite": "^8.0.3",
|
|
20
24
|
"zod": "^4.3.6"
|
|
21
25
|
},
|
|
22
26
|
"devDependencies": {
|
|
23
|
-
"@skybridge/devtools": "
|
|
27
|
+
"@skybridge/devtools": "workspace:*",
|
|
28
|
+
"@tailwindcss/vite": "^4.2.4",
|
|
29
|
+
"@types/node": "^24.12.0",
|
|
24
30
|
"@types/react": "^19.2.14",
|
|
25
|
-
"@types/node": "^24.12.2",
|
|
26
31
|
"@types/react-dom": "^19.2.3",
|
|
27
32
|
"@vitejs/plugin-react": "^6.0.1",
|
|
28
|
-
"alpic": "^1.
|
|
33
|
+
"alpic": "^1.104.1",
|
|
34
|
+
"tailwindcss": "^4.2.4",
|
|
29
35
|
"tsx": "^4.21.0",
|
|
30
|
-
"typescript": "^6.0.
|
|
36
|
+
"typescript": "^6.0.2"
|
|
31
37
|
},
|
|
32
38
|
"engines": {
|
|
33
|
-
"node": ">=24.
|
|
39
|
+
"node": ">=24.14.1"
|
|
34
40
|
}
|
|
35
41
|
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@400..700&display=swap");
|
|
2
|
+
@import "tailwindcss";
|
|
3
|
+
@import "tw-animate-css";
|
|
4
|
+
@import "@alpic-ai/ui/theme";
|
|
5
|
+
|
|
6
|
+
@source "../node_modules/@alpic-ai/ui/src";
|
|
7
|
+
|
|
8
|
+
@theme {
|
|
9
|
+
--font-mozilla: "Mozilla Text", serif;
|
|
10
|
+
--animate-float: float 3s ease-in-out infinite;
|
|
11
|
+
--animate-twirl: twirl 20s ease-in-out infinite;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@keyframes float {
|
|
15
|
+
0%,
|
|
16
|
+
100% {
|
|
17
|
+
transform: translateY(0);
|
|
18
|
+
}
|
|
19
|
+
50% {
|
|
20
|
+
transform: translateY(-6px);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@keyframes twirl {
|
|
25
|
+
0%,
|
|
26
|
+
80% {
|
|
27
|
+
transform: rotateY(0deg);
|
|
28
|
+
}
|
|
29
|
+
85% {
|
|
30
|
+
transform: rotateY(180deg);
|
|
31
|
+
}
|
|
32
|
+
95% {
|
|
33
|
+
transform: rotateY(180deg);
|
|
34
|
+
}
|
|
35
|
+
100% {
|
|
36
|
+
transform: rotateY(360deg);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { McpServer } from "skybridge/server";
|
|
2
|
+
import { z } from "zod";
|
|
3
|
+
|
|
4
|
+
const server = new McpServer(
|
|
5
|
+
{
|
|
6
|
+
name: "alpic-openai-app",
|
|
7
|
+
version: "0.0.1",
|
|
8
|
+
},
|
|
9
|
+
{ capabilities: {} },
|
|
10
|
+
).registerTool(
|
|
11
|
+
{
|
|
12
|
+
name: "start",
|
|
13
|
+
description: "Onboard Skybridge",
|
|
14
|
+
inputSchema: {
|
|
15
|
+
name: z.string().describe("The user name."),
|
|
16
|
+
},
|
|
17
|
+
view: {
|
|
18
|
+
component: "start",
|
|
19
|
+
description: "Onboarding deck",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
async ({ name }) => {
|
|
23
|
+
try {
|
|
24
|
+
return {
|
|
25
|
+
structuredContent: { name },
|
|
26
|
+
isError: false,
|
|
27
|
+
};
|
|
28
|
+
} catch (error) {
|
|
29
|
+
return {
|
|
30
|
+
content: [{ type: "text", text: `Error: ${error}` }],
|
|
31
|
+
isError: true,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
if (process.env.NODE_ENV === "production") {
|
|
38
|
+
const { default: manifest } = await import("./vite-manifest.js");
|
|
39
|
+
server.setViteManifest(manifest);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export default await server.run();
|
|
43
|
+
|
|
44
|
+
export type AppType = typeof server;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { Button } from "@alpic-ai/ui/components/button";
|
|
2
|
+
import { CheckCheck, ChevronsRight, Info } from "lucide-react";
|
|
3
|
+
import { useToolInfo } from "@/helpers.js";
|
|
4
|
+
|
|
5
|
+
export default function Intro({ onNext }: { onNext: () => void }) {
|
|
6
|
+
const { input } = useToolInfo<"start">();
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<div className="flex flex-col gap-3">
|
|
11
|
+
<h1 className="type-display-xs font-mozilla font-semibold">
|
|
12
|
+
Howdy, <span className="text-primary">{input?.name} !</span>
|
|
13
|
+
</h1>
|
|
14
|
+
<p className="">
|
|
15
|
+
You're wondering how the view displays your name, don't you? Well,
|
|
16
|
+
it's because it can read <strong>tool output</strong>. The LLM also
|
|
17
|
+
knows about it.
|
|
18
|
+
</p>
|
|
19
|
+
</div>
|
|
20
|
+
<p className="flex items-start gap-2 type-text-xs text-muted-foreground">
|
|
21
|
+
<Info className="size-4 shrink-0" />
|
|
22
|
+
<span>
|
|
23
|
+
The{" "}
|
|
24
|
+
<a
|
|
25
|
+
href="https://docs.skybridge.tech"
|
|
26
|
+
target="_blank"
|
|
27
|
+
rel="noreferrer"
|
|
28
|
+
className="underline underline-offset-4"
|
|
29
|
+
>
|
|
30
|
+
useToolInfo
|
|
31
|
+
</a>{" "}
|
|
32
|
+
hook hydrates the view with tool input, output and metadata.
|
|
33
|
+
</span>
|
|
34
|
+
</p>
|
|
35
|
+
<div className="flex justify-end gap-2">
|
|
36
|
+
<Button variant="cta" onClick={onNext}>
|
|
37
|
+
<CheckCheck />
|
|
38
|
+
Sharing view state
|
|
39
|
+
</Button>
|
|
40
|
+
</div>
|
|
41
|
+
</>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
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,87 @@
|
|
|
1
|
+
import "@/index.css";
|
|
2
|
+
|
|
3
|
+
import { Card, CardContent } from "@alpic-ai/ui/components/card";
|
|
4
|
+
import {
|
|
5
|
+
Tooltip,
|
|
6
|
+
TooltipContent,
|
|
7
|
+
TooltipTrigger,
|
|
8
|
+
} from "@alpic-ai/ui/components/tooltip";
|
|
9
|
+
import { useState } from "react";
|
|
10
|
+
import { useLayout, useViewState } from "skybridge/web";
|
|
11
|
+
import Intro from "./components/intro.js";
|
|
12
|
+
import classic from "./images/mascot/classic.png";
|
|
13
|
+
|
|
14
|
+
const STEPS = [
|
|
15
|
+
"Reading tool output",
|
|
16
|
+
"Sharing view state",
|
|
17
|
+
"Calling tools",
|
|
18
|
+
] as const;
|
|
19
|
+
const TOTAL_STEPS = STEPS.length;
|
|
20
|
+
|
|
21
|
+
export default function Start() {
|
|
22
|
+
const [state] = useViewState({ mascot: "classic" });
|
|
23
|
+
const { theme } = useLayout();
|
|
24
|
+
const [step, setStep] = useState(0);
|
|
25
|
+
|
|
26
|
+
let mascot: string;
|
|
27
|
+
switch (state.mascot) {
|
|
28
|
+
case "classic":
|
|
29
|
+
mascot = classic;
|
|
30
|
+
break;
|
|
31
|
+
default:
|
|
32
|
+
throw new Error("cannot find mascot");
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div
|
|
37
|
+
className={`${theme === "dark" ? "dark" : ""} flex min-h-full items-center justify-center p-6 `}
|
|
38
|
+
>
|
|
39
|
+
<Card className="w-full max-w-2xl">
|
|
40
|
+
<CardContent>
|
|
41
|
+
<div className="flex flex-col items-center gap-6 md:flex-row md:items-stretch">
|
|
42
|
+
<div className="shrink-0 self-center animate-float">
|
|
43
|
+
<img
|
|
44
|
+
src={mascot}
|
|
45
|
+
alt="Skybridge mascot"
|
|
46
|
+
className="h-40 w-40 object-contain animate-twirl"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
<div className="flex flex-1 flex-col justify-between gap-6">
|
|
50
|
+
<div className="flex gap-1.5">
|
|
51
|
+
{STEPS.map((label, i) => (
|
|
52
|
+
<Tooltip key={label}>
|
|
53
|
+
<TooltipTrigger asChild>
|
|
54
|
+
<button
|
|
55
|
+
type="button"
|
|
56
|
+
onClick={() => setStep(i)}
|
|
57
|
+
className={`h-1 flex-1 rounded-full ${
|
|
58
|
+
i <= step ? "bg-primary" : "bg-muted"
|
|
59
|
+
}`}
|
|
60
|
+
aria-label={label}
|
|
61
|
+
/>
|
|
62
|
+
</TooltipTrigger>
|
|
63
|
+
<TooltipContent>{label}</TooltipContent>
|
|
64
|
+
</Tooltip>
|
|
65
|
+
))}
|
|
66
|
+
</div>
|
|
67
|
+
{(() => {
|
|
68
|
+
const onNext = () =>
|
|
69
|
+
setStep((s) => Math.min(s + 1, TOTAL_STEPS - 1));
|
|
70
|
+
switch (step) {
|
|
71
|
+
case 0:
|
|
72
|
+
return <Intro onNext={onNext} />;
|
|
73
|
+
case 1:
|
|
74
|
+
return <div>step 2 placeholder</div>;
|
|
75
|
+
case 2:
|
|
76
|
+
return <div>step 3 placeholder</div>;
|
|
77
|
+
default:
|
|
78
|
+
return null;
|
|
79
|
+
}
|
|
80
|
+
})()}
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</CardContent>
|
|
84
|
+
</Card>
|
|
85
|
+
</div>
|
|
86
|
+
);
|
|
87
|
+
}
|
package/template/tsconfig.json
CHANGED
|
@@ -2,12 +2,10 @@
|
|
|
2
2
|
"extends": "skybridge/tsconfig",
|
|
3
3
|
|
|
4
4
|
"compilerOptions": {
|
|
5
|
-
"outDir": "dist",
|
|
6
|
-
"types": ["node", "vite/client"],
|
|
7
5
|
"paths": {
|
|
8
|
-
"@/*": ["./
|
|
6
|
+
"@/*": ["./src/*"]
|
|
9
7
|
}
|
|
10
8
|
},
|
|
11
9
|
|
|
12
|
-
"include": ["
|
|
10
|
+
"include": ["src", ".skybridge/**/*.d.ts"]
|
|
13
11
|
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import tailwindcss from "@tailwindcss/vite";
|
|
3
|
+
import react from "@vitejs/plugin-react";
|
|
4
|
+
import { skybridge } from "skybridge/vite";
|
|
5
|
+
import { defineConfig } from "vite";
|
|
6
|
+
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [skybridge(), react(), tailwindcss()],
|
|
9
|
+
resolve: {
|
|
10
|
+
alias: {
|
|
11
|
+
"@": path.resolve(__dirname, "./src"),
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
});
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { McpServer } from "skybridge/server";
|
|
2
|
-
import { z } from "zod";
|
|
3
|
-
|
|
4
|
-
const Answers = [
|
|
5
|
-
"As I see it, yes",
|
|
6
|
-
"Don't count on it",
|
|
7
|
-
"It is certain",
|
|
8
|
-
"It is decidedly so",
|
|
9
|
-
"Most likely",
|
|
10
|
-
"My reply is no",
|
|
11
|
-
"My sources say no",
|
|
12
|
-
"Outlook good",
|
|
13
|
-
"Outlook not so good",
|
|
14
|
-
"Signs point to yes",
|
|
15
|
-
"Very doubtful",
|
|
16
|
-
"Without a doubt",
|
|
17
|
-
"Yes definitely",
|
|
18
|
-
"Yes",
|
|
19
|
-
"You may rely on it",
|
|
20
|
-
];
|
|
21
|
-
|
|
22
|
-
const server = new McpServer(
|
|
23
|
-
{
|
|
24
|
-
name: "alpic-openai-app",
|
|
25
|
-
version: "0.0.1",
|
|
26
|
-
},
|
|
27
|
-
{ capabilities: {} },
|
|
28
|
-
).registerWidget(
|
|
29
|
-
"magic-8-ball",
|
|
30
|
-
{
|
|
31
|
-
description: "Magic 8 Ball",
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
description: "For fortune-telling or seeking advice.",
|
|
35
|
-
inputSchema: {
|
|
36
|
-
question: z.string().describe("The user question."),
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
async ({ question }) => {
|
|
40
|
-
try {
|
|
41
|
-
// deterministic answer
|
|
42
|
-
const hash = question
|
|
43
|
-
.split("")
|
|
44
|
-
.reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
45
|
-
const answer = Answers[hash % Answers.length];
|
|
46
|
-
return {
|
|
47
|
-
structuredContent: { answer },
|
|
48
|
-
content: [],
|
|
49
|
-
isError: false,
|
|
50
|
-
};
|
|
51
|
-
} catch (error) {
|
|
52
|
-
return {
|
|
53
|
-
content: [{ type: "text", text: `Error: ${error}` }],
|
|
54
|
-
isError: true,
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
);
|
|
59
|
-
|
|
60
|
-
server.run();
|
|
61
|
-
|
|
62
|
-
export type AppType = typeof server;
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap");
|
|
2
|
-
|
|
3
|
-
.container {
|
|
4
|
-
display: flex;
|
|
5
|
-
justify-content: center;
|
|
6
|
-
align-items: center;
|
|
7
|
-
min-height: 100%;
|
|
8
|
-
padding: 1rem;
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.ball {
|
|
13
|
-
background: radial-gradient(
|
|
14
|
-
circle at 30% 30%,
|
|
15
|
-
#454565 0%,
|
|
16
|
-
#1c1c30 40%,
|
|
17
|
-
#0a0a10 100%
|
|
18
|
-
);
|
|
19
|
-
border-radius: 50%;
|
|
20
|
-
width: 12rem;
|
|
21
|
-
height: 12rem;
|
|
22
|
-
display: flex;
|
|
23
|
-
flex-direction: column;
|
|
24
|
-
align-items: center;
|
|
25
|
-
justify-content: center;
|
|
26
|
-
font-family: monospace;
|
|
27
|
-
text-align: center;
|
|
28
|
-
position: relative;
|
|
29
|
-
box-shadow:
|
|
30
|
-
0 10px 30px rgba(0, 0, 0, 0.5),
|
|
31
|
-
0 5px 15px rgba(0, 0, 0, 0.3),
|
|
32
|
-
inset 0 -20px 40px rgba(0, 0, 0, 0.6);
|
|
33
|
-
animation:
|
|
34
|
-
float 3s ease-in-out infinite,
|
|
35
|
-
colorShift 15s ease-in-out infinite;
|
|
36
|
-
transition: transform 0.3s ease;
|
|
37
|
-
cursor: pointer;
|
|
38
|
-
border: 1px solid rgba(30, 30, 50, 0.6);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.ball:hover {
|
|
42
|
-
transform: scale(1.05) translateY(-8px);
|
|
43
|
-
animation: colorShift 15s ease-in-out infinite;
|
|
44
|
-
box-shadow:
|
|
45
|
-
0 20px 50px rgba(0, 0, 0, 0.6),
|
|
46
|
-
0 10px 25px rgba(0, 0, 0, 0.4),
|
|
47
|
-
inset 0 -20px 40px rgba(0, 0, 0, 0.6);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
@keyframes float {
|
|
51
|
-
0%,
|
|
52
|
-
100% {
|
|
53
|
-
transform: translateY(0);
|
|
54
|
-
}
|
|
55
|
-
50% {
|
|
56
|
-
transform: translateY(-8px);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@keyframes colorShift {
|
|
61
|
-
0%,
|
|
62
|
-
100% {
|
|
63
|
-
background: radial-gradient(
|
|
64
|
-
circle at 30% 30%,
|
|
65
|
-
#454565 0%,
|
|
66
|
-
#1c1c30 40%,
|
|
67
|
-
#0a0a10 100%
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
25% {
|
|
71
|
-
background: radial-gradient(
|
|
72
|
-
circle at 30% 30%,
|
|
73
|
-
#3f4a65 0%,
|
|
74
|
-
#181e30 40%,
|
|
75
|
-
#090a10 100%
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
50% {
|
|
79
|
-
background: radial-gradient(
|
|
80
|
-
circle at 30% 30%,
|
|
81
|
-
#3a5065 0%,
|
|
82
|
-
#152230 40%,
|
|
83
|
-
#080a10 100%
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
75% {
|
|
87
|
-
background: radial-gradient(
|
|
88
|
-
circle at 30% 30%,
|
|
89
|
-
#3f4a65 0%,
|
|
90
|
-
#181e30 40%,
|
|
91
|
-
#090a10 100%
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.ball::before {
|
|
97
|
-
content: "";
|
|
98
|
-
position: absolute;
|
|
99
|
-
top: 8%;
|
|
100
|
-
left: 20%;
|
|
101
|
-
width: 30%;
|
|
102
|
-
height: 20%;
|
|
103
|
-
background: radial-gradient(
|
|
104
|
-
ellipse,
|
|
105
|
-
rgba(255, 255, 255, 0.3) 0%,
|
|
106
|
-
transparent 70%
|
|
107
|
-
);
|
|
108
|
-
border-radius: 50%;
|
|
109
|
-
pointer-events: none;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.ball::after {
|
|
113
|
-
content: "";
|
|
114
|
-
position: absolute;
|
|
115
|
-
bottom: 8%;
|
|
116
|
-
right: 25%;
|
|
117
|
-
width: 25%;
|
|
118
|
-
height: 10%;
|
|
119
|
-
background: radial-gradient(
|
|
120
|
-
ellipse,
|
|
121
|
-
rgba(255, 255, 255, 0.1) 0%,
|
|
122
|
-
transparent 70%
|
|
123
|
-
);
|
|
124
|
-
border-radius: 50%;
|
|
125
|
-
pointer-events: none;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.question {
|
|
129
|
-
font-size: clamp(0.5rem, 2vw, 0.75rem);
|
|
130
|
-
color: lightgrey;
|
|
131
|
-
max-width: 90%;
|
|
132
|
-
word-wrap: break-word;
|
|
133
|
-
overflow-wrap: break-word;
|
|
134
|
-
text-align: center;
|
|
135
|
-
line-height: 1.3;
|
|
136
|
-
font-style: italic;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.answer {
|
|
140
|
-
font-family: "Playfair Display", serif;
|
|
141
|
-
font-style: italic;
|
|
142
|
-
font-size: 1.25rem;
|
|
143
|
-
font-weight: 600;
|
|
144
|
-
margin-top: 0.5rem;
|
|
145
|
-
color: #7dd3fc;
|
|
146
|
-
text-shadow: 0 0 10px rgba(125, 211, 252, 0.5);
|
|
147
|
-
max-width: 90%;
|
|
148
|
-
word-wrap: break-word;
|
|
149
|
-
overflow-wrap: break-word;
|
|
150
|
-
text-align: center;
|
|
151
|
-
line-height: 1.3;
|
|
152
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import "@/index.css";
|
|
2
|
-
|
|
3
|
-
import { mountWidget } from "skybridge/web";
|
|
4
|
-
import { useToolInfo } from "../helpers.js";
|
|
5
|
-
|
|
6
|
-
function Magic8Ball() {
|
|
7
|
-
const { input, output } = useToolInfo<"magic-8-ball">();
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<div className="container">
|
|
11
|
-
<div className="ball">
|
|
12
|
-
{output ? (
|
|
13
|
-
<>
|
|
14
|
-
<div className="question">{input.question}</div>
|
|
15
|
-
<div className="answer">{output.answer}</div>
|
|
16
|
-
</>
|
|
17
|
-
) : (
|
|
18
|
-
<div className="question">Shaking...</div>
|
|
19
|
-
)}
|
|
20
|
-
</div>
|
|
21
|
-
</div>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export default Magic8Ball;
|
|
26
|
-
|
|
27
|
-
mountWidget(<Magic8Ball />);
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import path from "node:path";
|
|
2
|
-
import react from "@vitejs/plugin-react";
|
|
3
|
-
import { skybridge } from "skybridge/web";
|
|
4
|
-
import { defineConfig, type PluginOption } from "vite";
|
|
5
|
-
|
|
6
|
-
// https://vite.dev/config/
|
|
7
|
-
export default defineConfig({
|
|
8
|
-
plugins: [skybridge() as PluginOption, react()],
|
|
9
|
-
root: __dirname,
|
|
10
|
-
resolve: {
|
|
11
|
-
alias: {
|
|
12
|
-
"@": path.resolve(__dirname, "./src"),
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
});
|