diff --git a/openapi-ts.config.ts b/openapi-ts.config.ts
index 3ecade94..af1af339 100644
--- a/openapi-ts.config.ts
+++ b/openapi-ts.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
   },
   plugins: [
     "@hey-api/sdk",
+    "@tanstack/react-query",
     {
       enums: "typescript",
       name: "@hey-api/typescript",
diff --git a/src/api/generated/@tanstack/react-query.gen.ts b/src/api/generated/@tanstack/react-query.gen.ts
new file mode 100644
index 00000000..415b853a
--- /dev/null
+++ b/src/api/generated/@tanstack/react-query.gen.ts
@@ -0,0 +1,107 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { OptionsLegacyParser } from "@hey-api/client-fetch";
+import { queryOptions } from "@tanstack/react-query";
+import {
+  client,
+  getMessagesDashboardMessagesGet,
+  getAlertsDashboardAlertsGet,
+  streamSseDashboardAlertsNotificationGet,
+} from "../sdk.gen";
+
+type QueryKey<TOptions extends OptionsLegacyParser> = [
+  Pick<TOptions, "baseUrl" | "body" | "headers" | "path" | "query"> & {
+    _id: string;
+    _infinite?: boolean;
+  },
+];
+
+const createQueryKey = <TOptions extends OptionsLegacyParser>(
+  id: string,
+  options?: TOptions,
+  infinite?: boolean,
+): QueryKey<TOptions>[0] => {
+  const params: QueryKey<TOptions>[0] = {
+    _id: id,
+    baseUrl: (options?.client ?? client).getConfig().baseUrl,
+  } as QueryKey<TOptions>[0];
+  if (infinite) {
+    params._infinite = infinite;
+  }
+  if (options?.body) {
+    params.body = options.body;
+  }
+  if (options?.headers) {
+    params.headers = options.headers;
+  }
+  if (options?.path) {
+    params.path = options.path;
+  }
+  if (options?.query) {
+    params.query = options.query;
+  }
+  return params;
+};
+
+export const getMessagesDashboardMessagesGetQueryKey = (
+  options?: OptionsLegacyParser,
+) => [createQueryKey("getMessagesDashboardMessagesGet", options)];
+
+export const getMessagesDashboardMessagesGetOptions = (
+  options?: OptionsLegacyParser,
+) => {
+  return queryOptions({
+    queryFn: async ({ queryKey, signal }) => {
+      const { data } = await getMessagesDashboardMessagesGet({
+        ...options,
+        ...queryKey[0],
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: getMessagesDashboardMessagesGetQueryKey(options),
+  });
+};
+
+export const getAlertsDashboardAlertsGetQueryKey = (
+  options?: OptionsLegacyParser,
+) => [createQueryKey("getAlertsDashboardAlertsGet", options)];
+
+export const getAlertsDashboardAlertsGetOptions = (
+  options?: OptionsLegacyParser,
+) => {
+  return queryOptions({
+    queryFn: async ({ queryKey, signal }) => {
+      const { data } = await getAlertsDashboardAlertsGet({
+        ...options,
+        ...queryKey[0],
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: getAlertsDashboardAlertsGetQueryKey(options),
+  });
+};
+
+export const streamSseDashboardAlertsNotificationGetQueryKey = (
+  options?: OptionsLegacyParser,
+) => [createQueryKey("streamSseDashboardAlertsNotificationGet", options)];
+
+export const streamSseDashboardAlertsNotificationGetOptions = (
+  options?: OptionsLegacyParser,
+) => {
+  return queryOptions({
+    queryFn: async ({ queryKey, signal }) => {
+      const { data } = await streamSseDashboardAlertsNotificationGet({
+        ...options,
+        ...queryKey[0],
+        signal,
+        throwOnError: true,
+      });
+      return data;
+    },
+    queryKey: streamSseDashboardAlertsNotificationGetQueryKey(options),
+  });
+};
diff --git a/src/api/service.ts b/src/api/service.ts
deleted file mode 100644
index f65a9e7b..00000000
--- a/src/api/service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as apiServices from "@/api/generated/sdk.gen";
-
-const BASE_URL = import.meta.env.VITE_BASE_API_URL;
-
-const client = apiServices.client;
-
-export async function serverApi() {
-  client.setConfig({
-    baseUrl: BASE_URL,
-  });
-
-  return { ...apiServices, client };
-}
diff --git a/src/hooks/useAlertsData.ts b/src/hooks/useAlertsData.ts
index e58dd798..72a251b6 100644
--- a/src/hooks/useAlertsData.ts
+++ b/src/hooks/useAlertsData.ts
@@ -1,12 +1,14 @@
 import { useQuery } from "@tanstack/react-query";
-import { serverApi } from "@/api/service";
-import { AlertConversation } from "@/api/generated";
+import {
+  AlertConversation,
+  getAlertsDashboardAlertsGet,
+} from "@/api/generated";
 import { getMaliciousPackage } from "@/lib/utils";
 import { MaliciousPkgType, TriggerType } from "@/types";
 import { useAlertSearch } from "./useAlertSearch";
+import { getAlertsDashboardAlertsGetQueryKey } from "@/api/generated/@tanstack/react-query.gen";
 
 const fetchAlerts = async (): Promise<AlertConversation[]> => {
-  const { getAlertsDashboardAlertsGet } = await serverApi();
   const { data } = await getAlertsDashboardAlertsGet();
 
   return (data ?? [])
@@ -25,7 +27,7 @@ const fetchAlerts = async (): Promise<AlertConversation[]> => {
 
 export const useAlertsData = ({ ...args } = {}) => {
   return useQuery({
-    queryKey: ["alerts"],
+    queryKey: getAlertsDashboardAlertsGetQueryKey(),
     queryFn: fetchAlerts,
     ...args,
   });
diff --git a/src/hooks/usePromptsData.ts b/src/hooks/usePromptsData.ts
index 43b08680..dd291b1a 100644
--- a/src/hooks/usePromptsData.ts
+++ b/src/hooks/usePromptsData.ts
@@ -1,13 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
-import { serverApi } from "@/api/service";
-import { Conversation } from "@/api/generated";
-
-const fetchPrompts = async (): Promise<Conversation[]> => {
-  const { getMessagesDashboardMessagesGet } = await serverApi();
-  const { data } = await getMessagesDashboardMessagesGet();
-
-  if (!data) return [];
+import {
+  Conversation,
+  GetMessagesDashboardMessagesGetResponse,
+} from "@/api/generated";
+import { getMessagesDashboardMessagesGetOptions } from "@/api/generated/@tanstack/react-query.gen";
 
+const selectConversations = (
+  data: GetMessagesDashboardMessagesGetResponse,
+): Conversation[] => {
   return data.filter((prompt) =>
     prompt.question_answers?.every((item) => item.answer && item.question),
   );
@@ -15,7 +15,7 @@ const fetchPrompts = async (): Promise<Conversation[]> => {
 
 export const usePromptsData = () => {
   return useQuery({
-    queryKey: ["prompts"],
-    queryFn: fetchPrompts,
+    ...getMessagesDashboardMessagesGetOptions(),
+    select: selectConversations,
   });
 };
diff --git a/src/main.tsx b/src/main.tsx
index 8ee3833d..50d0dc94 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -9,6 +9,12 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ErrorBoundary from "./components/ErrorBoundary.tsx";
 import { Error } from "./components/Error.tsx";
 import { DarkModeProvider } from "@stacklok/ui-kit";
+import { client } from "./api/generated/index.ts";
+
+// Initialize the API client
+client.setConfig({
+  baseUrl: import.meta.env.VITE_BASE_API_URL,
+});
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
@@ -23,5 +29,5 @@ createRoot(document.getElementById("root")!).render(
         </SidebarProvider>
       </DarkModeProvider>
     </BrowserRouter>
-  </StrictMode>
+  </StrictMode>,
 );