@inkeep/agents-manage-ui 0.21.0 → 0.22.0

package/src/components/credentials/views/credential-form.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { CredentialStoreType } from '@inkeep/agents-core/client-exports';
 import { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -11,6 +12,10 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Form } from '@/components/ui/form';
 import { InfoCard } from '@/components/ui/info-card';
+import {
+  type CredentialStoreStatus,
+  listCredentialStores,
+} from '@/lib/api/credentialStores';
 import { fetchMCPTools } from '@/lib/api/tools';
 import type { MCPTool } from '@/lib/types/tools';
 import { type CredentialFormData, credentialFormSchema } from './credential-form-validation';
@@ -28,13 +33,17 @@ const defaultValues: CredentialFormData = {
   name: '',
   apiKeyToSet: '',
   metadata: {},
+  credentialStoreId: '',
+  credentialStoreType: 'nango',
   selectedTool: undefined,
 };
 
 export function CredentialForm({ onCreateCredential, tenantId, projectId }: CredentialFormProps) {
-  const [availableTools, setAvailableTools] = useState<MCPTool[]>([]);
+  const [availableMCPServers, setAvailableMCPServers] = useState<MCPTool[]>([]);
   const [toolsLoading, setToolsLoading] = useState(true);
   const [shouldLinkToServer, setShouldLinkToServer] = useState(false);
+  const [credentialStores, setCredentialStores] = useState<CredentialStoreStatus[]>([]);
+  const [storesLoading, setStoresLoading] = useState(true);
 
   const form = useForm({
     resolver: zodResolver(credentialFormSchema),
@@ -48,7 +57,7 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
       try {
         const allTools = await fetchMCPTools(tenantId, projectId);
         const toolsWithoutCredentials = allTools.filter((tool) => !tool.credentialReferenceId);
-        setAvailableTools(toolsWithoutCredentials);
+        setAvailableMCPServers(toolsWithoutCredentials);
       } catch (err) {
         console.error('Failed to load MCP tools:', err);
       } finally {
@@ -59,6 +68,38 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
     loadAvailableTools();
   }, [tenantId, projectId]);
 
+  useEffect(() => {
+    const loadCredentialStores = async () => {
+      try {
+        const stores = await listCredentialStores(tenantId, projectId);
+        setCredentialStores(stores);
+
+        // Auto-select preferred store: prioritize Nango, then other available non-memory stores
+        const availableStores = stores.filter(
+          (store) => store.available && store.type !== 'memory'
+        );
+        if (availableStores.length > 0) {
+          // First try to find Nango store
+          const nangoStore = availableStores.find((store) => store.type === 'nango');
+          const preferredStore = nangoStore || availableStores[0];
+
+          // Only set values if form doesn't already have a credentialStoreId value
+          const currentStoreId = form.getValues('credentialStoreId');
+          if (!currentStoreId) {
+            form.setValue('credentialStoreId', preferredStore.id, { shouldValidate: true });
+            form.setValue('credentialStoreType', preferredStore.type as 'keychain' | 'nango', { shouldValidate: true });
+          }
+        }
+      } catch (err) {
+        console.error('Failed to load credential stores:', err);
+      } finally {
+        setStoresLoading(false);
+      }
+    };
+
+    loadCredentialStores();
+  }, [tenantId, projectId, form.getValues, form.setValue]);
+
   // Handle checkbox state changes
   useEffect(() => {
     if (!shouldLinkToServer) {
@@ -67,6 +108,20 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
     }
   }, [shouldLinkToServer, form]);
 
+  useEffect(() => {
+    const subscription = form.watch((value: any, { name }: any) => {
+      if (name === 'credentialStoreId' && value.credentialStoreId) {
+        const selectedStore = credentialStores.find(
+          (store) => store.id === value.credentialStoreId
+        );
+        if (selectedStore && selectedStore.type !== 'memory') {
+          form.setValue('credentialStoreType', selectedStore.type);
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [form, credentialStores]);
+
   const handleLinkToServerChange = (checked: boolean | 'indeterminate') => {
     setShouldLinkToServer(checked === true);
   };
@@ -99,14 +154,47 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
             },
           ]
         : []),
-      ...availableTools.map((tool) => ({
+      ...availableMCPServers.map((tool) => ({
         value: tool.id,
         label: `${tool.name} - ${tool.config.type === 'mcp' ? tool.config.mcp.server.url : ''}`,
       })),
     ],
-    [availableTools, toolsLoading]
+    [availableMCPServers, toolsLoading]
   );
 
+  const credentialStoreOptions = useMemo(() => {
+    if (storesLoading) {
+      return [
+        {
+          value: 'loading',
+          label: 'Loading credential stores...',
+          disabled: true,
+        },
+      ];
+    }
+
+    const availableStores = credentialStores.filter(
+      (store) => store.available && store.type !== 'memory'
+    );
+
+    if (availableStores.length === 0) {
+      return [
+        {
+          value: 'none',
+          label: 'No credential stores available',
+          disabled: true,
+        },
+      ];
+    }
+
+    const options = availableStores.map((store) => ({
+      value: store.id,
+      label: `${store.type === 'keychain' ? 'Keychain Store' : 'Nango Store'} (${store.id})`,
+    }));
+
+    return options;
+  }, [credentialStores, storesLoading]);
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
@@ -142,30 +230,47 @@ export function CredentialForm({ onCreateCredential, tenantId, projectId }: Cred
             </InfoCard>
           </div>
 
-          {/* Metadata Section */}
+          {!storesLoading && form.watch('credentialStoreType') === CredentialStoreType.nango && (
+            <div className="space-y-3">
+              <GenericKeyValueInput
+                control={form.control}
+                name="metadata"
+                label="Metadata (optional)"
+                keyPlaceholder="Header name (e.g., X-API-Key)"
+                valuePlaceholder="Header value"
+              />
+              <InfoCard title="Additional headers">
+                <p className="mb-2">
+                  Add extra headers to be included with authentication requests.
+                </p>
+                <p>
+                  Examples:{' '}
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                    User-Agent
+                  </code>
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">X-API-Key</code>
+                  <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
+                    Content-Type
+                  </code>
+                </p>
+              </InfoCard>
+            </div>
+          )}
+
+          {/* Credential Store Selection Section */}
           <div className="space-y-3">
-            <GenericKeyValueInput
+            <GenericSelect
+              isRequired
               control={form.control}
-              name="metadata"
-              label="Metadata (optional)"
-              keyPlaceholder="Header name (e.g., X-API-Key)"
-              valuePlaceholder="Header value"
+              name="credentialStoreId"
+              label="Credential store"
+              options={credentialStoreOptions}
+              key={`credential-store-${credentialStores.length}-${storesLoading}`} // Force re-render when stores change
             />
-            <InfoCard title="Additional headers">
-              <p className="mb-2">Add extra headers to be included with authentication requests.</p>
-              <p>
-                Examples:{' '}
-                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">User-Agent</code>
-                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">X-API-Key</code>
-                <code className="bg-background px-1.5 py-0.5 rounded border mx-1">
-                  Content-Type
-                </code>
-              </p>
-            </InfoCard>
           </div>
 
           {/* Tool Selection Section */}
-          {availableTools.length > 0 && (
+          {availableMCPServers.length > 0 && (
             <div className="space-y-4">
               <div className="flex items-center space-x-3 relative">
                 <Checkbox

package/src/components/credentials/views/edit-credential-form.tsx

@@ -161,11 +161,7 @@ export function EditCredentialForm({
           )}
 
           {/* MCP Servers Using This Credential */}
-          <CredentialToolsList
-            tools={credential.tools}
-            tenantId={tenantId}
-            projectId={projectId}
-          />
+          <CredentialToolsList tools={credential.tools} tenantId={tenantId} projectId={projectId} />
         </div>
 
         <div className="flex gap-3 pt-4">

package/src/components/credentials/views/new-credential-form.tsx

@@ -1,58 +1,84 @@
-'use client'
+'use client';
 
-import { generateIdFromName } from '@inkeep/agents-core/client-exports'
-import { CredentialStoreType } from '@inkeep/agents-core/types'
-import { useParams, useRouter } from 'next/navigation'
-import { toast } from 'sonner'
-import type { CredentialFormData } from '@/components/credentials/views/credential-form-validation'
-import { updateMCPTool } from '@/lib/api/tools'
-import { createNangoApiKeyConnection } from '@/lib/mcp-tools/nango'
-import { findOrCreateCredential } from '@/lib/utils/credentials-utils'
-import { CredentialForm } from './credential-form'
+import { generateIdFromName } from '@inkeep/agents-core/client-exports';
+import { CredentialStoreType } from '@inkeep/agents-core/types';
+import { useParams, useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import type { CredentialFormData } from '@/components/credentials/views/credential-form-validation';
+import { createCredentialInStore } from '@/lib/api/credentialStores';
+import { updateMCPTool } from '@/lib/api/tools';
+import { createNangoApiKeyConnection } from '@/lib/mcp-tools/nango';
+import { findOrCreateCredential } from '@/lib/utils/credentials-utils';
+import { CredentialForm } from './credential-form';
 
 export function NewCredentialForm() {
-  const router = useRouter()
+  const router = useRouter();
   const { tenantId, projectId } = useParams<{
-    tenantId: string
-    projectId: string
-  }>()
+    tenantId: string;
+    projectId: string;
+  }>();
 
   const handleCreateCredential = async (data: CredentialFormData) => {
     try {
-      const idFromName = generateIdFromName(data.name.trim())
+      const idFromName = generateIdFromName(data.name.trim());
 
-      const { integration } = await createNangoApiKeyConnection({
-        name: idFromName,
-        apiKeyToSet: data.apiKeyToSet,
-        metadata: data.metadata as Record<string, string>,
-      })
+      let newCredential: Credential | undefined;
 
-      const newCredential = await findOrCreateCredential(tenantId, projectId, {
-        id: idFromName,
-        type: CredentialStoreType.nango,
-        credentialStoreId: 'nango-default',
-        retrievalParams: {
-          connectionId: idFromName,
-          providerConfigKey: integration.unique_key,
-          provider: integration.provider,
-          authMode: 'API_KEY',
-        },
-      })
+      if (data.credentialStoreType === CredentialStoreType.nango) {
+        const { integration } = await createNangoApiKeyConnection({
+          name: idFromName,
+          apiKeyToSet: data.apiKeyToSet,
+          metadata: data.metadata as Record<string, string>,
+        });
+
+        newCredential = await findOrCreateCredential(tenantId, projectId, {
+          id: idFromName,
+          type: data.credentialStoreType,
+          credentialStoreId: data.credentialStoreId,
+          retrievalParams: {
+            connectionId: idFromName,
+            providerConfigKey: integration.unique_key,
+            provider: integration.provider,
+            authMode: 'API_KEY',
+          },
+        });
+      } else if (data.credentialStoreType === CredentialStoreType.keychain) {
+        const keychainStoreValueToSet = JSON.stringify({
+          access_token: data.apiKeyToSet,
+        });
+        
+        await createCredentialInStore(
+          tenantId,
+          projectId,
+          data.credentialStoreId,
+          idFromName,
+          keychainStoreValueToSet
+        );
+
+        newCredential = await findOrCreateCredential(tenantId, projectId, {
+          id: idFromName,
+          type: data.credentialStoreType,
+          credentialStoreId: data.credentialStoreId,
+          retrievalParams: {
+            key: idFromName,
+          },
+        });
+      }
 
       if (data.selectedTool && newCredential) {
         const updatedTool = {
           credentialReferenceId: newCredential.id,
-        }
-        await updateMCPTool(tenantId, projectId, data.selectedTool, updatedTool)
+        };
+        await updateMCPTool(tenantId, projectId, data.selectedTool, updatedTool);
       }
 
-      toast.success('Credential created successfully')
-      router.push(`/${tenantId}/projects/${projectId}/credentials`)
+      toast.success('Credential created successfully');
+      router.push(`/${tenantId}/projects/${projectId}/credentials`);
     } catch (error) {
-      console.error('Failed to create credential:', error)
-      toast.error('Failed to create credential. Please try again.')
+      console.error('Failed to create credential:', error);
+      toast.error('Failed to create credential. Please try again.');
     }
-  }
+  };
 
   return (
     <CredentialForm
@@ -60,5 +86,5 @@ export function NewCredentialForm() {
       tenantId={tenantId}
       projectId={projectId}
     />
-  )
+  );
 }

package/src/components/traces/conversation-detail.tsx

@@ -9,6 +9,7 @@ import {
 } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
 import { formatDateTime, formatDuration } from '@/app/utils/format-date';
 import type {
   ActivityItem,
@@ -25,7 +26,6 @@ import { copyTraceToClipboard } from '@/lib/utils/trace-formatter';
 import { SignozLink } from './signoz-link';
 import { InfoRow } from './timeline/blocks';
 import { TimelineWrapper } from './timeline/timeline-wrapper';
-import { toast } from 'sonner';
 
 interface ConversationDetailProps {
   conversationId: string;
@@ -38,7 +38,7 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
   const [error, setError] = useState<string | null>(null);
   const [isCopying, setIsCopying] = useState(false);
   const { tenantId, projectId } = useParams();
-  const { SIGNOZ_URL } = useRuntimeConfig();
+  const { PUBLIC_SIGNOZ_URL } = useRuntimeConfig();
 
   const handleCopyTrace = async () => {
     if (!conversation) return;
@@ -303,7 +303,7 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
                       className="mt-3 w-full flex items-center justify-center gap-1"
                       onClick={() => {
                         window.open(
-                          getSignozTracesExplorerUrl(conversationId as string, SIGNOZ_URL),
+                          getSignozTracesExplorerUrl(conversationId as string, PUBLIC_SIGNOZ_URL),
                           '_blank'
                         );
                       }}

package/src/components/traces/signoz-link.tsx

@@ -135,16 +135,20 @@ interface SignozSpanLinkProps {
 }
 
 export function SignozLink({ conversationId }: SignozLinkProps) {
-  const { SIGNOZ_URL } = useRuntimeConfig();
+  const { PUBLIC_SIGNOZ_URL } = useRuntimeConfig();
   return (
-    <ExternalLink href={makeTracesUrl(SIGNOZ_URL, conversationId)}>View Conversation in SigNoz</ExternalLink>
+    <ExternalLink href={makeTracesUrl(PUBLIC_SIGNOZ_URL, conversationId)}>
+      View Conversation in SigNoz
+    </ExternalLink>
   );
 }
 
 export function SignozSpanLink({ traceId, spanId }: SignozSpanLinkProps) {
-  const { SIGNOZ_URL } = useRuntimeConfig();
+  const { PUBLIC_SIGNOZ_URL } = useRuntimeConfig();
   return (
-    <ExternalLink href={makeSpanUrl(SIGNOZ_URL, traceId, spanId)}>View span in SigNoz</ExternalLink>
+    <ExternalLink href={makeSpanUrl(PUBLIC_SIGNOZ_URL, traceId, spanId)}>
+      View span in SigNoz
+    </ExternalLink>
   );
 }
 

package/src/hooks/use-nango-connect.ts

@@ -18,17 +18,17 @@ type NangoConnectInstance = {
 };
 
 export function useNangoConnect() {
-  const { NANGO_SERVER_URL, NANGO_CONNECT_BASE_URL } = useRuntimeConfig();
+  const { PUBLIC_NANGO_SERVER_URL, PUBLIC_NANGO_CONNECT_BASE_URL } = useRuntimeConfig();
 
   const openNangoConnect = useCallback(
     ({ sessionToken, onEvent, connectOptions }: OpenNangoConnectOptions): NangoConnectInstance => {
       const nango = new Nango({
-        host: NANGO_SERVER_URL || undefined,
+        host: PUBLIC_NANGO_SERVER_URL || undefined,
       });
 
       const connect = nango.openConnectUI({
-        baseURL: connectOptions?.baseURL || NANGO_CONNECT_BASE_URL || undefined,
-        apiURL: connectOptions?.apiURL || NANGO_SERVER_URL || undefined,
+        baseURL: connectOptions?.baseURL || PUBLIC_NANGO_CONNECT_BASE_URL || undefined,
+        apiURL: connectOptions?.apiURL || PUBLIC_NANGO_SERVER_URL || undefined,
         onEvent,
         detectClosedAuthWindow: true,
       });
@@ -37,7 +37,7 @@ export function useNangoConnect() {
 
       return connect as NangoConnectInstance;
     },
-    [NANGO_SERVER_URL, NANGO_CONNECT_BASE_URL]
+    [PUBLIC_NANGO_SERVER_URL, PUBLIC_NANGO_CONNECT_BASE_URL]
   );
 
   return openNangoConnect;

package/src/hooks/use-oauth-login.ts

@@ -12,7 +12,7 @@ interface UseOAuthLoginProps {
 
 export function useOAuthLogin({ tenantId, projectId, onFinish, onError }: UseOAuthLoginProps) {
   const router = useRouter();
-  const { INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
+  const { PUBLIC_INKEEP_AGENTS_MANAGE_API_URL } = useRuntimeConfig();
 
   // Track active OAuth attempts to prevent conflicts
   const activeAttempts = new Map<string, () => void>();
@@ -27,7 +27,7 @@ export function useOAuthLogin({ tenantId, projectId, onFinish, onError }: UseOAu
     try {
       // Get the OAuth URL and open in popup window
       const oauthUrl = getOAuthLoginUrl({
-        INKEEP_AGENTS_MANAGE_API_URL,
+        PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
         tenantId,
         projectId,
         id: toolId,

package/src/lib/README.md

@@ -7,7 +7,7 @@ This library provides server actions and types for interacting with the AgentFul
 Set the following environment variable in your `.env.local` file:
 
 ```bash
-INKEEP_AGENTS_RUN_API_URL="http://localhost:3003"
+PUBLIC_INKEEP_AGENTS_RUN_API_URL="http://localhost:3003"
 INKEEP_AGENTS_MANAGE_API_URL="http://localhost:3002"
 ```
 

package/src/lib/api/api-config.ts

@@ -4,17 +4,12 @@
  * Centralized configuration for API endpoints and settings
  */
 
-import {
-  DEFAULT_INKEEP_AGENTS_MANAGE_API_URL,
-  DEFAULT_INKEEP_AGENTS_RUN_API_URL,
-} from '../runtime-config/defaults';
+import { DEFAULT_INKEEP_AGENTS_MANAGE_API_URL } from '../runtime-config/defaults';
 import { ApiError } from '../types/errors';
 
 // Lazy initialization with runtime warnings
 let INKEEP_AGENTS_MANAGE_API_URL: string | null = null;
-let INKEEP_AGENTS_RUN_API_URL: string | null = null;
 let hasWarnedManageApi = false;
-let hasWarnedRunApi = false;
 
 function getManageApiUrl(): string {
   if (INKEEP_AGENTS_MANAGE_API_URL === null) {
@@ -31,21 +26,6 @@ function getManageApiUrl(): string {
   return INKEEP_AGENTS_MANAGE_API_URL;
 }
 
-function getRunApiUrl(): string {
-  if (INKEEP_AGENTS_RUN_API_URL === null) {
-    INKEEP_AGENTS_RUN_API_URL =
-      process.env.INKEEP_AGENTS_RUN_API_URL || DEFAULT_INKEEP_AGENTS_RUN_API_URL;
-
-    if (!process.env.INKEEP_AGENTS_RUN_API_URL && !hasWarnedRunApi) {
-      console.warn(
-        `INKEEP_AGENTS_RUN_API_URL is not set, falling back to: ${DEFAULT_INKEEP_AGENTS_RUN_API_URL}`
-      );
-      hasWarnedRunApi = true;
-    }
-  }
-  return INKEEP_AGENTS_RUN_API_URL;
-}
-
 async function makeApiRequestInternal<T>(
   baseUrl: string,
   endpoint: string,
@@ -115,11 +95,3 @@ export async function makeManagementApiRequest<T>(
 ): Promise<T> {
   return makeApiRequestInternal<T>(getManageApiUrl(), endpoint, options);
 }
-
-// Inkeep Agents Run API requests (chat completions, agents run)
-export async function makeAgentsRunApiRequest<T>(
-  endpoint: string,
-  options: RequestInit = {}
-): Promise<T> {
-  return makeApiRequestInternal<T>(getRunApiUrl(), endpoint, options);
-}

package/src/lib/api/credentialStores.ts

@@ -0,0 +1,70 @@
+'use server';
+
+import type { CredentialStoreType } from '@inkeep/agents-core/client-exports';
+import { makeManagementApiRequest } from './api-config';
+import { validateProjectId, validateTenantId } from './resource-validation';
+
+export interface CredentialStoreStatus {
+  id: string;
+  type: (typeof CredentialStoreType)[keyof typeof CredentialStoreType];
+  available: boolean;
+  reason: string | null;
+}
+
+export interface CredentialStoresListResponse {
+  data: CredentialStoreStatus[];
+}
+
+export interface CreateCredentialInStoreRequest {
+  key: string;
+  value: string;
+}
+
+export interface CreateCredentialInStoreResponse {
+  data: {
+    key: string;
+    storeId: string;
+    createdAt: string;
+  };
+}
+
+/**
+ * List credential stores - shows which credential stores are available and functional
+ */
+export async function listCredentialStores(
+  tenantId: string,
+  projectId: string
+): Promise<CredentialStoreStatus[]> {
+  validateTenantId(tenantId);
+  validateProjectId(projectId);
+
+  const response = await makeManagementApiRequest<CredentialStoresListResponse>(
+    `tenants/${tenantId}/projects/${projectId}/credential-stores`
+  );
+
+  return response.data;
+}
+
+/**
+ * Create a credential in a specific credential store
+ */
+export async function createCredentialInStore(
+  tenantId: string,
+  projectId: string,
+  storeId: string,
+  key: string,
+  value: string
+): Promise<CreateCredentialInStoreResponse['data']> {
+  validateTenantId(tenantId);
+  validateProjectId(projectId);
+
+  const response = await makeManagementApiRequest<CreateCredentialInStoreResponse>(
+    `tenants/${tenantId}/projects/${projectId}/credential-stores/${storeId}/credentials`,
+    {
+      method: 'POST',
+      body: JSON.stringify({ key, value }),
+    }
+  );
+
+  return response.data;
+}

package/src/lib/runtime-config/types.ts

@@ -1,8 +1,8 @@
 export interface RuntimeConfig {
-  INKEEP_AGENTS_MANAGE_API_URL: string;
-  INKEEP_AGENTS_RUN_API_URL: string;
-  INKEEP_AGENTS_RUN_API_BYPASS_SECRET?: string;
-  SIGNOZ_URL: string;
-  NANGO_SERVER_URL?: string;
-  NANGO_CONNECT_BASE_URL?: string;
+  PUBLIC_INKEEP_AGENTS_MANAGE_API_URL: string;
+  PUBLIC_INKEEP_AGENTS_RUN_API_URL: string;
+  PUBLIC_INKEEP_AGENTS_RUN_API_BYPASS_SECRET?: string;
+  PUBLIC_SIGNOZ_URL: string;
+  PUBLIC_NANGO_SERVER_URL?: string;
+  PUBLIC_NANGO_CONNECT_BASE_URL?: string;
 }

package/src/lib/utils/mcp-urls.ts

@@ -8,12 +8,12 @@
  * This returns the URL that should be used for redirect on the client side
  */
 export function getOAuthLoginUrl({
-  INKEEP_AGENTS_MANAGE_API_URL,
+  PUBLIC_INKEEP_AGENTS_MANAGE_API_URL,
   tenantId,
   projectId,
   id,
 }: {
-  INKEEP_AGENTS_MANAGE_API_URL: string;
+  PUBLIC_INKEEP_AGENTS_MANAGE_API_URL: string;
   tenantId: string;
   projectId: string;
   id: string;
@@ -52,10 +52,10 @@ export function getOAuthLoginUrl({
     );
   }
 
-  const url = `${INKEEP_AGENTS_MANAGE_API_URL}/oauth/login?tenantId=${encodeURIComponent(tenantId)}&projectId=${encodeURIComponent(projectId)}&toolId=${encodeURIComponent(id)}`;
+  const url = `${PUBLIC_INKEEP_AGENTS_MANAGE_API_URL}/oauth/login?tenantId=${encodeURIComponent(tenantId)}&projectId=${encodeURIComponent(projectId)}&toolId=${encodeURIComponent(id)}`;
 
   // Verify the final URL starts with our expected base
-  if (!url.startsWith(INKEEP_AGENTS_MANAGE_API_URL)) {
+  if (!url.startsWith(PUBLIC_INKEEP_AGENTS_MANAGE_API_URL)) {
     throw new Error('Invalid OAuth URL generated');
   }