modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Merge branch 'main' into allow-multiple-client-connections

Browse source
This commit is contained in:
Cliff Hall 2025-05-29 16:05:36 -04:00 • committed by GitHub
commit a7aa72655a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 29 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/App.tsx
View file

@ -611,7 +611,7 @@ const App = () => {
className="w-full p-4" className="w-full p-4"
onValueChange={(value) => (window.location.hash = value)} onValueChange={(value) => (window.location.hash = value)}
> >
<TabsList className="mb-4 p-0"> <TabsList className="mb-4 py-0">
<TabsTrigger <TabsTrigger
value="resources" value="resources"
disabled={!serverCapabilities?.resources} disabled={!serverCapabilities?.resources}
@ -662,7 +662,7 @@ const App = () => {
!serverCapabilities?.tools ? ( !serverCapabilities?.tools ? (
<> <>
<div className="flex items-center justify-center p-4"> <div className="flex items-center justify-center p-4">
<p className="text-lg text-gray-500"> <p className="text-lg text-gray-500 dark:text-gray-400">
The connected server does not support any MCP The connected server does not support any MCP
capabilities capabilities
</p> </p>
@ -816,7 +816,7 @@ const App = () => {
</Tabs> </Tabs>
) : ( ) : (
<div className="flex flex-col items-center justify-center h-full gap-4"> <div className="flex flex-col items-center justify-center h-full gap-4">
<p className="text-lg text-gray-500"> <p className="text-lg text-gray-500 dark:text-gray-400">
Connect to an MCP server to start inspecting Connect to an MCP server to start inspecting
</p> </p>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -841,7 +841,7 @@ const App = () => {
}} }}
> >
<div <div
className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50" className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50 dark:hover:bg-input/40"
onMouseDown={handleDragStart} onMouseDown={handleDragStart}
> >
<div className="w-8 h-1 rounded-full bg-border" /> <div className="w-8 h-1 rounded-full bg-border" />

12
client/src/components/History.tsx
View file

@ -29,7 +29,9 @@ const HistoryAndNotifications = ({
<div className="flex-1 overflow-y-auto p-4 border-r"> <div className="flex-1 overflow-y-auto p-4 border-r">
<h2 className="text-lg font-semibold mb-4">History</h2> <h2 className="text-lg font-semibold mb-4">History</h2>
{requestHistory.length === 0 ? ( {requestHistory.length === 0 ? (
<p className="text-sm text-gray-500 italic">No history yet</p> <p className="text-sm text-gray-500 dark:text-gray-400 italic">
No history yet
</p>
) : ( ) : (
<ul className="space-y-3"> <ul className="space-y-3">
{requestHistory {requestHistory
@ -38,7 +40,7 @@ const HistoryAndNotifications = ({
.map((request, index) => ( .map((request, index) => (
<li <li
key={index} key={index}
className="text-sm text-foreground bg-secondary p-2 rounded" className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
> >
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"
@ -93,7 +95,9 @@ const HistoryAndNotifications = ({
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-4">
<h2 className="text-lg font-semibold mb-4">Server Notifications</h2> <h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
{serverNotifications.length === 0 ? ( {serverNotifications.length === 0 ? (
<p className="text-sm text-gray-500 italic">No notifications yet</p> <p className="text-sm text-gray-500 dark:text-gray-400 italic">
No notifications yet
</p>
) : ( ) : (
<ul className="space-y-3"> <ul className="space-y-3">
{serverNotifications {serverNotifications
@ -102,7 +106,7 @@ const HistoryAndNotifications = ({
.map((notification, index) => ( .map((notification, index) => (
<li <li
key={index} key={index}
className="text-sm text-foreground bg-secondary p-2 rounded" className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
> >
<div <div
className="flex justify-between items-center cursor-pointer" className="flex justify-between items-center cursor-pointer"

6
client/src/components/ListPane.tsx
View file

@ -21,8 +21,8 @@ const ListPane = <T extends object>({
buttonText, buttonText,
isButtonDisabled, isButtonDisabled,
}: ListPaneProps<T>) => ( }: ListPaneProps<T>) => (
<div className="bg-card rounded-lg shadow"> <div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800"> <div className="p-4 border-b border-gray-200 dark:border-border">
<h3 className="font-semibold dark:text-white">{title}</h3> <h3 className="font-semibold dark:text-white">{title}</h3>
</div> </div>
<div className="p-4"> <div className="p-4">
@ -46,7 +46,7 @@ const ListPane = <T extends object>({
{items.map((item, index) => ( {items.map((item, index) => (
<div <div
key={index} key={index}
className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer" className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
onClick={() => setSelectedItem(item)} onClick={() => setSelectedItem(item)}
> >
{renderItem(item)} {renderItem(item)}

6
client/src/components/PromptsTab.tsx
View file

@ -110,8 +110,8 @@ const PromptsTab = ({
isButtonDisabled={!nextCursor && prompts.length > 0} isButtonDisabled={!nextCursor && prompts.length > 0}
/> />
<div className="bg-card rounded-lg shadow"> <div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800"> <div className="p-4 border-b border-gray-200 dark:border-border">
<h3 className="font-semibold"> <h3 className="font-semibold">
{selectedPrompt ? selectedPrompt.name : "Select a prompt"} {selectedPrompt ? selectedPrompt.name : "Select a prompt"}
</h3> </h3>
@ -126,7 +126,7 @@ const PromptsTab = ({
) : selectedPrompt ? ( ) : selectedPrompt ? (
<div className="space-y-4"> <div className="space-y-4">
{selectedPrompt.description && ( {selectedPrompt.description && (
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600 dark:text-gray-400">
{selectedPrompt.description} {selectedPrompt.description}
</p> </p>
)} )}

6
client/src/components/ResourcesTab.tsx
View file

@ -173,8 +173,8 @@ const ResourcesTab = ({
isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0} isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
/> />
<div className="bg-card rounded-lg shadow"> <div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center"> <div className="p-4 border-b border-gray-200 dark:border-border flex justify-between items-center">
<h3 <h3
className="font-semibold truncate" className="font-semibold truncate"
title={selectedResource?.name || selectedTemplate?.name} title={selectedResource?.name || selectedTemplate?.name}
@ -234,7 +234,7 @@ const ResourcesTab = ({
/> />
) : selectedTemplate ? ( ) : selectedTemplate ? (
<div className="space-y-4"> <div className="space-y-4">
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600 dark:text-gray-400">
{selectedTemplate.description} {selectedTemplate.description}
</p> </p>
{selectedTemplate.uriTemplate {selectedTemplate.uriTemplate

4
client/src/components/Sidebar.tsx
View file

@ -215,7 +215,7 @@ const Sidebar = ({
return ( return (
<div className="w-80 bg-card border-r border-border flex flex-col h-full"> <div className="w-80 bg-card border-r border-border flex flex-col h-full">
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800"> <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-border">
<div className="flex items-center"> <div className="flex items-center">
<h1 className="ml-2 text-lg font-semibold"> <h1 className="ml-2 text-lg font-semibold">
MCP Inspector v{version} MCP Inspector v{version}
@ -646,7 +646,7 @@ const Sidebar = ({
} }
})()}`} })()}`}
/> />
<span className="text-sm text-gray-600"> <span className="text-sm text-gray-600 dark:text-gray-400">
{(() => { {(() => {
switch (connectionStatus) { switch (connectionStatus) {
case "connected": case "connected":

8
client/src/components/ToolsTab.tsx
View file

@ -77,8 +77,8 @@ const ToolsTab = ({
isButtonDisabled={!nextCursor && tools.length > 0} isButtonDisabled={!nextCursor && tools.length > 0}
/> />
<div className="bg-card rounded-lg shadow"> <div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-gray-800"> <div className="p-4 border-b border-gray-200 dark:border-border">
<h3 className="font-semibold"> <h3 className="font-semibold">
{selectedTool ? selectedTool.name : "Select a tool"} {selectedTool ? selectedTool.name : "Select a tool"}
</h3> </h3>
@ -86,7 +86,7 @@ const ToolsTab = ({
<div className="p-4"> <div className="p-4">
{selectedTool ? ( {selectedTool ? (
<div className="space-y-4"> <div className="space-y-4">
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600 dark:text-gray-400">
{selectedTool.description} {selectedTool.description}
</p> </p>
{Object.entries(selectedTool.inputSchema.properties ?? []).map( {Object.entries(selectedTool.inputSchema.properties ?? []).map(
@ -96,7 +96,7 @@ const ToolsTab = ({
<div key={key}> <div key={key}>
<Label <Label
htmlFor={key} htmlFor={key}
className="block text-sm font-medium text-gray-700" className="block text-sm font-medium text-gray-700 dark:text-gray-300"
> >
{key} {key}
</Label> </Label>

4
client/src/index.css
View file

@ -93,8 +93,8 @@ h1 {
--accent-foreground: 210 40% 98%; --accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%; --destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --border: 217.2 24% 24%;
--input: 217.2 32.6% 17.5%; --input: 217.2 24% 24%;
--ring: 212.7 26.8% 83.9%; --ring: 212.7 26.8% 83.9%;
--chart-1: 220 70% 50%; --chart-1: 220 70% 50%;
--chart-2: 160 60% 45%; --chart-2: 160 60% 45%;