Implementation:Microsoft Autogen Studio MCP Sidebar

Sources	python/packages/autogen-studio/frontend/src/components/views/mcp/sidebar.tsx
Domains	Frontend, React Component, Navigation
Last Updated	2026-02-11

Overview

McpSidebar is a React component that provides a collapsible navigation sidebar for browsing and selecting MCP (Model Context Protocol) workbenches from available galleries in AutoGen Studio.

Description

The McpSidebar component manages gallery and workbench selection state with persistent storage and URL parameter support. Key features include:

Gallery Selection: Dropdown to choose from available galleries with refresh capability
Workbench List: Displays MCP workbenches extracted from the selected gallery
State Persistence: Saves selected gallery to localStorage and supports URL parameters (galleryId, workbenchIndex)
Collapsible UI: Can be expanded/collapsed with toggle button
Loading States: Visual feedback during gallery and workbench loading
Empty States: Informative messages when no galleries or workbenches are available

The component uses React hooks extensively (useState for state, useEffect for lifecycle, useCallback for memoization, useContext for app context) and integrates with the McpAPI for data fetching. It automatically selects workbenches based on URL parameters for deep linking support and handles workbench changes through the onSelectWorkbench callback.

Usage

The sidebar is typically rendered on the left side of the MCP playground view. It receives selection callbacks from the parent component and notifies when users select different galleries or workbenches.

Code Reference

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

Signature:

interface McpSidebarProps {
  isOpen: boolean;
  onToggle: () => void;
  onSelectWorkbench: (
    workbench: Component<McpWorkbenchConfig> | null,
    galleryId?: number,
    workbenchIndex?: number
  ) => void;
  isLoading?: boolean;
  currentWorkbench: Component<McpWorkbenchConfig> | null;
  onGalleryUpdate?: (gallery: Gallery) => void;
}

export const McpSidebar: React.FC<McpSidebarProps> = ({
  isOpen,
  onToggle,
  onSelectWorkbench,
  isLoading = false,
  currentWorkbench,
  onGalleryUpdate,
}) => { /* ... */ }

Import:

import { McpSidebar } from './sidebar';

I/O Contract

Props/Inputs

Prop	Type	Required	Description
isOpen	boolean	Yes	Controls sidebar visibility (expanded/collapsed)
onToggle	() => void	Yes	Callback to toggle sidebar open/closed state
onSelectWorkbench	(workbench, galleryId?, workbenchIndex?) => void	Yes	Callback when workbench selection changes
isLoading	boolean	No	Shows loading indicator (default: false)
currentWorkbench	null	Yes	Currently selected workbench
onGalleryUpdate	(gallery: Gallery) => void	No	Optional callback when gallery is updated

Outputs

Event	Payload	Description
onToggle	void	Fired when user clicks toggle button
onSelectWorkbench	null, galleryId?: number, workbenchIndex?: number	Fired when user selects a workbench or clears selection
onGalleryUpdate	gallery: Gallery	Fired when gallery data is updated

Usage Examples

Basic usage in parent component:

const [sidebarOpen, setSidebarOpen] = useState(true);
const [selectedWorkbench, setSelectedWorkbench] = useState(null);

const handleWorkbenchSelect = (
  workbench: Component<McpWorkbenchConfig> | null,
  galleryId?: number,
  workbenchIndex?: number
) => {
  setSelectedWorkbench(workbench);
  console.log('Selected:', workbench?.label);
};

return (
  <McpSidebar
    isOpen={sidebarOpen}
    onToggle={() => setSidebarOpen(!sidebarOpen)}
    onSelectWorkbench={handleWorkbenchSelect}
    currentWorkbench={selectedWorkbench}
  />
);

Using with gallery update callback:

const handleGalleryUpdate = (gallery: Gallery) => {
  console.log('Gallery updated:', gallery.config.name);
  // Refresh related data or update parent state
};

<McpSidebar
  isOpen={true}
  onToggle={() => {}}
  onSelectWorkbench={handleWorkbenchSelect}
  currentWorkbench={null}
  onGalleryUpdate={handleGalleryUpdate}
/>

Deep linking with URL parameters:

// URL: /mcp?galleryId=123&workbenchIndex=2
// The sidebar will automatically:
// 1. Load gallery 123
// 2. Select workbench at index 2
// 3. Call onSelectWorkbench with the selected workbench

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment