diff --git a/src/renderer/src/components/Popups/AgentModal.tsx b/src/renderer/src/components/Popups/AgentModal.tsx
index 3e8a9497ee..1e0199833e 100644
--- a/src/renderer/src/components/Popups/AgentModal.tsx
+++ b/src/renderer/src/components/Popups/AgentModal.tsx
@@ -18,7 +18,7 @@ import {
 } from '@heroui/react'
 import { loggerService } from '@logger'
 import ClaudeIcon from '@renderer/assets/images/models/claude.png'
-import { useAgents } from '@renderer/hooks/useAgents'
+import { useAgents } from '@renderer/hooks/agents/useAgents'
 import { useTimer } from '@renderer/hooks/useTimer'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { AgentEntity, AgentType, isAgentType } from '@renderer/types'
diff --git a/src/renderer/src/hooks/agents/useAddAgent.ts b/src/renderer/src/hooks/agents/useAddAgent.ts
new file mode 100644
index 0000000000..ccfaba9e8e
--- /dev/null
+++ b/src/renderer/src/hooks/agents/useAddAgent.ts
@@ -0,0 +1,16 @@
+import { AgentEntity } from '@renderer/types'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+export const useAddAgent = () => {
+  const qc = useQueryClient()
+
+  // TODO: use api
+  return useMutation({
+    mutationFn: async (agent: AgentEntity) => {
+      return agent
+    },
+    onSuccess: (added: AgentEntity) => {
+      qc.setQueryData<AgentEntity[]>(['agents'], (old) => (old ? [...old, added] : [added]))
+    }
+  })
+}
diff --git a/src/renderer/src/hooks/useAgents.ts b/src/renderer/src/hooks/agents/useAgents.ts
similarity index 87%
rename from src/renderer/src/hooks/useAgents.ts
rename to src/renderer/src/hooks/agents/useAgents.ts
index 205e579338..92673b207e 100644
--- a/src/renderer/src/hooks/useAgents.ts
+++ b/src/renderer/src/hooks/agents/useAgents.ts
@@ -1,9 +1,15 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { addAgent, removeAgent, setAgents, updateAgent } from '@renderer/store/agents'
 import { AgentEntity } from '@renderer/types'
+// import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 
 export const useAgents = () => {
+  // const qc = useQueryClient()
+  // const { data, isLoading, error } = useQuery({
+  //   queryKey: ['agents'],
+  //   queryFn: async () => {}
+  // })
   const agents = useAppSelector((state) => state.agents.agentsNew)
   const dispatch = useAppDispatch()
   /**
diff --git a/src/renderer/src/hooks/agents/useRemoveAgent.ts b/src/renderer/src/hooks/agents/useRemoveAgent.ts
new file mode 100644
index 0000000000..55eaf0092b
--- /dev/null
+++ b/src/renderer/src/hooks/agents/useRemoveAgent.ts
@@ -0,0 +1,16 @@
+import { AgentEntity } from '@renderer/types'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+export const useRemoveAgent = () => {
+  const qc = useQueryClient()
+
+  // TODO: use api
+  return useMutation({
+    mutationFn: async (id: string) => {
+      return id
+    },
+    onSuccess: (deletedId: string) => {
+      qc.setQueryData<AgentEntity[]>(['agents'], (old) => old?.filter((t) => t.id !== deletedId))
+    }
+  })
+}
diff --git a/src/renderer/src/hooks/agents/useUpdateAgent.ts b/src/renderer/src/hooks/agents/useUpdateAgent.ts
new file mode 100644
index 0000000000..7207ce4ccb
--- /dev/null
+++ b/src/renderer/src/hooks/agents/useUpdateAgent.ts
@@ -0,0 +1,18 @@
+import { AgentEntity } from '@renderer/types'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+export const useUpdateAgent = () => {
+  const qc = useQueryClient()
+
+  // TODO: use api
+  return useMutation({
+    // @ts-expect-error not-implemented
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mutationFn: async ({ id, ...payload }: Partial<AgentEntity> & { id: string }) => {},
+    onSuccess: (updated: AgentEntity) => {
+      qc.setQueryData<AgentEntity[]>(['todos'], (old) =>
+        old ? old.map((t) => (t.id === updated.id ? updated : t)) : []
+      )
+    }
+  })
+}
diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
index 397c6b1373..ac130b6402 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
@@ -3,7 +3,7 @@ import { Button, Divider } from '@heroui/react'
 import { DraggableList } from '@renderer/components/DraggableList'
 import { AgentModal } from '@renderer/components/Popups/AgentModal'
 import Scrollbar from '@renderer/components/Scrollbar'
-import { useAgents } from '@renderer/hooks/useAgents'
+import { useAgents } from '@renderer/hooks/agents/useAgents'
 import { useAssistants } from '@renderer/hooks/useAssistant'
 import { useAssistantPresets } from '@renderer/hooks/useAssistantPresets'
 import { useAssistantsTabSortType } from '@renderer/hooks/useStore'
diff --git a/src/renderer/src/store/agents.ts b/src/renderer/src/store/agents.ts
index aea5b7e02e..a869374301 100644
--- a/src/renderer/src/store/agents.ts
+++ b/src/renderer/src/store/agents.ts
@@ -10,7 +10,9 @@ export interface AgentsState {
    * They should not be in this slice. However, since redux will be removed
    * in the future, I just don't care where should they are.  */
   agents: AssistantPreset[]
-  /** For new autonomous agent feature. They are actual agent entities. */
+  /** For new autonomous agent feature. They are actual agent entities.
+   * They won't be used anymore when sqlite api is ready.
+   */
   agentsNew: AgentEntity[]
 }