hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge: Integrate boolean checkbox support with SchemaProperty type system

Browse Source
This commit is contained in:
Ola Hungerford
2025-02-19 07:38:23 -07:00
parent 44d07b964c
commit 450405733a
5 changed files with 405 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
client/src/components/ToolsTab.tsx
View File

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { TabsContent } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
import {
ListToolsResult,
Tool,
@@ -16,6 +17,12 @@ import ListPane from "./ListPane";
import { CompatibilityCallToolResult } from "@modelcontextprotocol/sdk/types.js";
type SchemaProperty = {
type: string;
description?: string;
properties?: Record<string, SchemaProperty>;
};
const ToolsTab = ({
tools,
listTools,
@@ -160,17 +167,17 @@ const ToolsTab = ({
{selectedTool.description}
</p>
{Object.entries(selectedTool.inputSchema.properties ?? []).map(
([key, value]) => (
<div key={key}>
<Label
htmlFor={key}
className="block text-sm font-medium text-gray-700"
>
{key}
</Label>
{
/* @ts-expect-error value type is currently unknown */
value.type === "boolean" ? (
([key, value]) => {
const prop = value as SchemaProperty;
return (
<div key={key}>
<Label
htmlFor={key}
className="block text-sm font-medium text-gray-700"
>
{key}
</Label>
{prop.type === "boolean" ? (
<div className="flex items-center space-x-2 mt-2">
<Checkbox
id={key}
@@ -187,17 +194,14 @@ const ToolsTab = ({
htmlFor={key}
className="text-sm font-medium text-gray-700 dark:text-gray-300"
>
{/* @ts-expect-error value type is currently unknown */}
{value.description || "Toggle this option"}
{prop.description || "Toggle this option"}
</label>
</div>
) : /* @ts-expect-error value type is currently unknown */
value.type === "string" ? (
) : prop.type === "string" ? (
<Textarea
id={key}
name={key}
// @ts-expect-error value type is currently unknown
placeholder={value.description}
placeholder={prop.description}
onChange={(e) =>
setParams({
...params,
@@ -206,54 +210,46 @@ const ToolsTab = ({
}
className="mt-1"
/>
) : /* @ts-expect-error value type is currently unknown */
value.type === "object" ? (
<Textarea
id={key}
name={key}
// @ts-expect-error value type is currently unknown
placeholder={value.description}
onChange={(e) => {
try {
const parsed = JSON.parse(e.target.value);
setParams({
...params,
[key]: parsed,
});
} catch {
// If invalid JSON, store as string - will be validated on submit
setParams({
...params,
[key]: e.target.value,
});
) : prop.type === "object" ? (
<div className="mt-1">
<DynamicJsonForm
schema={
{
type: "object",
properties: prop.properties,
description: prop.description,
} as JsonSchemaType
}
}}
className="mt-1"
/>
value={(params[key] as JsonValue) ?? {}}
onChange={(newValue: JsonValue) => {
setParams({
...params,
[key]: newValue,
});
}}
/>
</div>
) : (
<Input
// @ts-expect-error value type is currently unknown
type={value.type === "number" ? "number" : "text"}
type={prop.type === "number" ? "number" : "text"}
id={key}
name={key}
// @ts-expect-error value type is currently unknown
placeholder={value.description}
placeholder={prop.description}
onChange={(e) =>
setParams({
...params,
[key]:
// @ts-expect-error value type is currently unknown
value.type === "number"
prop.type === "number"
? Number(e.target.value)
: e.target.value,
})
}
className="mt-1"
/>
)
}
</div>
),
)}
</div>
);
}
)}
<Button onClick={() => callTool(selectedTool.name, params)}>
<Send className="w-4 h-4 mr-2" />