scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-23 00:41:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 81

add OpenAPI Spec as first-class transport option in create form

Browse source
This commit is contained in:
Ishaan Jaffer 2026-02-19 12:14:17 -08:00
parent 9edd66855f
commit 91e5c4ff56
1 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
View file

@ -3,7 +3,7 @@ import { Modal, Tooltip, Form, Select, Input } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { Button, TextInput } from "@tremor/react";
import { createMCPServer } from "../networking";
import { AUTH_TYPE, DiscoverableMCPServer, OAUTH_FLOW, MCPServer, MCPServerCostInfo } from "./types";
import { AUTH_TYPE, DiscoverableMCPServer, OAUTH_FLOW, MCPServer, MCPServerCostInfo, TRANSPORT } from "./types";
import OAuthFormFields from "./OAuthFormFields";
import MCPServerCostConfig from "./mcp_server_cost_config";
import MCPConnectionStatus from "./mcp_connection_status";
@ -316,6 +316,11 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
}
}
// Map "openapi" transport to "http" for the backend
if (restValues.transport === TRANSPORT.OPENAPI) {
restValues.transport = "http";
}
// Prepare the payload with cost configuration and allowed tools
const payload: Record<string, any> = {
...restValues,
@ -377,9 +382,11 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
setTransportType(value);
// Clear fields that are not relevant for the selected transport
if (value === "stdio") {
form.setFieldsValue({ url: undefined, auth_type: undefined, credentials: undefined });
form.setFieldsValue({ url: undefined, spec_path: undefined, auth_type: undefined, credentials: undefined });
} else if (value === TRANSPORT.OPENAPI) {
form.setFieldsValue({ url: undefined, command: undefined, args: undefined, env: undefined });
} else {
form.setFieldsValue({ command: undefined, args: undefined, env: undefined });
form.setFieldsValue({ spec_path: undefined, command: undefined, args: undefined, env: undefined });
}
};
@ -555,15 +562,17 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
<Select.Option value="http">Streamable HTTP (Recommended)</Select.Option>
<Select.Option value="sse">Server-Sent Events (SSE)</Select.Option>
<Select.Option value="stdio">Standard Input/Output (stdio)</Select.Option>
<Select.Option value={TRANSPORT.OPENAPI}>OpenAPI Spec</Select.Option>
</Select>
</Form.Item>
{/* URL field - only show for HTTP and SSE */}
{transportType !== "stdio" && (
{(transportType === "http" || transportType === "sse") && (
<Form.Item
label={<span className="text-sm font-medium text-gray-700">MCP Server URL</span>}
name="url"
rules={[
{ required: true, message: "Please enter a server URL" },
{ validator: (_, value) => validateMCPServerUrl(value) },
]}
>
@ -574,28 +583,29 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
</Form.Item>
)}
{/* OpenAPI Spec URL - only show for HTTP and SSE */}
{transportType !== "stdio" && (
{/* OpenAPI Spec URL - only show for OpenAPI transport */}
{transportType === TRANSPORT.OPENAPI && (
<Form.Item
label={
<span className="text-sm font-medium text-gray-700 flex items-center">
OpenAPI Spec URL (optional)
<Tooltip title="Provide an OpenAPI spec URL to automatically generate MCP tools from the API endpoints. When set, tools are generated from the spec instead of connecting to an MCP server.">
OpenAPI Spec URL
<Tooltip title="URL to an OpenAPI specification (JSON or YAML). MCP tools will be automatically generated from the API endpoints defined in the spec.">
<InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
</Tooltip>
</span>
}
name="spec_path"
rules={[{ required: true, message: "Please enter an OpenAPI spec URL" }]}
>
<Input
placeholder="https://api.example.com/openapi.json"
placeholder="https://petstore3.swagger.io/api/v3/openapi.json"
className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
/>
</Form.Item>
)}
{/* Authentication - only show for HTTP and SSE */}
{transportType !== "stdio" && (
{/* Authentication - show for HTTP, SSE, and OpenAPI */}
{transportType !== "stdio" && transportType !== "" && (
<Form.Item
label={<span className="text-sm font-medium text-gray-700">Authentication</span>}
name="auth_type"
@ -611,7 +621,7 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
</Form.Item>
)}
{transportType !== "stdio" && shouldShowAuthValueField && (
{transportType !== "stdio" && transportType !== "" && shouldShowAuthValueField && (
<Form.Item
label={
<span className="text-sm font-medium text-gray-700 flex items-center">
@ -632,7 +642,7 @@ const CreateMCPServer: React.FC<CreateMCPServerProps> = ({
</Form.Item>
)}
{transportType !== "stdio" && isOAuthAuthType && (
{transportType !== "stdio" && transportType !== "" && isOAuthAuthType && (
<OAuthFormFields
isM2M={isM2MFlow}
initialFlowType={OAUTH_FLOW.INTERACTIVE}