refactor: refactor ai hub for internal users to show public model page

more useful than just seeing models they know they have access to

ui/litellm-dashboard/src/app/page.tsx

@@ -19,6 +19,7 @@ import PassThroughSettings from "@/components/pass_through_settings";
 import BudgetPanel from "@/components/budgets/budget_panel";
 import SpendLogsTable from "@/components/view_logs";
 import ModelHubTable from "@/components/model_hub_table";
+import PublicModelHub from "@/components/public_model_hub";
 import NewUsagePage from "@/components/new_usage";
 import APIReferenceView from "@/app/(dashboard)/api-reference/APIReferenceView";
 import ChatUI from "@/components/chat_ui/ChatUI";
@@ -43,6 +44,7 @@ import useFeatureFlags from "@/hooks/useFeatureFlags";
 import SidebarProvider from "@/app/(dashboard)/components/SidebarProvider";
 import OldTeams from "@/components/OldTeams";
 import { SearchTools } from "@/components/search_tools";
+import { isAdminRole } from "@/utils/roles";
 
 function getCookie(name: string) {
   // Safer cookie read + decoding; handles '=' inside values
@@ -439,12 +441,16 @@ export default function CreateKeyPage() {
                 ) : page == "cost-tracking-settings" ? (
                   <CostTrackingSettings userID={userID} userRole={userRole} accessToken={accessToken} />
                 ) : page == "model-hub-table" ? (
-                  <ModelHubTable
-                    accessToken={accessToken}
-                    publicPage={false}
-                    premiumUser={premiumUser}
-                    userRole={userRole}
-                  />
+                  isAdminRole(userRole) ? (
+                    <ModelHubTable
+                      accessToken={accessToken}
+                      publicPage={false}
+                      premiumUser={premiumUser}
+                      userRole={userRole}
+                    />
+                  ) : (
+                    <PublicModelHub accessToken={accessToken} isEmbedded={true} />
+                  )
                 ) : page == "caching" ? (
                   <CacheDashboard
                     userID={userID}

ui/litellm-dashboard/src/components/public_model_hub.tsx

@@ -64,9 +64,10 @@ interface AgentCard {
 
 interface PublicModelHubProps {
   accessToken?: string | null;
+  isEmbedded?: boolean; // When true, hides navbar and adjusts layout for embedding in dashboard
 }
 
-const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken }) => {
+const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded = false }) => {
   const [modelHubData, setModelHubData] = useState<ModelGroupInfo[] | null>(null);
   const [agentHubData, setAgentHubData] = useState<AgentCard[] | null>(null);
   const [pageTitle, setPageTitle] = useState<string>("LiteLLM Gateway");
@@ -713,35 +714,48 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken }) => {
 
   return (
     <ThemeProvider accessToken={accessToken}>
-      <div className="min-h-screen bg-white">
-        {/* Navigation */}
-        <Navbar
-          userID={null}
-          userEmail={null}
-          userRole={null}
-          premiumUser={false}
-          setProxySettings={setProxySettings}
-          proxySettings={proxySettings}
-          accessToken={accessToken || null}
-          isPublicPage={true}
-        />
+      <div className={isEmbedded ? "w-full" : "min-h-screen bg-white"}>
+        {/* Navigation - only show when not embedded */}
+        {!isEmbedded && (
+          <Navbar
+            userID={null}
+            userEmail={null}
+            userRole={null}
+            premiumUser={false}
+            setProxySettings={setProxySettings}
+            proxySettings={proxySettings}
+            accessToken={accessToken || null}
+            isPublicPage={true}
+          />
+        )}
 
-        <div className="w-full px-8 py-12">
-          {/* About Section */}
-          <Card className="mb-10 p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
-            <Title className="text-2xl font-semibold mb-6 text-gray-900">About</Title>
-            <p className="text-gray-700 mb-6 text-base leading-relaxed">
-              {customDocsDescription ? customDocsDescription : "Proxy Server to call 100+ LLMs in the OpenAI format."}
-            </p>
-            <div className="flex items-center space-x-3 text-sm text-gray-600">
-              <span className="flex items-center">
-                <span className="w-4 h-4 mr-2">🔧</span>
-                Built with litellm: v{litellmVersion}
-              </span>
+        <div className={isEmbedded ? "w-full p-6" : "w-full px-8 py-12"}>
+          {/* Embedded Explainer - only shown when embedded in dashboard */}
+          {isEmbedded && (
+            <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+              <p className="text-sm text-gray-700">
+                These are models, agents, and MCP servers your proxy admin has indicated are available in your company.
+              </p>
             </div>
-          </Card>
+          )}
 
-          {/* Useful Links */}
+          {/* About Section - only shown when not embedded */}
+          {!isEmbedded && (
+            <Card className="mb-10 p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
+              <Title className="text-2xl font-semibold mb-6 text-gray-900">About</Title>
+              <p className="text-gray-700 mb-6 text-base leading-relaxed">
+                {customDocsDescription ? customDocsDescription : "Proxy Server to call 100+ LLMs in the OpenAI format."}
+              </p>
+              <div className="flex items-center space-x-3 text-sm text-gray-600">
+                <span className="flex items-center">
+                  <span className="w-4 h-4 mr-2">🔧</span>
+                  Built with litellm: v{litellmVersion}
+                </span>
+              </div>
+            </Card>
+          )}
+
+          {/* Useful Links - only shown when not embedded */}
           {usefulLinks && Object.keys(usefulLinks).length > 0 && (
             <Card className="mb-10 p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
               <Title className="text-2xl font-semibold mb-6 text-gray-900">Useful Links</Title>
@@ -760,13 +774,15 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken }) => {
             </Card>
           )}
 
-          {/* Health and Endpoint Status */}
-          <Card className="mb-10 p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
-            <Title className="text-2xl font-semibold mb-6 text-gray-900">Health and Endpoint Status</Title>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <Text className="text-green-600 font-medium text-sm">Service status: {serviceStatus}</Text>
-            </div>
-          </Card>
+          {/* Health and Endpoint Status - only shown when not embedded */}
+          {!isEmbedded && (
+            <Card className="mb-10 p-8 bg-white border border-gray-200 rounded-lg shadow-sm">
+              <Title className="text-2xl font-semibold mb-6 text-gray-900">Health and Endpoint Status</Title>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Text className="text-green-600 font-medium text-sm">Service status: {serviceStatus}</Text>
+              </div>
+            </Card>
+          )}
 
           {/* Tabs for Models and Agents */}
           <Card className="p-8 bg-white border border-gray-200 rounded-lg shadow-sm">