Implementation:Microsoft Autogen Studio Sidebar

Knowledge Sources	python/packages/autogen-studio/frontend/src/components/sidebar.tsx
Domains	Frontend, UI Components, Navigation
Last Updated	2026-02-11

Overview

The Sidebar component provides the main navigation interface for AutoGen Studio, featuring collapsible navigation with route management, breadcrumb tracking, and responsive design for mobile and desktop views.

Description

This React component implements the primary navigation sidebar for AutoGen Studio. It includes:

• Navigation items for Team Builder, Playground, MCP (Experimental), Gallery, Deploy, and Settings
• Collapsible sidebar functionality with expand/collapse controls
• Active route highlighting with visual indicators
• Breadcrumb state management integrated with global store
• Responsive design that adapts to mobile and desktop viewports
• Icon-based navigation with tooltips for collapsed state
• Integration with Gatsby's Link component for client-side routing
• Dynamic header updates based on current route

The component uses Zustand's useConfigStore for state management, allowing the sidebar's expanded/collapsed state to persist across navigation. It supports both full-width display on mobile devices and collapsible display on desktop, with smooth transitions between states.

Usage

This component is used as the main navigation sidebar in the AutoGen Studio application layout. It should be imported and rendered at the application root level, typically alongside the main content area.

import Sidebar from "./components/sidebar";

// In your layout component
<Sidebar
  link="/build"
  meta={{ title: "AutoGen Studio", description: "Build AI agents" }}
  isMobile={false}
/>

Code Reference

Source Location: /tmp/kapso_repo_2mr4n2g4/python/packages/autogen-studio/frontend/src/components/sidebar.tsx

Component Signature:

type SidebarProps = {
  link: string;
  meta?: {
    title: string;
    description: string;
  };
  isMobile: boolean;
};

const Sidebar = ({ link, meta, isMobile }: SidebarProps) => {
  // Component implementation
}

export default Sidebar;

Import Statement:

import Sidebar from "./components/sidebar";

Key Interfaces:

interface INavItem {
  name: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
  breadcrumbs?: Array<{
    name: string;
    href: string;
    current?: boolean;
  }>;
}

I/O Contract

Inputs

Parameter	Type	Required	Description
link	string	Yes	Current route path to determine active navigation item
meta	object	No	Application metadata containing title and description
meta.title	string	No	Application title displayed in the sidebar header
meta.description	string	No	Application description displayed below the title
isMobile	boolean	Yes	Flag indicating mobile viewport for responsive behavior

Outputs

Type	Description
JSX.Element	Rendered sidebar navigation component with collapsible functionality

Side Effects

• Updates global header state via useConfigStore when navigation items are clicked
• Modifies sidebar expanded/collapsed state in global store
• Triggers route changes via Gatsby Link component

Usage Examples

Basic Usage

import Sidebar from "./components/sidebar";

function Layout() {
  return (
    <div className="flex">
      <Sidebar
        link="/playground"
        meta={{
          title: "AutoGen Studio",
          description: "Agent development platform"
        }}
        isMobile={false}
      />
      <main className="flex-1">
        {/* Main content */}
      </main>
    </div>
  );
}

Mobile Responsive Usage

import { useMediaQuery } from "react-responsive";

function App() {
  const isMobile = useMediaQuery({ maxWidth: 768 });

  return (
    <Sidebar
      link="/build"
      meta={{ title: "AutoGen Studio", description: "Build agents" }}
      isMobile={isMobile}
    />
  );
}

Navigation Configuration

The navigation items are pre-configured in the component:

const navigation: INavItem[] = [
  {
    name: "Team Builder",
    href: "/build",
    icon: Bot,
    breadcrumbs: [{ name: "Team Builder", href: "/build", current: true }],
  },
  {
    name: "Playground",
    href: "/",
    icon: MessagesSquare,
    breadcrumbs: [{ name: "Playground", href: "/", current: true }],
  },
  {
    name: "Gallery",
    href: "/gallery",
    icon: GalleryHorizontalEnd,
    breadcrumbs: [{ name: "Gallery", href: "/gallery", current: true }],
  },
  // Additional navigation items...
];

Related Pages

• Studio Config Store - Global state management for sidebar and header
• Studio Layout - Main application layout component
• Studio Icons - Custom icon components used in navigation
• Studio Routes - Route configuration and page components