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

Add draft version of enhanced object input editing

Browse Source
This commit is contained in:
Ola Hungerford
2025-01-27 21:05:11 -07:00
parent 361f9d109b
commit a4469f7895
6 changed files with 363 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,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,
@@ -15,6 +16,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,
@@ -150,22 +157,21 @@ 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 === "string" ? (
([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 === "string" ? (
<Textarea
id={key}
name={key}
// @ts-expect-error value type is currently unknown
placeholder={value.description}
placeholder={prop.description}
onChange={(e) =>
setParams({
...params,
@@ -174,54 +180,44 @@ 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);
) : prop.type === "object" ? (
<div className="mt-1">
<DynamicJsonForm
schema={{
type: 'object',
properties: prop.properties,
description: prop.description,
} as JsonSchemaType}
value={params[key] as JsonValue ?? {}}
onChange={(newValue: JsonValue) => {
setParams({
...params,
[key]: parsed,
[key]: newValue,
});
} catch (err) {
// If invalid JSON, store as string - will be validated on submit
setParams({
...params,
[key]: e.target.value,
});
}
}}
className="mt-1"
/>
}}
/>
</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" />