create-skybridge 0.0.0-dev.dbd3f0e → 0.0.0-dev.dbd5455

package/template/src/index.css

@@ -0,0 +1,59 @@
+@import url("https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@400..700&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@alpic-ai/ui/theme";
+
+@source "../node_modules/@alpic-ai/ui/src";
+
+@theme {
+  --font-mozilla: "Mozilla Text", serif;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-twirl: twirl 20s ease-in-out infinite;
+  --animate-aurora: aurora 20s ease-in-out infinite;
+  --animate-gradient-flow: gradient-flow 6s linear infinite;
+}
+
+@keyframes gradient-flow {
+  0% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes aurora {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes twirl {
+  0%,
+  80% {
+    transform: rotateY(0deg);
+  }
+  85% {
+    transform: rotateY(180deg);
+  }
+  95% {
+    transform: rotateY(180deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}

package/template/src/server.ts

@@ -0,0 +1,77 @@
+import { McpServer } from "skybridge/server";
+import { z } from "zod";
+
+const server = new McpServer(
+  {
+    name: "alpic-openai-app",
+    version: "0.0.1",
+  },
+  { capabilities: {} },
+)
+  .registerTool(
+    {
+      name: "start",
+      description: "Onboard Skybridge",
+      inputSchema: {
+        name: z.string().optional().describe("The user name."),
+      },
+      view: {
+        component: "onboarding",
+        description: "Onboarding deck",
+        csp: {
+          resourceDomains: [
+            "https://fonts.googleapis.com",
+            "https://fonts.gstatic.com",
+          ],
+          redirectDomains: ["https://docs.skybridge.tech"],
+        },
+      },
+    },
+    async ({ name }) => {
+      return {
+        structuredContent: { name },
+        content: [{ type: "text", text: `User name: ${name}` }],
+        isError: false,
+      };
+    },
+  )
+  .registerTool(
+    {
+      name: "get-fortune-cookie",
+      description: "Get fortune cookie",
+    },
+    async () => {
+      const predictions = [
+        "A pleasant surprise is waiting for you.",
+        "Your hard work will soon pay off.",
+        "An unexpected friendship will brighten your week.",
+        "The best is yet to come.",
+        "A small step today leads to a giant leap tomorrow.",
+        "Trust your instincts: they are sharper than you think.",
+        "Adventure awaits just around the corner.",
+        "A long-forgotten idea will return with great success.",
+        "Kindness given today will be returned threefold.",
+        "Something you lost will soon be found.",
+      ];
+      const prediction =
+        predictions[Math.floor(Math.random() * predictions.length)];
+
+      // simulate backend work
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      return {
+        structuredContent: { prediction },
+        content: [{ type: "text", text: prediction }],
+        isError: false,
+      };
+    },
+  );
+
+if (process.env.NODE_ENV === "production") {
+  const { default: manifest } = await import("./vite-manifest.js");
+  server.setViteManifest(manifest);
+}
+
+export default await server.run();
+
+export type AppType = typeof server;

package/template/src/views/components/doc-link.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { useOpenExternal } from "skybridge/web";
+
+export default function DocLink({
+  href,
+  children,
+}: {
+  href: string;
+  children: ReactNode;
+}) {
+  // useOpenExternal: open a URL in a new browser tab from inside the iframe.
+  const openExternal = useOpenExternal();
+  return (
+    <button
+      type="button"
+      onClick={() => openExternal(href)}
+      className="underline underline-offset-4"
+    >
+      {children}
+    </button>
+  );
+}

package/template/src/views/components/doc.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export default function Doc({ children }: { children: ReactNode }) {
+  return (
+    <p className="flex items-start gap-2 type-text-xs text-muted-foreground mt-auto">
+      <svg
+        viewBox="0 0 90 90"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label="Skybridge"
+        className="size-4 shrink-0 mt-0.5"
+      >
+        <path
+          d="M17.2704 89.9987C37.5976 24.3967 65.182 12.9084 89.9996 35.3807V84.1606C89.9996 87.3849 87.3858 89.9987 84.1615 89.9987H17.2704ZM84.1615 0C87.3858 0 89.9996 2.6139 89.9996 5.83819V30.9146C52.0566 -5.26767 14.9006 31.2366 0.000976562 57.6768V5.83819C0.00104114 2.6139 2.61486 2.23904e-08 5.83917 0H84.1615Z"
+          fill="currentColor"
+        />
+      </svg>
+      <span>{children}</span>
+    </p>
+  );
+}

package/template/src/views/components/nav.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@alpic-ai/ui/components/button";
+import { Check } from "lucide-react";
+
+export default function Nav({
+  current,
+  total,
+  onChange,
+}: {
+  current: number;
+  total: number;
+  onChange: (index: number) => void;
+}) {
+  return (
+    <div className="flex justify-end gap-2 mt-auto">
+      <Button
+        variant="secondary"
+        disabled={current === 0}
+        onClick={() => onChange(Math.max(current - 1, 0))}
+      >
+        Previous
+      </Button>
+      <Button
+        disabled={current === total - 1}
+        onClick={() => onChange(Math.min(current + 1, total - 1))}
+      >
+        <Check />
+        Next
+      </Button>
+    </div>
+  );
+}

package/template/src/views/components/progress.tsx

@@ -0,0 +1,35 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@alpic-ai/ui/components/tooltip";
+
+export default function Progress({
+  steps,
+  current,
+  onSelect,
+}: {
+  steps: readonly string[];
+  current: number;
+  onSelect: (index: number) => void;
+}) {
+  return (
+    <div className="flex gap-1.5">
+      {steps.map((label, i) => (
+        <Tooltip key={label}>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => onSelect(i)}
+              className={`relative h-1 flex-1 rounded-full transition-opacity before:absolute before:-inset-y-5 before:inset-x-0 before:content-[''] [@media(hover:hover)]:hover:opacity-70 ${
+                i <= current ? "bg-primary" : "bg-muted"
+              }`}
+              aria-label={label}
+            />
+          </TooltipTrigger>
+          <TooltipContent>{label}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}

package/template/src/views/components/steps/outro.tsx

@@ -0,0 +1,68 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "@alpic-ai/ui/components/card";
+import { BookOpen, CircleStar } from "lucide-react";
+import { useOpenExternal } from "skybridge/web";
+
+const LINKS = [
+  {
+    icon: CircleStar,
+    title: "See the examples",
+    description:
+      "Templates for OAuth, e-commerce, dashboards, games, and many more.",
+    href: "https://docs.skybridge.tech/showcase#examples",
+  },
+  {
+    icon: BookOpen,
+    title: "Read the docs",
+    description: "Learn more about Skybridge concepts, API, and tooling.",
+    href: "https://docs.skybridge.tech",
+  },
+];
+
+export default function Outro() {
+  // useOpenExternal: open a URL in a new browser tab from inside the iframe.
+  const openExternal = useOpenExternal();
+
+  return (
+    <>
+      <div className="flex flex-1 flex-col justify-center gap-3">
+        <h1 className="type-display-xs font-mozilla font-semibold text-primary">
+          That's a wrap!
+        </h1>
+        <p>
+          You've just mastered how{" "}
+          <strong>
+            the data flows between the tools, the view, and the model
+          </strong>
+          . You can start{" "}
+          <span className="bg-gradient-to-r from-primary via-cyan-500 to-primary bg-[length:200%_100%] bg-clip-text text-transparent font-semibold animate-gradient-flow">
+            vibing
+          </span>{" "}
+          now from this very template or:
+        </p>
+      </div>
+      <div className="grid grid-cols-2 gap-3 mt-auto">
+        {LINKS.map(({ icon: Icon, title, description, href }) => (
+          <Card
+            key={title}
+            hoverable
+            className="cursor-pointer bg-white/50 dark:bg-zinc-900/50"
+            onClick={() => openExternal(href)}
+          >
+            <CardContent className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <Icon className="size-5 shrink-0 text-primary" />
+                <CardTitle>{title}</CardTitle>
+              </div>
+              <CardDescription>{description}</CardDescription>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </>
+  );
+}

package/template/src/views/components/steps/state.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@alpic-ai/ui/components/button";
+import { HatGlasses } from "lucide-react";
+import Doc from "@/views/components/doc.js";
+import DocLink from "@/views/components/doc-link.js";
+import { useMascot } from "@/views/use-mascot.js";
+
+export default function State() {
+  const { hat, changeHat } = useMascot();
+
+  return (
+    <>
+      <div className="flex flex-1 flex-col justify-center gap-3">
+        <p>
+          The <strong>view state</strong> can be shared with the model:
+        </p>
+        <div className="flex">
+          <Button variant="cta" onClick={changeHat}>
+            <HatGlasses />
+            Change my hat
+          </Button>
+        </div>
+        <p className={`mt-2 ${hat ? "" : "invisible"}`} aria-hidden={!hat}>
+          Now, the LLM also knows I'm wearing a glorious{" "}
+          <span
+            // data-llm: describe what the user views to the model so they can collaborate
+            data-llm={`Mascot is wearing ${hat}`}
+            className="text-primary font-mozilla"
+          >
+            {hat}
+          </span>
+          .
+        </p>
+      </div>
+      <Doc>
+        Use{" "}
+        <DocLink href="https://docs.skybridge.tech/api-reference/use-view-state">
+          useViewState
+        </DocLink>{" "}
+        to update the context and{" "}
+        <DocLink href="https://docs.skybridge.tech/api-reference/data-llm">
+          data-llm
+        </DocLink>{" "}
+        to describe the UI.
+      </Doc>
+    </>
+  );
+}

package/template/src/views/components/steps/tool-call.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@alpic-ai/ui/components/button";
+import { Cookie } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useCallTool } from "@/helpers.js";
+import Doc from "@/views/components/doc.js";
+import DocLink from "@/views/components/doc-link.js";
+
+export default function ToolCall() {
+  // useCallTool: invoke a server tool from within the view.
+  const { callTool, isPending, data } = useCallTool("get-fortune-cookie");
+  const [prediction, setPrediction] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (data) {
+      setPrediction(data.structuredContent.prediction);
+    }
+  }, [data]);
+
+  return (
+    <>
+      <div className="flex flex-1 flex-col justify-center gap-3">
+        <p className="">
+          <strong>Tools</strong> can also be triggered from the view:
+        </p>
+        <div className="flex">
+          <Button
+            variant="cta"
+            loading={isPending}
+            icon={<Cookie />}
+            onClick={() => callTool()}
+          >
+            <code>get-fortune-cookie</code>
+          </Button>
+        </div>
+        <p
+          className={`font-mozilla italic text-primary mt-2 ${
+            prediction ? "" : "invisible"
+          }`}
+          aria-hidden={!prediction}
+        >
+          {prediction || "none"}
+        </p>
+      </div>
+      <Doc>
+        Use{" "}
+        <DocLink href="https://docs.skybridge.tech/api-reference/use-call-tool">
+          useCallTool
+        </DocLink>{" "}
+        to request tools from within the view.
+      </Doc>
+    </>
+  );
+}

package/template/src/views/components/steps/tool-output.tsx

@@ -0,0 +1,40 @@
+import { useToolInfo } from "@/helpers.js";
+import Doc from "@/views/components/doc.js";
+import DocLink from "@/views/components/doc-link.js";
+
+export default function ToolOutput() {
+  // useToolInfo: read the input, output and metadata of the tool that opened this view.
+  const { output } = useToolInfo<"start">();
+  const name = output?.name;
+
+  return (
+    <>
+      <div className="flex flex-1 flex-col justify-center gap-3">
+        <h1 className="type-display-xs font-mozilla font-semibold">
+          Greetings,{" "}
+          <span className="text-primary">{name ?? "stranger"} !</span>
+        </h1>
+        {name ? (
+          <p>
+            You're wondering how do I know your name, don't you? Well, it's
+            because the view reads the <strong>tool output</strong>. The LLM
+            knows about it too.
+          </p>
+        ) : (
+          <p>
+            The view reads the <strong>tool output</strong>, but no{" "}
+            <code>name</code> was passed this time. Try again with you surname
+            to see with this view personalize.
+          </p>
+        )}
+      </div>
+      <Doc>
+        Use{" "}
+        <DocLink href="https://docs.skybridge.tech/api-reference/use-tool-info">
+          useToolInfo
+        </DocLink>{" "}
+        to hydrate the view with tool input, output and metadata.
+      </Doc>
+    </>
+  );
+}

package/template/src/views/onboarding.tsx

@@ -0,0 +1,63 @@
+import "@/index.css";
+
+import { useState } from "react";
+import { useLayout } from "skybridge/web";
+import Nav from "./components/nav.js";
+import Progress from "./components/progress.js";
+import Outro from "./components/steps/outro.js";
+import State from "./components/steps/state.js";
+import ToolCall from "./components/steps/tool-call.js";
+import ToolOutput from "./components/steps/tool-output.js";
+import { useMascot } from "./use-mascot.js";
+
+const STEPS = [
+  { label: "Reading tool output", Component: ToolOutput },
+  { label: "Sharing view state", Component: State },
+  { label: "Calling tools", Component: ToolCall },
+  { label: "Examples & docs", Component: Outro },
+] as const;
+
+export default function Onboarding() {
+  // useLayout: read host layout info (theme, display mode, locale, ...).
+  const { theme } = useLayout();
+
+  const [step, setStep] = useState(0);
+  const { img } = useMascot();
+
+  return (
+    <div
+      className={`${theme === "dark" ? "dark" : ""} mx-auto w-full max-w-4xl rounded-xl border border-border overflow-hidden bg-background text-foreground`}
+    >
+      <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">
+        <div className="shrink-0 self-center animate-float">
+          <img
+            src={img}
+            alt="Skybridge mascot"
+            className="h-32 w-32 md:h-50 md:w-50 object-contain animate-twirl"
+          />
+        </div>
+        <div className="flex w-full flex-1 flex-col gap-6">
+          <Progress
+            steps={STEPS.map(({ label }) => label)}
+            current={step}
+            onSelect={setStep}
+          />
+          <div className="grid flex-1">
+            {STEPS.map(({ label, Component }, i) => (
+              <div
+                key={label}
+                className={`col-start-1 row-start-1 flex flex-col gap-6 ${
+                  step === i ? "" : "invisible pointer-events-none"
+                }`}
+                aria-hidden={step !== i}
+              >
+                <Component />
+              </div>
+            ))}
+          </div>
+          <Nav current={step} total={STEPS.length} onChange={setStep} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/views/use-mascot.ts

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useViewState } from "skybridge/web";
+import beret from "./images/mascot/beret.png";
+import chapka from "./images/mascot/chapka.png";
+import cowboyHat from "./images/mascot/cowboy-hat.png";
+import fez from "./images/mascot/fez.png";
+import jesterHat from "./images/mascot/jester-hat.png";
+import mitre from "./images/mascot/mitre.png";
+import nonLa from "./images/mascot/non-la.png";
+import original from "./images/mascot/original.png";
+import propellerBeanie from "./images/mascot/propeller-beanie.png";
+import skiMask from "./images/mascot/ski-mask.png";
+import sombrero from "./images/mascot/sombrero.png";
+import topHat from "./images/mascot/top-hat.png";
+import vikingHelmet from "./images/mascot/viking-helmet.png";
+
+const Hats = {
+  beret,
+  chapka,
+  "cowboy hat": cowboyHat,
+  fez,
+  "jester hat": jesterHat,
+  mitre,
+  "nón lá": nonLa,
+  "propeller beanie": propellerBeanie,
+  "ski mask": skiMask,
+  sombrero,
+  "top hat": topHat,
+  "viking helmet": vikingHelmet,
+} as const;
+
+type HatLabel = keyof typeof Hats;
+
+const LABELS = Object.keys(Hats) as HatLabel[];
+
+export function useMascot() {
+  // useViewState: persist UI state on the host and surface it to the model.
+  const [state, setState] = useViewState<{ hat?: HatLabel }>({});
+  const { hat } = state;
+  const img = hat ? Hats[hat] : original;
+
+  // Preload all hats once so swaps are instant.
+  useEffect(() => {
+    for (const src of Object.values(Hats)) {
+      new Image().src = src;
+    }
+  }, []);
+
+  return {
+    img,
+    hat,
+    changeHat: () => {
+      setState((prev) => {
+        const currentIndex = prev.hat ? LABELS.indexOf(prev.hat) : -1;
+        const next = LABELS[(currentIndex + 1) % LABELS.length];
+        return { ...prev, hat: next };
+      });
+    },
+  };
+}

package/template/src/vite-manifest.d.ts

@@ -0,0 +1,4 @@
+// Typed shim for the Vite manifest emitted by `skybridge build`. The actual
+// `vite-manifest.js` is generated alongside this file and gitignored.
+declare const manifest: Record<string, { file: string }>;
+export default manifest;

package/template/tsconfig.json

@@ -1,23 +1,11 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "verbatimModuleSyntax": true,
-
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+  "extends": "skybridge/tsconfig",
 
-    "noEmit": true
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["server/src", "web/src", "web/vite.config.ts"],
-  "exclude": ["dist", "node_modules"]
+
+  "include": ["src", ".skybridge/**/*.d.ts"]
 }

package/template/{web/vite.config.ts → vite.config.ts}

@@ -1,12 +1,11 @@
 import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/web";
+import { skybridge } from "skybridge/vite";
 import { defineConfig } from "vite";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [skybridge(), react()],
-  root: __dirname,
+  plugins: [skybridge(), react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),