Project created from basic template

src/client/app.tsx

@@ -0,0 +1,14 @@
+function App() {
+  return (
+    <div className="min-h-screen w-full max-w-4xl mx-auto p-4">
+      {/* Replace this placeholder content with your app components */}
+      <div className="text-center mt-72">
+        <h1 className="text-2xl mb-4 opacity-50">
+          Building your new project...
+        </h1>
+      </div>
+    </div>
+  );
+}
+
+export default App;

src/client/components/demo/ai.tsx

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import { useMutation } from "@tanstack/react-query";
+import { queryClient } from "@/client/rpc-client";
+
+export function AIDemo() {
+  const [message, setMessage] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
+  const [personPrompt, setPersonPrompt] = useState("");
+
+  const {
+    data: completionData,
+    mutate: complete,
+    isPending: isCompleting,
+  } = useMutation(queryClient.demo.ai.complete.mutationOptions());
+
+  const {
+    data: personData,
+    mutate: generatePerson,
+    isPending: isGenerating,
+  } = useMutation(queryClient.demo.ai.generate.mutationOptions());
+
+  // When using this demo, remove any UI below that is not relevant for the user
+  return (
+    <div className="max-w-4xl mx-auto p-6 space-y-8">
+      <h2 className="text-2xl font-bold">AI Demo</h2>
+
+      <div className="space-y-6">
+        <h3 className="text-xl font-semibold">Chat Completion</h3>
+
+        <div className="space-y-4">
+          <input
+            className="w-full p-3 border border-gray-300 rounded-md"
+            placeholder="System prompt (optional)"
+            value={systemPrompt}
+            onChange={(e) => setSystemPrompt(e.target.value)}
+          />
+          <input
+            className="w-full p-3 border border-gray-300 rounded-md"
+            placeholder="Your message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+          <button
+            className="px-6 py-3 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+            onClick={() => {
+              if (message) {
+                complete({
+                  message,
+                  systemPrompt: systemPrompt || undefined,
+                });
+              }
+            }}
+            disabled={isCompleting || !message}
+          >
+            {isCompleting ? "Generating..." : "Send Message"}
+          </button>
+        </div>
+
+        {completionData && (
+          <div className="p-4 border border-gray-200 rounded-md">
+            <h4 className="font-medium mb-2">Response:</h4>
+            <p className="leading-relaxed">{completionData.response}</p>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-6">
+        <h3 className="text-xl font-semibold">Generate Person</h3>
+
+        <div className="space-y-4">
+          <input
+            className="w-full p-3 border border-gray-300 rounded-md"
+            placeholder="Describe the person you want to generate"
+            value={personPrompt}
+            onChange={(e) => setPersonPrompt(e.target.value)}
+          />
+          <button
+            className="px-6 py-3 border border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
+            onClick={() => {
+              if (personPrompt) {
+                generatePerson({ prompt: personPrompt });
+              }
+            }}
+            disabled={isGenerating || !personPrompt}
+          >
+            {isGenerating ? "Generating..." : "Generate Person"}
+          </button>
+        </div>
+
+        {personData && (
+          <div className="p-4 border border-gray-200 rounded-md">
+            <h4 className="font-medium mb-3">Generated Person:</h4>
+            <div className="space-y-2">
+              <p>
+                <strong>Name:</strong> {personData.person.name}
+              </p>
+              <p>
+                <strong>Age:</strong> {personData.person.age}
+              </p>
+              <p>
+                <strong>Occupation:</strong> {personData.person.occupation}
+              </p>
+              <p>
+                <strong>Bio:</strong> {personData.person.bio}
+              </p>
+              {personData.person.nickname && (
+                <p>
+                  <strong>Nickname:</strong> {personData.person.nickname}
+                </p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/client/components/demo/rpc.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { queryClient, rpcClient } from "@/client/rpc-client";
+
+export function RPCDemo() {
+  const [value, setValue] = useState("");
+
+  // Live data query - automatically updates when server data changes
+  // Use .experimental_liveOptions() for real-time subscriptions
+  // Use .queryOptions() for static data that doesn't need live updates
+  const { data: items } = useQuery(
+    queryClient.demo.storage.live.list.experimental_liveOptions()
+  );
+
+  // Mutations handle data changes with loading states
+  // Automatically invalidates related queries on success
+  const { mutate: createItem, isPending: isCreatingItem } = useMutation(
+    queryClient.demo.storage.create.mutationOptions()
+  );
+
+  return (
+    <div>
+      <h2>Storage Demo</h2>
+
+      <div>
+        <input
+          placeholder="Value"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <button
+          onClick={() => {
+            if (value) {
+              createItem({ value });
+              setValue("");
+            }
+          }}
+          disabled={isCreatingItem}
+        >
+          {isCreatingItem ? "Adding..." : "Add Item"}
+        </button>
+      </div>
+
+      <div>
+        <h3>Items:</h3>
+        {items?.map((item) => (
+          <div key={item.id}>
+            {item.id}: {item.value}
+            <button
+              onClick={() => {
+                // Direct RPC calls bypass React Query caching/mutations
+                // Use for one-off operations or when you need immediate execution
+                return rpcClient.demo.storage.remove(item.id);
+              }}
+            >
+              Remove
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/client/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles/globals.css";
+import App from "./app.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);

src/client/rpc-client.ts

@@ -0,0 +1,12 @@
+import type { RouterClient } from "@orpc/server";
+import { createORPCClient } from "@orpc/client";
+import { RPCLink } from "@orpc/client/fetch";
+import { createTanstackQueryUtils } from "@orpc/tanstack-query";
+
+import type { router } from "@/server/rpc";
+
+const link = new RPCLink({ url: `${window.location.origin}/rpc` });
+
+export const rpcClient: RouterClient<typeof router> = createORPCClient(link);
+
+export const queryClient = createTanstackQueryUtils(rpcClient);

src/client/styles/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/client/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

src/server/index.ts

@@ -0,0 +1,11 @@
+import { Hono } from "hono";
+
+import { rpcApp } from "./routes/rpc";
+import { clientEntry } from "./routes/client-entry";
+
+const app = new Hono();
+
+app.route("/rpc", rpcApp);
+app.get("/*", clientEntry);
+
+export default app;

src/server/lib/create-kv.ts

@@ -0,0 +1,41 @@
+import { createStorage, StorageValue, WatchEvent } from "unstorage";
+import fsDriver from "unstorage/drivers/fs";
+
+const STORAGE_PATH = "./.storage"; // It is .gitignored
+
+export function createKV<T extends StorageValue>(name: string) {
+  const storage = createStorage<T>({
+    driver: fsDriver({ base: `${STORAGE_PATH}/${name}` }),
+  });
+
+  // Async generator to play work well with oRPC live queries
+  async function* subscribe() {
+    let resolve: (value: { event: WatchEvent; key: string }) => void;
+    let promise = new Promise<{ event: WatchEvent; key: string }>(
+      (r) => (resolve = r)
+    );
+
+    const unwatch = await storage.watch((event, key) => {
+      resolve({ event, key });
+      promise = new Promise<{ event: WatchEvent; key: string }>(
+        (r) => (resolve = r)
+      );
+    });
+
+    try {
+      while (true) yield await promise;
+    } finally {
+      await unwatch();
+    }
+  }
+
+  return {
+    ...storage,
+    getAllItems: async () => {
+      const keys = await storage.getKeys();
+      const values = await storage.getItems(keys);
+      return values.map(({ value }) => value);
+    },
+    subscribe,
+  };
+}

src/server/lib/openai.ts

@@ -0,0 +1,28 @@
+import { jsonrepair } from "jsonrepair";
+import { z } from "zod";
+import { makeParseableResponseFormat } from "openai/lib/parser";
+
+import type { AutoParseableResponseFormat } from "openai/lib/parser";
+import type { ResponseFormatJSONSchema } from "openai/resources";
+
+export function zodResponseFormat<ZodInput extends z.ZodType>(
+  zodObject: ZodInput,
+  name: string,
+  props?: Omit<
+    ResponseFormatJSONSchema.JSONSchema,
+    "schema" | "strict" | "name"
+  >
+): AutoParseableResponseFormat<z.infer<ZodInput>> {
+  return makeParseableResponseFormat(
+    {
+      type: "json_schema",
+      json_schema: {
+        ...props,
+        name,
+        strict: true,
+        schema: z.toJSONSchema(zodObject, { target: "draft-7" }),
+      },
+    },
+    (content) => zodObject.parse(JSON.parse(jsonrepair(content)))
+  );
+}

src/server/routes/client-entry.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource hono/jsx */
+import type { Context } from "hono";
+import viteReact from "@vitejs/plugin-react";
+
+import type { BlankEnv } from "hono/types";
+
+export function clientEntry(c: Context<BlankEnv>) {
+  return c.html(
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <title>New Quest</title>
+        {import.meta.env.PROD ? (
+          <script src="/static/main.js" type="module" />
+        ) : (
+          <>
+            <script
+              dangerouslySetInnerHTML={{
+                __html: viteReact.preambleCode.replace("__BASE__", "/"),
+              }}
+              type="module"
+            />
+            <script src="/src/client/main.tsx" type="module" />
+          </>
+        )}
+      </head>
+      <body>
+        <div id="root" />
+      </body>
+    </html>,
+  );
+}

src/server/routes/rpc.ts

@@ -0,0 +1,21 @@
+import { RPCHandler } from "@orpc/server/fetch";
+
+import { router } from "@/server/rpc";
+import { Hono } from "hono";
+
+export const rpcApp = new Hono();
+
+const handler = new RPCHandler(router);
+
+rpcApp.use("/*", async (c, next) => {
+  const { matched, response } = await handler.handle(c.req.raw, {
+    prefix: "/rpc",
+  });
+
+  if (matched) {
+    return c.newResponse(response.body, response);
+  }
+
+  await next();
+  return;
+});

src/server/rpc/demo/ai.ts

@@ -0,0 +1,95 @@
+import OpenAI from "openai";
+import { os } from "@orpc/server";
+import { z } from "zod";
+
+import { zodResponseFormat } from "@/server/lib/openai";
+
+if (!process.env.OPENAI_BASE_URL) {
+  throw new Error("OPENAI_BASE_URL is not set");
+}
+
+if (!process.env.OPENAI_API_KEY) {
+  throw new Error("OPENAI_API_KEY is not set");
+}
+
+const openai = new OpenAI({
+  baseURL: process.env.OPENAI_BASE_URL,
+  apiKey: process.env.OPENAI_API_KEY,
+});
+
+if (!process.env.OPENAI_DEFAULT_MODEL) {
+  throw new Error("OPENAI_DEFAULT_MODEL is not set");
+}
+
+const DEFAULT_MODEL = process.env.OPENAI_DEFAULT_MODEL;
+
+const ChatCompletionInputSchema = z.object({
+  message: z.string(),
+  systemPrompt: z.string().optional(),
+});
+
+const GeneratePersonInputSchema = z.object({
+  prompt: z.string(),
+});
+
+const complete = os
+  .input(ChatCompletionInputSchema)
+  .handler(async ({ input }) => {
+    const { message, systemPrompt } = input;
+
+    const completion = await openai.chat.completions.create({
+      model: DEFAULT_MODEL,
+      messages: [
+        ...(systemPrompt
+          ? [{ role: "system" as const, content: systemPrompt }]
+          : []),
+        { role: "user" as const, content: message },
+      ],
+    });
+
+    return {
+      response: completion.choices[0]?.message?.content || "",
+    };
+  });
+
+// Object generation schemas only support nullability, not optionality.
+// Use .nullable() instead of .optional() for fields that may not have values.
+const DemoSchema = z.object({
+  name: z.string().describe("The name of the person"),
+  age: z.number().describe("The age of the person"),
+  occupation: z.string().describe("The occupation of the person"),
+  bio: z.string().describe("The bio of the person"),
+  nickname: z
+    .string()
+    .nullable()
+    .describe("The person's nickname, if they have one"),
+});
+
+const generate = os
+  .input(GeneratePersonInputSchema)
+  .handler(async ({ input }) => {
+    const completion = await openai.chat.completions.parse({
+      model: DEFAULT_MODEL,
+      messages: [
+        {
+          role: "user",
+          content: `Generate a person based on this prompt: ${input.prompt}`,
+        },
+      ],
+      response_format: zodResponseFormat(DemoSchema, "person"),
+    });
+
+    const person = completion.choices[0]?.message?.parsed;
+    if (!person) {
+      throw new Error("No parsed data received from OpenAI");
+    }
+
+    return {
+      person,
+    };
+  });
+
+export const router = {
+  complete,
+  generate,
+};

src/server/rpc/demo/index.ts

@@ -0,0 +1,7 @@
+import { router as storageRouter } from "./storage";
+import { router as aiRouter } from "./ai";
+
+export const demo = {
+  storage: storageRouter,
+  ai: aiRouter,
+};

src/server/rpc/demo/storage.ts

@@ -0,0 +1,51 @@
+import { call, os } from "@orpc/server";
+import { z } from "zod";
+import { randomUUID } from "crypto";
+import { createKV } from "@/server/lib/create-kv";
+
+const DemoSchema = z.object({
+  id: z.string(),
+  value: z.string(),
+});
+
+type Demo = z.output<typeof DemoSchema>;
+
+// createKV provides simple key-value storage with publisher/subscriber support
+// perfect for live queries and small amounts of data
+const kv = createKV<Demo>("demo");
+
+// Handler with input validation using .input() and schema
+const create = os
+  .input(DemoSchema.omit({ id: true }))
+  .handler(async ({ input }) => {
+    const id = randomUUID();
+    const item = { id, value: input.value };
+    await kv.setItem(id, item);
+  });
+
+const remove = os.input(z.string()).handler(async ({ input }) => {
+  await kv.removeItem(input);
+});
+
+// Handler without input - returns all items
+const list = os.handler(async () => {
+  return kv.getAllItems();
+});
+
+// Live data stream using generator function
+// Yields initial data, then subscribes to changes for real-time updates
+const live = {
+  list: os.handler(async function* ({ signal }) {
+    yield call(list, {}, { signal });
+    for await (const _ of kv.subscribe()) {
+      yield call(list, {}, { signal });
+    }
+  }),
+};
+
+export const router = {
+  create,
+  remove,
+  list,
+  live,
+};

src/server/rpc/index.ts

@@ -0,0 +1,5 @@
+import { demo } from "./demo";
+
+export const router = {
+  demo,
+};