feat: agent templates and seeding premade agents (#1910)

* feat: agent templates and seeding premade agents * fix: ensure ObjectId is used for source reference in agent configuration * fix: improve source handling in DatabaseSeeder and update tool config processing * feat: add prompt handling in DatabaseSeeder for agent configuration * Docs premade agents * link to prescraped docs * feat: add template agent retrieval and adopt agent functionality * feat: simplify agent descriptions in premade_agents.yaml added docs --------- Co-authored-by: Pavel <pabin@yandex.ru> Co-authored-by: Alex <a@tushynski.me>
2025-11-30 00:53:14 +00:00 · 2025-10-07 15:30:14 +05:30
parent 8b8e616557
commit da6317a242
21 changed files with 1053 additions and 574 deletions
--- a/frontend/src/agents/AgentCard.tsx
+++ b/frontend/src/agents/AgentCard.tsx
@@ -1,14 +1,22 @@
-import { useRef, useState } from 'react';
+import { SyntheticEvent, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';

 import userService from '../api/services/userService';
-import AgentImage from '../components/AgentImage';
+import Duplicate from '../assets/duplicate.svg';
+import Edit from '../assets/edit.svg';
+import Link from '../assets/link-gray.svg';
+import Monitoring from '../assets/monitoring.svg';
+import Pin from '../assets/pin.svg';
+import Trash from '../assets/red-trash.svg';
 import ThreeDots from '../assets/three-dots.svg';
+import UnPin from '../assets/unpin.svg';
+import AgentImage from '../components/AgentImage';
 import ContextMenu, { MenuOption } from '../components/ContextMenu';
 import ConfirmationModal from '../modals/ConfirmationModal';
 import { ActiveState } from '../models/misc';
 import {
+  selectAgents,
  selectToken,
  setAgents,
  setSelectedAgent,
@@ -18,46 +26,205 @@ import { Agent } from './types';
 type AgentCardProps = {
  agent: Agent;
  agents: Agent[];
-  menuOptions?: MenuOption[];
-  onDelete?: (agentId: string) => void;
+  updateAgents?: (agents: Agent[]) => void;
+  section: string;
 };

 export default function AgentCard({
  agent,
  agents,
-  menuOptions,
-  onDelete,
+  updateAgents,
+  section,
 }: AgentCardProps) {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const token = useSelector(selectToken);
+  const userAgents = useSelector(selectAgents);

-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
  const [deleteConfirmation, setDeleteConfirmation] =
    useState<ActiveState>('INACTIVE');

  const menuRef = useRef<HTMLDivElement>(null);

-  const handleCardClick = () => {
-    if (agent.status === 'published') {
-      dispatch(setSelectedAgent(agent));
-      navigate('/');
+  const menuOptionsConfig: Record<string, MenuOption[]> = {
+    template: [
+      {
+        icon: Duplicate,
+        label: 'Duplicate',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          handleDuplicate();
+        },
+        variant: 'primary',
+        iconWidth: 18,
+        iconHeight: 18,
+      },
+    ],
+    user: [
+      {
+        icon: Monitoring,
+        label: 'Logs',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/logs/${agent.id}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
+      },
+      {
+        icon: Edit,
+        label: 'Edit',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/edit/${agent.id}`);
+        },
+        variant: 'primary',
+        iconWidth: 14,
+        iconHeight: 14,
+      },
+      ...(agent.status === 'published'
+        ? [
+            {
+              icon: agent.pinned ? UnPin : Pin,
+              label: agent.pinned ? 'Unpin' : 'Pin agent',
+              onClick: (e: SyntheticEvent) => {
+                e.stopPropagation();
+                togglePin();
+              },
+              variant: 'primary' as const,
+              iconWidth: 18,
+              iconHeight: 18,
+            },
+          ]
+        : []),
+      {
+        icon: Trash,
+        label: 'Delete',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          setDeleteConfirmation('ACTIVE');
+        },
+        variant: 'danger',
+        iconWidth: 13,
+        iconHeight: 13,
+      },
+    ],
+    shared: [
+      {
+        icon: Link,
+        label: 'Open',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          navigate(`/agents/shared/${agent.shared_token}`);
+        },
+        variant: 'primary',
+        iconWidth: 12,
+        iconHeight: 12,
+      },
+      {
+        icon: agent.pinned ? UnPin : Pin,
+        label: agent.pinned ? 'Unpin' : 'Pin agent',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          togglePin();
+        },
+        variant: 'primary',
+        iconWidth: 18,
+        iconHeight: 18,
+      },
+      {
+        icon: Trash,
+        label: 'Remove',
+        onClick: (e: SyntheticEvent) => {
+          e.stopPropagation();
+          handleHideSharedAgent();
+        },
+        variant: 'danger',
+        iconWidth: 13,
+        iconHeight: 13,
+      },
+    ],
+  };
+  const menuOptions = menuOptionsConfig[section] || [];
+
+  const handleClick = () => {
+    if (section === 'user') {
+      if (agent.status === 'published') {
+        dispatch(setSelectedAgent(agent));
+        navigate(`/`);
+      }
+    }
+    if (section === 'shared') {
+      navigate(`/agents/shared/${agent.shared_token}`);
    }
  };

-  const defaultDelete = async (agentId: string) => {
-    const response = await userService.deleteAgent(agentId, token);
-    if (!response.ok) throw new Error('Failed to delete agent');
-    const data = await response.json();
-    dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
+  const togglePin = async () => {
+    try {
+      const response = await userService.togglePinAgent(agent.id ?? '', token);
+      if (!response.ok) throw new Error('Failed to pin agent');
+      const updatedAgents = agents.map((prevAgent) => {
+        if (prevAgent.id === agent.id)
+          return { ...prevAgent, pinned: !prevAgent.pinned };
+        return prevAgent;
+      });
+      updateAgents?.(updatedAgents);
+    } catch (error) {
+      console.error('Error:', error);
+    }
  };

+  const handleHideSharedAgent = async () => {
+    try {
+      const response = await userService.removeSharedAgent(
+        agent.id ?? '',
+        token,
+      );
+      if (!response.ok) throw new Error('Failed to hide shared agent');
+      const updatedAgents = agents.filter(
+        (prevAgent) => prevAgent.id !== agent.id,
+      );
+      updateAgents?.(updatedAgents);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      const response = await userService.deleteAgent(agent.id ?? '', token);
+      if (!response.ok) throw new Error('Failed to delete agent');
+      const updatedAgents = agents.filter(
+        (prevAgent) => prevAgent.id !== agent.id,
+      );
+      updateAgents?.(updatedAgents);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  const handleDuplicate = async () => {
+    try {
+      const response = await userService.adoptAgent(agent.id ?? '', token);
+      if (!response.ok) throw new Error('Failed to duplicate agent');
+      const data = await response.json();
+      if (userAgents) {
+        const updatedAgents = [...userAgents, data.agent];
+        dispatch(setAgents(updatedAgents));
+      } else dispatch(setAgents([data.agent]));
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
  return (
    <div
-      className={`relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${
-        agent.status === 'published' ? 'cursor-pointer' : ''
-      }`}
-      onClick={handleCardClick}
+      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] md:w-48 dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        handleClick();
+      }}
    >
      <div
        ref={menuRef}
@@ -67,19 +234,16 @@ export default function AgentCard({
        }}
        className="absolute top-4 right-4 z-10 cursor-pointer"
      >
-        <img src={ThreeDots} alt="options" className="h-[19px] w-[19px]" />
-        {menuOptions && (
-          <ContextMenu
-            isOpen={isMenuOpen}
-            setIsOpen={setIsMenuOpen}
-            options={menuOptions}
-            anchorRef={menuRef}
-            position="top-right"
-            offset={{ x: 0, y: 0 }}
-          />
-        )}
+        <img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
+        <ContextMenu
+          isOpen={isMenuOpen}
+          setIsOpen={setIsMenuOpen}
+          options={menuOptions}
+          anchorRef={menuRef}
+          position="bottom-right"
+          offset={{ x: 0, y: 0 }}
+        />
      </div>
-
      <div className="w-full">
        <div className="flex w-full items-center gap-1 px-1">
          <AgentImage
@@ -88,9 +252,7 @@ export default function AgentCard({
            className="h-7 w-7 rounded-full object-contain"
          />
          {agent.status === 'draft' && (
-            <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">
-              (Draft)
-            </p>
+            <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">{`(Draft)`}</p>
          )}
        </div>
        <div className="mt-2">
@@ -105,14 +267,13 @@ export default function AgentCard({
          </p>
        </div>
      </div>
-
      <ConfirmationModal
        message="Are you sure you want to delete this agent?"
        modalState={deleteConfirmation}
        setModalState={setDeleteConfirmation}
        submitLabel="Delete"
        handleSubmit={() => {
-          onDelete ? onDelete(agent.id || '') : defaultDelete(agent.id || '');
+          handleDelete();
          setDeleteConfirmation('INACTIVE');
        }}
        cancelLabel="Cancel"
--- a/frontend/src/agents/AgentsList.tsx
+++ b/frontend/src/agents/AgentsList.tsx
@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+
+import Spinner from '../components/Spinner';
+import {
+  setConversation,
+  updateConversationId,
+} from '../conversation/conversationSlice';
+import {
+  selectSelectedAgent,
+  selectToken,
+  setSelectedAgent,
+} from '../preferences/preferenceSlice';
+import AgentCard from './AgentCard';
+import { agentSectionsConfig } from './agents.config';
+import { Agent } from './types';
+
+export default function AgentsList() {
+  const dispatch = useDispatch();
+  const token = useSelector(selectToken);
+  const selectedAgent = useSelector(selectSelectedAgent);
+
+  useEffect(() => {
+    dispatch(setConversation([]));
+    dispatch(
+      updateConversationId({
+        query: { conversationId: null },
+      }),
+    );
+    if (selectedAgent) dispatch(setSelectedAgent(null));
+  }, [token]);
+  return (
+    <div className="p-4 md:p-12">
+      <h1 className="text-eerie-black mb-0 text-[32px] font-bold lg:text-[40px] dark:text-[#E0E0E0]">
+        Agents
+      </h1>
+      <p className="dark:text-gray-4000 mt-5 text-[15px] text-[#71717A]">
+        Discover and create custom versions of DocsGPT that combine
+        instructions, extra knowledge, and any combination of skills
+      </p>
+      {agentSectionsConfig.map((sectionConfig) => (
+        <AgentSection key={sectionConfig.id} config={sectionConfig} />
+      ))}
+    </div>
+  );
+}
+
+function AgentSection({
+  config,
+}: {
+  config: (typeof agentSectionsConfig)[number];
+}) {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const token = useSelector(selectToken);
+  const agents = useSelector(config.selectData);
+
+  const [loading, setLoading] = useState(true);
+
+  const updateAgents = (updatedAgents: Agent[]) => {
+    dispatch(config.updateAction(updatedAgents));
+  };
+
+  useEffect(() => {
+    const getAgents = async () => {
+      setLoading(true);
+      try {
+        const response = await config.fetchAgents(token);
+        if (!response.ok)
+          throw new Error(`Failed to fetch ${config.id} agents`);
+        const data = await response.json();
+        dispatch(config.updateAction(data));
+      } catch (error) {
+        console.error(`Error fetching ${config.id} agents:`, error);
+        dispatch(config.updateAction([]));
+      } finally {
+        setLoading(false);
+      }
+    };
+    getAgents();
+  }, [token, config, dispatch]);
+  return (
+    <div className="mt-8 flex flex-col gap-4">
+      <div className="flex w-full items-center justify-between">
+        <div className="flex flex-col gap-2">
+          <h2 className="text-[18px] font-semibold text-[#18181B] dark:text-[#E0E0E0]">
+            {config.title}
+          </h2>
+          <p className="text-[13px] text-[#71717A]">{config.description}</p>
+        </div>
+        {config.showNewAgentButton && (
+          <button
+            className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-4 py-2 text-sm text-white"
+            onClick={() => navigate('/agents/new')}
+          >
+            New Agent
+          </button>
+        )}
+      </div>
+      <div>
+        {loading ? (
+          <div className="flex h-72 w-full items-center justify-center">
+            <Spinner />
+          </div>
+        ) : agents && agents.length > 0 ? (
+          <div className="grid grid-cols-1 gap-4 sm:flex sm:flex-wrap">
+            {agents.map((agent) => (
+              <AgentCard
+                key={agent.id}
+                agent={agent}
+                agents={agents}
+                updateAgents={updateAgents}
+                section={config.id}
+              />
+            ))}
+          </div>
+        ) : (
+          <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
+            <p>{config.emptyStateDescription}</p>
+            {config.showNewAgentButton && (
+              <button
+                className="bg-purple-30 hover:bg-violets-are-blue ml-2 rounded-full px-4 py-2 text-sm text-white"
+                onClick={() => navigate('/agents/new')}
+              >
+                New Agent
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/agents/NewAgent.tsx
+++ b/frontend/src/agents/NewAgent.tsx
@@ -23,7 +23,7 @@ import PromptsModal from '../preferences/PromptsModal';
 import Prompts from '../settings/Prompts';
 import { UserToolType } from '../settings/types';
 import AgentPreview from './AgentPreview';
-import { Agent } from './types';
+import { Agent, ToolSummary } from './types';

 const embeddingsName =
  import.meta.env.VITE_EMBEDDINGS_NAME ||
@@ -64,9 +64,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
  const [selectedSourceIds, setSelectedSourceIds] = useState<
    Set<string | number>
  >(new Set());
-  const [selectedToolIds, setSelectedToolIds] = useState<Set<string | number>>(
-    new Set(),
-  );
+  const [selectedTools, setSelectedTools] = useState<ToolSummary[]>([]);
  const [deleteConfirmation, setDeleteConfirmation] =
    useState<ActiveState>('INACTIVE');
  const [agentDetails, setAgentDetails] = useState<ActiveState>('INACTIVE');
@@ -337,7 +335,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
      const data = await response.json();
      const tools: OptionType[] = data.tools.map((tool: UserToolType) => ({
        id: tool.id,
-        label: tool.displayName,
+        label: tool.customName ? tool.customName : tool.displayName,
        icon: `/toolIcons/tool_${tool.name}.svg`,
      }));
      setUserTools(tools);
@@ -410,7 +408,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
          setSelectedSourceIds(new Set([data.retriever]));
        }

-        if (data.tools) setSelectedToolIds(new Set(data.tools));
+        if (data.tool_details) setSelectedTools(data.tool_details);
        if (data.status === 'draft') setEffectiveMode('draft');
        if (data.json_schema) {
          const jsonText = JSON.stringify(data.json_schema, null, 2);
@@ -480,16 +478,13 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
  }, [selectedSourceIds]);

  useEffect(() => {
-    const selectedTool = Array.from(selectedToolIds).map((id) =>
-      userTools.find((tool) => tool.id === id),
-    );
    setAgent((prev) => ({
      ...prev,
-      tools: selectedTool
+      tools: Array.from(selectedTools)
        .map((tool) => tool?.id)
        .filter((id): id is string => typeof id === 'string'),
    }));
-  }, [selectedToolIds]);
+  }, [selectedTools]);

  useEffect(() => {
    if (isPublishable()) dispatch(setSelectedAgent(agent));
@@ -645,15 +640,15 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                >
                  {selectedSourceIds.size > 0
                    ? Array.from(selectedSourceIds)
-                        .map(
-                          (id) =>
-                            sourceDocs?.find(
-                              (source) =>
-                                source.id === id ||
-                                source.name === id ||
-                                source.retriever === id,
-                            )?.name,
-                        )
+                        .map((id) => {
+                          const matchedDoc = sourceDocs?.find(
+                            (source) =>
+                              source.id === id ||
+                              source.name === id ||
+                              source.retriever === id,
+                          );
+                          return matchedDoc?.name || `External KB`;
+                        })
                        .filter(Boolean)
                        .join(', ')
                    : 'Select sources'}
@@ -768,16 +763,14 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                ref={toolAnchorButtonRef}
                onClick={() => setIsToolsPopupOpen(!isToolsPopupOpen)}
                className={`border-silver dark:bg-raisin-black w-full truncate rounded-3xl border bg-white px-5 py-3 text-left text-sm dark:border-[#7E7E7E] ${
-                  selectedToolIds.size > 0
+                  selectedTools.length > 0
                    ? 'text-jet dark:text-bright-gray'
                    : 'dark:text-silver text-gray-400'
                }`}
              >
-                {selectedToolIds.size > 0
-                  ? Array.from(selectedToolIds)
-                      .map(
-                        (id) => userTools.find((tool) => tool.id === id)?.label,
-                      )
+                {selectedTools.length > 0
+                  ? selectedTools
+                      .map((tool) => tool.display_name || tool.name)
                      .filter(Boolean)
                      .join(', ')
                  : 'Select tools'}
@@ -787,9 +780,17 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
                onClose={() => setIsToolsPopupOpen(false)}
                anchorRef={toolAnchorButtonRef}
                options={userTools}
-                selectedIds={selectedToolIds}
+                selectedIds={new Set(selectedTools.map((tool) => tool.id))}
                onSelectionChange={(newSelectedIds: Set<string | number>) =>
-                  setSelectedToolIds(newSelectedIds)
+                  setSelectedTools(
+                    userTools
+                      .filter((tool) => newSelectedIds.has(tool.id))
+                      .map((tool) => ({
+                        id: String(tool.id),
+                        name: tool.label,
+                        display_name: tool.label,
+                      })),
+                  )
                }
                title="Select Tools"
                searchPlaceholder="Search tools..."
--- a/frontend/src/agents/agentPreviewSlice.ts
+++ b/frontend/src/agents/agentPreviewSlice.ts
@@ -1,19 +1,20 @@
 import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import {
+  handleFetchAnswer,
+  handleFetchAnswerSteaming,
+} from '../conversation/conversationHandlers';
 import {
  Answer,
  ConversationState,
  Query,
  Status,
 } from '../conversation/conversationModels';
-import {
-  handleFetchAnswer,
-  handleFetchAnswerSteaming,
-} from '../conversation/conversationHandlers';
-import {
-  selectCompletedAttachments,
-  clearAttachments,
-} from '../upload/uploadSlice';
 import store from '../store';
+import {
+  clearAttachments,
+  selectCompletedAttachments,
+} from '../upload/uploadSlice';

 const initialState: ConversationState = {
  queries: [],
--- a/frontend/src/agents/agents.config.ts
+++ b/frontend/src/agents/agents.config.ts
@@ -0,0 +1,42 @@
+import userService from '../api/services/userService';
+import {
+  selectAgents,
+  selectTemplateAgents,
+  selectSharedAgents,
+  setAgents,
+  setTemplateAgents,
+  setSharedAgents,
+} from '../preferences/preferenceSlice';
+
+export const agentSectionsConfig = [
+  {
+    id: 'template',
+    title: 'By DocsGPT',
+    description: 'Agents provided by DocsGPT',
+    showNewAgentButton: false,
+    emptyStateDescription: 'No template agents found.',
+    fetchAgents: (token: string | null) => userService.getTemplateAgents(token),
+    selectData: selectTemplateAgents,
+    updateAction: setTemplateAgents,
+  },
+  {
+    id: 'user',
+    title: 'By me',
+    description: 'Agents created or published by you',
+    showNewAgentButton: true,
+    emptyStateDescription: 'You don’t have any created agents yet.',
+    fetchAgents: (token: string | null) => userService.getAgents(token),
+    selectData: selectAgents,
+    updateAction: setAgents,
+  },
+  {
+    id: 'shared',
+    title: 'Shared with me',
+    description: 'Agents imported by using a public link',
+    showNewAgentButton: false,
+    emptyStateDescription: 'No shared agents found.',
+    fetchAgents: (token: string | null) => userService.getSharedAgents(token),
+    selectData: selectSharedAgents,
+    updateAction: setSharedAgents,
+  },
+];
--- a/frontend/src/agents/index.tsx
+++ b/frontend/src/agents/index.tsx
@@ -1,37 +1,9 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';

-import userService from '../api/services/userService';
-import Edit from '../assets/edit.svg';
-import Link from '../assets/link-gray.svg';
-import Monitoring from '../assets/monitoring.svg';
-import Pin from '../assets/pin.svg';
-import Trash from '../assets/red-trash.svg';
-import AgentImage from '../components/AgentImage';
-import ThreeDots from '../assets/three-dots.svg';
-import UnPin from '../assets/unpin.svg';
-import ContextMenu, { MenuOption } from '../components/ContextMenu';
-import Spinner from '../components/Spinner';
-import {
-  setConversation,
-  updateConversationId,
-} from '../conversation/conversationSlice';
-import ConfirmationModal from '../modals/ConfirmationModal';
-import { ActiveState } from '../models/misc';
-import {
-  selectAgents,
-  selectSelectedAgent,
-  selectSharedAgents,
-  selectToken,
-  setAgents,
-  setSelectedAgent,
-  setSharedAgents,
-} from '../preferences/preferenceSlice';
 import AgentLogs from './AgentLogs';
+import AgentsList from './AgentsList';
 import NewAgent from './NewAgent';
 import SharedAgent from './SharedAgent';
-import { Agent } from './types';

 export default function Agents() {
  return (
@@ -44,427 +16,3 @@ export default function Agents() {
    </Routes>
  );
 }
-
-const sectionConfig = {
-  user: {
-    title: 'By me',
-    description: 'Agents created or published by you',
-    showNewAgentButton: true,
-    emptyStateDescription: 'You don’t have any created agents yet',
-  },
-  shared: {
-    title: 'Shared with me',
-    description: 'Agents imported by using a public link',
-    showNewAgentButton: false,
-    emptyStateDescription: 'No shared agents found',
-  },
-};
-
-function AgentsList() {
-  const dispatch = useDispatch();
-  const token = useSelector(selectToken);
-  const agents = useSelector(selectAgents);
-  const sharedAgents = useSelector(selectSharedAgents);
-  const selectedAgent = useSelector(selectSelectedAgent);
-
-  const [loadingUserAgents, setLoadingUserAgents] = useState<boolean>(true);
-  const [loadingSharedAgents, setLoadingSharedAgents] = useState<boolean>(true);
-
-  const getAgents = async () => {
-    try {
-      setLoadingUserAgents(true);
-      const response = await userService.getAgents(token);
-      if (!response.ok) throw new Error('Failed to fetch agents');
-      const data = await response.json();
-      dispatch(setAgents(data));
-      setLoadingUserAgents(false);
-    } catch (error) {
-      console.error('Error:', error);
-      setLoadingUserAgents(false);
-    }
-  };
-
-  const getSharedAgents = async () => {
-    try {
-      setLoadingSharedAgents(true);
-      const response = await userService.getSharedAgents(token);
-      if (!response.ok) throw new Error('Failed to fetch shared agents');
-      const data = await response.json();
-      dispatch(setSharedAgents(data));
-      setLoadingSharedAgents(false);
-    } catch (error) {
-      console.error('Error:', error);
-      setLoadingSharedAgents(false);
-    }
-  };
-
-  useEffect(() => {
-    getAgents();
-    getSharedAgents();
-    dispatch(setConversation([]));
-    dispatch(
-      updateConversationId({
-        query: { conversationId: null },
-      }),
-    );
-    if (selectedAgent) dispatch(setSelectedAgent(null));
-  }, [token]);
-  return (
-    <div className="p-4 md:p-12">
-      <h1 className="text-eerie-black mb-0 text-[32px] font-bold lg:text-[40px] dark:text-[#E0E0E0]">
-        Agents
-      </h1>
-      <p className="dark:text-gray-4000 mt-5 text-[15px] text-[#71717A]">
-        Discover and create custom versions of DocsGPT that combine
-        instructions, extra knowledge, and any combination of skills
-      </p>
-      {/* Premade agents section */}
-      {/* <div className="mt-6">
-        <h2 className="text-[18px] font-semibold text-[#18181B] dark:text-[#E0E0E0]">
-          Premade by DocsGPT
-        </h2>
-        <div className="mt-4 flex w-full flex-wrap gap-4">
-          {Array.from({ length: 5 }, (_, index) => (
-            <div
-              key={index}
-              className="relative flex h-44 w-48 flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 dark:bg-[#383838]"
-            >
-              <button onClick={() => {}} className="absolute right-4 top-4">
-                <img
-                  src={Copy}
-                  alt={'use-agent'}
-                  className="h-[19px] w-[19px]"
-                />
-              </button>
-              <div className="w-full">
-                <div className="flex w-full items-center px-1">
-                  <AgentImage className="h-7 w-7 rounded-full" />
-                </div>
-                <div className="mt-2">
-                  <p
-                    title={''}
-                    className="truncate px-1 text-[13px] font-semibold capitalize leading-relaxed text-raisin-black-light dark:text-bright-gray"
-                  >
-                    {}
-                  </p>
-                  <p className="mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-old-silver dark:text-sonic-silver-light">
-                    {}
-                  </p>
-                </div>
-              </div>
-              <div className="absolute bottom-4 right-4"></div>
-            </div>
-          ))}
-        </div>
-      </div> */}
-      <AgentSection
-        agents={agents ?? []}
-        updateAgents={(updatedAgents) => {
-          dispatch(setAgents(updatedAgents));
-        }}
-        loading={loadingUserAgents}
-        section="user"
-      />
-      <AgentSection
-        agents={sharedAgents ?? []}
-        updateAgents={(updatedAgents) => {
-          dispatch(setSharedAgents(updatedAgents));
-        }}
-        loading={loadingSharedAgents}
-        section="shared"
-      />
-    </div>
-  );
-}
-
-function AgentSection({
-  agents,
-  updateAgents,
-  loading,
-  section,
-}: {
-  agents: Agent[];
-  updateAgents?: (agents: Agent[]) => void;
-  loading: boolean;
-  section: keyof typeof sectionConfig;
-}) {
-  const navigate = useNavigate();
-  return (
-    <div className="mt-8 flex flex-col gap-4">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-[18px] font-semibold text-[#18181B] dark:text-[#E0E0E0]">
-            {sectionConfig[section].title}
-          </h2>
-          <p className="text-[13px] text-[#71717A]">
-            {sectionConfig[section].description}
-          </p>
-        </div>
-        {sectionConfig[section].showNewAgentButton && (
-          <button
-            className="bg-purple-30 hover:bg-violets-are-blue rounded-full px-4 py-2 text-sm text-white"
-            onClick={() => navigate('/agents/new')}
-          >
-            New Agent
-          </button>
-        )}
-      </div>
-      <div>
-        {loading ? (
-          <div className="flex h-72 w-full items-center justify-center">
-            <Spinner />
-          </div>
-        ) : agents && agents.length > 0 ? (
-          <div className="grid grid-cols-1 gap-4 sm:flex sm:flex-wrap">
-            {agents.map((agent, idx) => (
-              <AgentCard
-                key={agent.id}
-                agent={agent}
-                agents={agents}
-                updateAgents={updateAgents}
-                section={section}
-              />
-            ))}
-          </div>
-        ) : (
-          <div className="flex h-72 w-full flex-col items-center justify-center gap-3 text-base text-[#18181B] dark:text-[#E0E0E0]">
-            <p>{sectionConfig[section].emptyStateDescription}</p>
-            {sectionConfig[section].showNewAgentButton && (
-              <button
-                className="bg-purple-30 hover:bg-violets-are-blue ml-2 rounded-full px-4 py-2 text-sm text-white"
-                onClick={() => navigate('/agents/new')}
-              >
-                New Agent
-              </button>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function AgentCard({
-  agent,
-  agents,
-  updateAgents,
-  section,
-}: {
-  agent: Agent;
-  agents: Agent[];
-  updateAgents?: (agents: Agent[]) => void;
-  section: keyof typeof sectionConfig;
-}) {
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const token = useSelector(selectToken);
-
-  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
-  const [deleteConfirmation, setDeleteConfirmation] =
-    useState<ActiveState>('INACTIVE');
-
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const togglePin = async () => {
-    try {
-      const response = await userService.togglePinAgent(agent.id ?? '', token);
-      if (!response.ok) throw new Error('Failed to pin agent');
-      const updatedAgents = agents.map((prevAgent) => {
-        if (prevAgent.id === agent.id)
-          return { ...prevAgent, pinned: !prevAgent.pinned };
-        return prevAgent;
-      });
-      updateAgents?.(updatedAgents);
-    } catch (error) {
-      console.error('Error:', error);
-    }
-  };
-
-  const handleHideSharedAgent = async () => {
-    try {
-      const response = await userService.removeSharedAgent(
-        agent.id ?? '',
-        token,
-      );
-      if (!response.ok) throw new Error('Failed to hide shared agent');
-      const updatedAgents = agents.filter(
-        (prevAgent) => prevAgent.id !== agent.id,
-      );
-      updateAgents?.(updatedAgents);
-    } catch (error) {
-      console.error('Error:', error);
-    }
-  };
-
-  const menuOptionsConfig: Record<string, MenuOption[]> = {
-    user: [
-      {
-        icon: Monitoring,
-        label: 'Logs',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          navigate(`/agents/logs/${agent.id}`);
-        },
-        variant: 'primary',
-        iconWidth: 14,
-        iconHeight: 14,
-      },
-      {
-        icon: Edit,
-        label: 'Edit',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          navigate(`/agents/edit/${agent.id}`);
-        },
-        variant: 'primary',
-        iconWidth: 14,
-        iconHeight: 14,
-      },
-      ...(agent.status === 'published'
-        ? [
-            {
-              icon: agent.pinned ? UnPin : Pin,
-              label: agent.pinned ? 'Unpin' : 'Pin agent',
-              onClick: (e: SyntheticEvent) => {
-                e.stopPropagation();
-                togglePin();
-              },
-              variant: 'primary' as const,
-              iconWidth: 18,
-              iconHeight: 18,
-            },
-          ]
-        : []),
-      {
-        icon: Trash,
-        label: 'Delete',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          setDeleteConfirmation('ACTIVE');
-        },
-        variant: 'danger',
-        iconWidth: 13,
-        iconHeight: 13,
-      },
-    ],
-    shared: [
-      {
-        icon: Link,
-        label: 'Open',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          navigate(`/agents/shared/${agent.shared_token}`);
-        },
-        variant: 'primary',
-        iconWidth: 12,
-        iconHeight: 12,
-      },
-      {
-        icon: agent.pinned ? UnPin : Pin,
-        label: agent.pinned ? 'Unpin' : 'Pin agent',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          togglePin();
-        },
-        variant: 'primary',
-        iconWidth: 18,
-        iconHeight: 18,
-      },
-      {
-        icon: Trash,
-        label: 'Remove',
-        onClick: (e: SyntheticEvent) => {
-          e.stopPropagation();
-          handleHideSharedAgent();
-        },
-        variant: 'danger',
-        iconWidth: 13,
-        iconHeight: 13,
-      },
-    ],
-  };
-
-  const menuOptions = menuOptionsConfig[section] || [];
-
-  const handleClick = () => {
-    if (section === 'user') {
-      if (agent.status === 'published') {
-        dispatch(setSelectedAgent(agent));
-        navigate(`/`);
-      }
-    }
-    if (section === 'shared') {
-      navigate(`/agents/shared/${agent.shared_token}`);
-    }
-  };
-
-  const handleDelete = async (agentId: string) => {
-    const response = await userService.deleteAgent(agentId, token);
-    if (!response.ok) throw new Error('Failed to delete agent');
-    const data = await response.json();
-    dispatch(setAgents(agents.filter((prevAgent) => prevAgent.id !== data.id)));
-  };
-  return (
-    <div
-      className={`relative flex h-44 w-full flex-col justify-between rounded-[1.2rem] bg-[#F6F6F6] px-6 py-5 hover:bg-[#ECECEC] md:w-48 dark:bg-[#383838] dark:hover:bg-[#383838]/80 ${agent.status === 'published' && 'cursor-pointer'}`}
-      onClick={(e) => {
-        e.stopPropagation();
-        handleClick();
-      }}
-    >
-      <div
-        ref={menuRef}
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsMenuOpen(true);
-        }}
-        className="absolute top-4 right-4 z-10 cursor-pointer"
-      >
-        <img src={ThreeDots} alt={'use-agent'} className="h-[19px] w-[19px]" />
-        <ContextMenu
-          isOpen={isMenuOpen}
-          setIsOpen={setIsMenuOpen}
-          options={menuOptions}
-          anchorRef={menuRef}
-          position="bottom-right"
-          offset={{ x: 0, y: 0 }}
-        />
-      </div>
-      <div className="w-full">
-        <div className="flex w-full items-center gap-1 px-1">
-          <AgentImage
-            src={agent.image}
-            alt={`${agent.name}`}
-            className="h-7 w-7 rounded-full object-contain"
-          />
-          {agent.status === 'draft' && (
-            <p className="text-xs text-black opacity-50 dark:text-[#E0E0E0]">{`(Draft)`}</p>
-          )}
-        </div>
-        <div className="mt-2">
-          <p
-            title={agent.name}
-            className="truncate px-1 text-[13px] leading-relaxed font-semibold text-[#020617] capitalize dark:text-[#E0E0E0]"
-          >
-            {agent.name}
-          </p>
-          <p className="dark:text-sonic-silver-light mt-1 h-20 overflow-auto px-1 text-[12px] leading-relaxed text-[#64748B]">
-            {agent.description}
-          </p>
-        </div>
-      </div>
-      <ConfirmationModal
-        message="Are you sure you want to delete this agent?"
-        modalState={deleteConfirmation}
-        setModalState={setDeleteConfirmation}
-        submitLabel="Delete"
-        handleSubmit={() => {
-          handleDelete(agent.id || '');
-          setDeleteConfirmation('INACTIVE');
-        }}
-        cancelLabel="Cancel"
-        variant="danger"
-      />
-    </div>
-  );
-}
--- a/frontend/src/api/endpoints.ts
+++ b/frontend/src/api/endpoints.ts
@@ -19,6 +19,8 @@ const endpoints = {
    SHARED_AGENTS: '/api/shared_agents',
    SHARE_AGENT: `/api/share_agent`,
    REMOVE_SHARED_AGENT: (id: string) => `/api/remove_shared_agent?id=${id}`,
+    TEMPLATE_AGENTS: '/api/template_agents',
+    ADOPT_AGENT: (id: string) => `/api/adopt_agent?id=${id}`,
    AGENT_WEBHOOK: (id: string) => `/api/agent_webhook?id=${id}`,
    PROMPTS: '/api/get_prompts',
    CREATE_PROMPT: '/api/create_prompt',
--- a/frontend/src/api/services/userService.ts
+++ b/frontend/src/api/services/userService.ts
@@ -44,6 +44,10 @@ const userService = {
    apiClient.put(endpoints.USER.SHARE_AGENT, data, token),
  removeSharedAgent: (id: string, token: string | null): Promise<any> =>
    apiClient.delete(endpoints.USER.REMOVE_SHARED_AGENT(id), token),
+  getTemplateAgents: (token: string | null): Promise<any> =>
+    apiClient.get(endpoints.USER.TEMPLATE_AGENTS, token),
+  adoptAgent: (id: string, token: string | null): Promise<any> =>
+    apiClient.post(endpoints.USER.ADOPT_AGENT(id), {}, token),
  getAgentWebhook: (id: string, token: string | null): Promise<any> =>
    apiClient.get(endpoints.USER.AGENT_WEBHOOK(id), token),
  getPrompts: (token: string | null): Promise<any> =>
--- a/frontend/src/assets/duplicate.svg
+++ b/frontend/src/assets/duplicate.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8984 5.5H7.22656C5.99687 5.5 5 6.49687 5 7.72656V16.3984C5 17.6281 5.99687 18.625 7.22656 18.625H15.8984C17.1281 18.625 18.125 17.6281 18.125 16.3984V7.72656C18.125 6.49687 17.1281 5.5 15.8984 5.5Z" stroke="#949494" stroke-width="1.25" stroke-linejoin="round"/>
+<path d="M14.9805 5.5L15 4.5625C14.9984 3.98285 14.7674 3.4274 14.3575 3.01753C13.9476 2.60765 13.3922 2.37665 12.8125 2.375H4.375C3.71256 2.37696 3.07781 2.64098 2.6094 3.1094C2.14098 3.57781 1.87696 4.21256 1.875 4.875V13.3125C1.87665 13.8922 2.10765 14.4476 2.51753 14.8575C2.9274 15.2674 3.48285 15.4984 4.0625 15.5H5M11.5625 8.9375V15.1875M14.6875 12.0625H8.4375" stroke="#949494" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/src/preferences/preferenceSlice.ts
+++ b/frontend/src/preferences/preferenceSlice.ts
@@ -24,6 +24,7 @@ export interface Preference {
  token: string | null;
  modalState: ActiveState;
  paginatedDocuments: Doc[] | null;
+  templateAgents: Agent[] | null;
  agents: Agent[] | null;
  sharedAgents: Agent[] | null;
  selectedAgent: Agent | null;
@@ -52,6 +53,7 @@ const initialState: Preference = {
  token: localStorage.getItem('authToken') || null,
  modalState: 'INACTIVE',
  paginatedDocuments: null,
+  templateAgents: null,
  agents: null,
  sharedAgents: null,
  selectedAgent: null,
@@ -91,6 +93,9 @@ export const prefSlice = createSlice({
    setModalStateDeleteConv: (state, action: PayloadAction<ActiveState>) => {
      state.modalState = action.payload;
    },
+    setTemplateAgents: (state, action) => {
+      state.templateAgents = action.payload;
+    },
    setAgents: (state, action) => {
      state.agents = action.payload;
    },
@@ -114,6 +119,7 @@ export const {
  setTokenLimit,
  setModalStateDeleteConv,
  setPaginatedDocuments,
+  setTemplateAgents,
  setAgents,
  setSharedAgents,
  setSelectedAgent,
@@ -191,6 +197,8 @@ export const selectTokenLimit = (state: RootState) =>
  state.preference.token_limit;
 export const selectPaginatedDocuments = (state: RootState) =>
  state.preference.paginatedDocuments;
+export const selectTemplateAgents = (state: RootState) =>
+  state.preference.templateAgents;
 export const selectAgents = (state: RootState) => state.preference.agents;
 export const selectSharedAgents = (state: RootState) =>
  state.preference.sharedAgents;
--- a/frontend/src/store.ts
+++ b/frontend/src/store.ts
@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';

+import agentPreviewReducer from './agents/agentPreviewSlice';
 import { conversationSlice } from './conversation/conversationSlice';
 import { sharedConversationSlice } from './conversation/sharedConversationSlice';
 import {
@@ -8,7 +9,6 @@ import {
  prefSlice,
 } from './preferences/preferenceSlice';
 import uploadReducer from './upload/uploadSlice';
-import agentPreviewReducer from './agents/agentPreviewSlice';

 const key = localStorage.getItem('DocsGPTApiKey');
 const prompt = localStorage.getItem('DocsGPTPrompt');
@@ -43,6 +43,7 @@ const preloadedState: { preference: Preference } = {
    ],
    modalState: 'INACTIVE',
    paginatedDocuments: null,
+    templateAgents: null,
    agents: null,
    sharedAgents: null,
    selectedAgent: null,