diff --git a/src/renderer/src/hooks/agents/useAddAgent.ts b/src/renderer/src/hooks/agents/useAddAgent.ts
deleted file mode 100644
index 92fa0bf8e8..0000000000
--- a/src/renderer/src/hooks/agents/useAddAgent.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { AddAgentForm } from '@renderer/types'
-
-export const useAddAgent = () => {
-  // const { t } = useTranslation()
-  return {
-    // oxlint-disable-next-line no-unused-vars
-    addAgent: (payload: AddAgentForm) => {
-      window.toast.info('Not implemented')
-      // window.toast.success(t('common.add_success'))
-    }
-  }
-}
diff --git a/src/renderer/src/hooks/agents/useAgents.ts b/src/renderer/src/hooks/agents/useAgents.ts
index dedfd09ffa..7fe31b4584 100644
--- a/src/renderer/src/hooks/agents/useAgents.ts
+++ b/src/renderer/src/hooks/agents/useAgents.ts
@@ -1,15 +1,33 @@
+import { AddAgentForm } from '@renderer/types'
+import { formatErrorMessageWithPrefix } from '@renderer/utils/error'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 
 import { useAgentClient } from './useAgentClient'
 
 export const useAgents = () => {
+  const { t } = useTranslation()
   const client = useAgentClient()
   const key = client.agentPaths.base
-  const { data, error, isLoading } = useSWR(key, () => client.listAgents())
+  const { data, error, isLoading, mutate } = useSWR(key, () => client.listAgents())
+
+  const addAgent = useCallback(
+    async (agent: AddAgentForm) => {
+      try {
+        const result = await client.createAgent(agent)
+        mutate((prev) => ({ agents: [...(prev?.agents ?? []), result], total: 0 }))
+      } catch (error) {
+        window.toast.error(formatErrorMessageWithPrefix(error, t('agent.add.error.failed')))
+      }
+    },
+    [client, mutate, t]
+  )
 
   return {
     agents: data?.agents ?? [],
     error,
-    isLoading
+    isLoading,
+    addAgent
   }
 }
diff --git a/src/renderer/src/utils/error.ts b/src/renderer/src/utils/error.ts
index b69073e406..d24fc6920a 100644
--- a/src/renderer/src/utils/error.ts
+++ b/src/renderer/src/utils/error.ts
@@ -56,6 +56,11 @@ export function formatErrorMessage(error: unknown): string {
   return `Error Details:\n${formattedJson}`
 }
 
+export function formatErrorMessageWithPrefix(error: unknown, prefix: string): string {
+  const msg = formatErrorMessage(error)
+  return `${prefix}: ${msg}`
+}
+
 export const isAbortError = (error: any): boolean => {
   // Convert message to string for consistent checking
   const errorMessage = String(error?.message || '')