add new type for ai-agent

react/src/App.tsx

@@ -79,6 +79,7 @@ const SessionDetailAndContainerLogOpenerLegacy = React.lazy(
 const ChatPage = React.lazy(() => import('./pages/ChatPage'));
 
 const AIAgentPage = React.lazy(() => import('./pages/AIAgentPage'));
+const AIAgentIFramePage = React.lazy(() => import('./pages/AIAgentIFramePage'));
 
 interface CustomHandle {
   title?: string;
@@ -514,6 +515,15 @@ const router = createBrowserRouter([
           );
         },
       },
+      {
+        path: '/ai-agent/external',
+        handle: { labelKey: 'webui.menu.AIAgents' },
+        Component: () => (
+          <Suspense fallback={<Skeleton active />}>
+            <AIAgentIFramePage />
+          </Suspense>
+        ),
+      },
     ],
   },
 ]);

react/src/hooks/useAIAgent.ts

@@ -11,7 +11,7 @@ export interface AIAgentMeta {
 }
 
 export interface AIAgentConfig {
-  system_prompt: string;
+  system_prompt?: string;
   [key: string]: any; // for additionalProperties: true
 }
 
@@ -26,6 +26,7 @@ export interface AIAgentParams {
 }
 
 export interface AIAgent {
+  type: string;
   id: string;
   endpoint: string;
   endpoint_id: string;

react/src/pages/AIAgentIFramePage.tsx

@@ -0,0 +1,31 @@
+import { Skeleton, theme } from 'antd';
+import React, { Suspense } from 'react';
+import { StringParam, useQueryParams } from 'use-query-params';
+
+const AIAgentIFramePage: React.FC = () => {
+  const { token } = theme.useToken();
+  const [{ url }] = useQueryParams({
+    url: StringParam,
+  });
+
+  return (
+    <Suspense
+      fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
+    >
+      {url && (
+        <iframe
+          src={url}
+          title="AI Agent Content"
+          style={{
+            width: '100%',
+            height: '100vh',
+            border: 'none',
+            borderRadius: token.borderRadius,
+          }}
+        />
+      )}
+    </Suspense>
+  );
+};
+
+export default AIAgentIFramePage;

react/src/pages/AIAgentPage.tsx

@@ -34,6 +34,19 @@ const { Meta } = Card;
 const AIAgentCard = ({ agent }: { agent: AIAgent }) => {
   const tags = agent.meta.tags || [];
   const { styles } = useStyles();
+  const avatar =
+    agent.type === 'external' ? (
+      <img
+        src={agent.meta.avatar}
+        alt={agent.meta.title}
+        height={150}
+        width={150}
+        style={{ borderRadius: '50%' }}
+      />
+    ) : (
+      <FluentEmojiIcon name={agent.meta.avatar} height={150} width={150} />
+    );
+
   return (
     <Card hoverable>
       <Flex
@@ -45,13 +58,7 @@ const AIAgentCard = ({ agent }: { agent: AIAgent }) => {
       >
         <Meta
           title={agent.meta.title}
-          avatar={
-            <FluentEmojiIcon
-              name={agent.meta.avatar}
-              height={150}
-              width={150}
-            />
-          }
+          avatar={avatar}
           description={agent.meta.descriptions}
           className={styles.meta}
         />
@@ -113,9 +120,13 @@ const AIAgentPage: React.FC = () => {
         <AIAgentCardList
           agents={agents}
           onClickAgent={(agent) => {
-            webuiNavigate(
-              `/chat?endpointId=${agent.endpoint_id}&agentId=${agent.id}`,
-            );
+            if (agent.type === 'external') {
+              webuiNavigate(`/ai-agent/external?url=${agent.config.url}`);
+            } else {
+              webuiNavigate(
+                `/chat?endpointId=${agent.endpoint_id}&agentId=${agent.id}`,
+              );
+            }
           }}
         />
       </Flex>

resources/ai-agents.json

@@ -2,6 +2,7 @@
   "$schema": "./ai-agents.schema.json",
   "agents": [
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-97384d9a1d5b",
       "meta": {
         "title": "Lablup Customer Support Bot",
@@ -24,6 +25,55 @@
       }
     },
     {
+      "type": "external",
+      "id": "d3b07384-d9a1-4d3b-9d3b-17384d9a1d5b",
+      "meta": {
+        "title": "3D Modeling Expert",
+        "avatar": "/resources/agents/3dgen_fluentstyle.png",
+        "background": "linear-gradient(135deg, #00416A 0%, #E4E5E6 100%)",
+        "descriptions": "Generating 3D objects from text or image input prompt.",
+        "tags": ["lablup", "backendai", "3d", "rendering"]
+      },
+      "endpoint": "hunyuan3d-2",
+      "endpoint_id": "",
+      "config": {
+        "url": "https://hunyuan3d.asia03.app.backend.ai/"
+      }
+    },
+    {
+      "type": "external",
+      "id": "d3b07384-d9a1-4d3b-9d3b-17384d9a1d5b",
+      "meta": {
+        "title": "Backend.AI Documentation Assistant",
+        "avatar": "/resources/agents/rag-fluentstyle.png",
+        "background": "linear-gradient(135deg, #00416A 0%, #E4E5E6 100%)",
+        "descriptions": "Helps users easily search and refer to Backend.AI documents using RAG.",
+        "tags": ["lablup", "backendai", "document", "customer-support"]
+      },
+      "endpoint": "agent_rag",
+      "endpoint_id": "",
+      "config": {
+        "url": "https://agent_rag.asia03.app.backend.ai/"
+      }
+    },
+    {
+      "type": "external",
+      "id": "d3b07384-d9a1-4d3b-9d3b-17384d9a1d5b",
+      "meta": {
+        "title": "Key Fact Extractor",
+        "avatar": "/resources/agents/key-extractor-fluentstyle.png",
+        "background": "linear-gradient(135deg, #00416A 0%, #E4E5E6 100%)",
+        "descriptions": "Helps summarization & key factor extraction from text input.",
+        "tags": ["lablup", "backendai", "extractor", "rag"]
+      },
+      "endpoint": "xaas_key",
+      "endpoint_id": "",
+      "config": {
+        "url": "https://xaas_key_extraction.asia03.app.backend.ai/"
+      }
+    },
+    {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d3b",
       "meta": {
         "title": "General Assistant",
@@ -46,6 +96,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d4b",
       "meta": {
         "title": "Code Expert",
@@ -69,6 +120,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d5b",
       "meta": {
         "title": "Data Analyst",
@@ -91,6 +143,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d6b",
       "meta": {
         "title": "Creative Writer",
@@ -113,6 +166,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d7b",
       "meta": {
         "title": "Math Tutor",
@@ -135,6 +189,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d8b",
       "meta": {
         "title": "Research Assistant",
@@ -157,6 +212,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d9b",
       "meta": {
         "title": "Language Teacher",
@@ -179,6 +235,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d0a",
       "meta": {
         "title": "Business Consultant",
@@ -201,6 +258,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d1a",
       "meta": {
         "title": "Legal Assistant",
@@ -223,6 +281,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d2a",
       "meta": {
         "title": "UX Designer",
@@ -245,6 +304,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d3a",
       "meta": {
         "title": "Marketing Strategist",
@@ -267,6 +327,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d4a",
       "meta": {
         "title": "Science Educator",
@@ -289,6 +350,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d5a",
       "meta": {
         "title": "Project Manager",
@@ -311,6 +373,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d6a",
       "meta": {
         "title": "Financial Advisor",
@@ -333,6 +396,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d7a",
       "meta": {
         "title": "Health Coach",
@@ -355,6 +419,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d8a",
       "meta": {
         "title": "Technical Writer",
@@ -377,6 +442,7 @@
       }
     },
     {
+      "type": "agent",
       "id": "d3b07384-d9a1-4d3b-9d3b-07384d9a1d9a",
       "meta": {
         "title": "Career Coach",

resources/ai-agents.schema.json

@@ -6,8 +6,12 @@
       "type": "array",
       "items": {
         "type": "object",
-        "required": ["config", "meta", "endpoint", "endpoint_id"],
+        "required": ["type", "config", "meta", "endpoint", "endpoint_id"],
         "properties": {
+          "type": {
+            "type": "string",
+            "description": "The type of agent (e.g., 'llm', 'tool', 'external', etc.)"
+          },
           "id": {
             "type": "string",
             "description": "The agent identifier"
@@ -55,11 +59,15 @@
           },
           "config": {
             "type": "object",
-            "required": ["system_prompt"],
+            "required": [],
             "properties": {
               "system_prompt": {
                 "type": "string",
                 "description": "The system prompt for the agent"
+              },
+              "url": {
+                "type": "string",
+                "description": "The URL of the agent's API endpoint"
               }
             },
             "additionalProperties": true