diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index b1a06d50d..6eeb2b187 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -27,7 +27,8 @@ jobs:
         env:
           NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: 'pk_test_c3VtbWFyeS13YWxydXMtMjUuY2xlcmsuYWNjb3VudHMuZGV2JA'
           NEXT_PUBLIC_API_URL: 'http://localhost:8081'
-          NEXT_PUBLIC_AI_API_URL: 'http://localhost:8081'
+          NEXT_PUBLIC_MODGPT_API_URL: 'http://localhost:8081'
+          NEXT_PUBLIC_CODEMODAI_API_URL: 'http://localhost:8081'
           NEXT_PUBLIC_AUTH_API_URL: 'http://localhost:8080'
           NEXT_PUBLIC_WS_URL: 'ws://localhost:8000'
           HUBSPOT_CONTACT_FORM_ID: ${{ secrets.HUBSPOT_CONTACT_FORM_ID }}
diff --git a/apps/backend/src/cron.ts b/apps/backend/src/cron.ts
index ad40d414c..9205aac95 100644
--- a/apps/backend/src/cron.ts
+++ b/apps/backend/src/cron.ts
@@ -1,7 +1,7 @@
 import { WebClient } from "@slack/web-api";
 import axios from "axios";
 import { CronJob } from "cron";
-import WebSocket from "ws";
+import { WebSocket } from "ws";
 
 import { prisma } from "@codemod-com/database";
 
@@ -107,10 +107,10 @@ const services: Array<{
   {
     name: "Codemod AI Service",
     url: process.env.CODEMOD_AI_SERVICE_URL ?? "",
-    type: "websocket",
+    type: "http",
     available: true,
     webhook:
-      " https://api.instatus.com/v3/integrations/webhook/clzbu558m93630kcn6fnvj8yk8",
+      "https://api.instatus.com/v3/integrations/webhook/clzbu558m93630kcn6fnvj8yk8",
   },
   {
     name: "Run Service",
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/Chat.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat.tsx
deleted file mode 100644
index 69d99e9ca..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/Chat.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { useAiService } from "@chatbot/useAiService";
-import { memo } from "react";
-import { ChatWindow } from "./ChatWindow";
-import { PromptPanel } from "./PromptPanel";
-
-type Props = {
-  aiProps: ReturnType<typeof useAiService>;
-  className?: string;
-  isSignedIn: boolean;
-};
-
-const ChatBase = ({
-  aiProps: {
-    isLoading,
-    handleStop,
-    reload,
-    messages,
-    input,
-    setInput,
-    startIterativeCodemodGeneration,
-    resetMessages,
-    modGptSubmit,
-    autogenerateTestCases,
-  },
-  className,
-  isSignedIn,
-}: Props) => {
-  return (
-    <>
-      <ChatWindow
-        isLoading={isLoading}
-        messages={messages}
-        isSignedIn={isSignedIn}
-        className={className}
-      />
-      <PromptPanel
-        autogenerateTestCases={autogenerateTestCases}
-        handleSubmit={modGptSubmit}
-        resetMessages={resetMessages}
-        isLoading={isLoading}
-        stop={handleStop}
-        reload={reload}
-        messages={messages}
-        input={input}
-        setInput={setInput}
-        startIterativeCodemodGeneration={startIterativeCodemodGeneration}
-      />
-    </>
-  );
-};
-
-ChatBase.displayName = "Chat";
-export const Chat = memo(ChatBase);
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/Chat/Chat.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/Chat.tsx
new file mode 100644
index 000000000..0ec7e40df
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/modGPT/Chat/Chat.tsx
@@ -0,0 +1,121 @@
+import { useAuth } from "@/app/auth/useAuth";
+import { useSnippetsStore } from "@studio/store/snippets";
+
+import { useCodemodAi } from "../hooks/codemod-ai";
+import { useChatStore } from "../store/chat-state";
+import { ChatMessages } from "./ChatWindow/ChatMessages";
+import { ChatScrollAnchor } from "./ChatWindow/ChatScrollAnchor";
+import { EngineSelector } from "./ChatWindow/ModelSelector";
+import { WelcomeScreen } from "./ChatWindow/WelcomeScreen";
+import { PromptPanel } from "./PromptPanel";
+
+export const Chat = () => {
+  const { getAllSnippets } = useSnippetsStore();
+  const { before, after } = getAllSnippets();
+
+  // initializeChat: (engine: LLMEngine) => {
+  //   const existingChat = get().chats[engine];
+
+  //   const { getToken } = useAuth();
+  //   const aliases = useGetAliases();
+
+  //   const newChat = useChat({
+  //     api: `${env.NEXT_PUBLIC_MODGPT_API_URL}/${SEND_CHAT}`,
+  //     onResponse: (response) => {
+  //       // Handle response
+  //     },
+  //     body: { engine },
+  //   });
+
+  //   set((state) => ({
+  //     chats: {
+  //       ...state.chats,
+  //       [engine]: {
+  //         ...newChat,
+  //         append: async (message) => {
+  //           const token = await getToken();
+  //           const aliasesAppliedValue = applyAliases(
+  //             message.content,
+  //             aliases,
+  //           );
+
+  //           return newChat.append(
+  //             { content: aliasesAppliedValue, role: "user" },
+  //             {
+  //               options: {
+  //                 headers: {
+  //                   "Content-Type": "application/json",
+  //                   Authorization: token ? `Bearer ${token}` : "",
+  //                 },
+  //               },
+  //             },
+  //           );
+  //         },
+  //       },
+  //     },
+  //     isModGptLoading: newChat.isLoading,
+  //   }));
+  // },
+  const { isSignedIn } = useAuth();
+  const { messages, appendMessage, isLoading, reset } = useChatStore();
+
+  const { send: autogenerateTestCases } = useCodemodAi({
+    data: {
+      type: "generate_test",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Codemod created and added to a new tab",
+      }),
+  });
+  const { send: startIterativeCodemodGeneration } = useCodemodAi({
+    data: {
+      type: "generate_codemod",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Codemod created and added to a new tab",
+      }),
+  });
+
+  return (
+    <div>
+      <div className="h-full">
+        {messages.length > 0 && isSignedIn ? (
+          <>
+            <div className="mb-4 ml-auto w-1/3">
+              <EngineSelector />
+            </div>
+            <ChatMessages messages={messages} />
+            <ChatScrollAnchor trackVisibility={isLoading} />
+          </>
+        ) : (
+          <WelcomeScreen />
+        )}
+      </div>
+
+      <PromptPanel
+      // autogenerateTestCases={autogenerateTestCases}
+      // handleSubmit={modGptSubmit}
+      // resetMessages={resetMessages}
+      // isLoading={isLoading}
+      // stop={handleStop}
+      // reload={reload}
+      // messages={messages}
+      // input={input}
+      // setInput={setInput}
+      // startIterativeCodemodGeneration={startIterativeCodemodGeneration}
+      />
+    </div>
+  );
+};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/ChatMessage.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatMessage/ChatMessage.tsx
similarity index 97%
rename from apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/ChatMessage.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatMessage/ChatMessage.tsx
index 7b46e1176..b1817701d 100644
--- a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/ChatMessage.tsx
+++ b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatMessage/ChatMessage.tsx
@@ -1,6 +1,6 @@
+import type { LLMMessage } from "@/app/(website)/studio/features/modgpt/types";
 import CompanyLogoSVG from "@/assets/icons/company_logo.svg";
 import { cn } from "@/utils";
-import type { LLMMessage } from "@chatbot/types";
 import { useTheme } from "@context/useTheme";
 // Inspired by Chatbot-UI and modified to fit the needs of this project
 // @see https://github.com/mckaywrigley/chatbot-ui/blob/main/components/Chat/ChatMessage.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/CodeBlock.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatMessage/CodeBlock.tsx
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/CodeBlock.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatMessage/CodeBlock.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessages.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ChatMessages.tsx
similarity index 88%
rename from apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessages.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ChatMessages.tsx
index b836da7d0..0ecc31013 100644
--- a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessages.tsx
+++ b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ChatMessages.tsx
@@ -1,7 +1,7 @@
+import type { LLMMessage } from "@/app/(website)/studio/features/modgpt/types";
 import { cn } from "@/utils";
-import type { LLMMessage } from "@chatbot/types";
 import { Separator } from "@studio/components/ui/separator";
