basic route-specific trpc file example

pages/chat/+Page.tsx

@@ -0,0 +1,55 @@
+import { JsonInput, Tabs, Textarea } from "@mantine/core";
+import { useState } from "react";
+
+const defaultSystemPrompt = `You are a helpful assistant that answers questions based on the provided context. If you don't know the answer, just say that you don't know, don't try to make up an answer.`;
+const defaultParameters = {
+  temperature: 0.5,
+  max_tokens: 100,
+};
+
+export default function ChatPage() {
+  const [prompt, setPrompt] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState(defaultSystemPrompt);
+  const [parameters, setParameters] = useState(defaultParameters);
+
+  return (
+    <Tabs defaultValue="prompt">
+      <Tabs.List>
+        <Tabs.Tab value="prompt">Prompt</Tabs.Tab>
+        <Tabs.Tab value="system-prompt">System Prompt</Tabs.Tab>
+        <Tabs.Tab value="parameters">Parameters</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="prompt">
+        <Textarea
+          resize="vertical"
+          placeholder="Type your message here..."
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              console.log("Sending message...");
+            }
+          }}
+        />
+      </Tabs.Panel>
+      <Tabs.Panel value="system-prompt">
+        <Textarea
+          resize="vertical"
+          placeholder={defaultSystemPrompt}
+          value={systemPrompt}
+          onChange={(e) => setSystemPrompt(e.target.value)}
+        />
+      </Tabs.Panel>
+      <Tabs.Panel value="parameters">
+        <JsonInput
+          resize="vertical"
+          formatOnBlur
+          placeholder={JSON.stringify(defaultParameters)}
+          value={JSON.stringify(parameters)}
+          onChange={(value) => setParameters(JSON.parse(value))}
+        />
+      </Tabs.Panel>
+    </Tabs>
+  );
+}

pages/chat/trpc.ts

@@ -0,0 +1,22 @@
+import { router, publicProcedure, Validator } from "../../trpc/server";
+import { Type as T } from "@sinclair/typebox";
+
+export const chat = router({
+  sendMessage: publicProcedure
+    .input(
+      Validator(
+        T.Object({
+          prompt: T.String(),
+          systemPrompt: T.String(),
+          parameters: T.Object({
+            temperature: T.Number(),
+            max_tokens: T.Number(),
+          }),
+        }),
+      ),
+    )
+    .mutation(async ({ input: { prompt, systemPrompt, parameters } }) => {
+      console.log("Received new todo", { prompt, systemPrompt, parameters });
+      return { prompt, systemPrompt, parameters };
+    }),
+});