From f2110b821f9f7cdc48440bc78593ce7dcb0c5cfd Mon Sep 17 00:00:00 2001
From: Paul Ccari <46382556+paulclindo@users.noreply.github.com>
Date: Fri, 15 Nov 2024 00:52:34 -0500
Subject: [PATCH] feat: implement AI Agents (#527)

* feat: add server state for agents feature

* implement list/create/remove agents

* fixes

* fixes

* fixes

* fixes

* refactor

* improvements

* improvements

* fixes

* updates

* update creation tool

* update custom prompt

* feat: agents as experimental feature

* feat: edit agent

* feat: edit agent

---------

Co-authored-by: Nico Arqueros <nico@dcspark.io>
---
 .../src/components/agent/add-agent.tsx        | 533 +++++++++++++++++
 .../src/components/agent/agents.tsx           | 297 ++++++++++
 .../src/components/agent/edit-agent.tsx       | 544 ++++++++++++++++++
 .../ai-update-selection-action-bar.tsx        |  40 +-
 .../components/chat/conversation-footer.tsx   |  19 +-
 .../onboarding-checklist/onboarding.tsx       |   2 +-
 .../pages/{create-agent.tsx => add-ai.tsx}    |   4 +-
 .../src/pages/{agents.tsx => ais.tsx}         | 314 ++++++----
 .../src/pages/chat/empty-message.tsx          |   2 +-
 .../shinkai-desktop/src/pages/create-tool.tsx |   5 +
 .../src/pages/layout/main-layout.tsx          |   2 +-
 .../{ai-model-locally.tsx => local-ais.tsx}   |   6 +-
 apps/shinkai-desktop/src/pages/tools.tsx      |  22 +-
 apps/shinkai-desktop/src/routes/index.tsx     |  18 +-
 apps/shinkai-desktop/src/routes/name.ts       |   2 +-
 .../src/api/agents/index.ts                   |  87 +++
 .../src/api/agents/types.ts                   |  29 +
 libs/shinkai-message-ts/src/api/jobs/types.ts |   1 +
 libs/shinkai-node-state/src/v2/constants.ts   |   2 +
 .../src/v2/mutations/createAgent/index.ts     |  14 +
 .../src/v2/mutations/createAgent/types.ts     |  12 +
 .../mutations/createAgent/useCreateAgent.ts   |  33 ++
 .../src/v2/mutations/removeAgent/index.ts     |  14 +
 .../src/v2/mutations/removeAgent/types.ts     |   8 +
 .../mutations/removeAgent/useRemoveAgent.ts   |  30 +
 .../src/v2/mutations/updateAgent/index.ts     |  14 +
 .../src/v2/mutations/updateAgent/types.ts     |  12 +
 .../mutations/updateAgent/useUpdateAgent.ts   |  33 ++
 .../src/v2/queries/getAgent/index.ts          |  14 +
 .../src/v2/queries/getAgent/types.ts          |   9 +
 .../src/v2/queries/getAgent/useGetAgent.ts    |  13 +
 .../src/v2/queries/getAgents/index.ts         |   8 +
 .../src/v2/queries/getAgents/types.ts         |   8 +
 .../src/v2/queries/getAgents/useGetAgents.ts  |  13 +
 .../getLLMProviders/useGetLLMProviders.ts     |   2 +-
 .../queries/getToolsList/useGetToolsList.ts   |   1 -
 libs/shinkai-ui/src/assets/icons/general.tsx  |  79 +++
 37 files changed, 2098 insertions(+), 148 deletions(-)
 create mode 100644 apps/shinkai-desktop/src/components/agent/add-agent.tsx
 create mode 100644 apps/shinkai-desktop/src/components/agent/agents.tsx
 create mode 100644 apps/shinkai-desktop/src/components/agent/edit-agent.tsx
 rename apps/shinkai-desktop/src/pages/{create-agent.tsx => add-ai.tsx} (99%)
 rename apps/shinkai-desktop/src/pages/{agents.tsx => ais.tsx} (57%)
 create mode 100644 apps/shinkai-desktop/src/pages/create-tool.tsx
 rename apps/shinkai-desktop/src/pages/{ai-model-locally.tsx => local-ais.tsx} (93%)
 create mode 100644 libs/shinkai-message-ts/src/api/agents/index.ts
 create mode 100644 libs/shinkai-message-ts/src/api/agents/types.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/createAgent/index.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/createAgent/types.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/createAgent/useCreateAgent.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/removeAgent/index.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/removeAgent/types.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/removeAgent/useRemoveAgent.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/updateAgent/index.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/updateAgent/types.ts
 create mode 100644 libs/shinkai-node-state/src/v2/mutations/updateAgent/useUpdateAgent.ts
 create mode 100644 libs/shinkai-node-state/src/v2/queries/getAgent/index.ts
 create mode 100644 libs/shinkai-node-state/src/v2/queries/getAgent/types.ts
 create mode 100644 libs/shinkai-node-state/src/v2/queries/getAgent/useGetAgent.ts
 create mode 100644 libs/shinkai-node-state/src/v2/queries/getAgents/index.ts
 create mode 100644 libs/shinkai-node-state/src/v2/queries/getAgents/types.ts
 create mode 100644 libs/shinkai-node-state/src/v2/queries/getAgents/useGetAgents.ts

diff --git a/apps/shinkai-desktop/src/components/agent/add-agent.tsx b/apps/shinkai-desktop/src/components/agent/add-agent.tsx
new file mode 100644
index 000000000..0a291cf7f
--- /dev/null
+++ b/apps/shinkai-desktop/src/components/agent/add-agent.tsx
@@ -0,0 +1,533 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
+import { DEFAULT_CHAT_CONFIG } from '@shinkai_network/shinkai-node-state/v2/constants';
+import { useCreateAgent } from '@shinkai_network/shinkai-node-state/v2/mutations/createAgent/useCreateAgent';
+import { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
+import { useGetTools } from '@shinkai_network/shinkai-node-state/v2/queries/getToolsList/useGetToolsList';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Slider,
+  Switch,
+  Textarea,
+  TextField,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@shinkai_network/shinkai-ui';
+import { formatText } from '@shinkai_network/shinkai-ui/helpers';
+import { PlusIcon } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { SubpageLayout } from '../../pages/layout/simple-layout';
+import { useAuth } from '../../store/auth';
+import { useSettings } from '../../store/settings';
+
+const addAgentFormSchema = z.object({
+  name: z
+    .string()
+    .regex(
+      /^[a-zA-Z0-9]+(_[a-zA-Z0-9]+)*$/,
+      'It just accepts alphanumeric characters and underscores',
+    ),
+  llmProviderId: z.string(),
+  uiDescription: z.string(),
+  storage_path: z.string(),
+  knowledge: z.array(z.string()),
+  tools: z.array(z.string()),
+  debugMode: z.boolean(),
+  config: z
+    .object({
+      custom_prompt: z.string(),
+      custom_system_prompt: z.string(),
+      temperature: z.number(),
+      top_k: z.number(),
+      top_p: z.number(),
+      stream: z.boolean(),
+      other_model_params: z.record(z.string()),
+    })
+    .nullable(),
+});
+
+type AddAgentFormValues = z.infer<typeof addAgentFormSchema>;
+
+function AddAgentPage() {
+  const defaultAgentId = useSettings((state) => state.defaultAgentId);
+  const auth = useAuth((state) => state.auth);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const form = useForm<AddAgentFormValues>({
+    resolver: zodResolver(addAgentFormSchema),
+    defaultValues: {
+      name: '',
+      uiDescription: '',
+      storage_path: '',
+      knowledge: [],
+      tools: [],
+      debugMode: false,
+      config: {
+        stream: false, // disable stream by default for tooling
+        temperature: DEFAULT_CHAT_CONFIG.temperature,
+        top_p: DEFAULT_CHAT_CONFIG.top_p,
+        top_k: DEFAULT_CHAT_CONFIG.top_k,
+        custom_prompt: '',
+        custom_system_prompt: '',
+        other_model_params: {},
+      },
+      llmProviderId: defaultAgentId,
+    },
+  });
+
+  const { data: toolsList } = useGetTools({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+
+  const { mutateAsync: createAgent, isPending } = useCreateAgent({
+    onError: (error) => {
+      toast.error('Failed to create agent', {
+        description: error.response?.data?.message ?? error.message,
+      });
+    },
+    onSuccess: () => {
+      navigate('/ais?tab=agents');
+    },
+  });
+
+  const { llmProviders } = useGetLLMProviders({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+
+  const submit = async (values: AddAgentFormValues) => {
+    await createAgent({
+      nodeAddress: auth?.node_address ?? '',
+      token: auth?.api_v2_key ?? '',
+      agent: {
+        agent_id: values.name,
+        full_identity_name: `${auth?.shinkai_identity}/main/agent/${values.name}`,
+        llm_provider_id: values.llmProviderId,
+        ui_description: values.uiDescription,
+        storage_path: values.storage_path,
+        knowledge: values.knowledge,
+        tools: values.tools,
+        debug_mode: values.debugMode,
+        config: values.config,
+        name: values.name,
+      },
+    });
+  };
+
+  return (
+    <SubpageLayout className="max-w-4xl" title="Create new Agent">
+      <p className="text-gray-80 -mt-8 py-3 pb-6 text-center text-sm">
+        Create and explore custom AI agents with tailored instructions and
+        diverse skills.
+      </p>
+      <Form {...form}>
+        <form
+          className="flex flex-col justify-between space-y-6"
+          onSubmit={form.handleSubmit(submit)}
+        >
+          <div className="grid grid-cols-[1fr_360px] gap-6">
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <TextField
+                    autoFocus
+                    field={{
+                      ...field,
+                      onChange: (e) => {
+                        const value = e.target.value;
+                        const alphanumericValue = value.replace(
+                          /[^a-zA-Z0-9_]/g,
+                          '_',
+                        );
+                        field.onChange({
+                          ...e,
+                          target: {
+                            value: alphanumericValue,
+                          },
+                        });
+                      },
+                    }}
+                    label="Agent Name"
+                  />
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="uiDescription"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className="!min-h-[100px] resize-none text-sm"
+                        onChange={field.onChange}
+                        spellCheck={false}
+                        value={field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="llmProviderId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('chat.form.selectAI')}</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('chat.form.selectAI')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {llmProviders?.length &&
+                          llmProviders.map((llmProvider) => (
+                            <SelectItem
+                              key={llmProvider.id}
+                              value={llmProvider.id}
+                            >
+                              <span>{llmProvider.id} </span>
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  </FormItem>
+                )}
+              />
+              {/*<div className="space-y-6 rounded-lg bg-gray-400 px-4 py-4">*/}
+              {/*  <span className="flex-1 items-center gap-1 truncate py-2 text-left text-xs font-semibold text-gray-50">*/}
+              {/*    Knowledge*/}
+              {/*  </span>*/}
+              {/*  <div>TODO: kwnoledge</div>*/}
+              {/*</div>*/}
+              <div className="space-y-6 rounded-lg bg-gray-400 px-4 py-4">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="flex-1 items-center gap-1 truncate text-left text-xs font-semibold text-gray-50">
+                    Tools
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      className="h-[30px] text-xs"
+                      onClick={() => {
+                        navigate('/tools/create');
+                      }}
+                      size="auto"
+                      variant="outline"
+                    >
+                      <PlusIcon className="mr-1 size-3.5" />
+                      Create New Tool
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex max-h-[28vh] flex-col gap-2.5 overflow-auto">
+                  <div className="flex items-center gap-3">
+                    <Switch
+                      checked={form.watch('tools').length === toolsList?.length}
+                      onCheckedChange={(checked) => {
+                        if (checked && toolsList) {
+                          form.setValue(
+                            'tools',
+                            toolsList.map((tool) => tool.tool_router_key),
+                          );
+                        } else {
+                          form.setValue('tools', []);
+                        }
+                      }}
+                    />
+                    <span className="text-gray-80 text-xs">Enabled All</span>
+                  </div>
+                  {toolsList?.map((tool) => (
+                    <FormField
+                      control={form.control}
+                      key={tool.tool_router_key}
+                      name="tools"
+                      render={({ field }) => (
+                        <FormItem className="flex w-full flex-col gap-3">
+                          <div className="flex items-center gap-3">
+                            <FormControl>
+                              <Switch
+                                checked={field.value.includes(
+                                  tool.tool_router_key,
+                                )}
+                                onCheckedChange={() => {
+                                  field.onChange(
+                                    field.value.includes(tool.tool_router_key)
+                                      ? field.value.filter(
+                                          (value) =>
+                                            value !== tool.tool_router_key,
+                                        )
+                                      : [...field.value, tool.tool_router_key],
+                                  );
+                                }}
+                              />
+                            </FormControl>
+                            <div className="space-y-1 leading-none">
+                              <TooltipProvider delayDuration={0}>
+                                <Tooltip>
+                                  <TooltipTrigger className="flex items-center gap-1">
+                                    <FormLabel className="text-gray-80 static space-y-1.5 text-xs">
+                                      {formatText(tool.name)}
+                                    </FormLabel>
+                                  </TooltipTrigger>
+                                  <TooltipPortal>
+                                    <TooltipContent
+                                      align="start"
+                                      alignOffset={-10}
+                                      className="max-w-md"
+                                      side="top"
+                                    >
+                                      {tool.description}
+                                    </TooltipContent>
+                                  </TooltipPortal>
+                                </Tooltip>
+                              </TooltipProvider>
+                            </div>
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-6 rounded-lg bg-gray-400 px-4 py-4 pb-7">
+                <span className="flex-1 items-center gap-1 truncate py-2 text-left text-xs font-semibold text-gray-50">
+                  AI Model Configuration
+                </span>
+
+                <div className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="config.custom_system_prompt"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>System Prompt</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            className="!min-h-[130px] resize-none text-sm"
+                            spellCheck={false}
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/*<FormField*/}
+                  {/*  control={form.control}*/}
+                  {/*  name="config.stream"*/}
+                  {/*  render={({ field }) => (*/}
+                  {/*    <FormItem className="flex w-full flex-col gap-3">*/}
+                  {/*      <div className="flex gap-3">*/}
+                  {/*        <FormControl>*/}
+                  {/*          <Switch*/}
+                  {/*            checked={field.value}*/}
+                  {/*            onCheckedChange={field.onChange}*/}
+                  {/*          />*/}
+                  {/*        </FormControl>*/}
+                  {/*        <div className="space-y-1 leading-none">*/}
+                  {/*          <FormLabel className="static space-y-1.5 text-sm text-white">*/}
+                  {/*            Enable Stream*/}
+                  {/*          </FormLabel>*/}
+                  {/*        </div>*/}
+                  {/*      </div>*/}
+                  {/*    </FormItem>*/}
+                  {/*  )}*/}
+                  {/*/>*/}
+                  <FormField
+                    control={form.control}
+                    name="config.temperature"
+                    render={({ field }) => (
+                      <FormItem className="flex gap-2.5">
+                        <FormControl>
+                          <HoverCard openDelay={200}>
+                            <HoverCardTrigger asChild>
+                              <div className="grid w-full gap-4">
+                                <div className="flex items-center justify-between">
+                                  <Label htmlFor="temperature">
+                                    Temperature
+                                  </Label>
+                                  <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                                    {field.value}
+                                  </span>
+                                </div>
+                                <Slider
+                                  aria-label="Temperature"
+                                  className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                                  id="temperature"
+                                  max={1}
+                                  onValueChange={(vals) => {
+                                    field.onChange(vals[0]);
+                                  }}
+                                  step={0.1}
+                                  value={[field.value]}
+                                />
+                              </div>
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-[260px] bg-gray-600 px-2 py-3 text-xs"
+                              side="left"
+                            >
+                              Temperature is a parameter that affects the
+                              randomness of AI outputs. Higher temp = more
+                              unexpected, lower temp = more predictable.
+                            </HoverCardContent>
+                          </HoverCard>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="config.top_p"
+                    render={({ field }) => (
+                      <FormItem className="flex gap-2.5">
+                        <FormControl>
+                          <HoverCard openDelay={200}>
+                            <HoverCardTrigger asChild>
+                              <div className="grid w-full gap-4">
+                                <div className="flex items-center justify-between">
+                                  <Label htmlFor="topP">Top P</Label>
+                                  <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                                    {field.value}
+                                  </span>
+                                </div>
+                                <Slider
+                                  aria-label="Top P"
+                                  className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                                  id="topP"
+                                  max={1}
+                                  min={0}
+                                  onValueChange={(vals) => {
+                                    field.onChange(vals[0]);
+                                  }}
+                                  step={0.1}
+                                  value={[field.value]}
+                                />
+                              </div>
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-[260px] bg-gray-600 px-2 py-3 text-xs"
+                              side="left"
+                            >
+                              Adjust the probability threshold to increase the
+                              relevance of results. For example, a threshold of
+                              0.9 could be optimal for targeted, specific
+                              applications, whereas a threshold of 0.95 or 0.97
+                              might be preferred for tasks that require broader,
+                              more creative responses.
+                            </HoverCardContent>
+                          </HoverCard>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="config.top_k"
+                    render={({ field }) => (
+                      <FormItem className="flex gap-2.5">
+                        <FormControl>
+                          <HoverCard openDelay={200}>
+                            <HoverCardTrigger asChild>
+                              <div className="grid w-full gap-4">
+                                <div className="flex items-center justify-between">
+                                  <Label htmlFor="topK">Top K</Label>
+                                  <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                                    {field.value}
+                                  </span>
+                                </div>
+                                <Slider
+                                  aria-label="Top K"
+                                  className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                                  id="topK"
+                                  max={100}
+                                  onValueChange={(vals) => {
+                                    field.onChange(vals[0]);
+                                  }}
+                                  step={1}
+                                  value={[field.value]}
+                                />
+                              </div>
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-[260px] bg-gray-600 px-2 py-3 text-xs"
+                              side="left"
+                            >
+                              Adjust the count of key words for creating
+                              sequences. This parameter governs the extent of
+                              the generated passage, forestalling too much
+                              repetition. Selecting a higher figure yields
+                              longer narratives, whereas a smaller figure keeps
+                              the text brief.
+                            </HoverCardContent>
+                          </HoverCard>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              className="min-w-[120px]"
+              disabled={isPending}
+              onClick={() => navigate('/ais?tab=agents')}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              className="min-w-[120px]"
+              disabled={isPending}
+              isLoading={isPending}
+              size="sm"
+              type="submit"
+            >
+              {t('common.save')}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </SubpageLayout>
+  );
+}
+
+export default AddAgentPage;
diff --git a/apps/shinkai-desktop/src/components/agent/agents.tsx b/apps/shinkai-desktop/src/components/agent/agents.tsx
new file mode 100644
index 000000000..ed3a5754e
--- /dev/null
+++ b/apps/shinkai-desktop/src/components/agent/agents.tsx
@@ -0,0 +1,297 @@
+import { DialogClose } from '@radix-ui/react-dialog';
+import { DotsVerticalIcon } from '@radix-ui/react-icons';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
+import { useRemoveAgent } from '@shinkai_network/shinkai-node-state/v2/mutations/removeAgent/useRemoveAgent';
+import { useGetAgents } from '@shinkai_network/shinkai-node-state/v2/queries/getAgents/useGetAgents';
+import {
+  Button,
+  buttonVariants,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  ScrollArea,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@shinkai_network/shinkai-ui';
+import { AIAgentIcon, CreateAIIcon } from '@shinkai_network/shinkai-ui/assets';
+import { cn } from '@shinkai_network/shinkai-ui/utils';
+import { Edit, Plus, TrashIcon } from 'lucide-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useAuth } from '../../store/auth';
+
+function Agents() {
+  const auth = useAuth((state) => state.auth);
+  const navigate = useNavigate();
+  const { data: agents } = useGetAgents({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+
+  return (
+    <div className="flex h-full flex-col space-y-3">
+      <div className="absolute right-3 top-0">
+        <Button
+          className="px-4"
+          onClick={() => {
+            navigate('/add-agent');
+          }}
+          size="sm"
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          <span>Add Agent</span>
+        </Button>
+      </div>
+      {!agents?.length ? (
+        <div className="flex grow flex-col items-center justify-center">
+          <div className="mb-8 space-y-3 text-center">
+            <span aria-hidden className="text-5xl">
+              🤖
+            </span>
+            <p className="text-2xl font-semibold">No available agents</p>
+            <p className="text-center text-sm font-medium text-gray-100">
+              Create your first Agent to start asking Shinkai AI.
+            </p>
+          </div>
+
+          <Button
+            className="px-4"
+            onClick={() => {
+              navigate('/add-agent');
+            }}
+            size="sm"
+          >
+            <Plus className="h-4 w-4" />
+            <span>Add Agent</span>
+          </Button>
+        </div>
+      ) : (
+        <ScrollArea className="flex h-full flex-col justify-between [&>div>div]:!block">
+          <div className="divide-y divide-gray-400">
+            {agents?.map((agent) => (
+              <AgentCard
+                agentDescription={agent.ui_description}
+                agentId={agent.agent_id}
+                agentName={agent.name}
+                key={agent.agent_id}
+                llmProviderId={agent.llm_provider_id}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+export default Agents;
+
+const AgentCard = ({
+  agentId,
+  agentName,
+  // llmProviderId,
+  agentDescription,
+}: {
+  agentId: string;
+  agentName: string;
+  llmProviderId: string;
+  agentDescription: string;
+}) => {
+  const { t } = useTranslation();
+  const [isDeleteAgentDrawerOpen, setIsDeleteAgentDrawerOpen] =
+    React.useState(false);
+
+  const navigate = useNavigate();
+
+  return (
+    <React.Fragment>
+      <div className="flex cursor-pointer items-center justify-between gap-1 rounded-lg py-3.5 pr-2.5 hover:bg-gradient-to-r hover:from-gray-500 hover:to-gray-400">
+        <div className="flex items-center gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg">
+            <AIAgentIcon />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <span className="w-full truncate text-start text-sm">
+              {agentName}{' '}
+            </span>
+
+            <span className="text-gray-80 text-xs">
+              {agentDescription ?? 'No description'}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={() => {
+                    navigate(`/inboxes`, { state: { agentName: agentId } });
+                  }}
+                  size="sm"
+                  variant="gradient"
+                >
+                  <CreateAIIcon className="size-4" />
+                  <span className="sr-only">New Chat</span>
+                </Button>
+              </TooltipTrigger>
+
+              <TooltipPortal>
+                <TooltipContent
+                  align="center"
+                  className="flex flex-col items-center gap-1"
+                  side="right"
+                >
+                  Create New Chat
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <div
+                className={cn(
+                  buttonVariants({
+                    variant: 'tertiary',
+                    size: 'icon',
+                  }),
+                  'border-0 hover:bg-gray-500/40',
+                )}
+                onClick={(event) => {
+                  event.stopPropagation();
+                }}
+                role="button"
+                tabIndex={0}
+              >
+                <span className="sr-only">{t('common.moreOptions')}</span>
+                <DotsVerticalIcon className="text-gray-100" />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="w-[160px] border bg-gray-500 px-2.5 py-2"
+            >
+              {[
+                {
+                  name: t('common.edit'),
+                  icon: <Edit className="mr-3 h-4 w-4" />,
+                  onClick: () => {
+                    navigate(`/edit/${agentId}`);
+                  },
+                },
+                {
+                  name: t('common.delete'),
+                  icon: <TrashIcon className="mr-3 h-4 w-4" />,
+                  onClick: () => {
+                    setIsDeleteAgentDrawerOpen(true);
+                  },
+                },
+              ].map((option) => (
+                <React.Fragment key={option.name}>
+                  {option.name === 'Delete' && (
+                    <DropdownMenuSeparator className="bg-gray-300" />
+                  )}
+                  <DropdownMenuItem
+                    key={option.name}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      option.onClick();
+                    }}
+                  >
+                    {option.icon}
+                    {option.name}
+                  </DropdownMenuItem>
+                </React.Fragment>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <RemoveAgentDrawer
+        agentId={agentId}
+        onOpenChange={setIsDeleteAgentDrawerOpen}
+        open={isDeleteAgentDrawerOpen}
+      />
+    </React.Fragment>
+  );
+};
+
+const RemoveAgentDrawer = ({
+  open,
+  onOpenChange,
+  agentId,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  agentId: string;
+}) => {
+  const { t } = useTranslation();
+  const auth = useAuth((state) => state.auth);
+  const { mutateAsync: removeAgent, isPending } = useRemoveAgent({
+    onSuccess: () => {
+      onOpenChange(false);
+      toast.success('Delete agent successfully');
+    },
+    onError: (error) => {
+      toast.error('Failed delete agent', {
+        description: error.response?.data?.message ?? error.message,
+      });
+    },
+  });
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogTitle className="pb-0">
+          Delete Agent <span className="font-mono text-base">{agentId}</span> ?
+        </DialogTitle>
+        <DialogDescription>
+          The agent will be permanently deleted. This action cannot be undone.
+        </DialogDescription>
+
+        <DialogFooter>
+          <div className="flex gap-2 pt-4">
+            <DialogClose asChild className="flex-1">
+              <Button
+                className="min-w-[100px] flex-1"
+                size="sm"
+                type="button"
+                variant="ghost"
+              >
+                {t('common.cancel')}
+              </Button>
+            </DialogClose>
+            <Button
+              className="min-w-[100px] flex-1"
+              disabled={isPending}
+              isLoading={isPending}
+              onClick={async () => {
+                await removeAgent({
+                  nodeAddress: auth?.node_address ?? '',
+                  agentId,
+                  token: auth?.api_v2_key ?? '',
+                });
+              }}
+              size="sm"
+              variant="destructive"
+            >
+              {t('common.delete')}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/shinkai-desktop/src/components/agent/edit-agent.tsx b/apps/shinkai-desktop/src/components/agent/edit-agent.tsx
new file mode 100644
index 000000000..699ad9e73
--- /dev/null
+++ b/apps/shinkai-desktop/src/components/agent/edit-agent.tsx
@@ -0,0 +1,544 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslation } from '@shinkai_network/shinkai-i18n';
+import { JobConfig } from '@shinkai_network/shinkai-message-ts/api/jobs/types';
+import { useUpdateAgent } from '@shinkai_network/shinkai-node-state/v2/mutations/updateAgent/useUpdateAgent';
+import { useGetAgent } from '@shinkai_network/shinkai-node-state/v2/queries/getAgent/useGetAgent';
+import { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
+import { useGetTools } from '@shinkai_network/shinkai-node-state/v2/queries/getToolsList/useGetToolsList';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Slider,
+  Switch,
+  Textarea,
+  TextField,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@shinkai_network/shinkai-ui';
+import { formatText } from '@shinkai_network/shinkai-ui/helpers';
+import { PlusIcon } from 'lucide-react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+import { SubpageLayout } from '../../pages/layout/simple-layout';
+import { useAuth } from '../../store/auth';
+
+const editAgentFormSchema = z.object({
+  name: z
+    .string()
+    .regex(
+      /^[a-zA-Z0-9]+(_[a-zA-Z0-9]+)*$/,
+      'It just accepts alphanumeric characters and underscores',
+    ),
+  llmProviderId: z.string(),
+  uiDescription: z.string(),
+  storage_path: z.string(),
+  knowledge: z.array(z.string()),
+  tools: z.array(z.string()),
+  debugMode: z.boolean(),
+  config: z
+    .object({
+      custom_prompt: z.string(),
+      custom_system_prompt: z.string().optional(),
+      temperature: z.number().optional(),
+      top_k: z.number().optional(),
+      top_p: z.number().optional(),
+      stream: z.boolean().nullish(),
+      other_model_params: z.record(z.string()).nullish(),
+    })
+    .nullable(),
+});
+
+type EditAgentFormValues = z.infer<typeof editAgentFormSchema>;
+
+function EditAgentPage() {
+  const { agentId } = useParams();
+  const auth = useAuth((state) => state.auth);
+
+  const { data: agent } = useGetAgent({
+    agentId: agentId ?? '',
+    token: auth?.api_v2_key ?? '',
+    nodeAddress: auth?.node_address ?? '',
+  });
+
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const form = useForm<EditAgentFormValues>({
+    resolver: zodResolver(editAgentFormSchema),
+    defaultValues: {
+      name: '',
+      uiDescription: '',
+      storage_path: '',
+      knowledge: [],
+      tools: [],
+      debugMode: false,
+    },
+  });
+
+  useEffect(() => {
+    if (agent) {
+      form.setValue('name', agent.name);
+      form.setValue('uiDescription', agent.ui_description);
+      form.setValue('storage_path', agent.storage_path);
+      form.setValue('knowledge', agent.knowledge);
+      form.setValue('tools', agent.tools);
+      form.setValue('debugMode', agent.debug_mode);
+      form.setValue('config', agent.config as JobConfig);
+      form.setValue('llmProviderId', agent.llm_provider_id);
+    }
+  }, [agent, form]);
+
+  const { data: toolsList } = useGetTools({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+
+  const { mutateAsync: updateAgent, isPending } = useUpdateAgent({
+    onError: (error) => {
+      toast.error('Failed to create agent', {
+        description: error.response?.data?.message ?? error.message,
+      });
+    },
+    onSuccess: () => {
+      navigate('/ais?tab=agents');
+    },
+  });
+
+  const { llmProviders } = useGetLLMProviders({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+
+  const submit = async (values: EditAgentFormValues) => {
+    await updateAgent({
+      nodeAddress: auth?.node_address ?? '',
+      token: auth?.api_v2_key ?? '',
+      agent: {
+        agent_id: values.name,
+        full_identity_name: `${auth?.shinkai_identity}/main/agent/${values.name}`,
+        llm_provider_id: values.llmProviderId,
+        ui_description: values.uiDescription,
+        storage_path: values.storage_path,
+        knowledge: values.knowledge,
+        tools: values.tools,
+        debug_mode: values.debugMode,
+        config: values.config as JobConfig,
+        name: values.name,
+      },
+    });
+  };
+
+  return (
+    <SubpageLayout className="max-w-4xl" title="Edit Agent">
+      <p className="text-gray-80 -mt-8 py-3 pb-6 text-center text-sm">
+        Create and explore custom AI agents with tailored instructions and
+        diverse skills.
+      </p>
+      <Form {...form}>
+        <form
+          className="flex flex-col justify-between space-y-6"
+          onSubmit={form.handleSubmit(submit)}
+        >
+          <div className="grid grid-cols-[1fr_360px] gap-6">
+            <div className="space-y-4">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <TextField
+                    autoFocus
+                    field={{
+                      ...field,
+                      onChange: (e) => {
+                        const value = e.target.value;
+                        const alphanumericValue = value.replace(
+                          /[^a-zA-Z0-9_]/g,
+                          '_',
+                        );
+                        field.onChange({
+                          ...e,
+                          target: {
+                            value: alphanumericValue,
+                          },
+                        });
+                      },
+                    }}
+                    label="Agent Name"
+                  />
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="uiDescription"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        className="!min-h-[100px] resize-none text-sm"
+                        onChange={field.onChange}
+                        spellCheck={false}
+                        value={field.value}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="llmProviderId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('chat.form.selectAI')}</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('chat.form.selectAI')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {llmProviders?.length &&
+                          llmProviders.map((llmProvider) => (
+                            <SelectItem
+                              key={llmProvider.id}
+                              value={llmProvider.id}
+                            >
+                              <span>{llmProvider.id} </span>
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  </FormItem>
+                )}
+              />
+              {/*<div className="space-y-6 rounded-lg bg-gray-400 px-4 py-4">*/}
+              {/*  <span className="flex-1 items-center gap-1 truncate py-2 text-left text-xs font-semibold text-gray-50">*/}
+              {/*    Knowledge*/}
+              {/*  </span>*/}
+              {/*  <div>TODO: kwnoledge</div>*/}
+              {/*</div>*/}
+              <div className="space-y-6 rounded-lg bg-gray-400 px-4 py-4">
+                <div className="flex items-center justify-between gap-2">
+                  <span className="flex-1 items-center gap-1 truncate text-left text-xs font-semibold text-gray-50">
+                    Tools
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <Button
+                      className="h-[30px] text-xs"
+                      onClick={() => {
+                        navigate('/tools/create');
+                      }}
+                      size="auto"
+                      variant="outline"
+                    >
+                      <PlusIcon className="mr-1 size-3.5" />
+                      Create New Tool
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex max-h-[28vh] flex-col gap-2.5 overflow-auto">
+                  <div className="flex items-center gap-3">
+                    <Switch
+                      checked={form.watch('tools').length === toolsList?.length}
+                      onCheckedChange={(checked) => {
+                        if (checked && toolsList) {
+                          form.setValue(
+                            'tools',
+                            toolsList.map((tool) => tool.tool_router_key),
+                          );
+                        } else {
+                          form.setValue('tools', []);
+                        }
+                      }}
+                    />
+                    <span className="text-gray-80 text-xs">Enabled All</span>
+                  </div>
+                  {toolsList?.map((tool) => (
+                    <FormField
+                      control={form.control}
+                      key={tool.tool_router_key}
+                      name="tools"
+                      render={({ field }) => (
+                        <FormItem className="flex w-full flex-col gap-3">
+                          <div className="flex items-center gap-3">
+                            <FormControl>
+                              <Switch
+                                checked={field.value.includes(
+                                  tool.tool_router_key,
+                                )}
+                                onCheckedChange={() => {
+                                  field.onChange(
+                                    field.value.includes(tool.tool_router_key)
+                                      ? field.value.filter(
+                                          (value) =>
+                                            value !== tool.tool_router_key,
+                                        )
+                                      : [...field.value, tool.tool_router_key],
+                                  );
+                                }}
+                              />
+                            </FormControl>
+                            <div className="space-y-1 leading-none">
+                              <TooltipProvider delayDuration={0}>
+                                <Tooltip>
+                                  <TooltipTrigger className="flex items-center gap-1">
+                                    <FormLabel className="text-gray-80 static space-y-1.5 text-xs">
+                                      {formatText(tool.name)}
+                                    </FormLabel>
+                                  </TooltipTrigger>
+                                  <TooltipPortal>
+                                    <TooltipContent
+                                      align="start"
+                                      alignOffset={-10}
+                                      className="max-w-md"
+                                      side="top"
+                                    >
+                                      {tool.description}
+                                    </TooltipContent>
+                                  </TooltipPortal>
+                                </Tooltip>
+                              </TooltipProvider>
+                            </div>
+                          </div>
+                        </FormItem>
+                      )}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-6 rounded-lg bg-gray-400 px-4 py-4 pb-7">
+                <span className="flex-1 items-center gap-1 truncate py-2 text-left text-xs font-semibold text-gray-50">
+                  AI Model Configuration
+                </span>
+
+                <div className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="config.custom_system_prompt"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>System Prompt</FormLabel>
+                        <FormControl>
+                          <Textarea
+                            className="!min-h-[130px] resize-none text-sm"
+                            spellCheck={false}
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+
+                  {/*<FormField*/}
+                  {/*  control={form.control}*/}
+                  {/*  name="config.stream"*/}
+                  {/*  render={({ field }) => (*/}
+                  {/*    <FormItem className="flex w-full flex-col gap-3">*/}
+                  {/*      <div className="flex gap-3">*/}
+                  {/*        <FormControl>*/}
+                  {/*          <Switch*/}
+                  {/*            checked={field.value}*/}
+                  {/*            onCheckedChange={field.onChange}*/}
+                  {/*          />*/}
+                  {/*        </FormControl>*/}
+                  {/*        <div className="space-y-1 leading-none">*/}
+                  {/*          <FormLabel className="static space-y-1.5 text-sm text-white">*/}
+                  {/*            Enable Stream*/}
+                  {/*          </FormLabel>*/}
+                  {/*        </div>*/}
+                  {/*      </div>*/}
+                  {/*    </FormItem>*/}
+                  {/*  )}*/}
+                  {/*/>*/}
+                  <FormField
+                    control={form.control}
+                    name="config.temperature"
+                    render={({ field }) => (
+                      <FormItem className="flex gap-2.5">
+                        <FormControl>
+                          <HoverCard openDelay={200}>
+                            <HoverCardTrigger asChild>
+                              <div className="grid w-full gap-4">
+                                <div className="flex items-center justify-between">
+                                  <Label htmlFor="temperature">
+                                    Temperature
+                                  </Label>
+                                  <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                                    {field.value}
+                                  </span>
+                                </div>
+                                <Slider
+                                  aria-label="Temperature"
+                                  className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                                  id="temperature"
+                                  max={1}
+                                  onValueChange={(vals) => {
+                                    field.onChange(vals[0]);
+                                  }}
+                                  step={0.1}
+                                  value={[field.value as number]}
+                                />
+                              </div>
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-[260px] bg-gray-600 px-2 py-3 text-xs"
+                              side="left"
+                            >
+                              Temperature is a parameter that affects the
+                              randomness of AI outputs. Higher temp = more
+                              unexpected, lower temp = more predictable.
+                            </HoverCardContent>
+                          </HoverCard>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="config.top_p"
+                    render={({ field }) => (
+                      <FormItem className="flex gap-2.5">
+                        <FormControl>
+                          <HoverCard openDelay={200}>
+                            <HoverCardTrigger asChild>
+                              <div className="grid w-full gap-4">
+                                <div className="flex items-center justify-between">
+                                  <Label htmlFor="topP">Top P</Label>
+                                  <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                                    {field.value}
+                                  </span>
+                                </div>
+                                <Slider
+                                  aria-label="Top P"
+                                  className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                                  id="topP"
+                                  max={1}
+                                  min={0}
+                                  onValueChange={(vals) => {
+                                    field.onChange(vals[0]);
+                                  }}
+                                  step={0.1}
+                                  value={[field.value as number]}
+                                />
+                              </div>
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-[260px] bg-gray-600 px-2 py-3 text-xs"
+                              side="left"
+                            >
+                              Adjust the probability threshold to increase the
+                              relevance of results. For example, a threshold of
+                              0.9 could be optimal for targeted, specific
+                              applications, whereas a threshold of 0.95 or 0.97
+                              might be preferred for tasks that require broader,
+                              more creative responses.
+                            </HoverCardContent>
+                          </HoverCard>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="config.top_k"
+                    render={({ field }) => (
+                      <FormItem className="flex gap-2.5">
+                        <FormControl>
+                          <HoverCard openDelay={200}>
+                            <HoverCardTrigger asChild>
+                              <div className="grid w-full gap-4">
+                                <div className="flex items-center justify-between">
+                                  <Label htmlFor="topK">Top K</Label>
+                                  <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+                                    {field.value}
+                                  </span>
+                                </div>
+                                <Slider
+                                  aria-label="Top K"
+                                  className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                                  id="topK"
+                                  max={100}
+                                  onValueChange={(vals) => {
+                                    field.onChange(vals[0]);
+                                  }}
+                                  step={1}
+                                  value={[field.value as number]}
+                                />
+                              </div>
+                            </HoverCardTrigger>
+                            <HoverCardContent
+                              align="start"
+                              className="w-[260px] bg-gray-600 px-2 py-3 text-xs"
+                              side="left"
+                            >
+                              Adjust the count of key words for creating
+                              sequences. This parameter governs the extent of
+                              the generated passage, forestalling too much
+                              repetition. Selecting a higher figure yields
+                              longer narratives, whereas a smaller figure keeps
+                              the text brief.
+                            </HoverCardContent>
+                          </HoverCard>
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              className="min-w-[120px]"
+              disabled={isPending}
+              onClick={() => navigate('/ais?tab=agents')}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              className="min-w-[120px]"
+              disabled={isPending}
+              isLoading={isPending}
+              size="sm"
+              type="submit"
+            >
+              {t('common.save')}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </SubpageLayout>
+  );
+}
+
+export default EditAgentPage;
diff --git a/apps/shinkai-desktop/src/components/chat/chat-action-bar/ai-update-selection-action-bar.tsx b/apps/shinkai-desktop/src/components/chat/chat-action-bar/ai-update-selection-action-bar.tsx
index 0a2af4964..8f50313d1 100644
--- a/apps/shinkai-desktop/src/components/chat/chat-action-bar/ai-update-selection-action-bar.tsx
+++ b/apps/shinkai-desktop/src/components/chat/chat-action-bar/ai-update-selection-action-bar.tsx
@@ -1,12 +1,15 @@
 import { useTranslation } from '@shinkai_network/shinkai-i18n';
 import { extractJobIdFromInbox } from '@shinkai_network/shinkai-message-ts/utils/inbox_name_handler';
 import { useUpdateAgentInJob } from '@shinkai_network/shinkai-node-state/lib/mutations/updateAgentInJob/useUpdateAgentInJob';
+import { useGetAgents } from '@shinkai_network/shinkai-node-state/v2/queries/getAgents/useGetAgents';
 import { useGetLLMProviders } from '@shinkai_network/shinkai-node-state/v2/queries/getLLMProviders/useGetLLMProviders';
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Tooltip,
   TooltipContent,
@@ -14,6 +17,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@shinkai_network/shinkai-ui';
+import { AIAgentIcon } from '@shinkai_network/shinkai-ui/assets';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { BotIcon, ChevronDownIcon } from 'lucide-react';
 import { toast } from 'sonner';
@@ -36,6 +40,11 @@ export function AIModelSelector({
     token: auth?.api_v2_key ?? '',
   });
 
+  const { data: agents } = useGetAgents({
+    nodeAddress: auth?.node_address ?? '',
+    token: auth?.api_v2_key ?? '',
+  });
+
   return (
     <DropdownMenu>
       <TooltipProvider delayDuration={0}>
@@ -59,19 +68,38 @@ export function AIModelSelector({
           </TooltipPortal>
           <DropdownMenuContent
             align="start"
-            className="max-h-[300px] min-w-[220px] overflow-y-auto bg-gray-300 p-1 py-2"
+            className="max-h-[400px] min-w-[330px] overflow-y-auto bg-gray-300 p-1 py-2"
             side="top"
           >
             <DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>
-              {llmProviders.map((agent) => (
+              <DropdownMenuLabel className="px-2 py-1">
+                Agents
+              </DropdownMenuLabel>
+              {agents?.map((agent) => (
+                <DropdownMenuRadioItem
+                  className="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-2 text-white transition-colors hover:bg-gray-200 aria-checked:bg-gray-200"
+                  key={agent.name}
+                  value={agent.name}
+                >
+                  <AIAgentIcon className="h-3.5 w-3.5 shrink-0" />
+                  <div className="flex flex-col gap-1">
+                    <span className="text-xs">{agent.name}</span>
+                  </div>
+                </DropdownMenuRadioItem>
+              ))}
+              <DropdownMenuSeparator className="bg-gray-200" />
+              <DropdownMenuLabel className="mt-2 px-2 py-1">
+                AI Models
+              </DropdownMenuLabel>
+              {llmProviders.map((llmProvider) => (
                 <DropdownMenuRadioItem
                   className="flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-2 text-white transition-colors hover:bg-gray-200 aria-checked:bg-gray-200"
-                  key={agent.id}
-                  value={agent.id}
+                  key={llmProvider.id}
+                  value={llmProvider.id}
                 >
-                  <BotIcon className="h-3.5 w-3.5" />
+                  <BotIcon className="h-3.5 w-3.5 shrink-0" />
                   <div className="flex flex-col gap-1">
-                    <span className="text-xs">{agent.id}</span>
+                    <span className="text-xs">{llmProvider.id}</span>
                   </div>
                 </DropdownMenuRadioItem>
               ))}
diff --git a/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx b/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
index a695607cf..96c75efe5 100644
--- a/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
+++ b/apps/shinkai-desktop/src/components/chat/conversation-footer.tsx
@@ -86,11 +86,13 @@ import { useSetJobScope } from './context/set-job-scope-context';
 
 export const actionButtonClassnames =
   'shrink-0 bg-gray-350 inline-flex h-[30px] w-[30px] cursor-pointer items-center justify-center gap-1.5 truncate border border-gray-200 px-[7px] py-1.5 text-left text-xs rounded-lg font-normal text-gray-50 hover:bg-gray-300 hover:text-white';
+
 export type ChatConversationLocationState = {
   files: File[];
   agentName: string;
   selectedVRFiles: VRItem[];
   selectedVRFolders: VRFolder[];
+  llmProviderId: string;
 };
 
 function ConversationEmptyFooter() {
@@ -156,15 +158,22 @@ function ConversationEmptyFooter() {
   }, [llmProviders, chatForm, defaulAgentId]);
 
   useEffect(() => {
-    if (!locationState?.agentName) {
+    if (!locationState?.llmProviderId) {
       return;
     }
-    const agent = llmProviders.find(
-      (agent) => agent.id === locationState.agentName,
+    const llmProvider = llmProviders.find(
+      (agent) => agent.id === locationState.llmProviderId,
     );
-    if (agent) {
-      chatForm.setValue('agent', agent.id);
+    if (llmProvider) {
+      chatForm.setValue('agent', llmProvider.id);
+    }
+  }, [chatForm, locationState, llmProviders]);
+
+  useEffect(() => {
+    if (!locationState?.agentName) {
+      return;
     }
+    chatForm.setValue('agent', locationState.agentName);
   }, [chatForm, locationState, llmProviders]);
 
   useEffect(() => {
diff --git a/apps/shinkai-desktop/src/components/onboarding-checklist/onboarding.tsx b/apps/shinkai-desktop/src/components/onboarding-checklist/onboarding.tsx
index cde07c3db..8065897e5 100644
--- a/apps/shinkai-desktop/src/components/onboarding-checklist/onboarding.tsx
+++ b/apps/shinkai-desktop/src/components/onboarding-checklist/onboarding.tsx
@@ -64,7 +64,7 @@ export default function OnboardingStepper() {
               <Button
                 className="h-auto gap-1 px-3 py-2"
                 onClick={() => {
-                  navigate('/agents-locally');
+                  navigate('/local-ais');
                 }}
                 size="sm"
                 variant="outline"
diff --git a/apps/shinkai-desktop/src/pages/create-agent.tsx b/apps/shinkai-desktop/src/pages/add-ai.tsx
similarity index 99%
rename from apps/shinkai-desktop/src/pages/create-agent.tsx
rename to apps/shinkai-desktop/src/pages/add-ai.tsx
index f4d6718e9..28070598d 100644
--- a/apps/shinkai-desktop/src/pages/create-agent.tsx
+++ b/apps/shinkai-desktop/src/pages/add-ai.tsx
@@ -95,7 +95,7 @@ export const getModelObject = (
   }
 };
 
-const CreateAgentPage = () => {
+const AddAIPage = () => {
   const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const navigate = useNavigate();
@@ -441,4 +441,4 @@ const CreateAgentPage = () => {
     </SubpageLayout>
   );
 };
-export default CreateAgentPage;
+export default AddAIPage;
diff --git a/apps/shinkai-desktop/src/pages/agents.tsx b/apps/shinkai-desktop/src/pages/ais.tsx
similarity index 57%
rename from apps/shinkai-desktop/src/pages/agents.tsx
rename to apps/shinkai-desktop/src/pages/ais.tsx
index 6f660007a..2dfa84fd2 100644
--- a/apps/shinkai-desktop/src/pages/agents.tsx
+++ b/apps/shinkai-desktop/src/pages/ais.tsx
@@ -24,9 +24,19 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   TextField,
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
 } from '@shinkai_network/shinkai-ui';
 import { ScrollArea } from '@shinkai_network/shinkai-ui';
+import { CreateAIIcon } from '@shinkai_network/shinkai-ui/assets';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
 import { BotIcon, Edit, Plus, TrashIcon } from 'lucide-react';
 import React, { useEffect } from 'react';
@@ -34,12 +44,15 @@ import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
+import Agents from '../components/agent/agents';
+import { useURLQueryParams } from '../hooks/use-url-query-params';
 import { useAuth } from '../store/auth';
+import { useSettings } from '../store/settings';
 import { useShinkaiNodeManager } from '../store/shinkai-node-manager';
-import { getModelObject } from './create-agent';
+import { getModelObject } from './add-ai';
 import { SimpleLayout } from './layout/simple-layout';
 
-const AgentsPage = () => {
+const AIsPage = () => {
   const { t } = useTranslation();
   const auth = useAuth((state) => state.auth);
   const navigate = useNavigate();
@@ -47,74 +60,118 @@ const AgentsPage = () => {
     nodeAddress: auth?.node_address ?? '',
     token: auth?.api_v2_key ?? '',
   });
+  const optInExperimental = useSettings((state) => state.optInExperimental);
+
   const isLocalShinkaiNodeIsUse = useShinkaiNodeManager(
     (state) => state.isInUse,
   );
+  const query = useURLQueryParams();
+  const tabSelected = query.get('tab') ?? 'ais';
+
   const onAddAgentClick = () => {
     if (isLocalShinkaiNodeIsUse) {
-      navigate('/agents-locally');
+      navigate('/local-ais');
       return;
     }
-    navigate('/add-agent');
+    navigate('/add-ai');
   };
+
   return (
-    <SimpleLayout classname="relative" title={t('llmProviders.label')}>
-      <div className="absolute right-3 top-[36px]">
-        <Button
-          className="h-[40px] gap-2"
-          onClick={onAddAgentClick}
-          size="auto"
+    <SimpleLayout>
+      <Tabs
+        className="relative flex h-full flex-col"
+        defaultValue={tabSelected}
+      >
+        <TabsList
+          className={cn(
+            'grid w-full overflow-auto rounded-lg border border-gray-400 bg-transparent p-0.5',
+
+            optInExperimental
+              ? 'max-w-[200px] grid-cols-2'
+              : 'max-w-[100px] grid-cols-1',
+          )}
         >
-          <Plus className="h-4 w-4" />
-          <span>{t('llmProviders.add')}</span>
-        </Button>
-      </div>
-      <div className="flex h-full flex-col space-y-3">
-        {!llmProviders?.length ? (
-          <div className="flex grow flex-col items-center justify-center">
-            <div className="mb-8 space-y-3 text-center">
-              <span aria-hidden className="text-5xl">
-                🤖
-              </span>
-              <p className="text-2xl font-semibold">
-                {t('llmProviders.notFound.title')}
-              </p>
-              <p className="text-center text-sm font-medium text-gray-100">
-                {t('llmProviders.notFound.description')}
-              </p>
-            </div>
+          <TabsTrigger
+            className="flex h-8 items-center gap-1.5 text-xs font-semibold"
+            value="ais"
+          >
+            AIs
+          </TabsTrigger>
+          {optInExperimental && (
+            <TabsTrigger
+              className="flex h-8 items-center gap-1.5 text-xs font-semibold"
+              value="agents"
+            >
+              Agents
+            </TabsTrigger>
+          )}
+        </TabsList>
+        <TabsContent className="h-full" value="ais">
+          <div className="absolute right-3 top-0">
+            <Button
+              className="h-[40px] gap-2"
+              onClick={onAddAgentClick}
+              size="auto"
+            >
+              <Plus className="h-4 w-4" />
+              <span>{t('llmProviders.add')}</span>
+            </Button>
+          </div>
+          <div className="flex h-full flex-col space-y-3">
+            {!llmProviders?.length ? (
+              <div className="flex grow flex-col items-center justify-center">
+                <div className="mb-8 space-y-3 text-center">
+                  <span aria-hidden className="text-5xl">
+                    🤖
+                  </span>
+                  <p className="text-2xl font-semibold">
+                    {t('llmProviders.notFound.title')}
+                  </p>
+                  <p className="text-center text-sm font-medium text-gray-100">
+                    {t('llmProviders.notFound.description')}
+                  </p>
+                </div>
 
-            <Button onClick={onAddAgentClick}>{t('llmProviders.add')}</Button>
+                <Button onClick={onAddAgentClick}>
+                  {t('llmProviders.add')}
+                </Button>
+              </div>
+            ) : (
+              <ScrollArea className="flex h-full flex-col justify-between [&>div>div]:!block">
+                <div className="divide-y divide-gray-400">
+                  {llmProviders?.map((llmProvider) => (
+                    <LLMProviderCard
+                      agentApiKey={llmProvider.api_key ?? ''}
+                      externalUrl={llmProvider.external_url ?? ''}
+                      key={llmProvider.id}
+                      llmProviderId={llmProvider.id}
+                      model={llmProvider.model}
+                    />
+                  ))}
+                </div>
+              </ScrollArea>
+            )}
           </div>
-        ) : (
-          <ScrollArea className="flex h-full flex-col justify-between [&>div>div]:!block">
-            <div className="divide-y divide-gray-400">
-              {llmProviders?.map((agent) => (
-                <AgentCard
-                  agentApiKey={agent.api_key ?? ''}
-                  agentId={agent.id}
-                  externalUrl={agent.external_url ?? ''}
-                  key={agent.id}
-                  model={agent.model}
-                />
-              ))}
-            </div>
-          </ScrollArea>
+        </TabsContent>
+        {optInExperimental && (
+          <TabsContent className="h-full" value="agents">
+            <Agents />
+          </TabsContent>
         )}
-      </div>
+      </Tabs>
     </SimpleLayout>
   );
 };
 
-export default AgentsPage;
+export default AIsPage;
 
-function AgentCard({
-  agentId,
+function LLMProviderCard({
+  llmProviderId,
   model,
   externalUrl,
   agentApiKey,
 }: {
-  agentId: string;
+  llmProviderId: string;
   model: string;
   externalUrl: string;
   agentApiKey: string;
@@ -129,97 +186,118 @@ function AgentCard({
 
   return (
     <React.Fragment>
-      <div
-        className="flex cursor-pointer items-center justify-between gap-1 rounded-lg py-3.5 pr-2.5 hover:bg-gradient-to-r hover:from-gray-500 hover:to-gray-400"
-        data-testid={`${agentId}-agent-button`}
-        onClick={() => {
-          navigate(`/inboxes`, { state: { agentName: agentId } });
-        }}
-        role="button"
-      >
+      <div className="flex cursor-pointer items-center justify-between gap-1 rounded-lg py-2.5 pr-2.5 hover:bg-gradient-to-r hover:from-gray-500 hover:to-gray-400">
         <div className="flex items-center gap-3">
           <div className="flex h-8 w-8 items-center justify-center rounded-lg">
             <BotIcon className="h-6 w-6" />
           </div>
           <div className="flex flex-col items-baseline gap-2">
             <span className="w-full truncate text-start text-sm">
-              {agentId}
+              {llmProviderId}
             </span>
             <Badge className="text-gray-80 truncate bg-gray-400 text-start text-xs font-normal shadow-none">
               {model}
             </Badge>
           </div>
         </div>
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <div
-              className={cn(
-                buttonVariants({
-                  variant: 'tertiary',
-                  size: 'icon',
-                }),
-                'border-0 hover:bg-gray-500/40',
-              )}
-              onClick={(event) => {
-                event.stopPropagation();
-              }}
-              role="button"
-              tabIndex={0}
+        <div className="flex items-center gap-4">
+          <TooltipProvider delayDuration={0}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={() => {
+                    navigate(`/inboxes`, { state: { llmProviderId } });
+                  }}
+                  size="sm"
+                  variant="gradient"
+                >
+                  <CreateAIIcon className="size-4" />
+                  <span className="sr-only">New Chat</span>
+                </Button>
+              </TooltipTrigger>
+
+              <TooltipPortal>
+                <TooltipContent
+                  align="center"
+                  className="flex flex-col items-center gap-1"
+                  side="right"
+                >
+                  Create New Chat
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <div
+                className={cn(
+                  buttonVariants({
+                    variant: 'tertiary',
+                    size: 'icon',
+                  }),
+                  'border-0 hover:bg-gray-500/40',
+                )}
+                onClick={(event) => {
+                  event.stopPropagation();
+                }}
+                role="button"
+                tabIndex={0}
+              >
+                <span className="sr-only">{t('common.moreOptions')}</span>
+                <DotsVerticalIcon className="text-gray-100" />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="w-[160px] border bg-gray-500 px-2.5 py-2"
             >
-              <span className="sr-only">{t('common.moreOptions')}</span>
-              <DotsVerticalIcon className="text-gray-100" />
-            </div>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="w-[160px] border bg-gray-500 px-2.5 py-2"
-          >
-            {[
-              {
-                name: t('common.edit'),
-                icon: <Edit className="mr-3 h-4 w-4" />,
-                onClick: () => {
-                  setIsEditAgentDrawerOpen(true);
+              {[
+                {
+                  name: t('common.edit'),
+                  icon: <Edit className="mr-3 h-4 w-4" />,
+                  onClick: () => {
+                    setIsEditAgentDrawerOpen(true);
+                  },
                 },
-              },
-              {
-                name: t('common.delete'),
-                icon: <TrashIcon className="mr-3 h-4 w-4" />,
-                onClick: () => {
-                  setIsDeleteAgentDrawerOpen(true);
+                {
+                  name: t('common.delete'),
+                  icon: <TrashIcon className="mr-3 h-4 w-4" />,
+                  onClick: () => {
+                    setIsDeleteAgentDrawerOpen(true);
+                  },
                 },
-              },
-            ].map((option) => (
-              <React.Fragment key={option.name}>
-                {option.name === 'Delete' && (
-                  <DropdownMenuSeparator className="bg-gray-300" />
-                )}
-                <DropdownMenuItem
-                  key={option.name}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    option.onClick();
-                  }}
-                >
-                  {option.icon}
-                  {option.name}
-                </DropdownMenuItem>
-              </React.Fragment>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+              ].map((option) => (
+                <React.Fragment key={option.name}>
+                  {option.name === 'Delete' && (
+                    <DropdownMenuSeparator className="bg-gray-300" />
+                  )}
+                  <DropdownMenuItem
+                    key={option.name}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      option.onClick();
+                    }}
+                  >
+                    {option.icon}
+                    {option.name}
+                  </DropdownMenuItem>
+                </React.Fragment>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
-      <EditAgentDrawer
+      <EditLLMProviderDrawer
         agentApiKey={agentApiKey}
         agentExternalUrl={externalUrl}
-        agentId={agentId}
+        agentId={llmProviderId}
         agentModelProvider={model.split(':')[0]}
         agentModelType={model.split(':')[1]}
         onOpenChange={setIsEditAgentDrawerOpen}
         open={isEditAgentDrawerOpen}
       />
-      <RemoveAgentDrawer
-        agentId={agentId}
+      <RemoveLLMProviderDrawer
+        agentId={llmProviderId}
         onOpenChange={setIsDeleteAgentDrawerOpen}
         open={isDeleteAgentDrawerOpen}
       />
@@ -227,7 +305,7 @@ function AgentCard({
   );
 }
 
-const EditAgentDrawer = ({
+const EditLLMProviderDrawer = ({
   open,
   onOpenChange,
   agentId,
@@ -383,7 +461,7 @@ const EditAgentDrawer = ({
     </Sheet>
   );
 };
-const RemoveAgentDrawer = ({
+const RemoveLLMProviderDrawer = ({
   open,
   onOpenChange,
   agentId,
diff --git a/apps/shinkai-desktop/src/pages/chat/empty-message.tsx b/apps/shinkai-desktop/src/pages/chat/empty-message.tsx
index 65eb48b38..a7457dc5f 100644
--- a/apps/shinkai-desktop/src/pages/chat/empty-message.tsx
+++ b/apps/shinkai-desktop/src/pages/chat/empty-message.tsx
@@ -168,7 +168,7 @@ const EmptyMessage = () => {
                 className={buttonVariants({
                   variant: 'default',
                 })}
-                to={isLocalShinkaiNodeIsUse ? '/agents-locally' : '/add-agent'}
+                to={isLocalShinkaiNodeIsUse ? '/local-ais' : '/add-ai'}
               >
                 <span>{t('llmProviders.add')}</span>
               </Link>
diff --git a/apps/shinkai-desktop/src/pages/create-tool.tsx b/apps/shinkai-desktop/src/pages/create-tool.tsx
new file mode 100644
index 000000000..c36c869ac
--- /dev/null
+++ b/apps/shinkai-desktop/src/pages/create-tool.tsx
@@ -0,0 +1,5 @@
+function CreateToolPage() {
+  return <h1>Hi tool creation</h1>;
+}
+
+export default CreateToolPage;
diff --git a/apps/shinkai-desktop/src/pages/layout/main-layout.tsx b/apps/shinkai-desktop/src/pages/layout/main-layout.tsx
index 8dfabdbcf..0adbb516f 100644
--- a/apps/shinkai-desktop/src/pages/layout/main-layout.tsx
+++ b/apps/shinkai-desktop/src/pages/layout/main-layout.tsx
@@ -363,7 +363,7 @@ export function MainNav() {
   const footerNavigationLinks = [
     {
       title: t('layout.menuItems.agents'),
-      href: '/agents',
+      href: '/ais',
       icon: <BotIcon className="h-5 w-5" />,
     },
     {
diff --git a/apps/shinkai-desktop/src/pages/ai-model-locally.tsx b/apps/shinkai-desktop/src/pages/local-ais.tsx
similarity index 93%
rename from apps/shinkai-desktop/src/pages/ai-model-locally.tsx
rename to apps/shinkai-desktop/src/pages/local-ais.tsx
index cd3801902..19a2b5a55 100644
--- a/apps/shinkai-desktop/src/pages/ai-model-locally.tsx
+++ b/apps/shinkai-desktop/src/pages/local-ais.tsx
@@ -9,7 +9,7 @@ import { OllamaModels } from '../components/shinkai-node-manager/ollama-models';
 import { shinkaiNodeQueryClient } from '../lib/shinkai-node-manager/shinkai-node-manager-client';
 import { SubpageLayout } from './layout/simple-layout';
 
-const AgentsLocally = () => {
+const LocalAisPage = () => {
   const { t } = useTranslation();
   return (
     <QueryClientProvider client={shinkaiNodeQueryClient}>
@@ -29,7 +29,7 @@ const AgentsLocally = () => {
               }),
               'min-w-[120px] gap-2 py-2.5',
             )}
-            to={{ pathname: '/add-agent' }}
+            to={{ pathname: '/add-ai' }}
           >
             <Plus className="h-4 w-4" />
             {t('llmProviders.addManually')}
@@ -40,4 +40,4 @@ const AgentsLocally = () => {
   );
 };
 
-export default AgentsLocally;
+export default LocalAisPage;
diff --git a/apps/shinkai-desktop/src/pages/tools.tsx b/apps/shinkai-desktop/src/pages/tools.tsx
index 0666b61e3..ee7657e9f 100644
--- a/apps/shinkai-desktop/src/pages/tools.tsx
+++ b/apps/shinkai-desktop/src/pages/tools.tsx
@@ -18,7 +18,7 @@ import {
 } from '@shinkai_network/shinkai-ui';
 import { formatText } from '@shinkai_network/shinkai-ui/helpers';
 import { cn } from '@shinkai_network/shinkai-ui/utils';
-import { BoltIcon, SearchIcon, XIcon } from 'lucide-react';
+import { BoltIcon, PlusIcon, SearchIcon, XIcon } from 'lucide-react';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -51,7 +51,25 @@ export const Tools = () => {
   const { mutateAsync: updateTool } = useUpdateTool();
 
   return (
-    <SimpleLayout classname="max-w-3xl" title={t('tools.label')}>
+    <SimpleLayout
+      classname="max-w-3xl"
+      headerRightElement={
+        <Link
+          className={cn(
+            buttonVariants({
+              variant: 'default',
+              size: 'sm',
+            }),
+            'gap-2 px-3',
+          )}
+          to="/tools/create"
+        >
+          <PlusIcon className="size-4" />
+          Create Tool
+        </Link>
+      }
+      title={t('tools.label')}
+    >
       <ScrollArea className="pr-4 [&>div>div]:!block">
         <div className="relative mb-4 flex h-10 w-full items-center">
           <Input
diff --git a/apps/shinkai-desktop/src/routes/index.tsx b/apps/shinkai-desktop/src/routes/index.tsx
index faa56db7c..de6ce18e8 100644
--- a/apps/shinkai-desktop/src/routes/index.tsx
+++ b/apps/shinkai-desktop/src/routes/index.tsx
@@ -4,6 +4,8 @@ import { debug } from '@tauri-apps/plugin-log';
 import React, { useEffect, useRef } from 'react';
 import { Navigate, Outlet, Route, Routes, useNavigate } from 'react-router-dom';
 
+import AddAgentPage from '../components/agent/add-agent';
+import EditAgentPage from '../components/agent/edit-agent';
 import { ChatProvider } from '../components/chat/context/chat-context';
 import { SetJobScopeProvider } from '../components/chat/context/set-job-scope-context';
 import { ToolsProvider } from '../components/chat/context/tools-context';
@@ -25,17 +27,17 @@ import {
 } from '../lib/shinkai-node-manager/shinkai-node-manager-client';
 import { useShinkaiNodeEventsToast } from '../lib/shinkai-node-manager/shinkai-node-manager-hooks';
 import { ShinkaiNodeRunningOverlay } from '../lib/shinkai-node-overlay';
-import AgentsPage from '../pages/agents';
+import AddAIPage from '../pages/add-ai';
 import AIModelInstallation from '../pages/ai-model-installation';
-import AgentsLocally from '../pages/ai-model-locally';
+import AIsPage from '../pages/ais';
 import AnalyticsPage from '../pages/analytics';
 import AnalyticsSettingsPage from '../pages/analytics-settings';
 import ChatConversation from '../pages/chat/chat-conversation';
 import EmptyMessage from '../pages/chat/empty-message';
 import ChatLayout from '../pages/chat/layout';
 import { ConnectMethodQrCodePage } from '../pages/connect-method-qr-code';
-import CreateAgentPage from '../pages/create-agent';
 import CreateChatPage from '../pages/create-chat';
+import CreateToolPage from '../pages/create-tool';
 import CryptoWalletPage from '../pages/crypto-wallet';
 import { ExportConnection } from '../pages/export-connection';
 import FreeSubscriptionsPage from '../pages/free-subscription';
@@ -45,6 +47,7 @@ import GetStartedPage from '../pages/get-started';
 import MainLayout from '../pages/layout/main-layout';
 import OnboardingLayout from '../pages/layout/onboarding-layout';
 import SettingsLayout from '../pages/layout/settings-layout';
+import LocalAisPage from '../pages/local-ais';
 import { PromptLibrary } from '../pages/prompt-library';
 import { PublicKeys } from '../pages/public-keys';
 import QuickConnectionPage from '../pages/quick-connection';
@@ -268,9 +271,11 @@ const AppRoutes = () => {
             </ProtectedRoute>
           }
         >
-          <Route element={<CreateAgentPage />} path="add-agent" />
-          <Route element={<AgentsLocally />} path="agents-locally" />
-          <Route element={<AgentsPage />} index path="agents" />
+          <Route element={<LocalAisPage />} path="local-ais" />
+          <Route element={<AIsPage />} path="ais" />
+          <Route element={<AddAIPage />} path="add-ai" />
+          <Route element={<AddAgentPage />} path="add-agent" />
+          <Route element={<EditAgentPage />} path="edit/:agentId" />
         </Route>
         <Route
           element={
@@ -327,6 +332,7 @@ const AppRoutes = () => {
         >
           <Route element={<Tools />} index />
           <Route element={<ToolDetails />} path={':toolKey'} />
+          <Route element={<CreateToolPage />} path={'create'} />
         </Route>
         <Route
           element={
diff --git a/apps/shinkai-desktop/src/routes/name.ts b/apps/shinkai-desktop/src/routes/name.ts
index 290992bac..562246841 100644
--- a/apps/shinkai-desktop/src/routes/name.ts
+++ b/apps/shinkai-desktop/src/routes/name.ts
@@ -2,7 +2,7 @@ export const HOME_PATH = '/';
 export const ONBOARDING_PATH = '/onboarding';
 export const CHAT_PATH = '/chat';
 export const SETTINGS_PATH = '/settings';
-export const ADD_AGENT_PATH = '/add-agent';
+export const ADD_AGENT_PATH = '/add-ai';
 
 export const CREATE_CHAT_PATH = '/create-chat';
 export const GENERATE_CODE_PATH = '/generate-code';
diff --git a/libs/shinkai-message-ts/src/api/agents/index.ts b/libs/shinkai-message-ts/src/api/agents/index.ts
new file mode 100644
index 000000000..3161e057e
--- /dev/null
+++ b/libs/shinkai-message-ts/src/api/agents/index.ts
@@ -0,0 +1,87 @@
+import { httpClient } from '../../http-client';
+import { urlJoin } from '../../utils/url-join';
+import {
+  CreateAgentRequest,
+  CreateAgentResponse,
+  GetAgentRequest,
+  GetAgentResponse,
+  GetAgentsResponse,
+  RemoveAgentRequest,
+  RemoveAgentResponse,
+  UpdateAgentRequest,
+  UpdateAgentResponse,
+} from './types';
+
+export const createAgent = async (
+  nodeAddress: string,
+  bearerToken: string,
+  payload: CreateAgentRequest,
+) => {
+  const response = await httpClient.post(
+    urlJoin(nodeAddress, '/v2/add_agent'),
+    payload,
+    {
+      headers: { Authorization: `Bearer ${bearerToken}` },
+      responseType: 'json',
+    },
+  );
+  return response.data as CreateAgentResponse;
+};
+
+export const removeAgent = async (
+  nodeAddress: string,
+  bearerToken: string,
+  payload: RemoveAgentRequest,
+) => {
+  const response = await httpClient.post(
+    urlJoin(nodeAddress, '/v2/remove_agent'),
+    payload,
+    {
+      headers: { Authorization: `Bearer ${bearerToken}` },
+      responseType: 'json',
+    },
+  );
+  return response.data as RemoveAgentResponse;
+};
+
+export const updateAgent = async (
+  nodeAddress: string,
+  bearerToken: string,
+  payload: UpdateAgentRequest,
+) => {
+  const response = await httpClient.post(
+    urlJoin(nodeAddress, '/v2/update_agent'),
+    payload,
+    {
+      headers: { Authorization: `Bearer ${bearerToken}` },
+      responseType: 'json',
+    },
+  );
+  return response.data as UpdateAgentResponse;
+};
+
+export const getAgent = async (
+  nodeAddress: string,
+  bearerToken: string,
+  payload: GetAgentRequest,
+) => {
+  const response = await httpClient.get(
+    urlJoin(nodeAddress, `/v2/get_agent/${payload.agentId}`),
+    {
+      headers: { Authorization: `Bearer ${bearerToken}` },
+      responseType: 'json',
+    },
+  );
+  return response.data as GetAgentResponse;
+};
+
+export const getAgents = async (nodeAddress: string, bearerToken: string) => {
+  const response = await httpClient.get(
+    urlJoin(nodeAddress, '/v2/get_all_agents'),
+    {
+      headers: { Authorization: `Bearer ${bearerToken}` },
+      responseType: 'json',
+    },
+  );
+  return response.data as GetAgentsResponse;
+};
diff --git a/libs/shinkai-message-ts/src/api/agents/types.ts b/libs/shinkai-message-ts/src/api/agents/types.ts
new file mode 100644
index 000000000..53b837ec7
--- /dev/null
+++ b/libs/shinkai-message-ts/src/api/agents/types.ts
@@ -0,0 +1,29 @@
+import { JobConfig } from '../jobs/types';
+
+export type Agent = {
+  name: string;
+  agent_id: string;
+  full_identity_name: string;
+  llm_provider_id: string;
+  ui_description: string;
+  knowledge: string[];
+  storage_path: string;
+  tools: string[];
+  debug_mode: boolean;
+  config?: JobConfig | null;
+};
+
+export type CreateAgentRequest = Agent;
+export type CreateAgentResponse = Agent;
+export type RemoveAgentRequest = {
+  agent_id: string;
+};
+export type RemoveAgentResponse = string;
+export type UpdateAgentRequest = Agent;
+export type UpdateAgentResponse = Agent;
+export type GetAgentRequest = {
+  agentId: string;
+};
+export type GetAgentResponse = Agent;
+
+export type GetAgentsResponse = Agent[];
diff --git a/libs/shinkai-message-ts/src/api/jobs/types.ts b/libs/shinkai-message-ts/src/api/jobs/types.ts
index 26bb1b7c7..0974d4fe3 100644
--- a/libs/shinkai-message-ts/src/api/jobs/types.ts
+++ b/libs/shinkai-message-ts/src/api/jobs/types.ts
@@ -263,6 +263,7 @@ export type GetFileNamesResponse = string[];
 
 export type JobConfig = {
   custom_prompt: string;
+  custom_system_prompt?: string;
   temperature?: number;
   seed?: number;
   top_k?: number;
diff --git a/libs/shinkai-node-state/src/v2/constants.ts b/libs/shinkai-node-state/src/v2/constants.ts
index bffafb3bc..e4e1f3d8b 100644
--- a/libs/shinkai-node-state/src/v2/constants.ts
+++ b/libs/shinkai-node-state/src/v2/constants.ts
@@ -7,7 +7,9 @@ import {
 export enum FunctionKeyV2 {
   GET_HEALTH = 'GET_HEALTH',
   GET_ENCRYPTION_KEYS = 'GET_ENCRYPTION_KEYS',
+  GET_AGENT = 'GET_AGENT',
   GET_AGENTS = 'GET_AGENTS',
+  GET_LLM_PROVIDERS = 'GET_LLM_PROVIDERS',
   GET_INBOXES = 'GET_INBOXES',
   GET_CHAT_CONVERSATION = 'GET_CHAT_CONVERSATION',
   GET_CHAT_CONVERSATION_PAGINATION = 'GET_CHAT_CONVERSATION_PAGINATION',
diff --git a/libs/shinkai-node-state/src/v2/mutations/createAgent/index.ts b/libs/shinkai-node-state/src/v2/mutations/createAgent/index.ts
new file mode 100644
index 000000000..d290c51b5
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/createAgent/index.ts
@@ -0,0 +1,14 @@
+import { createAgent as createAgentApi } from '@shinkai_network/shinkai-message-ts/api/agents/index';
+
+import { CreateAgentInput } from './types';
+
+export const createAgent = async ({
+  nodeAddress,
+  token,
+  agent,
+}: CreateAgentInput) => {
+  const response = await createAgentApi(nodeAddress, token, {
+    ...agent,
+  });
+  return response;
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/createAgent/types.ts b/libs/shinkai-node-state/src/v2/mutations/createAgent/types.ts
new file mode 100644
index 000000000..a2027dbb5
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/createAgent/types.ts
@@ -0,0 +1,12 @@
+import {
+  Agent,
+  CreateAgentResponse,
+} from '@shinkai_network/shinkai-message-ts/api/agents/types';
+import { Token } from '@shinkai_network/shinkai-message-ts/api/general/types';
+
+export type CreateAgentOutput = CreateAgentResponse;
+
+export type CreateAgentInput = Token & {
+  nodeAddress: string;
+  agent: Agent;
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/createAgent/useCreateAgent.ts b/libs/shinkai-node-state/src/v2/mutations/createAgent/useCreateAgent.ts
new file mode 100644
index 000000000..4c3e28fe3
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/createAgent/useCreateAgent.ts
@@ -0,0 +1,33 @@
+import {
+  useMutation,
+  type UseMutationOptions,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+import { FunctionKeyV2 } from '../../constants';
+import { APIError } from '../../types';
+import { createAgent } from './index';
+import { CreateAgentInput, CreateAgentOutput } from './types';
+
+type Options = UseMutationOptions<
+  CreateAgentOutput,
+  APIError,
+  CreateAgentInput
+>;
+
+export const useCreateAgent = (options?: Options) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createAgent,
+    ...options,
+    onSuccess: (response, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: [FunctionKeyV2.GET_AGENTS],
+      });
+
+      if (options?.onSuccess) {
+        options.onSuccess(response, variables, context);
+      }
+    },
+  });
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/removeAgent/index.ts b/libs/shinkai-node-state/src/v2/mutations/removeAgent/index.ts
new file mode 100644
index 000000000..7666e0650
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/removeAgent/index.ts
@@ -0,0 +1,14 @@
+import { removeAgent as removeAgentApi } from '@shinkai_network/shinkai-message-ts/api/agents/index';
+
+import { RemoveAgentInput } from './types';
+
+export const removeAgent = async ({
+  nodeAddress,
+  token,
+  agentId,
+}: RemoveAgentInput) => {
+  const data = await removeAgentApi(nodeAddress, token, {
+    agent_id: agentId,
+  });
+  return data;
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/removeAgent/types.ts b/libs/shinkai-node-state/src/v2/mutations/removeAgent/types.ts
new file mode 100644
index 000000000..34977f3b4
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/removeAgent/types.ts
@@ -0,0 +1,8 @@
+import { RemoveAgentResponse } from '@shinkai_network/shinkai-message-ts/api/agents/types';
+import { Token } from '@shinkai_network/shinkai-message-ts/api/general/types';
+
+export type RemoveAgentInput = Token & {
+  nodeAddress: string;
+  agentId: string;
+};
+export type RemoveAgentOutput = RemoveAgentResponse;
diff --git a/libs/shinkai-node-state/src/v2/mutations/removeAgent/useRemoveAgent.ts b/libs/shinkai-node-state/src/v2/mutations/removeAgent/useRemoveAgent.ts
new file mode 100644
index 000000000..480c6168e
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/removeAgent/useRemoveAgent.ts
@@ -0,0 +1,30 @@
+import { UseMutationOptions, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { FunctionKeyV2 } from '../../constants';
+import { APIError } from '../../types';
+import { removeAgent } from '.';
+import { RemoveAgentInput, RemoveAgentOutput } from './types';
+
+type Options = UseMutationOptions<
+  RemoveAgentOutput,
+  APIError,
+  RemoveAgentInput
+>;
+
+export const useRemoveAgent = (options?: Options) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: removeAgent,
+    ...options,
+    onSuccess: (response, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: [FunctionKeyV2.GET_AGENTS],
+      });
+
+      if (options?.onSuccess) {
+        options.onSuccess(response, variables, context);
+      }
+    },
+  });
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/updateAgent/index.ts b/libs/shinkai-node-state/src/v2/mutations/updateAgent/index.ts
new file mode 100644
index 000000000..32a76734a
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/updateAgent/index.ts
@@ -0,0 +1,14 @@
+import { updateAgent as updateAgentApi } from '@shinkai_network/shinkai-message-ts/api/agents/index';
+
+import { UpdateAgentInput } from './types';
+
+export const updateAgent = async ({
+  nodeAddress,
+  token,
+  agent,
+}: UpdateAgentInput) => {
+  const response = await updateAgentApi(nodeAddress, token, {
+    ...agent,
+  });
+  return response;
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/updateAgent/types.ts b/libs/shinkai-node-state/src/v2/mutations/updateAgent/types.ts
new file mode 100644
index 000000000..0fbf28a59
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/updateAgent/types.ts
@@ -0,0 +1,12 @@
+import {
+  Agent,
+  UpdateAgentResponse,
+} from '@shinkai_network/shinkai-message-ts/api/agents/types';
+import { Token } from '@shinkai_network/shinkai-message-ts/api/general/types';
+
+export type UpdateAgentOutput = UpdateAgentResponse;
+
+export type UpdateAgentInput = Token & {
+  nodeAddress: string;
+  agent: Agent;
+};
diff --git a/libs/shinkai-node-state/src/v2/mutations/updateAgent/useUpdateAgent.ts b/libs/shinkai-node-state/src/v2/mutations/updateAgent/useUpdateAgent.ts
new file mode 100644
index 000000000..6d6bec302
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/mutations/updateAgent/useUpdateAgent.ts
@@ -0,0 +1,33 @@
+import {
+  useMutation,
+  type UseMutationOptions,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+import { FunctionKeyV2 } from '../../constants';
+import { APIError } from '../../types';
+import { updateAgent } from './index';
+import { UpdateAgentInput, UpdateAgentOutput } from './types';
+
+type Options = UseMutationOptions<
+  UpdateAgentOutput,
+  APIError,
+  UpdateAgentInput
+>;
+
+export const useUpdateAgent = (options?: Options) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateAgent,
+    ...options,
+    onSuccess: (response, variables, context) => {
+      queryClient.invalidateQueries({
+        queryKey: [FunctionKeyV2.GET_AGENTS],
+      });
+
+      if (options?.onSuccess) {
+        options.onSuccess(response, variables, context);
+      }
+    },
+  });
+};
diff --git a/libs/shinkai-node-state/src/v2/queries/getAgent/index.ts b/libs/shinkai-node-state/src/v2/queries/getAgent/index.ts
new file mode 100644
index 000000000..c3d7d04e7
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/queries/getAgent/index.ts
@@ -0,0 +1,14 @@
+import { getAgent as getAgentApi } from '@shinkai_network/shinkai-message-ts/api/agents/index';
+
+import type { GetAgentInput } from './types';
+
+export const getAgent = async ({
+  nodeAddress,
+  token,
+  agentId,
+}: GetAgentInput) => {
+  const result = await getAgentApi(nodeAddress, token, {
+    agentId,
+  });
+  return result;
+};
diff --git a/libs/shinkai-node-state/src/v2/queries/getAgent/types.ts b/libs/shinkai-node-state/src/v2/queries/getAgent/types.ts
new file mode 100644
index 000000000..52fd82201
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/queries/getAgent/types.ts
@@ -0,0 +1,9 @@
+import { GetAgentResponse } from '@shinkai_network/shinkai-message-ts/api/agents/types';
+import { Token } from '@shinkai_network/shinkai-message-ts/api/general/types';
+
+export type GetAgentInput = Token & {
+  nodeAddress: string;
+  agentId: string;
+};
+
+export type GetAgentOutput = GetAgentResponse;
diff --git a/libs/shinkai-node-state/src/v2/queries/getAgent/useGetAgent.ts b/libs/shinkai-node-state/src/v2/queries/getAgent/useGetAgent.ts
new file mode 100644
index 000000000..5266b8c62
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/queries/getAgent/useGetAgent.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { FunctionKeyV2 } from '../../constants';
+import { getAgent } from './index';
+import { GetAgentInput } from './types';
+
+export const useGetAgent = (input: GetAgentInput) => {
+  const response = useQuery({
+    queryKey: [FunctionKeyV2.GET_AGENT, input],
+    queryFn: () => getAgent(input),
+  });
+  return response;
+};
diff --git a/libs/shinkai-node-state/src/v2/queries/getAgents/index.ts b/libs/shinkai-node-state/src/v2/queries/getAgents/index.ts
new file mode 100644
index 000000000..da2e7906f
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/queries/getAgents/index.ts
@@ -0,0 +1,8 @@
+import { getAgents as getAgentsApi } from '@shinkai_network/shinkai-message-ts/api/agents/index';
+
+import type { GetAgentsInput } from './types';
+
+export const getAgents = async ({ nodeAddress, token }: GetAgentsInput) => {
+  const result = await getAgentsApi(nodeAddress, token);
+  return result;
+};
diff --git a/libs/shinkai-node-state/src/v2/queries/getAgents/types.ts b/libs/shinkai-node-state/src/v2/queries/getAgents/types.ts
new file mode 100644
index 000000000..2e7df0697
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/queries/getAgents/types.ts
@@ -0,0 +1,8 @@
+import { GetAgentsResponse } from '@shinkai_network/shinkai-message-ts/api/agents/types';
+import { Token } from '@shinkai_network/shinkai-message-ts/api/general/types';
+
+export type GetAgentsInput = Token & {
+  nodeAddress: string;
+};
+
+export type GetAgentsOutput = GetAgentsResponse;
diff --git a/libs/shinkai-node-state/src/v2/queries/getAgents/useGetAgents.ts b/libs/shinkai-node-state/src/v2/queries/getAgents/useGetAgents.ts
new file mode 100644
index 000000000..e612c3f37
--- /dev/null
+++ b/libs/shinkai-node-state/src/v2/queries/getAgents/useGetAgents.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { FunctionKeyV2 } from '../../constants';
+import { getAgents } from './index';
+import { GetAgentsInput } from './types';
+
+export const useGetAgents = (input: GetAgentsInput) => {
+  const response = useQuery({
+    queryKey: [FunctionKeyV2.GET_AGENTS, input],
+    queryFn: () => getAgents(input),
+  });
+  return response;
+};
diff --git a/libs/shinkai-node-state/src/v2/queries/getLLMProviders/useGetLLMProviders.ts b/libs/shinkai-node-state/src/v2/queries/getLLMProviders/useGetLLMProviders.ts
index e44563225..cc1343c3d 100644
--- a/libs/shinkai-node-state/src/v2/queries/getLLMProviders/useGetLLMProviders.ts
+++ b/libs/shinkai-node-state/src/v2/queries/getLLMProviders/useGetLLMProviders.ts
@@ -6,7 +6,7 @@ import { GetLLMProvidersInput } from './types';
 
 export const useGetLLMProviders = (input: GetLLMProvidersInput) => {
   const response = useQuery({
-    queryKey: [FunctionKeyV2.GET_AGENTS, input],
+    queryKey: [FunctionKeyV2.GET_LLM_PROVIDERS, input],
 
     queryFn: () => getLLMProviders(input),
   });
diff --git a/libs/shinkai-node-state/src/v2/queries/getToolsList/useGetToolsList.ts b/libs/shinkai-node-state/src/v2/queries/getToolsList/useGetToolsList.ts
index 0292fb7e3..8a63b0d79 100644
--- a/libs/shinkai-node-state/src/v2/queries/getToolsList/useGetToolsList.ts
+++ b/libs/shinkai-node-state/src/v2/queries/getToolsList/useGetToolsList.ts
@@ -22,7 +22,6 @@ export const useGetTools = (
     queryKey: [FunctionKeyV2.GET_LIST_TOOLS, input],
     queryFn: () => getTools(input),
     select: (data) => data?.sort((a, b) => a.name.localeCompare(b.name)),
-
     ...options,
   });
   return response;
diff --git a/libs/shinkai-ui/src/assets/icons/general.tsx b/libs/shinkai-ui/src/assets/icons/general.tsx
index 5217b35b7..d38e19d93 100644
--- a/libs/shinkai-ui/src/assets/icons/general.tsx
+++ b/libs/shinkai-ui/src/assets/icons/general.tsx
@@ -1192,3 +1192,82 @@ export const ReactJsIcon = ({ className }: { className?: string }) => (
     </defs>
   </svg>
 );
+export const AIAgentIcon = ({ className }: { className?: string }) => (
+  <svg
+    className={cn('shrink-0', className)}
+    fill={'none'}
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+  >
+    <path
+      d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M7 7L7 4"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M17 7L17 4"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <circle
+      cx="7"
+      cy="3"
+      r="1"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <circle
+      cx="17"
+      cy="3"
+      r="1"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z"
+      stroke="currentColor"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M9.00896 11H9"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+    <path
+      d="M15.009 11H15"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    />
+  </svg>
+);