♻️ Migrate to TRPC

src/components/Button.tsx

@@ -1,6 +1,7 @@
 import type { ForwardedRef } from "react";
 import React, { forwardRef, useState } from "react";
 import Loader from "./loader";
+import clsx from "clsx";
 
 export interface ButtonProps {
   type?: "button" | "submit" | "reset";
@@ -30,14 +31,13 @@ const Button = forwardRef(
         ref={ref}
         type={props.type}
         disabled={loading || props.disabled}
-        className={
-          // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-          "text-gray/50 rounded-lg border-[2px] border-white/30 px-10 py-3 font-bold transition-all " +
-          props.className +
-          (props.disabled
+        className={clsx(
+          "text-gray/50 rounded-lg border-[2px] border-white/30 px-10 py-3 font-bold transition-all",
+          props.className,
+          props.disabled
             ? " cursor-not-allowed border-white/10 bg-zinc-900 text-white/30"
-            : " mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl")
-        }
+            : " mou cursor-pointer bg-[#1E88E5]/70 text-white/80 hover:border-white/80 hover:bg-[#0084f7] hover:text-white hover:shadow-2xl"
+        )}
         onClick={onClick}
       >
         <div className="flex items-center">

src/components/toast.tsx

@@ -1,7 +1,7 @@
 import * as ToastPrimitive from "@radix-ui/react-toast";
-import cx from "classnames";
 import type { Dispatch, SetStateAction } from "react";
 import React from "react";
+import clsx from "clsx";
 
 type Props = {
   model: [boolean, Dispatch<SetStateAction<boolean>>];
@@ -18,8 +18,8 @@ const Toast = (props: Props) => {
       <ToastPrimitive.Root
         open={open}
         onOpenChange={setOpen}
-        className={cx(
-          "fixed inset-x-4 bottom-4 z-50 w-auto rounded-2xl shadow-lg md:right-4 md:left-auto md:w-full md:max-w-sm",
+        className={clsx(
+          "fixed inset-x-4 bottom-4 z-50 w-auto rounded-2xl shadow-lg md:left-auto md:right-4 md:w-full md:max-w-sm",
           "bg-slate-900",
           "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right",
           "radix-state-closed:animate-toast-hide",

src/env/schema.mjs

@@ -21,6 +21,7 @@ export const serverSchema = z.object({
   ),
   DISCORD_CLIENT_ID: z.string(),
   DISCORD_CLIENT_SECRET: z.string(),
+  OPENAI_API_KEY: z.string()
 });
 
 /**
@@ -35,6 +36,7 @@ export const serverEnv = {
   NEXTAUTH_URL: process.env.NEXTAUTH_URL,
   DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
   DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+  OPENAI_API_KEY: process.env.OPENAI_API_KEY,
 };
 
 /**

src/pages/index.tsx

@@ -7,7 +7,6 @@ import ChatWindow, {
   CreateGoalMessage,
   CreateTaskMessage,
 } from "../components/ChatWindow";
-import axios from "axios";
 import Drawer from "../components/Drawer";
 import Input from "../components/Input";
 import Button from "../components/Button";
@@ -16,6 +15,7 @@ import PopIn from "../components/motions/popin";
 import { VscLoading } from "react-icons/vsc";
 import type AutonomousAgent from "../components/AutonomousAgent";
 import Expand from "../components/motions/expand";
+import { api } from "../utils/api";
 
 const Home: NextPage = () => {
   const [name, setName] = React.useState<string>("");
@@ -23,14 +23,11 @@ const Home: NextPage = () => {
   const [agent, setAgent] = React.useState<AutonomousAgent | null>(null);
 
   const [messages, setMessages] = React.useState<Message[]>([]);
+  const startAgent = api.chain.startAgent.useMutation();
 
   const handleNewGoal = async () => {
     setMessages([...messages, CreateGoalMessage(goalInput)]);
-
-    const res = await axios.post(`/api/chain`, { prompt: goalInput });
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-member-access
-    const tasks: string[] = JSON.parse(res.data.tasks);
+    const { tasks } = await startAgent.mutateAsync({ prompt: goalInput });
     setMessages((prev) => [...prev, ...tasks.map(CreateTaskMessage)]);
   };
 
@@ -97,7 +94,7 @@ const Home: NextPage = () => {
 
             <Button
               disabled={agent != null || name === "" || goalInput === ""}
-              onClick={() => void handleNewGoal()}
+              onClick={handleNewGoal}
               className="mt-10"
             >
               {agent == null ? (

src/server/api/root.ts

@@ -1,5 +1,6 @@
 import { createTRPCRouter } from "./trpc";
 import { exampleRouter } from "./routers/example";
+import { chainRouter } from "./routers/chain";
 
 /**
  * This is the primary router for your server.
@@ -8,6 +9,7 @@ import { exampleRouter } from "./routers/example";
  */
 export const appRouter = createTRPCRouter({
   example: exampleRouter,
+  chain: chainRouter,
 });
 
 // export type definition of API

src/server/api/routers/chain.ts

@@ -0,0 +1,16 @@
+import { z } from "zod";
+
+import { createTRPCRouter, publicProcedure } from "../trpc";
+import { startGoalAgent } from "../../../utils/chain";
+
+export const chainRouter = createTRPCRouter({
+  startAgent: publicProcedure
+    .input(z.object({ prompt: z.string() }))
+    .mutation(async ({ input }) => {
+      const completion = (await startGoalAgent(input.prompt)) as {
+        text: string;
+      };
+
+      return { tasks: JSON.parse(completion.text) as string[] };
+    }),
+});