scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-04 02:31:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 69

feat(ui): OpenAPIFormSection + OpenAPIQuickPicker to shadcn

Browse source 
- OpenAPIFormSection: antd Tooltip + @ant-design InfoCircleOutlined \u2192
  shadcn Tooltip + lucide Info. Preserves the antd Form.Item for
  spec_path since the parent form is antd-driven.
- OpenAPIQuickPicker: antd Spin + inline gray palette \u2192 lucide
  Loader2 + semantic bg-primary/10 + border-primary for selected
  cards, bg-muted/hover styling for idle. Broken logo fallback avatar
  uses bg-muted + text-foreground.

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-23 12:27:08 +00:00
parent c1d0451c9b
commit 4808b7bd0d
No known key found for this signature in database
2 changed files with 50 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
ui/litellm-dashboard/src/components/mcp_tools/OpenAPIFormSection.tsx
View file

@ -1,28 +1,29 @@
import React, { useState } from "react";
import { Form, Input, Tooltip } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { Form, Input } from "antd";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Info } from "lucide-react";
import { FormInstance } from "antd/es/form";
import { AUTH_TYPE, OAUTH_FLOW } from "./types";
import OpenAPIQuickPicker, { OpenAPIRegistryEntry, OpenAPIKeyTool } from "./OpenAPIQuickPicker";
import OpenAPIQuickPicker, {
OpenAPIRegistryEntry,
OpenAPIKeyTool,
} from "./OpenAPIQuickPicker";
interface OpenAPIFormSectionProps {
form: FormInstance;
accessToken: string | null;
/** Called when a preset is selected so the parent can sync its formValues state. */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onValuesChange: (updates: Record<string, any>) => void;
/** Called when key tools change (from registry preset selection). */
onKeyToolsChange?: (tools: OpenAPIKeyTool[]) => void;
/** Called when a preset is selected so the parent can set the logo URL from icon_url. */
onLogoUrlChange?: (url: string | undefined) => void;
/** Called when the OAuth docs URL changes (e.g. link to create a GitHub OAuth App). */
onOAuthDocsUrlChange?: (url: string | null) => void;
}
/**
* Encapsulates all OpenAPI-specific form fields:
* - popular API quick-picker (logos)
* - spec URL input
*/
const OpenAPIFormSection: React.FC<OpenAPIFormSectionProps> = ({
form,
accessToken,
@ -37,21 +38,18 @@ const OpenAPIFormSection: React.FC<OpenAPIFormSectionProps> = ({
setSelectedPreset(entry.name);
onKeyToolsChange?.(entry.key_tools ?? []);
onLogoUrlChange?.(entry.icon_url || undefined);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updates: Record<string, any> = {
spec_path: entry.spec_url,
};
if (entry.oauth) {
updates.auth_type = AUTH_TYPE.OAUTH2;
// OAuth2 registry entries always use the interactive (PKCE) flow — users
// authorize via their browser, not machine-to-machine client credentials.
updates.oauth_flow_type = OAUTH_FLOW.INTERACTIVE;
updates.authorization_url = entry.oauth.authorization_url;
updates.token_url = entry.oauth.token_url;
form.setFieldsValue(updates);
onOAuthDocsUrlChange?.(entry.oauth.docs_url ?? null);
} else {
// resetFields is required to visually clear Ant Design form fields —
// setFieldsValue with undefined silently skips undefined keys.
form.resetFields(["auth_type", "authorization_url", "token_url"]);
form.setFieldsValue(updates);
onOAuthDocsUrlChange?.(null);
@ -69,22 +67,31 @@ const OpenAPIFormSection: React.FC<OpenAPIFormSectionProps> = ({
<Form.Item
label={
<span className="text-sm font-medium text-gray-700 flex items-center">
<span className="text-sm font-medium text-foreground flex items-center">
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>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Info className="ml-2 h-3 w-3 text-primary cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
URL to an OpenAPI specification (JSON or YAML). MCP tools
will be automatically generated from the API endpoints
defined in the spec.
</TooltipContent>
</Tooltip>
</TooltipProvider>
</span>
}
name="spec_path"
rules={[{ required: true, message: "Please enter an OpenAPI spec URL" }]}
rules={[
{ required: true, message: "Please enter an OpenAPI spec URL" },
]}
>
<Input
placeholder="https://petstore3.swagger.io/api/v3/openapi.json"
className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500"
className="rounded-lg"
onChange={() => {
// Clear the preset selection when the user manually edits the spec URL
// so stale suggested tools from a previous preset don't persist.
setSelectedPreset(null);
onKeyToolsChange?.([]);
onOAuthDocsUrlChange?.(null);

32
ui/litellm-dashboard/src/components/mcp_tools/OpenAPIQuickPicker.tsx
View file

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import { Spin } from "antd";
import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { fetchOpenAPIRegistry } from "../networking";
export interface OpenAPIKeyTool {
@ -53,9 +54,11 @@ const OpenAPIQuickPicker: React.FC<OpenAPIQuickPickerProps> = ({
if (loading) {
return (
<div className="mb-4">
<span className="text-sm font-medium text-gray-700">Popular APIs</span>
<span className="text-sm font-medium text-foreground">
Popular APIs
</span>
<div className="flex justify-center py-6">
<Spin size="small" />
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
</div>
</div>
);
@ -65,7 +68,9 @@ const OpenAPIQuickPicker: React.FC<OpenAPIQuickPickerProps> = ({
return (
<div className="mb-4">
<span className="text-sm font-medium text-gray-700 block mb-2">Popular APIs</span>
<span className="text-sm font-medium text-foreground block mb-2">
Popular APIs
</span>
<div className="grid grid-cols-5 gap-2">
{apis.map((api) => {
@ -77,18 +82,19 @@ const OpenAPIQuickPicker: React.FC<OpenAPIQuickPickerProps> = ({
type="button"
title={api.description}
onClick={() => onSelect(api)}
className={`flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all cursor-pointer
${
isSelected
? "border-blue-500 bg-blue-50 shadow-sm"
: "border-gray-200 hover:border-blue-300 hover:bg-gray-50"
}`}
className={cn(
"flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all cursor-pointer",
isSelected
? "border-primary bg-primary/10 shadow-sm"
: "border-border hover:border-primary/50 hover:bg-muted",
)}
>
{imgFailed ? (
<span className="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center text-sm font-bold text-gray-600">
<span className="w-7 h-7 rounded-full bg-muted flex items-center justify-center text-sm font-bold text-foreground">
{api.title.charAt(0)}
</span>
) : (
// eslint-disable-next-line @next/next/no-img-element
<img
src={api.icon_url}
alt={api.title}
@ -96,7 +102,7 @@ const OpenAPIQuickPicker: React.FC<OpenAPIQuickPickerProps> = ({
onError={() => handleImgError(api.name)}
/>
)}
<span className="text-xs text-gray-600 text-center leading-tight font-medium">
<span className="text-xs text-muted-foreground text-center leading-tight font-medium">
{api.title}
</span>
</button>
@ -104,7 +110,7 @@ const OpenAPIQuickPicker: React.FC<OpenAPIQuickPickerProps> = ({
})}
</div>
<p className="text-xs text-gray-400 mt-2">
<p className="text-xs text-muted-foreground mt-2">
Select an API to pre-fill the spec URL and OAuth 2.0 settings, or enter
your own spec URL below.
</p>