Phase 2: Refactor Sampling/Elicitation cluster to MCP SDK types
Replace ad hoc local types with SDK schema types across the Sampling and Elicitation group components. - SamplingRequestPanel: accept `request: CreateMessageRequestParams` + `draftResult: CreateMessageResult` instead of 16 flat props; derive messages, model preferences, and parameters from the request object; drop `tools`/`toolChoice` (not in MCP 2025-11-25 CreateMessageRequest) - InlineSamplingRequest: accept `request: CreateMessageRequestParams`; derive messagePreview and modelHints from the request - ElicitationFormPanel: accept `request: ElicitRequest['params']` + `serverName`; pass requestedSchema directly to SchemaForm - ElicitationUrlPanel: rename `elicitationId` to `requestId` - InlineElicitationRequest: accept `request: ElicitRequest['params']`; discriminate form vs URL mode on request shape instead of `mode` prop - PendingClientRequests: unchanged (children-based wrapper) - Delete local `SamplingTool` type - Update all stories with real SDK type fixtures Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall
parent
7b74598f83
commit
c1a63cb37d
2 changed files with 326 additions and 299 deletions
|
|
@ -1,17 +1,23 @@
|
|||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import type {
|
||||
CreateMessageRequestParams,
|
||||
CreateMessageResult,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { fn } from "storybook/test";
|
||||
import { SamplingRequestPanel } from "./SamplingRequestPanel";
|
||||
|
||||
const defaultDraftResult: CreateMessageResult = {
|
||||
role: "assistant",
|
||||
content: { type: "text", text: "" },
|
||||
model: "claude-sonnet-4-20250514",
|
||||
};
|
||||
|
||||
const meta: Meta<typeof SamplingRequestPanel> = {
|
||||
title: "Groups/SamplingRequestPanel",
|
||||
component: SamplingRequestPanel,
|
||||
args: {
|
||||
responseText: "",
|
||||
modelUsed: "claude-3-sonnet",
|
||||
stopReason: "end_turn",
|
||||
onResponseChange: fn(),
|
||||
onModelChange: fn(),
|
||||
onStopReasonChange: fn(),
|
||||
draftResult: defaultDraftResult,
|
||||
onResultChange: fn(),
|
||||
onAutoRespond: fn(),
|
||||
onSend: fn(),
|
||||
onReject: fn(),
|
||||
|
|
@ -21,115 +27,69 @@ const meta: Meta<typeof SamplingRequestPanel> = {
|
|||
export default meta;
|
||||
type Story = StoryObj<typeof SamplingRequestPanel>;
|
||||
|
||||
export const SimpleRequest: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: {
|
||||
type: "text",
|
||||
text: "What is the capital of France?",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
const simpleRequest: CreateMessageRequestParams = {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "What is the capital of France?" },
|
||||
},
|
||||
],
|
||||
maxTokens: 1024,
|
||||
};
|
||||
|
||||
export const WithModelHints: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "Summarize this document for me." },
|
||||
},
|
||||
],
|
||||
modelHints: ["claude-3-sonnet", "gpt-4"],
|
||||
},
|
||||
};
|
||||
|
||||
export const WithPriorities: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "Translate this text to Spanish." },
|
||||
},
|
||||
],
|
||||
modelHints: ["claude-3-sonnet"],
|
||||
const withPreferencesRequest: CreateMessageRequestParams = {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "Summarize this document for me." },
|
||||
},
|
||||
],
|
||||
maxTokens: 2048,
|
||||
modelPreferences: {
|
||||
hints: [{ name: "claude-sonnet-4-20250514" }, { name: "gpt-4" }],
|
||||
costPriority: 0.3,
|
||||
speedPriority: 0.5,
|
||||
intelligencePriority: 0.9,
|
||||
},
|
||||
};
|
||||
|
||||
export const WithAllParams: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "Write a haiku about programming." },
|
||||
},
|
||||
{
|
||||
role: "assistant",
|
||||
content: { type: "text", text: "Here is a haiku:" },
|
||||
},
|
||||
],
|
||||
maxTokens: 1024,
|
||||
stopSequences: ["\n\n", "END"],
|
||||
temperature: 0.7,
|
||||
includeContext: "thisServer",
|
||||
},
|
||||
const fullRequest: CreateMessageRequestParams = {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "Write a haiku about programming." },
|
||||
},
|
||||
{
|
||||
role: "assistant",
|
||||
content: { type: "text", text: "Here is a haiku:" },
|
||||
},
|
||||
],
|
||||
maxTokens: 1024,
|
||||
stopSequences: ["\n\n", "END"],
|
||||
temperature: 0.7,
|
||||
includeContext: "thisServer",
|
||||
};
|
||||
|
||||
export const WithTools: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: {
|
||||
type: "text",
|
||||
text: "Look up the weather in San Francisco.",
|
||||
},
|
||||
},
|
||||
],
|
||||
tools: [
|
||||
{
|
||||
name: "get_weather",
|
||||
description: "Get the current weather for a given location.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
location: { type: "string", description: "City name" },
|
||||
},
|
||||
required: ["location"],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "search_web",
|
||||
description: "Search the web for information.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
query: { type: "string", description: "Search query" },
|
||||
},
|
||||
required: ["query"],
|
||||
},
|
||||
},
|
||||
],
|
||||
toolChoice: "auto",
|
||||
},
|
||||
export const SimpleRequest: Story = {
|
||||
args: { request: simpleRequest },
|
||||
};
|
||||
|
||||
export const WithModelHints: Story = {
|
||||
args: { request: withPreferencesRequest },
|
||||
};
|
||||
|
||||
export const WithAllParams: Story = {
|
||||
args: { request: fullRequest },
|
||||
};
|
||||
|
||||
export const PrefilledResponse: Story = {
|
||||
args: {
|
||||
messages: [
|
||||
{
|
||||
role: "user",
|
||||
content: { type: "text", text: "What is 2 + 2?" },
|
||||
},
|
||||
],
|
||||
responseText: "The answer is 4.",
|
||||
modelUsed: "claude-3-haiku",
|
||||
stopReason: "end_turn",
|
||||
request: simpleRequest,
|
||||
draftResult: {
|
||||
role: "assistant",
|
||||
content: { type: "text", text: "The capital of France is Paris." },
|
||||
model: "claude-haiku-4-5-20251001",
|
||||
stopReason: "endTurn",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,33 +11,16 @@ import {
|
|||
Textarea,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import type { SamplingMessage } from "@modelcontextprotocol/sdk/types.js";
|
||||
import type {
|
||||
CreateMessageRequestParams,
|
||||
CreateMessageResult,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
|
||||
|
||||
export interface SamplingTool {
|
||||
name: string;
|
||||
description?: string;
|
||||
inputSchema: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface SamplingRequestPanelProps {
|
||||
messages: SamplingMessage[];
|
||||
modelHints?: string[];
|
||||
costPriority?: number;
|
||||
speedPriority?: number;
|
||||
intelligencePriority?: number;
|
||||
maxTokens?: number;
|
||||
stopSequences?: string[];
|
||||
temperature?: number;
|
||||
includeContext?: string;
|
||||
tools?: SamplingTool[];
|
||||
toolChoice?: string;
|
||||
responseText: string;
|
||||
modelUsed: string;
|
||||
stopReason: string;
|
||||
onResponseChange: (text: string) => void;
|
||||
onModelChange: (model: string) => void;
|
||||
onStopReasonChange: (reason: string) => void;
|
||||
request: CreateMessageRequestParams;
|
||||
draftResult: CreateMessageResult;
|
||||
onResultChange: (result: CreateMessageResult) => void;
|
||||
onAutoRespond: () => void;
|
||||
onSend: () => void;
|
||||
onReject: () => void;
|
||||
|
|
@ -67,43 +50,30 @@ const PreferencesContainer = Paper.withProps({
|
|||
withBorder: true,
|
||||
});
|
||||
|
||||
const ToolCard = Paper.withProps({
|
||||
p: "xs",
|
||||
withBorder: true,
|
||||
});
|
||||
|
||||
const ToolName = Text.withProps({
|
||||
size: "sm",
|
||||
fw: 600,
|
||||
});
|
||||
|
||||
const RejectButton = Button.withProps({
|
||||
variant: "light",
|
||||
color: "red",
|
||||
});
|
||||
|
||||
export function SamplingRequestPanel({
|
||||
messages,
|
||||
modelHints,
|
||||
costPriority,
|
||||
speedPriority,
|
||||
intelligencePriority,
|
||||
maxTokens,
|
||||
stopSequences,
|
||||
temperature,
|
||||
includeContext,
|
||||
tools,
|
||||
toolChoice,
|
||||
responseText,
|
||||
modelUsed,
|
||||
stopReason,
|
||||
onResponseChange,
|
||||
onModelChange,
|
||||
onStopReasonChange,
|
||||
request,
|
||||
draftResult,
|
||||
onResultChange,
|
||||
onAutoRespond,
|
||||
onSend,
|
||||
onReject,
|
||||
}: SamplingRequestPanelProps) {
|
||||
const {
|
||||
messages,
|
||||
modelPreferences,
|
||||
maxTokens,
|
||||
stopSequences,
|
||||
temperature,
|
||||
includeContext,
|
||||
} = request;
|
||||
|
||||
const hints = modelPreferences?.hints?.map((h) => h.name) ?? [];
|
||||
|
||||
return (
|
||||
<Stack gap="md">
|
||||
<HintText>The server is requesting an LLM completion.</HintText>
|
||||
|
|
@ -113,29 +83,30 @@ export function SamplingRequestPanel({
|
|||
<MessageBubble key={index} index={index} message={message} />
|
||||
))}
|
||||
|
||||
{modelHints && modelHints.length > 0 && (
|
||||
{hints.length > 0 && (
|
||||
<PreferencesContainer>
|
||||
<Stack gap="xs">
|
||||
<Title order={5}>Model Preferences:</Title>
|
||||
<Group gap="xs">
|
||||
<Text size="sm">Hints:</Text>
|
||||
{modelHints.map((hint) => (
|
||||
{hints.map((hint) => (
|
||||
<Badge key={hint}>{hint}</Badge>
|
||||
))}
|
||||
</Group>
|
||||
{costPriority !== undefined && (
|
||||
{modelPreferences?.costPriority !== undefined && (
|
||||
<Text size="sm">
|
||||
Cost Priority: {formatPriority(costPriority)}
|
||||
Cost Priority: {formatPriority(modelPreferences.costPriority)}
|
||||
</Text>
|
||||
)}
|
||||
{speedPriority !== undefined && (
|
||||
{modelPreferences?.speedPriority !== undefined && (
|
||||
<Text size="sm">
|
||||
Speed Priority: {formatPriority(speedPriority)}
|
||||
Speed Priority: {formatPriority(modelPreferences.speedPriority)}
|
||||
</Text>
|
||||
)}
|
||||
{intelligencePriority !== undefined && (
|
||||
{modelPreferences?.intelligencePriority !== undefined && (
|
||||
<Text size="sm">
|
||||
Intelligence Priority: {formatPriority(intelligencePriority)}
|
||||
Intelligence Priority:{" "}
|
||||
{formatPriority(modelPreferences.intelligencePriority)}
|
||||
</Text>
|
||||
)}
|
||||
</Stack>
|
||||
|
|
@ -161,40 +132,40 @@ export function SamplingRequestPanel({
|
|||
</Group>
|
||||
)}
|
||||
|
||||
{tools && tools.length > 0 && (
|
||||
<>
|
||||
<Title order={5}>Available Tools:</Title>
|
||||
{tools.map((tool) => (
|
||||
<ToolCard key={tool.name}>
|
||||
<ToolName>{tool.name}</ToolName>
|
||||
{tool.description && <Text size="sm">{tool.description}</Text>}
|
||||
</ToolCard>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{toolChoice && <Text size="sm">Tool Choice: {toolChoice}</Text>}
|
||||
|
||||
<Divider />
|
||||
|
||||
<Title order={5}>Response:</Title>
|
||||
<Textarea
|
||||
value={responseText}
|
||||
onChange={(event) => onResponseChange(event.currentTarget.value)}
|
||||
value={
|
||||
draftResult.content.type === "text" ? draftResult.content.text : ""
|
||||
}
|
||||
onChange={(event) =>
|
||||
onResultChange({
|
||||
...draftResult,
|
||||
content: { type: "text", text: event.currentTarget.value },
|
||||
})
|
||||
}
|
||||
autosize
|
||||
minRows={3}
|
||||
/>
|
||||
<Group>
|
||||
<TextInput
|
||||
label="Model Used"
|
||||
value={modelUsed}
|
||||
onChange={(event) => onModelChange(event.currentTarget.value)}
|
||||
value={draftResult.model}
|
||||
onChange={(event) =>
|
||||
onResultChange({ ...draftResult, model: event.currentTarget.value })
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
label="Stop Reason"
|
||||
data={["end_turn", "max_tokens", "stop_sequence", "toolUse"]}
|
||||
value={stopReason}
|
||||
onChange={(value) => onStopReasonChange(value ?? "")}
|
||||
data={["endTurn", "maxTokens", "stopSequence"]}
|
||||
value={draftResult.stopReason ?? null}
|
||||
onChange={(value) =>
|
||||
onResultChange({
|
||||
...draftResult,
|
||||
stopReason: value ?? undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify="flex-end">
|
||||
|
|
|
|||
Loading…
Reference in a new issue