-import { ChatMessage } from "./ChatMessage";
+import { ChatMessage } from "../ChatMessage/ChatMessage";
 
 interface Props {
   messages: LLMMessage[];
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatScrollAnchor.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ChatScrollAnchor.tsx
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatScrollAnchor.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ChatScrollAnchor.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ModelSelector.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ModelSelector.tsx
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ModelSelector.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/ModelSelector.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/WelcomeScreen.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/WelcomeScreen.tsx
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/WelcomeScreen.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/ChatWindow/WelcomeScreen.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/AliasButtons.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/AliasButtons.tsx
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/AliasButtons.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/AliasButtons.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptButtons.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptButtons.tsx
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptButtons.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptButtons.tsx
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptForm.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptForm.tsx
similarity index 76%
rename from apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptForm.tsx
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptForm.tsx
index 24e19c1f6..a0e2b703f 100644
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptForm.tsx
+++ b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptForm.tsx
@@ -6,37 +6,26 @@ import {
 import Tooltip from "@studio/components/Tooltip/Tooltip";
 import { Button, buttonVariants } from "@studio/components/ui/button";
 import { useEnterSubmit } from "@studio/hooks/useEnterSubmit";
-import type { UseChatHelpers } from "ai/react";
 import * as React from "react";
 import Textarea from "react-textarea-autosize";
+import { useModGPT } from "../../hooks/modgpt";
+import { useChatStore } from "../../store/chat-state";
 
-export interface Props extends Pick<UseChatHelpers, "input" | "setInput"> {
-  onSubmit: (value: string) => Promise<void>;
-  onReset: () => void;
-  isLoading: boolean;
-}
+export const PromptForm = React.forwardRef<HTMLTextAreaElement>(
+  (_props, ref) => {
+    const { isLoading, reset } = useChatStore();
+    const { input, setInput, append } = useModGPT("gpt-4o");
 
-export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
-  ({ onSubmit, onReset, input, setInput, isLoading }, ref) => {
     const { formRef, onKeyDown } = useEnterSubmit();
-    const inputRef = React.useRef<HTMLTextAreaElement>(null);
-
-    React.useEffect(() => {
-      if (inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, []);
 
     return (
       <form
         className="!mt-1"
         onSubmit={async (e) => {
           e.preventDefault();
-          if (!input?.trim()) {
-            return;
-          }
+          if (!input?.trim()) return;
           setInput("");
-          await onSubmit(input);
+          await append({ content: input, role: "user" });
         }}
         ref={formRef}
       >
@@ -47,7 +36,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
                 type="button"
                 onClick={(e) => {
                   e.preventDefault();
-                  onReset();
+                  reset();
                 }}
                 className={cn(
                   buttonVariants({
@@ -66,7 +55,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
 
           <Textarea
             maxRows={5}
-            ref={ref ?? inputRef}
+            ref={ref}
             tabIndex={0}
             onKeyDown={onKeyDown}
             rows={1}
@@ -82,7 +71,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
                 <Button
                   type="submit"
                   size="sm"
-                  disabled={isLoading || input === ""}
+                  disabled={isLoading || !input}
                   variant="outline"
                 >
                   <ArrowElbowDownLeftIcon />
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptPanel.tsx b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptPanel.tsx
new file mode 100644
index 000000000..e0813c8e4
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/PromptPanel.tsx
@@ -0,0 +1,205 @@
+import { useAuth } from "@clerk/nextjs";
+import {
+  ArrowDown as ArrowDownIcon,
+  BracketsCurly,
+  MagicWand,
+  Stop as StopIcon,
+} from "@phosphor-icons/react";
+// import { AliasButtons } from "@/app/(website)/studio/features/modgpt/PromptPanel/AliasButtons";
+// import { ControlButtons } from "@/app/(website)/studio/features/modgpt/PromptPanel/ControlButtons";
+// import { getOrderedAliasList } from "@/app/(website)/studio/features/modgpt/utils";
+// import ButtonWithTooltip from "@/app/(website)/studio/src/components/button/BottonWithTooltip";
+// import { useSnippetsStore } from "@/app/(website)/studio/src/store/snippets";
+import Link from "next/link";
+import { useRef, useState } from "react";
+
+import { cn } from "@/utils";
+import { getOrderedAliasList } from "@features/modgpt/utils";
+import ButtonWithTooltip from "@studio/components/button/BottonWithTooltip";
+import { Button, type ButtonProps } from "@studio/components/ui/button";
+import { useScrollToBottomDetector } from "@studio/hooks/useScrollToBottomDetector";
+import { useGetAliases } from "@studio/store/CFS/alias";
+import { useSnippetsStore } from "@studio/store/snippets";
+import { capitalizeWord } from "@studio/utils/string";
+import { useCodemodAi } from "../../hooks/codemod-ai";
+import { useModGPT } from "../../hooks/modgpt";
+import { useChatStore } from "../../store/chat-state";
+import { PromptForm } from "./PromptForm";
+
+export const ScrollToBottomButton = ({ className, ...props }: ButtonProps) => {
+  const scrollWindow =
+    document.getElementsByClassName("scrollWindow")?.[0] ?? null;
+  const isAtBottom = useScrollToBottomDetector(scrollWindow);
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className={cn(
+        "absolute right-4 bg-background transition-opacity duration-300",
+        isAtBottom ? "opacity-0" : "opacity-100",
+        className,
+      )}
+      onClick={() =>
+        scrollWindow?.scrollTo({
+          top: scrollWindow?.scrollHeight,
+          behavior: "smooth",
+        })
+      }
+      {...props}
+    >
+      <ArrowDownIcon />
+      <span className="sr-only">Scroll to bottom</span>
+    </Button>
+  );
+};
+
+type ControlButtonsProps = {
+  stop: () => void;
+  expandedHelper: boolean;
+  toggleHelper: () => void;
+};
+
+export const ControlButtons = ({
+  stop,
+  expandedHelper,
+  toggleHelper,
+}: ControlButtonsProps) => {
+  const { isLoading } = useChatStore();
+  const { stop } = useModGPT("gpt-4o");
+
+  return (
+    <div className="flex h-10 items-center justify-center m-2">
+      {isLoading && (
+        <Button variant="outline" onClick={stop} className="bg-background">
+          <StopIcon className="mr-2" />
+          Stop generating
+        </Button>
+      )}
+      <Button
+        variant="outline"
+        size="icon"
+        title={
+          expandedHelper
+            ? "Hide recommended prompts & aliases"
+            : "Show recommended prompts & aliases"
+        }
+        onClick={toggleHelper}
+        className={cn(
+          "absolute right-[-65px] top-[10px]",
+          expandedHelper && "bg-accent",
+        )}
+      >
+        <MagicWand />
+      </Button>
+    </div>
+  );
+};
+
+type AliasButtonsProps = {
+  aliasList: string[][];
+  handleInsertValue: (value: string) => void;
+};
+
+export function PromptPanel() {
+  const { isGeneratingCodemod, isLoading, messages, appendMessage } =
+    useChatStore();
+
+  const { getAllSnippets } = useSnippetsStore();
+  const { before, after } = getAllSnippets();
+
+  // maybe move input to global store.
+  const { input, setInput } = useModGPT("gpt-4o");
+  const { send: startCodemodGeneration, abort } = useCodemodAi({
+    data: {
+      type: "generate_codemod",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Codemod created and added to a new tab",
+      }),
+  });
+
+  const textAreaRef = useRef<HTMLTextAreaElement>(null);
+  const [expandedHelper, setExpandedHelper] = useState(true);
+  const { isSignedIn } = useAuth();
+  const aliases = useGetAliases();
+  const aliasList = getOrderedAliasList(aliases);
+
+  return (
+    <div className="chatPanel absolute bottom-0 mx-auto w-full sm:pl-8 sm:pr-16">
+      {isSignedIn && messages.length > 0 && <ScrollToBottomButton />}
+      <ControlButtons
+        isLoading={isLoading}
+        stop={stop}
+        expandedHelper={expandedHelper}
+        toggleHelper={() => setExpandedHelper(!expandedHelper)}
+      />
+      {expandedHelper && (
+        <>
+          <div className="mb-1 flex w-full gap-1 overflow-x-auto px-1 items-center justify-content-center actions">
+            <ButtonWithTooltip
+              tooltipContent={
+                <>
+                  with selected model and Codemod’s iterative AI system.
+                  <Link
+                    style={{ color: "blue" }}
+                    href="https://codemod.com/blog/iterative-ai-system"
+                  >
+                    {" "}
+                    Learn more
+                  </Link>
+                </>
+              }
+              variant="default"
+              size="sm"
+              className="text-white flex gap-1 text-xs my-0 h-8 !py-0 bg-black hover:bg-accent hover:text-black"
+              // className="group my-0 h-8 whitespace-nowrap !py-0 text-xs font-bold bg-primary"
+              onClick={() => startCodemodGeneration()}
+              disabled={isGeneratingCodemod}
+            >
+              Autogenerate with Codemod AI
+            </ButtonWithTooltip>
+          </div>
+
+          <div className="flex w-full gap-1 overflow-x-auto px-1 items-center justify-content-center prompt-builders">
+            {aliasList.map(([label, value]) => (
+              <Button
+                variant="outline"
+                size="sm"
+                key={label}
+                title={value ?? ""}
+                onClick={() => {
+                  if (!label) return;
+
+                  const textArea = textAreaRef.current;
+                  if (textArea) {
+                    const startPos = textArea.selectionStart;
+                    const updatedInput = `${input.substring(0, startPos)} ${value} ${input.substring(
+                      startPos,
+                    )}`;
+                    setInput(updatedInput);
+                    textArea.focus();
+                  }
+                }}
+                className="my-0 h-8 whitespace-nowrap !py-0 text-xs"
+              >
+                <BracketsCurly /> &nbsp;
+                {label &&
+                  capitalizeWord(label.substring(1).replace(/_/gi, " "))}
+              </Button>
+            ))}
+          </div>
+        </>
+      )}
+      <div className="relative">
+        <PromptForm ref={textAreaRef} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/index.ts b/apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/index.ts
similarity index 100%
rename from apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/index.ts
rename to apps/frontend/app/(website)/studio/features/modGPT/Chat/PromptPanel/index.ts
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/index.ts b/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/index.ts
deleted file mode 100644
index bab9ea846..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatMessage/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./ChatMessage";
-export * from "./CodeBlock";
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatWindow.tsx b/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatWindow.tsx
deleted file mode 100644
index 82f5b5057..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/ChatWindow.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cn } from "@/utils";
-import type { LLMMessage } from "@chatbot/types";
-import { ChatMessages } from "./ChatMessages";
-import { ChatScrollAnchor } from "./ChatScrollAnchor";
-import { EngineSelector } from "./ModelSelector";
-import { WelcomeScreen } from "./WelcomeScreen";
-
-interface ChatWindowProps {
-  messages: LLMMessage[];
-  isSignedIn: boolean;
-  isLoading: boolean;
-  className?: string;
-}
-
-export const ChatWindow: React.FC<ChatWindowProps> = ({
-  messages,
-  isSignedIn,
-  isLoading,
-  className,
-}) => {
-  return (
-    <div className={cn("h-full", className)}>
-      {messages.length > 0 && isSignedIn ? (
-        <>
-          <div className="mb-4 ml-auto w-1/3">
-            <EngineSelector />
-          </div>
-          <ChatMessages messages={messages} />
-          <ChatScrollAnchor trackVisibility={isLoading} />
-        </>
-      ) : (
-        <WelcomeScreen />
-      )}
-    </div>
-  );
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/index.ts b/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/index.ts
deleted file mode 100644
index 88aef6140..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/ChatWindow/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from "./ChatMessages";
-export * from "./ChatScrollAnchor";
-export * from "./ChatWindow";
-export * from "./ModelSelector";
-export * from "./WelcomeScreen";
-export * from "./ChatMessage";
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ControlButtons.tsx b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ControlButtons.tsx
deleted file mode 100644
index 12c120a8f..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ControlButtons.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { cn } from "@/utils";
-import { MagicWand, Stop as StopIcon } from "@phosphor-icons/react";
-import { Button } from "@studio/components/ui/button";
-
-type ControlButtonsProps = {
-  isLoading: boolean;
-  stop: () => void;
-  expandedHelper: boolean;
-  toggleHelper: () => void;
-};
-
-export const ControlButtons: React.FC<ControlButtonsProps> = ({
-  isLoading,
-  stop,
-  expandedHelper,
-  toggleHelper,
-}) => (
-  <div className="flex h-10 items-center justify-center m-2">
-    {isLoading && (
-      <Button variant="outline" onClick={stop} className="bg-background">
-        <StopIcon className="mr-2" />
-        Stop generating
-      </Button>
-    )}
-    <Button
-      variant="outline"
-      size="icon"
-      title={
-        expandedHelper
-          ? "Hide recommended prompts & aliases"
-          : "Show recommended prompts & aliases"
-      }
-      onClick={toggleHelper}
-      className={cn(
-        "absolute right-[-65px] top-[10px]",
-        expandedHelper && "bg-accent",
-      )}
-    >
-      <MagicWand />
-    </Button>
-  </div>
-);
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/GenerateTestCasesButton.tsx b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/GenerateTestCasesButton.tsx
deleted file mode 100644
index a1918c1b0..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/GenerateTestCasesButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { cn } from "@/utils";
-import { MagicWand } from "@phosphor-icons/react";
-import Tooltip from "@studio/components/Tooltip/Tooltip";
-import { useEffect } from "react";
-import toast from "react-hot-toast";
-
-export const GenerateTestCasesButton = ({
-  handleButtonClick,
-  isTestCaseGenerated,
-}: {
-  handleButtonClick: () => void;
-  isTestCaseGenerated: boolean;
-}) => {
-  useEffect(() => {
-    const t = toast;
-    if (isTestCaseGenerated) {
-      t.loading("Test case generation in progress...");
-    } else {
-      t.dismiss();
-    }
-  }, [isTestCaseGenerated]);
-  return (
-    <Tooltip
-      trigger={
-        <button
-          onClick={handleButtonClick}
-          className={cn(
-            "cursor-pointer border-hidden align-text-top  p-3 bg-green hover:bg-[#D6FF62]",
-            isTestCaseGenerated && "bg-[#D6FF62]",
-          )}
-        >
-          <MagicWand size={"30px"} />
-        </button>
-      }
-      content={
-        <p>
-          {" "}
-          Generate a new pair of before/after based on your existing code
-          examples OR based on the natural language description.
-        </p>
-      }
-    />
-  );
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptPanel.tsx b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptPanel.tsx
deleted file mode 100644
index b707bbad3..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/PromptPanel.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { AliasButtons } from "@chatbot/PromptPanel/AliasButtons";
-import { ControlButtons } from "@chatbot/PromptPanel/ControlButtons";
-import { WebSocketButton } from "@chatbot/PromptPanel/WebSocketButton";
-import { insertValue } from "@chatbot/PromptPanel/utils";
-import type { useAiService } from "@chatbot/useAiService/useAiService";
-import type { useModGptSubmit } from "@chatbot/useAiService/useModGpt/useModGptSubmit";
-import { getOrderedAliasList } from "@chatbot/utils";
-import { useAuth } from "@clerk/nextjs";
-import { useGetAliases } from "@studio/store/CFS/alias";
-import type { UseChatHelpers } from "ai/react";
-import { useRef, useState } from "react";
-import { PromptForm } from "./PromptForm";
-import { ScrollToBottomButton } from "./ScrollToBottomButton";
-
-export type PromptPanelProps = Pick<
-  UseChatHelpers,
-  "isLoading" | "reload" | "messages" | "stop" | "input" | "setInput"
-> & {
-  handleSubmit: ReturnType<typeof useModGptSubmit>;
-  startIterativeCodemodGeneration: ReturnType<
-    typeof useAiService
-  >["startIterativeCodemodGeneration"];
-  resetMessages: ReturnType<typeof useAiService>["resetMessages"];
-};
-
-export function PromptPanel(props: PromptPanelProps) {
-  const {
-    handleSubmit,
-    isLoading,
-    stop,
-    input,
-    setInput,
-    messages,
-    startIterativeCodemodGeneration,
-    resetMessages,
-  } = props;
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const [expandedHelper, setExpandedHelper] = useState(true);
-  const { isSignedIn } = useAuth();
-  const aliases = useGetAliases();
-  const aliasList = getOrderedAliasList(aliases);
-
-  const handleInsertValue = (value: string) => {
-    const textArea = textAreaRef.current;
-    if (textArea) {
-      const updatedInput = insertValue(textArea, input, value);
-      setInput(updatedInput);
-      textArea.focus();
-    }
-  };
-
-  return (
-    <div className="chatPanel absolute bottom-0 mx-auto w-full sm:pl-8 sm:pr-16">
-      {isSignedIn && messages.length > 0 && <ScrollToBottomButton />}
-      <ControlButtons
-        isLoading={isLoading}
-        stop={stop}
-        expandedHelper={expandedHelper}
-        toggleHelper={() => setExpandedHelper(!expandedHelper)}
-      />
-      {expandedHelper && (
-        <>
-          <div className="mb-1 flex w-full gap-1 overflow-x-auto px-1 items-center justify-content-center actions">
-            <WebSocketButton
-              handleButtonClick={() => startIterativeCodemodGeneration()}
-              isLoading={isLoading}
-            />
-          </div>
-          <AliasButtons
-            aliasList={aliasList}
-            handleInsertValue={handleInsertValue}
-          />
-        </>
-      )}
-      <div className="relative">
-        <PromptForm
-          ref={textAreaRef}
-          onSubmit={handleSubmit}
-          input={input}
-          setInput={setInput}
-          isLoading={isLoading}
-          onReset={resetMessages}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ScrollToBottomButton.tsx b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ScrollToBottomButton.tsx
deleted file mode 100644
index 1df60656a..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/ScrollToBottomButton.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { cn } from "@/utils";
-import { ArrowDown as ArrowDownIcon } from "@phosphor-icons/react";
-import { Button, type ButtonProps } from "@studio/components/ui/button";
-import { useScrollToBottomDetector } from "@studio/hooks/useScrollToBottomDetector";
-
-export const ScrollToBottomButton = ({ className, ...props }: ButtonProps) => {
-  const scrollWindow =
-    document.getElementsByClassName("scrollWindow")?.[0] ?? null;
-  const isAtBottom = useScrollToBottomDetector(scrollWindow);
-
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      className={cn(
-        "absolute right-4 bg-background transition-opacity duration-300",
-        isAtBottom ? "opacity-0" : "opacity-100",
-        className,
-      )}
-      onClick={() =>
-        scrollWindow?.scrollTo({
-          top: scrollWindow?.scrollHeight,
-          behavior: "smooth",
-        })
-      }
-      {...props}
-    >
-      <ArrowDownIcon />
-      <span className="sr-only">Scroll to bottom</span>
-    </Button>
-  );
-};
-
-ScrollToBottomButton.displayName = "ScrollToBottomButton";
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/WebSocketButton.tsx b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/WebSocketButton.tsx
deleted file mode 100644
index 6f699213d..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/WebSocketButton.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { useAiService } from "@chatbot/useAiService";
-import type { useCodemodAI } from "@chatbot/useAiService/codemodAI/useCodemodAI";
-import ButtonWithTooltip from "@studio/components/button/BottonWithTooltip";
-import Link from "next/link";
-
-export const WebSocketButton = ({
-  handleButtonClick,
-  isLoading,
-}: {
-  handleButtonClick: ReturnType<
-    typeof useCodemodAI
-  >["startIterativeCodemodGeneration"];
-  isLoading: ReturnType<typeof useAiService>["isLoading"];
-}) => {
-  return (
-    <ButtonWithTooltip
-      tooltipContent={
-        <>
-          with selected model and Codemod’s iterative AI system.
-          <Link
-            style={{ color: "blue" }}
-            href="https://codemod.com/blog/iterative-ai-system"
-          >
-            {" "}
-            Learn more
-          </Link>
-        </>
-      }
-      variant="default"
-      size="sm"
-      className="text-white flex gap-1 text-xs my-0 h-8 !py-0 bg-black hover:bg-accent hover:text-black"
-      // className="group my-0 h-8 whitespace-nowrap !py-0 text-xs font-bold bg-primary"
-      onClick={handleButtonClick}
-      disabled={isLoading}
-    >
-      Autogenerate with Codemod AI
-    </ButtonWithTooltip>
-  );
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/utils.ts b/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/utils.ts
deleted file mode 100644
index ef68fa583..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/PromptPanel/utils.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const insertValue = (
-  textArea: HTMLTextAreaElement,
-  input: string,
-  value: string,
-) => {
-  const startPos = textArea.selectionStart;
-  return `${input.substring(0, startPos)} ${value} ${input.substring(
-    startPos,
-  )}`;
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/api/fetch-stream.ts b/apps/frontend/app/(website)/studio/features/modGPT/api/fetch-stream.ts
new file mode 100644
index 000000000..140c70c93
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/modGPT/api/fetch-stream.ts
@@ -0,0 +1,26 @@
+export async function fetchStream(opts: {
+  url: string;
+  token: string;
+  onChunk: (chunk: string) => Promise<unknown>;
+  options?: Parameters<typeof fetch>[1];
+}) {
+  const { url, onChunk, options } = opts;
+
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      Authorization: `Bearer ${opts.token}`,
+    },
+  });
+
+  if (response.body === null) {
+    throw new Error("ReadableStream not yet supported in this browser.");
+  }
+
+  for await (const chunk of response.body as any) {
+    if (options?.signal?.aborted) break;
+
+    onChunk(chunk.toString());
+  }
+}
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/api/get-completions.ts b/apps/frontend/app/(website)/studio/features/modGPT/api/get-completions.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/hooks/codemod-ai.tsx b/apps/frontend/app/(website)/studio/features/modGPT/hooks/codemod-ai.tsx
new file mode 100644
index 000000000..0dd28c8c0
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/modGPT/hooks/codemod-ai.tsx
@@ -0,0 +1,100 @@
+import { useCallback, useEffect } from "react";
+
+import { useAuth } from "@/app/auth/useAuth";
+import { env } from "@/env";
+
+import { fetchStream } from "../api/fetch-stream";
+import { useChatStore } from "../store/chat-state";
+import type {
+  CodemodAIFinishedOutput,
+  CodemodAIInput,
+  CodemodAIOutput,
+  CodemodAIProgressOutput,
+  CodemodAITestFinishedOutput,
+} from "../types";
+
+export function useCodemodAi(settings: {
+  data: CodemodAIInput;
+  onFinish?: (
+    finishMessage: CodemodAITestFinishedOutput | CodemodAIFinishedOutput,
+  ) => unknown | Promise<unknown>;
+  onError?: (err: string) => void;
+  onMessage?: (message: CodemodAIProgressOutput) => unknown | Promise<unknown>;
+}) {
+  const { data, onFinish, onError, onMessage } = settings;
+
+  const { getToken } = useAuth();
+  const {
+    setIsGeneratingCodemod,
+    setIsGeneratingTestCases,
+    isGeneratingCodemod,
+    isGeneratingTestCases,
+    messages,
+    appendMessage,
+  } = useChatStore();
+  const { signal, abort } = new AbortController();
+
+  useEffect(() => {
+    return abort;
+  }, [abort]);
+
+  const send = useCallback(async () => {
+    const setLoading = (state: boolean) =>
+      data.type === "generate_test"
+        ? setIsGeneratingTestCases(state)
+        : setIsGeneratingCodemod(state);
+    const token = await getToken();
+    if (token === null) {
+      console.error("unauth");
+      return;
+    }
+
+    setLoading(true);
+    await fetchStream({
+      url: env.NEXT_PUBLIC_CODEMODAI_API_URL,
+      token,
+      options: { method: "POST", body: JSON.stringify(data), signal },
+      onChunk: async (rawData) => {
+        const data = JSON.parse(rawData) as CodemodAIOutput;
+
+        if (data.execution_status === "in_progress") {
+          await onMessage?.(data);
+          appendMessage({
+            role: "assistant",
+            content: data.message,
+          });
+          return;
+        }
+
+        if (data.execution_status === "error") {
+          await onError?.(data.message);
+        } else if (data.execution_status === "finished") {
+          await onFinish?.(data);
+        }
+
+        setLoading(false);
+        return abort();
+      },
+    });
+  }, [
+    getToken,
+    signal,
+    abort,
+    setIsGeneratingCodemod,
+    setIsGeneratingTestCases,
+    data,
+    onFinish,
+    onError,
+    onMessage,
+    appendMessage,
+  ]);
+
+  return {
+    send,
+    abort,
+    isLoading:
+      data.type === "generate_test"
+        ? isGeneratingTestCases
+        : isGeneratingCodemod,
+  };
+}
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/hooks/modgpt.tsx b/apps/frontend/app/(website)/studio/features/modGPT/hooks/modgpt.tsx
new file mode 100644
index 000000000..97feb5d03
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/modGPT/hooks/modgpt.tsx
@@ -0,0 +1,90 @@
+import { useChat } from "ai/react";
+
+import { SEND_CHAT } from "@/app/(website)/studio/src/constants";
+import { env } from "@/env";
+import type { LLMEngine } from "@codemod-com/utilities";
+
+// const useInitializeChat = (engine: LLMEngine) => {
+//   const { chat, setChat, setIsModGptLoading } = useChatStore();
+//   const { getToken } = useAuth();
+//   const aliases = useGetAliases();
+
+//   const newChat = useChat({
+//     api: `${env.NEXT_PUBLIC_MODGPT_API_URL}/${SEND_CHAT}`,
+//   });
+
+//   useEffect(() => {
+//     if (chat) return
+
+//     setChat({
+//       ...newChat,
+//       append: async (message) => {
+//         const token = await getToken();
+//         const aliasesAppliedValue = applyAliases(message.content, aliases);
+
+//         return chat.append(
+//           { content: aliasesAppliedValue, role: "user" },
+//           {
+//             body: { engine },
+//             options: {
+//               headers: {
+//                 "Content-Type": "application/json",
+//                 Authorization: token ? `Bearer ${token}` : "",
+//               },
+//             },
+//           },
+//         );
+//       },
+//     });
+
+//     setIsModGptLoading(chat.isLoading);
+//   }, [chat, engine, getToken, aliases, setChat, setIsModGptLoading, useChat]);
+// };
+
+export const useModGPT = (engine: LLMEngine) => {
+  return useChat({
+    api: `${env.NEXT_PUBLIC_MODGPT_API_URL}/${SEND_CHAT}`,
+  });
+};
+
+// export const useModGPT = (engine: LLMEngine): ReturnType<typeof useChat> => {
+//   const { setIsModGptLoading } = useChatStore();
+//   const { getToken } = useAuth();
+//   const aliases = useGetAliases();
+//   const { chat, initializeChat } = useChatStore();
+
+//   useEffect(() => {
+//     setIsModGptLoading(chat?.isLoading ?? false);
+//   }, [chat?.isLoading, setIsModGptLoading]);
+
+//   // Create a new chat instance if none exists
+
+//   useEffect(() => {
+//     if (!chat) {
+//       initializeChat(engine);
+//     }
+//   }, [chat, engine, initializeChat]);
+
+//   // Save the new chat instance to the Zustand store
+//   setChat({
+//     ...chat,
+//     append: async (message) => {
+//       const token = await getToken();
+//       const aliasesAppliedValue = applyAliases(message.content, aliases);
+
+//       return chat.append(
+//         { content: aliasesAppliedValue, role: "user" },
+//         {
+//           options: {
+//             headers: {
+//               "Content-Type": "application/json",
+//               Authorization: token ? `Bearer ${token}` : "",
+//             },
+//           },
+//         },
+//       );
+//     },
+//   });
+
+//   return chat;
+// };
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/store/chat-state.ts b/apps/frontend/app/(website)/studio/features/modGPT/store/chat-state.ts
new file mode 100644
index 000000000..c9fda7be1
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/modGPT/store/chat-state.ts
@@ -0,0 +1,62 @@
+import type { LLMEngine } from "@codemod-com/utilities";
+import type { useChat } from "ai/react";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import type { LLMMessage } from "../types";
+
+export type ChatStore = {
+  chat: ReturnType<typeof useChat> | null;
+  setChat: (chat: ReturnType<typeof useChat>) => void;
+
+  messages: LLMMessage[];
+  appendMessage: (message: LLMMessage) => void;
+  reset: (engine: LLMEngine) => void;
+
+  isLoading: boolean;
+
+  isModGptLoading: boolean;
+  setIsModGptLoading: (isModGptLoading: boolean) => void;
+
+  isGeneratingCodemod: boolean;
+  setIsGeneratingCodemod: (isGenerating: boolean) => void;
+
+  isGeneratingTestCases: boolean;
+  setIsGeneratingTestCases: (isGenerating: boolean) => void;
+};
+
+export const useChatStore = create<ChatStore>()(
+  persist(
+    (set, get) => ({
+      chat: null,
+      setChat: (chat) => set((state) => ({ ...state, chat })),
+
+      messages: [],
+      appendMessage: (message) =>
+        set((state) => ({
+          ...state,
+          messages: [...(state.messages || []), message],
+        })),
+      reset: (engine) =>
+        set((state) => ({
+          messages: { ...state.messages, [engine]: [] },
+        })),
+
+      isLoading:
+        get().isGeneratingCodemod ||
+        get().isGeneratingTestCases ||
+        get().isModGptLoading,
+
+      isModGptLoading: false,
+      setIsModGptLoading: (isModGptLoading) => set({ isModGptLoading }),
+
+      isGeneratingCodemod: false,
+      setIsGeneratingCodemod: (isGenerating) =>
+        set({ isGeneratingCodemod: isGenerating }),
+
+      isGeneratingTestCases: false,
+      setIsGeneratingTestCases: (isGenerating) =>
+        set({ isGeneratingTestCases: isGenerating }),
+    }),
+    { name: "chat-store", storage: createJSONStorage(() => sessionStorage) },
+  ),
+);
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/types.ts b/apps/frontend/app/(website)/studio/features/modGPT/types.ts
index 5454db979..f18eb58bb 100644
--- a/apps/frontend/app/(website)/studio/features/modGPT/types.ts
+++ b/apps/frontend/app/(website)/studio/features/modGPT/types.ts
@@ -1,19 +1,46 @@
-import type { Message } from "ai";
-
 export type LLMMessage = {
   content: string;
   role: "function" | "assistant" | "data" | "system" | "user";
-  id: string;
+  // id: string;
   codemod?: string;
   name?: string;
 };
 
-export type MessageToWs = {
-  execution_status: "in-progress" | "finished" | "error";
+export type CodemodAIInput = {
+  type: "generate_codemod" | "generate_test" | "refine_codemod";
+  codemod_engine?: "jscodeshift";
+  llm_engine?: "gpt-4" | "gpt-4o" | "gpt-4-turbo";
+  attempts?: number;
+  seed?: number;
+  before: string[];
+  after: string[];
+  description: string;
+  context: string;
+};
+
+export type CodemodAIProgressOutput = {
+  execution_status: "in_progress";
   message: string;
-  error?: string;
-  codemod?: string;
-  id: string;
 };
 
-export type MessageFromWs = Message & { codemod?: string };
+export type CodemodAIErrorOutput = {
+  execution_status: "error";
+  message: string;
+};
+
+export type CodemodAIFinishedOutput = {
+  execution_status: "finished";
+  codemod: string;
+};
+
+export type CodemodAITestFinishedOutput = {
+  execution_status: "finished";
+  before: string[];
+  after: string[];
+};
+
+export type CodemodAIOutput =
+  | CodemodAIProgressOutput
+  | CodemodAIErrorOutput
+  | CodemodAIFinishedOutput
+  | CodemodAITestFinishedOutput;
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/index.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/index.ts
deleted file mode 100644
index 847a047cc..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./useCodemodAI";
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/useCodemodAI.tsx b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/useCodemodAI.tsx
deleted file mode 100644
index 8e3cae959..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/codemodAI/useCodemodAI.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { useAuth } from "@/app/auth/useAuth";
-import { LEARN_KEY } from "@/constants";
-import { env } from "@/env";
-import type { LLMMessage, MessageFromWs, MessageToWs } from "@chatbot/types";
-import type { LLMEngine } from "@codemod-com/utilities";
-import { useModStore } from "@studio/store/mod";
-import { useSnippetsStore } from "@studio/store/snippets";
-import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
-
-type MessageToSend = {
-  config: { llm_engine: LLMEngine; generate_test?: boolean };
-  previous_context: LLMMessage[];
-  before: string[];
-  after: string[];
-};
-
-export const useCodemodAI = ({
-  setToken,
-  messages,
-  engine,
-}: {
-  setToken: (token: string | null) => void;
-  messages: LLMMessage[];
-  engine: LLMEngine;
-}) => {
-  const [ws, setWs] = useState<WebSocket | null>(null);
-  const [wsMessage, setWsMessage] = useState<MessageFromWs>();
-  const { command, setCurrentCommand } = useModStore();
-  const { getAllSnippets, addPair } = useSnippetsStore();
-  const [isWsConnected, setIsWsConnected] = useState(false);
-  const [serviceBusy, setServiceBusy] = useState(false);
-  const { getToken } = useAuth();
-  const [isTestCaseGenerated, setIsTestCaseGenerated] = useState(false);
-
-  const emitMessage = async (message: MessageToSend) => {
-    const token = await getToken();
-    setToken(token);
-    ws?.send(JSON.stringify({ ...message, token }));
-  };
-
-  const handleError = (error: any) => {
-    setServiceBusy(false);
-    if (error.severity === "user") {
-      toast.error(`WebSocket Error: ${error.message || "websocket crashed"}`);
-    } else {
-      console.error(error);
-    }
-  };
-
-  const onMessage = async (data: MessageToWs) => {
-    if (data.execution_status === "heartbeat") return;
-    if (data.error || data.execution_status === "error") {
-      handleError(data);
-    } else if (data.codemod) {
-      setWsMessage({
-        codemod: data.codemod,
-        content: `\`\`\`ts ${data.codemod}\`\`\``,
-        role: "assistant",
-        id: Date.now().toString(),
-      });
-      setServiceBusy(false);
-    } else if (data.before) {
-      setIsTestCaseGenerated(false);
-      setWsMessage({
-        content: `Test cases created and added to a new test tab`,
-        role: "assistant",
-        id: Date.now().toString(),
-      });
-      addPair(undefined, data);
-    } else {
-      setWsMessage({
-        content: data.message,
-        role: "assistant",
-        id: Date.now().toString(),
-      });
-    }
-  };
-
-  const connectWebSocket = async () => {
-    const token = await getToken();
-    if (token) {
-      const websocket = new WebSocket(env.NEXT_PUBLIC_WS_URL as string);
-      setWs(websocket);
-
-      websocket.onopen = () => {
-        console.info("WebSocket connection established");
-        setIsWsConnected(true);
-      };
-      websocket.onmessage = (event) => onMessage(JSON.parse(event.data));
-      websocket.onerror = handleError;
-      websocket.onclose = () => setIsWsConnected(false);
-
-      return () => {
-        websocket.close();
-        setIsWsConnected(false);
-        setServiceBusy(false);
-      };
-    }
-  };
-
-  useEffect(() => {
-    connectWebSocket();
-  }, []);
-
-  const { before: beforeSnippets, after: afterSnippets } = getAllSnippets();
-  const isEnvPrepared =
-    ws && beforeSnippets.length && afterSnippets.length && isWsConnected;
-
-  const autogenerateTestCases = async () => {
-    if (isEnvPrepared) {
-      setIsTestCaseGenerated(true);
-      setWsMessage({
-        content: `Generate test cases`,
-        role: "user",
-        id: Date.now().toString(),
-      });
-      emitMessage({
-        config: { llm_engine: engine, generate_test: true },
-        previous_context: [],
-        before: beforeSnippets,
-        after: afterSnippets,
-      });
-    }
-  };
-
-  const startIterativeCodemodGeneration = async (
-    content = `Generate codemod with AI`,
-  ) => {
-    if (isEnvPrepared) {
-      setWsMessage({
-        content,
-        role: "user",
-        id: Date.now().toString(),
-      });
-      emitMessage({
-        config: { llm_engine: engine },
-        previous_context: messages,
-        before: beforeSnippets,
-        after: afterSnippets,
-      });
-      setServiceBusy(true);
-    }
-  };
-
-  useEffect(() => {
-    if (command === LEARN_KEY && isWsConnected) {
-      startIterativeCodemodGeneration(
-        "Codemod learn: generate codemod with AI",
-      );
-      setCurrentCommand(null);
-    }
-  }, [command, isEnvPrepared, isWsConnected]);
-
-  return {
-    stopCodemodAi: () => {
-      ws?.close();
-      connectWebSocket();
-      setIsWsConnected(false);
-      setServiceBusy(false);
-    },
-    startIterativeCodemodGeneration,
-    wsMessage,
-    serviceBusy,
-    autogenerateTestCases,
-    isTestCaseGenerated,
-  };
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/index.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/index.ts
deleted file mode 100644
index 73db92e23..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./useAiService";
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useAiService.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useAiService.ts
deleted file mode 100644
index 5d30549c7..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useAiService.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import type { LLMMessage } from "@chatbot/types";
-import { useCodemodAI } from "@chatbot/useAiService/codemodAI/useCodemodAI";
-import { useModGPT } from "@chatbot/useAiService/useModGpt";
-import {
-  useInitialMss,
-  useSaveMssgsToLocalStorage,
-} from "@chatbot/useAiService/utils";
-import type { LLMEngine } from "@codemod-com/utilities";
-import { useEffect, useState } from "react";
-import toast from "react-hot-toast";
-
-const showCodemodCopiedToast = () =>
-  toast.success("Codemod copied to the right pane", {
-    position: "top-center",
-    duration: 12000,
-  });
-export const useAiService = ({
-  setCodemod,
-  engine,
-}: {
-  setCodemod: (content: string) => void;
-  engine: LLMEngine;
-}) => {
-  const initialMessages = useInitialMss();
-
-  const [messages, setMessages] = useState<LLMMessage[]>([]);
-
-  useEffect(() => {
-    setMessages(initialMessages);
-  }, [initialMessages]);
-
-  const {
-    isLoading: modGptLoading,
-    modGptSubmit,
-    messages: modGPTMessages,
-    setMessages: setModGPTMessages,
-    append: appendModGPTMessages,
-    setToken,
-    ...restMod
-  } = useModGPT({ initialMessages: [], engine });
-
-  const {
-    wsMessage: codemodAIMessage,
-    autogenerateTestCases,
-    startIterativeCodemodGeneration,
-    serviceBusy,
-    stopCodemodAi,
-    isTestCaseGenerated,
-  } = useCodemodAI({
-    messages,
-    engine,
-    setToken,
-  });
-
-  const lastModGptMss = modGPTMessages?.at(-1);
-  const lastMss = messages?.at(-1);
-
-  useEffect(() => {
-    if (!codemodAIMessage) return;
-
-    const updateMessages =
-      lastMss?.role === "assistant"
-        ? () =>
-            messages.with(-1, {
-              ...lastMss,
-              content: `${lastMss.content}\n\n${codemodAIMessage.content}`,
-            })
-        : (m: LLMMessage[]) => [...m, codemodAIMessage];
-    setMessages(updateMessages);
-
-    if (codemodAIMessage.codemod) {
-      showCodemodCopiedToast();
-      appendModGPTMessages({
-        name: "app",
-        role: "user",
-        content: `This is a codemod generated: ${codemodAIMessage.codemod}. Remember it. Reply with just a single sentence - asking if a user wants to know more about generated codemod"`,
-      });
-      setCodemod(codemodAIMessage.codemod);
-    }
-  }, [codemodAIMessage]);
-
-  useEffect(() => {
-    if (!lastModGptMss?.content) return;
-
-    const index = messages.findIndex(({ id }) => id === lastModGptMss.id);
-    const updateMessages =
-      index > -1
-        ? () => messages.with(index, lastModGptMss)
-        : (m: LLMMessage[]) => [...m, lastModGptMss];
-    setMessages(updateMessages);
-  }, [lastModGptMss?.content]);
-
-  const resetMessages = () => {
-    setMessages([]);
-    localStorage.removeItem("frozenMessages");
-  };
-
-  const isLoading = serviceBusy || modGptLoading;
-  useSaveMssgsToLocalStorage({ messages, isLoading });
-
-  return {
-    ...restMod,
-    handleStop: () => (serviceBusy ? stopCodemodAi() : restMod.handleStop()),
-    resetMessages,
-    isLoading,
-    messages,
-    setMessages,
-    modGptSubmit,
-    startIterativeCodemodGeneration,
-    autogenerateTestCases,
-    isTestCaseGenerated,
-  };
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/index.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/index.ts
deleted file mode 100644
index 457a19199..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./utils";
-export * from "./useModGpt";
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/useModGpt.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/useModGpt.ts
deleted file mode 100644
index 3b04fdbe7..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/useModGpt.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { SEND_CHAT } from "@/app/(website)/studio/src/constants";
-import { env } from "@/env";
-import { useModGptSubmit } from "@chatbot/useAiService/useModGpt/useModGptSubmit";
-import { onResponse } from "@chatbot/utils";
-import type { LLMEngine } from "@codemod-com/utilities";
-import { useModStore } from "@studio/store/mod";
-import type { Message } from "ai";
-import { useChat } from "ai/react";
-import { useCallback, useState } from "react";
-import { getHeadersWithAuth } from "./utils";
-
-export const useModGPT = ({
-  initialMessages,
-  id,
-  engine,
-}: { initialMessages: Message[]; id?: string; engine: LLMEngine }) => {
-  const { setCurrentCommand } = useModStore();
-
-  const [token, setToken] = useState<string | null>(null);
-  const chat = useChat({
-    api: `${env.NEXT_PUBLIC_AI_API_URL}/${SEND_CHAT}`,
-    initialMessages,
-    id,
-    onResponse,
-    headers: getHeadersWithAuth(token),
-    body: {
-      engine,
-    },
-  });
-
-  const modGptSubmit = useModGptSubmit({ id, setToken, ...chat });
-
-  const handleStop = useCallback(() => {
-    setCurrentCommand(null);
-    global.stop();
-  }, [setCurrentCommand, global.stop]);
-
-  return {
-    id,
-    handleStop,
-    setToken,
-    modGptSubmit,
-    ...chat,
-  };
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/useModGptSubmit.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/useModGptSubmit.ts
deleted file mode 100644
index 985c9830e..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/useModGptSubmit.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useAuth } from "@auth/useAuth";
-import { getHeadersWithAuth } from "@chatbot/useAiService/useModGpt/utils";
-import { applyAliases, useGetAliases } from "@studio/store/CFS/alias";
-import type { UseChatHelpers } from "ai/react/dist";
-import type { Dispatch, SetStateAction } from "react";
-
-export const useModGptSubmit = ({
-  id,
-  append,
-  setToken,
-  isLoading,
-}: {
-  id?: string;
-  setToken: Dispatch<SetStateAction<string | null>>;
-} & Pick<UseChatHelpers, "append" | "isLoading">) => {
-  const { getToken } = useAuth();
-  const aliases = useGetAliases();
-  return async (value: string) => {
-    if (!isLoading) {
-      const token = await getToken();
-      setToken(token);
-      const aliasesAppliedValue = applyAliases(value, aliases);
-      await append(
-        { id, content: aliasesAppliedValue, role: "user" },
-        { options: { headers: getHeadersWithAuth(token) } },
-      );
-    }
-  };
-};
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/utils.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/utils.ts
deleted file mode 100644
index c6bef31ea..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/useModGpt/utils.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const getHeadersWithAuth = (token: string | null) => ({
-  "Content-Type": "application/json",
-  Authorization: token ? `Bearer ${token}` : "",
-});
diff --git a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/utils.ts b/apps/frontend/app/(website)/studio/features/modGPT/useAiService/utils.ts
deleted file mode 100644
index 606e1df03..000000000
--- a/apps/frontend/app/(website)/studio/features/modGPT/useAiService/utils.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import {
-  freezeMessage,
-  parseFrozenMessages,
-  unfreezeMessage,
-} from "@studio/schemata/chatSchemata";
-import type { Message } from "ai";
-import { useEffect, useState } from "react";
-
-export const useInitialMss = () => {
-  const [initialMessages, setInitialMessages] = useState<Message[]>([]);
-  useEffect(() => {
-    const stringifiedFrozenMessages = localStorage?.getItem("frozenMessages");
-    try {
-      if (!stringifiedFrozenMessages) {
-        return setInitialMessages([]);
-      }
-      const messagesToSet = parseFrozenMessages(
-        JSON.parse(stringifiedFrozenMessages),
-      ).map(unfreezeMessage);
-      return setInitialMessages(messagesToSet);
-    } catch (error) {
-      console.error(error);
-      return setInitialMessages([]);
-    }
-  }, []);
-  return initialMessages;
-};
-
-export const useSaveMssgsToLocalStorage = ({
-  isLoading,
-  messages,
-}: { isLoading: boolean; messages: Message[] }) => {
-  useEffect(() => {
-    if (isLoading) {
-      return;
-    }
-
-    const frozenMessages = messages.map((message) => freezeMessage(message));
-
-    try {
-      localStorage.setItem("frozenMessages", JSON.stringify(frozenMessages));
-    } catch (error) {
-      console.error(error);
-    }
-  }, [messages, isLoading]);
-};
diff --git a/apps/frontend/app/(website)/studio/features/test-cases/TestTabsComponent.tsx b/apps/frontend/app/(website)/studio/features/test-cases/TestTabsComponent.tsx
new file mode 100644
index 000000000..ba43af34e
--- /dev/null
+++ b/apps/frontend/app/(website)/studio/features/test-cases/TestTabsComponent.tsx
@@ -0,0 +1,178 @@
+import { cn } from "@/utils";
+import { MagicWand } from "@phosphor-icons/react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import * as Tabs from "@radix-ui/react-tabs";
+import Tooltip from "@studio/components/Tooltip/Tooltip";
+import { useSnippetsStore } from "@studio/store/snippets";
+import { useCodemodAi } from "../modgpt/hooks/codemod-ai";
+import { useChatStore } from "../modgpt/store/chat-state";
+
+const GenerateTestCasesButton = () => {
+  const { isGeneratingTestCases } = useChatStore();
+  const { addPair } = useSnippetsStore();
+
+  return (
+    <>
+      <button
+        type="button"
+        className="add-tab-button"
+        onClick={() => addPair()}
+      >
+        +
+      </button>
+      <Tooltip
+        trigger={
+          <button
+            type="submit"
+            onClick={() => {}}
+            className={cn(
+              "cursor-pointer border-hidden align-text-top  p-3 bg-green hover:bg-[#D6FF62]",
+              isGeneratingTestCases && "bg-[#D6FF62]",
+            )}
+          >
+            <MagicWand size={"30px"} />
+          </button>
+        }
+        content={
+          <p>
+            {" "}
+            Generate a new pair of before/after based on your existing code
+            examples OR based on the natural language description.
+          </p>
+        }
+      />
+    </>
+  );
+};
+
+export const TestTabsComponent = () => {
+  const {
+    getSelectedEditors,
+    getAllSnippets,
+    addPair,
+    removePair,
+    selectedPairIndex,
+    setSelectedPairIndex,
+    editors,
+    // renameEditor,
+    getHasReachedTabsLimit,
+  } = useSnippetsStore();
+
+  const { messages, appendMessage } = useChatStore();
+  const { before, after } = getAllSnippets();
+
+  const { send: initiateTestGeneration, isLoading } = useCodemodAi({
+    data: {
+      type: "generate_test",
+      before,
+      after,
+      context: "",
+      description: "",
+    },
+    onFinish: () =>
+      appendMessage({
+        role: "assistant",
+        content: "Test case created and added to a new test tab",
+      }),
+  });
+
+  // const [editingIndex, setEditingIndex] = useState(null);
+  // const [newName, setNewName] = useState("");
+  // const tabsRef = useRef(null);
+  // const inputRef = useRef(null);
+  // const [isEditedNameAlreadyInUse, setIsEditedNameAlreadyInUse] =
+  //   useState(false);
+  // const { activateModGpt } = useViewStore();
+
+  // useEffect(() => {
+  //   if (inputRef.current) {
+  //     setTimeout(() => inputRef.current.focus(), 0);
+  //   }
+  // }, [editingIndex]);
+
+  // const handleRename = (index) => {
+  //   setEditingIndex(index);
+  //   setNewName(editors[index].name);
+  // };
+
+  // const handleBlur = (index) => {
+  //   if (
+  //     newName.trim() === "" ||
+  //     editors.some((editor, i) => editor.name === newName && i !== index)
+  //   ) {
+  //     handleRename(index);
+  //   } else {
+  //     renameEditor(index)(newName);
+  //   }
+  //   setEditingIndex(null);
+  //   setIsEditedNameAlreadyInUse(false);
+  // };
+
+  // const onChange = (e) => {
+  //   const value = e.target.value;
+  //   setIsEditedNameAlreadyInUse(
+  //     editors.some((editor) => editor.name === value),
+  //   );
+  //   setNewName(value);
+  // };
+
+  // const handleKeyPress = (e, index) => {
+  //   if (e.key === "Enter") {
+  //     handleBlur(index);
+  //   }
+  // };
+
+  return (
+    <Tabs.Root defaultValue="0" className="tabs">
+      <Tabs.List className="tabs-list overflow-x-auto" ref={tabsRef}>
+        {editors.map((editor, i) => (
+          <div
+            key={editor.name}
+            className={cn(
+              isEditedNameAlreadyInUse && "input-error",
+              "tab-item",
+              selectedPairIndex === i && "active",
+            )}
+          >
+            <Tabs.Trigger
+              className={cn("tab-trigger")}
+              onClick={() => setSelectedPairIndex(i)}
+              onDoubleClick={() => handleRename(i)}
+              value={String(i)}
+            >
+              {editingIndex === i ? (
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={newName}
+                  style={{ padding: "0", margin: 0 }}
+                  onChange={onChange}
+                  onBlur={() => handleBlur(i)}
+                  onKeyDown={(e) => handleKeyPress(e, i)}
+                />
+              ) : (
+                editor.name
+              )}
+            </Tabs.Trigger>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <button type="button" className="dots-button">
+                  ⋮
+                </button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content className="dropdown-menu-content">
+                <DropdownMenu.Item
+                  className="dropdown-menu-item"
+                  onClick={() => removePair(i)}
+                >
+                  Remove Snippet
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </div>
+        ))}
+        {!getHasReachedTabsLimit() && <GenerateTestCasesButton />}
+      </Tabs.List>
+    </Tabs.Root>
+  );
+};
diff --git a/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx b/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx
index 47d44e795..3c1338774 100644
--- a/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx
+++ b/apps/frontend/app/(website)/studio/main/5PaneSetup.tsx
@@ -1,5 +1,4 @@
 import { cn } from "@/utils";
-import { useAiService } from "@chatbot/useAiService";
 import type { KnownEngines } from "@codemod-com/utilities";
 import { useTheme } from "@context/useTheme";
 import Panel from "@studio/components/Panel";
@@ -13,16 +12,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@studio/components/ui/select";
+import { TestTabsComponent } from "@studio/features/test-cases/TestTabsComponent";
 import { VisibilityIcon } from "@studio/icons";
-import { TestTabsComponent } from "@studio/main/PageBottomPane/TestTabsComponent";
 import { AssistantTab } from "@studio/main/PaneLayout";
 import { LoginWarningModal } from "@studio/main/PaneLayout/LoginWarningModal";
 import { enginesConfig } from "@studio/main/PaneLayout/enginesConfig";
-import { useCFSStore } from "@studio/store/CFS";
-import { useModStore } from "@studio/store/mod";
 import { useSnippetsStore } from "@studio/store/snippets";
 import { useRef } from "react";
 import { PanelGroup } from "react-resizable-panels";
+import { useCFSStore } from "../src/store/CFS";
+import { useModStore } from "../src/store/mod";
 import Codemod from "./Codemod";
 import { Header } from "./Header/Header";
 import Layout from "./Layout";
@@ -45,10 +44,6 @@ const Main = () => {
     AIAssistant: { engine: llmEngine },
   } = useCFSStore();
 
-  const aiAssistantData = useAiService({
-    setCodemod: setContent,
-    engine: llmEngine,
-  });
   const onEngineChange = (value: (typeof enginesConfig)[number]["value"]) => {
     setEngine(value as KnownEngines);
   };
@@ -140,7 +135,7 @@ const Main = () => {
       className="bg-gray-bg assistant"
     >
       <AssistantTab
-        aiAssistantData={aiAssistantData}
+        // aiAssistantData={aiAssistantData}
         panelRefs={panelRefs}
         beforePanel={beforePanel}
         afterPanel={afterPanel}
@@ -206,10 +201,7 @@ const Main = () => {
               panelRefs={panelRefs}
               className="bg-gray-bg"
             >
-              <TestTabsComponent
-                isTestCaseGenerated={aiAssistantData.isTestCaseGenerated}
-                autogenerateTestCases={aiAssistantData.autogenerateTestCases}
-              />
+              <TestTabsComponent />
               <PanelGroup direction="horizontal">
                 {beforeAndAfterPanel}
                 <ResizeHandle direction="horizontal" />
diff --git a/apps/frontend/app/(website)/studio/main/PageBottomPane/TestTabsComponent.tsx b/apps/frontend/app/(website)/studio/main/PageBottomPane/TestTabsComponent.tsx
deleted file mode 100644
index 24226dbc9..000000000
--- a/apps/frontend/app/(website)/studio/main/PageBottomPane/TestTabsComponent.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { cn } from "@/utils";
-import { GenerateTestCasesButton } from "@chatbot/PromptPanel/GenerateTestCasesButton";
-import type { useAiService } from "@chatbot/useAiService";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import * as Tabs from "@radix-ui/react-tabs";
-import { useSnippetsStore } from "@studio/store/snippets";
-import { useViewStore } from "@studio/store/view";
-import { useEffect, useRef, useState } from "react";
-
-export const TestTabsComponent = ({
-  autogenerateTestCases,
-  isTestCaseGenerated,
-}: {
-  autogenerateTestCases: ReturnType<typeof useAiService>[
-    | "autogenerateTestCases"
-    | "isTestCaseGenerated"];
-}) => {
-  const {
-    getSelectedEditors,
-    addPair,
-    removePair,
-    selectedPairIndex,
-    setSelectedPairIndex,
-    editors,
-    renameEditor,
-    getHasReachedTabsLimit,
-  } = useSnippetsStore();
-
-  const [editingIndex, setEditingIndex] = useState(null);
-  const [newName, setNewName] = useState("");
-  const tabsRef = useRef(null);
-  const inputRef = useRef(null);
-  const [isEditedNameAlreadyInUse, setIsEditedNameAlreadyInUse] =
-    useState(false);
-  const { activateModGpt } = useViewStore();
-
-  useEffect(() => {
-    if (inputRef.current) {
-      setTimeout(() => inputRef.current.focus(), 0);
-    }
-  }, [editingIndex]);
-
-  const handleRename = (index) => {
-    setEditingIndex(index);
-    setNewName(editors[index].name);
-  };
-
-  const handleBlur = (index) => {
-    if (
-      newName.trim() === "" ||
-      editors.some((editor, i) => editor.name === newName && i !== index)
-    ) {
-      handleRename(index);
-    } else {
-      renameEditor(index)(newName);
-    }
-    setEditingIndex(null);
-    setIsEditedNameAlreadyInUse(false);
-  };
-
-  const onChange = (e) => {
-    const value = e.target.value;
-    setIsEditedNameAlreadyInUse(
-      editors.some((editor) => editor.name === value),
-    );
-    setNewName(value);
-  };
-
-  const handleKeyPress = (e, index) => {
-    if (e.key === "Enter") {
-      handleBlur(index);
-    }
-  };
-
-  return (
-    <Tabs.Root defaultValue="0" className="tabs">
-      <Tabs.List className="tabs-list overflow-x-auto" ref={tabsRef}>
-        {editors.map((editor, i) => (
-          <div
-            key={editor.name}
-            className={cn(
-              isEditedNameAlreadyInUse && "input-error",
-              "tab-item",
-              selectedPairIndex === i && "active",
-            )}
-          >
-            <Tabs.Trigger
-              className={cn("tab-trigger")}
-              onClick={() => setSelectedPairIndex(i)}
-              onDoubleClick={() => handleRename(i)}
-              value={String(i)}
-            >
-              {editingIndex === i ? (
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={newName}
-                  style={{ padding: "0", margin: 0 }}
-                  onChange={onChange}
-                  onBlur={() => handleBlur(i)}
-                  onKeyPress={(e) => handleKeyPress(e, i)}
-                />
-              ) : (
-                editor.name
-              )}
-            </Tabs.Trigger>
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger asChild>
-                <button className="dots-button">⋮</button>
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content className="dropdown-menu-content">
-                <DropdownMenu.Item
-                  className="dropdown-menu-item"
-                  onClick={() => removePair(i)}
-                >
-                  Remove Snippet
-                </DropdownMenu.Item>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </div>
-        ))}
-        {!getHasReachedTabsLimit() && (
-          <>
-            <button className="add-tab-button" onClick={() => addPair()}>
-              +
-            </button>
-            <GenerateTestCasesButton
-              isTestCaseGenerated={isTestCaseGenerated}
-              handleButtonClick={autogenerateTestCases}
-            />
-          </>
-        )}
-      </Tabs.List>
-    </Tabs.Root>
-  );
-};
diff --git a/apps/frontend/app/(website)/studio/main/PaneLayout/AssistantTabs.tsx b/apps/frontend/app/(website)/studio/main/PaneLayout/AssistantTabs.tsx
index 2018491a3..2e39f900e 100644
--- a/apps/frontend/app/(website)/studio/main/PaneLayout/AssistantTabs.tsx
+++ b/apps/frontend/app/(website)/studio/main/PaneLayout/AssistantTabs.tsx
@@ -1,5 +1,4 @@
 import { cn } from "@/utils";
-import type { useAiService } from "@chatbot/useAiService";
 import { useAuth } from "@clerk/nextjs";
 import Text from "@studio/components/Text";
 import {
@@ -9,15 +8,19 @@ import {
   TabsTrigger,
 } from "@studio/components/ui/tabs";
 import type { PanelData, PanelsRefs } from "@studio/main/PageBottomPane";
-import {
-  type TabContent,
-  type TabHeader,
-  type TabsWithContents,
-  useTabsData,
-} from "@studio/main/PaneLayout/tabsData";
 import { useSnippetsStore } from "@studio/store/snippets";
 import { TabNames, useViewStore } from "@studio/store/view";
-import { useCallback, useEffect, useRef } from "react";
+import { type ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
+import { PanelGroup } from "react-resizable-panels";
+import { Chat } from "../../features/modgpt/Chat/Chat";
+import LiveIcon from "../../src/icons/LiveIcon";
+import { AstSection } from "../ASTViewer/AstSectionBase";
+import Table from "../Log/Table";
+import { SignInRequired } from "./SignInRequired";
+
+export type TabsWithContents = { tabs: ReactNode[]; contents: ReactNode[] };
+export type TabHeader = { value: string; name: ReactNode };
+export type TabContent = TabHeader & { content: ReactNode };
 
 const reduceTabs = (acc: TabsWithContents, { value, name }: TabHeader) => [
   ...acc.tabs,
@@ -30,12 +33,12 @@ export const AssistantTab = ({
   panelRefs,
   beforePanel,
   afterPanel,
-  aiAssistantData,
+  // aiAssistantData,
 }: {
   panelRefs: PanelsRefs;
   beforePanel: PanelData;
   afterPanel: PanelData;
-  aiAssistantData: ReturnType<typeof useAiService>;
+  // aiAssistantData: ReturnType<typeof useAiService>;
 }) => {
   const { activeTab } = useViewStore();
   const { engine } = useSnippetsStore();
@@ -80,22 +83,57 @@ export const AssistantTab = ({
     </TabsContent>,
   ];
 
-  const tabsData = useTabsData({
-    beforePanel,
-    afterPanel,
-    isSignedIn,
-    engine,
-    panelRefs,
-    aiAssistantData,
-  })
-    .filter(Boolean)
-    .reduce(
-      (acc: TabsWithContents, curr) => ({
-        tabs: reduceTabs(acc, curr),
-        contents: reduceContents(acc, curr),
-      }),
-      { tabs: [], contents: [] },
-    );
+  const tabs = useMemo(
+    () => [
+      {
+        value: TabNames.MODGPT,
+        name: "Assistant",
+        content: (
+          <>
+            <Chat />
+            {!isSignedIn && <SignInRequired />}
+          </>
+        ),
+      },
+      {
+        value: TabNames.AST,
+        name: "AST",
+        content: (
+          <PanelGroup direction="horizontal">
+            {engine === "jscodeshift" ? (
+              <AstSection
+                panels={[beforePanel, afterPanel]}
+                panelRefs={panelRefs}
+              />
+            ) : (
+              "The AST View is not yet supported for tsmorph"
+            )}
+          </PanelGroup>
+        ),
+      },
+      {
+        value: TabNames.DEBUG,
+        name: (
+          <>
+            <LiveIcon />
+            <span className="flex items-center justify-center justify-content-center z-30">
+              Debug
+            </span>
+          </>
+        ),
+        content: <Table />,
+      },
+    ],
+    [afterPanel, beforePanel, engine, isSignedIn, panelRefs],
+  );
+
+  const tabsData = tabs.reduce(
+    (acc: TabsWithContents, curr) => ({
+      tabs: reduceTabs(acc, curr),
+      contents: reduceContents(acc, curr),
+    }),
+    { tabs: [], contents: [] },
+  );
 
   if (engine === "ts-morph") {
     return (
diff --git a/apps/frontend/app/(website)/studio/main/PaneLayout/tabsData.tsx b/apps/frontend/app/(website)/studio/main/PaneLayout/tabsData.tsx
deleted file mode 100644
index 6bccaef81..000000000
--- a/apps/frontend/app/(website)/studio/main/PaneLayout/tabsData.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Chat } from "@chatbot/Chat";
-import type { useAiService } from "@chatbot/useAiService/useAiService";
-import type { KnownEngines } from "@codemod-com/utilities";
-import LiveIcon from "@studio/icons/LiveIcon";
-import { AstSection } from "@studio/main/ASTViewer/AstSectionBase";
-import Table from "@studio/main/Log/Table";
-import type { PanelData, PanelsRefs } from "@studio/main/PageBottomPane";
-import { SignInRequired } from "@studio/main/PaneLayout/SignInRequired";
-import { TabNames } from "@studio/store/view";
-import type { ReactNode } from "react";
-import { PanelGroup } from "react-resizable-panels";
-
-export type TabsWithContents = { tabs: ReactNode[]; contents: ReactNode[] };
-export type TabHeader = { value: string; name: ReactNode };
-export type TabContent = TabHeader & { content: ReactNode };
-
-export const useTabsData = ({
-  beforePanel,
-  afterPanel,
-  isSignedIn = false,
-  engine,
-  panelRefs,
-  aiAssistantData,
-}: {
-  isSignedIn?: boolean;
-  engine: KnownEngines;
-  panelRefs: PanelsRefs;
-  beforePanel: PanelData;
-  afterPanel: PanelData;
-  aiAssistantData: ReturnType<typeof useAiService>;
-}) => {
-  const tabs = [
-    {
-      value: TabNames.MODGPT,
-      name: "Assistant",
-      content: (
-        <>
-          <Chat aiProps={aiAssistantData} isSignedIn={isSignedIn} />
-          {!isSignedIn && <SignInRequired />}
-        </>
-      ),
-    },
-    {
-      value: TabNames.AST,
-      name: "AST",
-      content: (
-        <PanelGroup direction="horizontal">
-          {engine === "jscodeshift" ? (
-            <AstSection
-              panels={[beforePanel, afterPanel]}
-              panelRefs={panelRefs}
-            />
-          ) : (
-            "The AST View is not yet supported for tsmorph"
-          )}
-        </PanelGroup>
-      ),
-    },
-    {
-      value: TabNames.DEBUG,
-      name: (
-        <>
-          <LiveIcon />
-          <span className="flex items-center justify-center justify-content-center z-30">
-            Debug
-          </span>
-        </>
-      ),
-      content: <Table />,
-    },
-  ];
-
-  return tabs;
-};
diff --git a/apps/frontend/app/(website)/studio/src/store/CFS/index.ts b/apps/frontend/app/(website)/studio/src/store/CFS/index.ts
index 469d34e81..437b04866 100644
--- a/apps/frontend/app/(website)/studio/src/store/CFS/index.ts
+++ b/apps/frontend/app/(website)/studio/src/store/CFS/index.ts
@@ -1,5 +1,5 @@
-import type { PromptPreset } from "@chatbot/prompts";
-import { autoGenerateCodemodPrompt } from "@chatbot/prompts";
+import type { PromptPreset } from "@/app/(website)/studio/features/modgpt/prompts";
+import { autoGenerateCodemodPrompt } from "@/app/(website)/studio/features/modgpt/prompts";
 import type { LLMEngine } from "@codemod-com/utilities";
 import type { SendMessageResponse } from "@studio/api/sendMessage";
 import { create } from "zustand";
diff --git a/apps/frontend/app/(website)/studio/src/store/log.ts b/apps/frontend/app/(website)/studio/src/store/log.ts
index e1e357752..436b4255f 100644
--- a/apps/frontend/app/(website)/studio/src/store/log.ts
+++ b/apps/frontend/app/(website)/studio/src/store/log.ts
@@ -45,6 +45,7 @@ export const useLogStore = create<LogState>((set, get) => ({
       activeEventHashDigest: hashDigest,
     }));
   },
+  consoleLogs: [],
 }));
 
 export const useSelectActiveEvent = () => {
diff --git a/apps/frontend/app/(website)/studio/src/store/snippets.ts b/apps/frontend/app/(website)/studio/src/store/snippets.ts
index eaa06e27d..238fba019 100644
--- a/apps/frontend/app/(website)/studio/src/store/snippets.ts
+++ b/apps/frontend/app/(website)/studio/src/store/snippets.ts
@@ -75,7 +75,7 @@ export type Editors = {
 };
 
 export type EditorsSnippets = {
-  [x in Omit<keyof Editors, "output">]: string;
+  [x in keyof Omit<Editors, "output">]: string;
 };
 
 const toEditorSnippets = (editors: Editors): EditorsSnippets => ({
@@ -200,6 +200,8 @@ export const useSnippetsStore = create<SnippetsState>((set, get) => ({
         get().editors,
       ),
     ),
+  // beforeSnippets: () => get().editors.map(({ before }) => before),
+  // afterSnippets: () => get().editors.map(({ after }) => after),
   setSelectedPairIndex: (i: number) => {
     set({ selectedPairIndex: i });
   },
diff --git a/apps/frontend/app/auth/useAuth.ts b/apps/frontend/app/auth/useAuth.ts
index e675f43f0..081f7bd8c 100644
--- a/apps/frontend/app/auth/useAuth.ts
+++ b/apps/frontend/app/auth/useAuth.ts
@@ -1,5 +1,8 @@
+import {
+  devToken,
+  isDevelopment,
+} from "@/app/(website)/studio/features/modgpt/config";
 import { useRedirectWhenSigned } from "@/hooks/useRedirectWhenSigned";
-import { devToken, isDevelopment } from "@chatbot/config";
 import { useAuth as useClerk } from "@clerk/nextjs";
 import { authUrl } from "@studio/config";
 import {
diff --git a/apps/frontend/env.ts b/apps/frontend/env.ts
index 095126fd3..5ee7725f6 100644
--- a/apps/frontend/env.ts
+++ b/apps/frontend/env.ts
@@ -25,8 +25,8 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_API_URL: z.string(),
     NEXT_PUBLIC_AUTH_API_URL: z.string(),
-    NEXT_PUBLIC_AI_API_URL: z.string(),
-    NEXT_PUBLIC_WS_URL: z.string(),
+    NEXT_PUBLIC_MODGPT_API_URL: z.string(),
+    NEXT_PUBLIC_CODEMODAI_API_URL: z.string(),
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
     NEXT_PUBLIC_SANITY_PROJECT_ID: z.string(),
     NEXT_PUBLIC_SANITY_DATASET: z.string(),
@@ -46,8 +46,8 @@ export const env = createEnv({
     DUBCO_API_TOKEN: process.env.DUBCO_API_TOKEN,
     NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
     NEXT_PUBLIC_AUTH_API_URL: process.env.NEXT_PUBLIC_AUTH_API_URL,
-    NEXT_PUBLIC_AI_API_URL: process.env.NEXT_PUBLIC_AI_API_URL,
-    NEXT_PUBLIC_WS_URL: process.env.NEXT_PUBLIC_WS_URL,
+    NEXT_PUBLIC_MODGPT_API_URL: process.env.NEXT_PUBLIC_AI_API_URL,
+    NEXT_PUBLIC_CODEMODAI_API_URL: process.env.NEXT_PUBLIC_AI_API_URL,
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
     SANITY_API_TOKEN: process.env.SANITY_API_TOKEN,
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index a2a6c26f2..8381f41c7 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -24,18 +24,18 @@
     "preserveWatchOutput": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
       "@features/*": ["./app/(website)/studio/features/*"],
       "@studio/main/*": ["./app/(website)/studio/main/*"],
       "@studio/*": ["./app/(website)/studio/src/*"],
-      "@chatbot/*": ["./app/(website)/studio/features/modGPT/*"],
+      "@chatbot/*": ["app/(website)/studio/features/modgpt/*"],
       "@gr-run/*": ["./app/(website)/studio/features/GHRun/*"],
       "tslib": ["node_modules/tslib"],
       "ts-morph": ["node_modules/ts-morph"],
       "@utils/*": ["./utils/*"],
       "@context/*": ["./app/context/*"],
       "@auth/*": ["./app/auth/*"],
-      "@mocks/*": ["./mocks/*"]
+      "@mocks/*": ["./mocks/*"],
+      "@/*": ["./*"]
     },
     "plugins": [{ "name": "next" }]
   },
diff --git a/apps/frontend/utils/apis/client.ts b/apps/frontend/utils/apis/client.ts
index 1f316d0f6..677cff34c 100644
--- a/apps/frontend/utils/apis/client.ts
+++ b/apps/frontend/utils/apis/client.ts
@@ -20,7 +20,7 @@ const authApiClient = axios.create({
 });
 
 const aiApiClient = axios.create({
-  baseURL: env.NEXT_PUBLIC_AI_API_URL,
+  baseURL: env.NEXT_PUBLIC_MODGPT_API_URL,
   timeout: 60000,
 });