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 122

feat(ui): mcp_tools/StdioConfiguration to shadcn

Browse source 
- antd Input/Tooltip + @ant-design InfoCircleOutlined \u2192 shadcn
  Textarea/Tooltip + lucide Info. antd Form.Item preserved (parent
  antd Form context + JSON validator rule).
- Swept text-gray-700/border-gray-300/focus:border-blue-500 to
  semantic foreground/border tokens.

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 17:58:27 +00:00
parent 74411b9391
commit 7ba5dd6995
No known key found for this signature in database
1 changed files with 31 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/litellm-dashboard/src/components/mcp_tools/StdioConfiguration.tsx
View file

@ -1,6 +1,13 @@
import React from "react";
import { Form, Input, Tooltip } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";
import { Form } from "antd";
import { Textarea } from "@/components/ui/textarea";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Info } from "lucide-react";
interface StdioConfigurationProps {
isVisible: boolean;
@ -11,22 +18,36 @@ interface StdioConfigurationProps {
required?: boolean;
}
const StdioConfiguration: React.FC<StdioConfigurationProps> = ({ isVisible, required = true }) => {
const StdioConfiguration: React.FC<StdioConfigurationProps> = ({
isVisible,
required = true,
}) => {
if (!isVisible) return null;
return (
<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">
Stdio Configuration (JSON)
<Tooltip title="Paste your stdio MCP server configuration in JSON format. You can use the full mcpServers structure from config.yaml or just the inner server configuration.">
<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 inline text-primary cursor-help" />
</TooltipTrigger>
<TooltipContent className="max-w-xs">
Paste your stdio MCP server configuration in JSON format. You
can use the full mcpServers structure from config.yaml or just
the inner server configuration.
</TooltipContent>
</Tooltip>
</TooltipProvider>
</span>
}
name="stdio_config"
rules={[
...(required ? [{ required: true, message: "Please enter stdio configuration" }] : []),
...(required
? [{ required: true, message: "Please enter stdio configuration" }]
: []),
{
validator: (_, value) => {
if (!value) return Promise.resolve();
@ -40,7 +61,7 @@ const StdioConfiguration: React.FC<StdioConfigurationProps> = ({ isVisible, requ
},
]}
>
<Input.TextArea
<Textarea
placeholder={`{
"mcpServers": {
"circleci-mcp-server": {
@ -54,7 +75,7 @@ const StdioConfiguration: React.FC<StdioConfigurationProps> = ({ isVisible, requ
}
}`}
rows={12}
className="rounded-lg border-gray-300 focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
className="rounded-lg font-mono text-sm"
/>
</Form.Item>
);