diff --git a/agenta-web/src/components/pages/app-management/components/ApiKeyInput.tsx b/agenta-web/src/components/pages/app-management/components/ApiKeyInput.tsx
deleted file mode 100644
index 955e425178..0000000000
--- a/agenta-web/src/components/pages/app-management/components/ApiKeyInput.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, {useEffect, useState} from "react"
-import {Space, Input, Button, Typography, message} from "antd"
-import {isDemo} from "@/lib/helpers/utils"
-import {dynamicContext, dynamicService} from "@/lib/helpers/dynamic"
-
-const apiKeysService: any = dynamicService("apiKeys/api")
-
-const {Text} = Typography
-
-interface ApiKeyInputProps {
-    apiKeyValue: string
-    onApiKeyChange: React.Dispatch<React.SetStateAction<string>>
-}
-
-const ApiKeyInput: React.FC<ApiKeyInputProps> = ({apiKeyValue, onApiKeyChange}) => {
-    const [isLoadingApiKey, setIsLoadingApiKey] = useState(false)
-    const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
-    const {selectedOrg} = useOrgData()
-
-    useEffect(() => {
-        dynamicContext("org.context", {useOrgData}).then((context) => {
-            setUseOrgData(() => context.useOrgData)
-        })
-    }, [])
-
-    const workspaceId: string = selectedOrg?.default_workspace.id || ""
-
-    const handleGenerateApiKey = async () => {
-        try {
-            setIsLoadingApiKey(true)
-            await apiKeysService.then(async (module: any) => {
-                if (!module) return
-                if (workspaceId && isDemo()) {
-                    const {data} = await module.createApiKey(workspaceId)
-                    onApiKeyChange(data)
-                    message.success("Successfully generated API Key")
-                }
-            })
-        } catch (error) {
-            console.error(error)
-            message.error("Unable to generate API Key")
-        } finally {
-            setIsLoadingApiKey(false)
-        }
-    }
-
-    return (
-        <Space direction="vertical">
-            <Text>Use any of your api keys or generate a new one</Text>
-            <Space>
-                <Input
-                    className="w-[300px]"
-                    placeholder="Paste your api key here"
-                    value={apiKeyValue}
-                    onChange={(e) => onApiKeyChange(e.target.value)}
-                />
-
-                <Button type="primary" loading={isLoadingApiKey} onClick={handleGenerateApiKey}>
-                    Generate API Key
-                </Button>
-            </Space>
-        </Space>
-    )
-}
-
-export default ApiKeyInput
diff --git a/agenta-web/src/components/pages/app-management/modals/SetupTracingModal.tsx b/agenta-web/src/components/pages/app-management/modals/SetupTracingModal.tsx
index fa88a5eb75..d6cfa39d6a 100644
--- a/agenta-web/src/components/pages/app-management/modals/SetupTracingModal.tsx
+++ b/agenta-web/src/components/pages/app-management/modals/SetupTracingModal.tsx
@@ -7,7 +7,9 @@ import React, {useState} from "react"
 import {createUseStyles} from "react-jss"
 import {IBM_Plex_Mono} from "next/font/google"
 import {isDemo} from "@/lib/helpers/utils"
-import ApiKeyInput from "../components/ApiKeyInput"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
+
+const ApiKeyInput: any = dynamicComponent("pages/app-management/components/ApiKeyInput")
 
 const ibm_plex_mono = IBM_Plex_Mono({weight: "400", subsets: ["latin"]})
 
@@ -243,9 +245,7 @@ print(response["choices"][0]["message"]["content"])`,
             icon: <PythonOutlined />,
             children: (
                 <div className="flex flex-col gap-6">
-                    {isDemo() && (
-                        <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
-                    )}
+                    <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
 
                     {openaiCodeBlock.map((command, index) => (
                         <TracingCodeComponent key={index} command={command} index={index} />
@@ -259,9 +259,7 @@ print(response["choices"][0]["message"]["content"])`,
             icon: <FileTs />,
             children: (
                 <div className="flex flex-col gap-6">
-                    {isDemo() && (
-                        <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
-                    )}
+                    <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
 
                     {litellmCodeBlock.map((command, index) => (
                         <TracingCodeComponent key={index} command={command} index={index} />
@@ -275,9 +273,7 @@ print(response["choices"][0]["message"]["content"])`,
             icon: <CodeBlock />,
             children: (
                 <div className="flex flex-col gap-6">
-                    {isDemo() && (
-                        <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
-                    )}
+                    <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
 
                     {langChainCodeBlock.map((command, index) => (
                         <TracingCodeComponent key={index} command={command} index={index} />
@@ -291,9 +287,7 @@ print(response["choices"][0]["message"]["content"])`,
             icon: <CodeBlock />,
             children: (
                 <div className="flex flex-col gap-6">
-                    {isDemo() && (
-                        <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
-                    )}
+                    <ApiKeyInput apiKeyValue={apiKeyValue} onApiKeyChange={setApiKeyValue} />
 
                     {instructorCodeBlock.map((command, index) => (
                         <TracingCodeComponent key={index} command={command} index={index} />