feat(ui): add agents import

apps/beeai-ui/package.json

@@ -10,7 +10,8 @@
     "check": "prettier --log-level silent --check src && eslint src && tsc --noEmit && stylelint src/styles",
     "fix": "prettier --log-level silent --write src && eslint --fix src && stylelint --fix=lax src/styles",
     "preview": "vite preview",
-    "clean": "rm -rf node_modules && rm -rf dist"
+    "clean": "rm -rf node_modules && rm -rf dist",
+    "schema:generate": "pnpm dlx openapi-typescript 'http://localhost:8333/api/v1/openapi.json' -o ./src/api/schema.d.ts --alphabetize"
   },
   "exports": {
     ".": "./src/index.ts"
@@ -26,9 +27,11 @@
     "@carbon/motion": "^11.24.0",
     "@carbon/react": "^1.75.0",
     "@carbon/styles": "^1.74.0",
+    "@floating-ui/react": "^0.27.4",
     "@i-am-bee/acp-sdk": "^0.0.1",
     "@i-am-bee/beeai-sdk": "workspace:*",
     "@ibm/plex": "^6.4.1",
+    "@radix-ui/react-slot": "^1.1.2",
     "@tanstack/react-query": "^5.66.0",
     "@types/react-resizable": "^3.0.8",
     "clsx": "^2.1.1",
@@ -39,6 +42,7 @@
     "lottie-react": "^2.4.1",
     "mdast-util-to-hast": "^13.1.0",
     "millify": "^6.1.0",
+    "openapi-fetch": "^0.13.4",
     "pluralize": "^8.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

apps/beeai-ui/src/@types/utils.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright 2025 IBM Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { paths } from '#api/schema.js';
+
+export type ApiResponse<
+  Path extends keyof paths,
+  Method extends keyof paths[Path] & ('get' | 'post' | 'delete') = 'get',
+  ContentType extends 'application/json' | 'text/event-stream' = 'application/json',
+> = paths[Path][Method] extends {
+  responses: {
+    200: {
+      content: {
+        'application/json'?: infer JSON;
+        'text/event-stream'?: infer EventStream;
+      };
+    };
+  };
+}
+  ? ContentType extends 'application/json'
+    ? JSON extends Record<string, unknown>
+      ? JSON
+      : never
+    : EventStream extends Record<string, unknown>
+      ? EventStream
+      : never
+  : never;
+
+export type ApiRequestBody<
+  Path extends keyof paths,
+  Method extends keyof paths[Path] & ('get' | 'post' | 'delete' | 'put') = 'post',
+  ContentType extends 'application/json' | 'multipart/form-data' = 'application/json',
+> = paths[Path][Method] extends {
+  requestBody?: {
+    content: {
+      'application/json'?: infer JSON;
+      'multipart/form-data'?: infer FormData;
+    };
+  };
+}
+  ? ContentType extends 'application/json'
+    ? JSON extends Record<string, unknown>
+      ? JSON
+      : never
+    : FormData extends Record<string, unknown>
+      ? FormData
+      : never
+  : never;
+
+export type ApiQuery<
+  Path extends keyof paths,
+  Method extends keyof paths[Path] & 'get' = 'get',
+> = paths[Path][Method] extends {
+  parameters: { query?: infer Q };
+}
+  ? Q extends Record<string, unknown>
+    ? Q
+    : never
+  : never;

apps/beeai-ui/src/App.tsx

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import { ErrorFallback } from './components/fallbacks/ErrorFallback';
 import { AppLayout } from './components/layouts/AppLayout';
 import { MCPClientProvider } from './contexts/MCPClient/MCPClientProvider';
 import { ModalProvider } from './contexts/Modal/ModalProvider';
+import { QueryProvider } from './contexts/QueryProvider/QueryProvider';
 import { ToastProvider } from './contexts/Toast/ToastProvider';
 import { Agents } from './pages/Agents';
 import { Agent } from './pages/agents/Agent';
@@ -29,14 +29,12 @@ import { NotFound } from './pages/NotFound';
 import { AgentRunPage } from './pages/run/AgentRunPage';
 import { routeDefinitions } from './utils/router';
 
-const queryClient = new QueryClient();
-
 export function App() {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <QueryClientProvider client={queryClient}>
-        <MCPClientProvider>
-          <ToastProvider>
+      <ToastProvider>
+        <QueryProvider>
+          <MCPClientProvider>
             <ModalProvider>
               <BrowserRouter>
                 <Routes>
@@ -51,9 +49,9 @@ export function App() {
                 </Routes>
               </BrowserRouter>
             </ModalProvider>
-          </ToastProvider>
-        </MCPClientProvider>
-      </QueryClientProvider>
+          </MCPClientProvider>
+        </QueryProvider>
+      </ToastProvider>
     </ErrorBoundary>
   );
 }

apps/beeai-ui/src/api/index.ts

@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
-import ky from 'ky';
+import createClient from 'openapi-fetch';
+import { paths } from './schema';
 
-export const api = ky.create({ prefixUrl: '/api/v1/' });
+export const api = createClient<paths>({
+  baseUrl: '/',
+});