From b85d5386a45ecc7e58fa16d7d56377690ff67069 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Tue, 10 Jun 2025 16:08:04 -0700 Subject: [PATCH 1/3] fixes MCP new form --- .../src/components/mcp_tools/mcp_servers.tsx | 266 +++++++++++------- 1 file changed, 172 insertions(+), 94 deletions(-) diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx index 6b5a66c11692..031dcd06b26a 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx @@ -58,8 +58,10 @@ const CreateMCPServer: React.FC = ({ onCreateSuccess, }) => { const [form] = Form.useForm(); + const [isLoading, setIsLoading] = useState(false); const handleCreate = async (formValues: Record) => { + setIsLoading(true); try { console.log(`formValues: ${JSON.stringify(formValues)}`); @@ -75,13 +77,20 @@ const CreateMCPServer: React.FC = ({ onCreateSuccess(response); } } catch (error) { - message.error("Error creating the team: " + error, 20); + message.error("Error creating MCP Server: " + error, 20); + } finally { + setIsLoading(false); } }; // state const [isModalVisible, setModalVisible] = useState(false); + const handleCancel = () => { + form.resetFields(); + setModalVisible(false); + }; + // rendering if (!isAdminRole(userRole)) { return null; @@ -89,106 +98,175 @@ const CreateMCPServer: React.FC = ({ return (
- +
+ + + +
+
+

Create New MCP Server

+

Configure your MCP server connection

+
+
+ } open={isModalVisible} - okType="primary" - width={800} - onCancel={() => setModalVisible(false)} - okButtonProps={{ style: { display: "none" } }} + width={1000} + onCancel={handleCancel} + footer={null} + className="top-8" + styles={{ + body: { padding: '24px' }, + header: { padding: '24px 24px 0 24px', border: 'none' }, + }} > -
- <> - - - - - - - - - - - - - - - - - MCP Version{" "} - - - - - } - name="spec_version" - rules={[ - { required: true, message: "Please enter a spec version" }, - ]} - > - - - -
+ - Create MCP Server -
-
+
+ MCP Server Name} + name="alias" + rules={[ + { required: false, message: "Please enter a server name" }, + ]} + > + + + + Description} + name="description" + rules={[ + { + required: false, + message: "Please enter a server description", + }, + ]} + > + + + + + MCP Server URL * + + } + name="url" + rules={[ + { required: true, message: "Please enter a server URL" }, + { type: 'url', message: "Please enter a valid URL" } + ]} + > + + + +
+ + Transport Type * + + } + name="transport" + rules={[{ required: true, message: "Please select a transport type" }]} + > + + + + + Authentication * + + } + name="auth_type" + rules={[{ required: true, message: "Please select an auth type" }]} + > + + +
+ + + MCP Version * + + + + + } + name="spec_version" + rules={[ + { required: true, message: "Please select a spec version" }, + ]} + > + + +
+ +
+ + +
+ + ); From 447ca1c8ecca6a22057538966db45f27e5b94012 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Tue, 10 Jun 2025 16:14:43 -0700 Subject: [PATCH 2/3] refactor existing logic --- .../out/assets/logos/mcp_logo.png | Bin 0 -> 3902 bytes .../public/assets/logos/mcp_logo.png | Bin 0 -> 3902 bytes .../mcp_tools/create_mcp_server.tsx | 244 ++++++++++++++++++ .../src/components/mcp_tools/mcp_servers.tsx | 230 +---------------- 4 files changed, 245 insertions(+), 229 deletions(-) create mode 100644 ui/litellm-dashboard/out/assets/logos/mcp_logo.png create mode 100644 ui/litellm-dashboard/public/assets/logos/mcp_logo.png create mode 100644 ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx diff --git a/ui/litellm-dashboard/out/assets/logos/mcp_logo.png b/ui/litellm-dashboard/out/assets/logos/mcp_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d920e50e7f22a4472dcc7647889c4387aa897110 GIT binary patch literal 3902 zcmbVP`9G9j^hdUaG+8EuA!}pJo{xwSMwVg5!z3Enm#pbyor)}zgd|G~l9(Ax45g2q z?6Q-cEZLHMknw$d|AO!9`@{1*uXFD?_r9NV?>Xmv;w{Z@oPh{J7#JANm>3(Nz;Elx z!_EZ0FKS(BV_-PTVq&0Y^B{Zmb(A;H{Ba$&%8tJ*kLS}DPPQSj$1s(uCE&%6=W+(I zaSndC%$T^lcLc@xx8W$i_{)OVUq0WD6_a?KfpK=?_+gaGwJ;)QcdENyon1hW-0c$N zQDyUa;?2F9CF#Rem9L8}6IZLh?j9YaYVSo(?$wN0e2|C=H{li`q)BOR!2uirO#MJz`QAS>!!NV17vJ`PEJlq%|TIK z-p_A|7hYt&>RM=TH?15yS|*kh->%LKe3Z$^$QzeS>(ZFAv9W2rME&7iTvAede=Tz~ zES2+`obuY*+WoH%g~x4DsUGW-)s?;zsIW>J6K>{n*q-mrn~5k>c?ntBj+GtAqj$Rs zn@mmi+_h8psP_K?YTs49Ypdw!6z@I@U~DqQ%Ot?V|1jF-FW6B%(H0g-qhTa%(IFhO z-bW%4`3&uECS{GqW{n<_l|+Y*{f_BJ6JJB5`-^OXIhqa>J?+%ihklf~4HiGd)v@#) z|Cz3TTphMoQCUfRb^ZSR-T996O79=JI4)C0oWLC5LbZPzMc*f5D}6^w#WXZD#Ko^e zqjl-Dp9ecDy2pP5MWImUhnJlE{r#2r!)Y_Ib}GF>o{AaE;xnA?s)7@~A-1;X>H0RB zLOQ|A1EA|N9>KMOWa7iV6N1hoAE6b}z1-d7A|ZOva2?0UNS$hGb#=9Nh?c;6DnP0?vUS<^B{wXP<;yE-T&ccQ{h#S zq)%H?soUI04otHEKfjV-BJGDf3@Hcuc{z;RSe#PsjLse%wa0OtSGYBu&S2X&FE2dg zwSpn;9In?+RRzn|zL<~B9yRs7+ z-_|-7HfZcmd4N?@SI1adK3B4Fa1i$2;yAAWwa(1Weqnnm*w}?)Q;z5c?>Hez>B<$8 z&gFE+$Yh7pe8zSZo62@4rPWa?f!}R^bDk!uRc)4;iSwvOJg&C{0Ao(Wr-Agp|Nh%- z8O!_Mc-`T>x-5-*Rkw;QWekL_XlN9)@?TBy#Cf!U>esfO`%7@wp9Ls578l=9{WVEz z6V(9L?8UF^HH~c9uU?6=ehJ+vT5b4vZTXhy;DEi0694`6$)k4JlIa%CvuAmJ-gR~5 z;^KPJIKy^UqzSIx+0`X4Bl9jw0xdkCjuj}cz@X7+!#pb-Fw27Cgb`d0ch_ztiL9-z z4op`s+dz>87_n$mBvR6Z%1>zCJXk65T5gE`-P~7#u6MFbG1OG|84X(K6p&Y?^i~1~ zREXHz#si7A>mSO?xBK#uC_)jZ77RIzVPRrSZIdv$U_bfbXX4V5N8w-^;dXN$75zw5 zQ;5r?qSWfvEz%I#$RQ!$3%n}eX{2Z;KWfHVg><)nE19z?)xs8$d#IMNu@50e+f*1D6&k%r7d7w+}w0`N1S6~VqgSAbLfZrQUN`& zz>-H=|B|<-XI0Qr-@w2?gS)l0_0_9aZG^FgnjWj=&Clk_qF=^@PNSc(XDD+*e(#vc*HWMa0LDCARmClWYQ-D=4 z$Y1cJy?nX(yEfl}($|j2>mBLqyI5#`+!zawG`=FfPR9!JotQ)%l)u-K#P`X^Hs%aG zJ>8oNIHj4%e2?F}z>Dk228D2$!+V3n!?HR%+N0bYBve98jSlXZoSiL{$;#8$^Bh$9 z)U!QxFcS;c>?-D?)FGO`gzqa~PIYd1=AY@ngL{bPpM9G*NpZdr85yakrxzTocC>}I z(B5Fy$yi?YJTQA@=_pqUxvnZ0F%xs1E?iJi@p57D+(zJ={r&yzHl>_TfD_*ncU5~d znrc&CIT=de&nYWQeZ^O>I6KJ8L2AHPB1E3kE`?|ARool@toN4hYEe83=8mX6-{M?b zDorz2#?{qz_OV};SH*UIQZ=1HoY8jg7FtwnV(bIJX@4Cd@lLM zA3c--2ms~OZ=VhZ*?s= zo0rbfBu@69zRRco>sN0c&GMk;8U&Qx`1C)1{>%^eS?qqjU8r2|aI%3d@!;?IM*7e64KIaWzO6refIruo%ROs8026a1+jPO ziJMV;xY3))GE*pXR+o{rW+~)x+uh~W)w>CbYzo7a-Lr#gXNUj0#~8bc(J zn29eh29Nq5hU*mc3#=oP)6+wK_2gK}NXQR76aFVIMpjM^%vkS|PGdHntoNUx0CGZH z9q~{|j60owb$K}#oRDPPaip~L_x0(MUXQJPILnTaWFr&M*4Eca6RoZ6E~=#n4|jVx zD_&c&eT*VJqL#N5k>PGnN=`n9V~Nm#-;^muw1INqV)r?M@m7l{kQS~gKjii{;)!Bz zm#aAI{&v5`QW6Bn=gowzv?hzwv}$Ox1RA@8gF}-@$rc_B$@QSb9krho(T+=+4$``G zqAQmPBi7W2ICg#eX4JW$`kG@Fk50$~^%PlDRaKqT3;tz+kY=MlG>0y}4*8=-CX<`J zb+on3v=L5x(yHS0L$NGm{!5$A7UB_u3d9WW1B*?QuXrdqB5yV<)R;lWNyc{)beeFUQ_$moHmdg~^P*ycK{8UvAqE&4XyC-6@2`zE2d$QU`lKylapOh{ zs$?=&KS!~K)-WH?tLp;6SmFLgeF%Y(PCLkxr+B z9E=Dk07RMI41is%cFJOE)WWU~5xOl6)Bi{&%kTR>M4SCWk!V$Eoq;%i|I0vg^zCMS z_A{KEyfE12z>=A0~d1l1rTDG5;q{D5Pd`Y&{bPw0;;pK%b zb4{GZTs>SZYiw*Jwc*kJC_NHwi~V-VuqPFf`(na(@9>Dk!3R*E^PZD6R~7W}^{p6N z>kC&FOjJ`-6BZWce!)b9C8Ka%Je;gqnVAS#*)CU=4Sp##^HfZJX#eGc;nG8@Bk+sy^ROT@n|zV zV1q}K@W9ArYA*~=X-<-@kRG(3zNs?wkU<)wrW*O+&OpQf1#{}9=*E`ch6AyU75$p}y) zVF?TrzX#fHPO))Wa3ILoOFcQ5XS#!mw3`+(rUq0`1tr<%LOHu{?2+(U@$Q> KHz?M3dh|avZee)< literal 0 HcmV?d00001 diff --git a/ui/litellm-dashboard/public/assets/logos/mcp_logo.png b/ui/litellm-dashboard/public/assets/logos/mcp_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..d920e50e7f22a4472dcc7647889c4387aa897110 GIT binary patch literal 3902 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 KHz?M3dh|avZee)< literal 0 HcmV?d00001 diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx new file mode 100644 index 000000000000..c10ec02acbea --- /dev/null +++ b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx @@ -0,0 +1,244 @@ +import React, { useState } from "react"; +import { + Modal, + Tooltip, + Form, + Select, + message, + Button as AntdButton, +} from "antd"; +import { InfoCircleOutlined } from "@ant-design/icons"; +import { Button, TextInput } from "@tremor/react"; +import { createMCPServer } from "../networking"; +import { MCPServer } from "./types"; +import { isAdminRole } from "@/utils/roles"; + +interface CreateMCPServerProps { + userRole: string; + accessToken: string | null; + onCreateSuccess: (newMcpServer: MCPServer) => void; +} + +const CreateMCPServer: React.FC = ({ + userRole, + accessToken, + onCreateSuccess, +}) => { + const [form] = Form.useForm(); + const [isLoading, setIsLoading] = useState(false); + + const handleCreate = async (formValues: Record) => { + setIsLoading(true); + try { + console.log(`formValues: ${JSON.stringify(formValues)}`); + + if (accessToken != null) { + const response: MCPServer = await createMCPServer( + accessToken, + formValues + ); + + message.success("MCP Server created successfully"); + form.resetFields(); + setModalVisible(false); + onCreateSuccess(response); + } + } catch (error) { + message.error("Error creating MCP Server: " + error, 20); + } finally { + setIsLoading(false); + } + }; + + // state + const [isModalVisible, setModalVisible] = useState(false); + + const handleCancel = () => { + form.resetFields(); + setModalVisible(false); + }; + + // rendering + if (!isAdminRole(userRole)) { + return null; + } + + return ( +
+ + + +
+ MCP Logo +
+
+

Create New MCP Server

+

Configure your MCP server connection

+
+
+ } + open={isModalVisible} + width={1000} + onCancel={handleCancel} + footer={null} + className="top-8" + styles={{ + body: { padding: '24px' }, + header: { padding: '24px 24px 0 24px', border: 'none' }, + }} + > +
+
+
+ MCP Server Name} + name="alias" + rules={[ + { required: false, message: "Please enter a server name" }, + ]} + > + + + + Description} + name="description" + rules={[ + { + required: false, + message: "Please enter a server description", + }, + ]} + > + + + + + MCP Server URL * + + } + name="url" + rules={[ + { required: true, message: "Please enter a server URL" }, + { type: 'url', message: "Please enter a valid URL" } + ]} + > + + + +
+ + Transport Type * + + } + name="transport" + rules={[{ required: true, message: "Please select a transport type" }]} + > + + + + + Authentication * + + } + name="auth_type" + rules={[{ required: true, message: "Please select an auth type" }]} + > + + +
+ + + MCP Version * + + + + + } + name="spec_version" + rules={[ + { required: true, message: "Please select a spec version" }, + ]} + > + + +
+ +
+ + +
+
+
+ + + ); +}; + +export default CreateMCPServer; \ No newline at end of file diff --git a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx index 031dcd06b26a..6922788d0a41 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx @@ -6,12 +6,8 @@ import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline"; import { Modal, Tooltip, - Form, - Select, message, - Button as AntdButton, } from "antd"; -import { InfoCircleOutlined } from "@ant-design/icons"; import { Table, @@ -29,7 +25,6 @@ import { } from "@tremor/react"; import { - createMCPServer, deleteMCPServer, fetchMCPServers, } from "../networking"; @@ -41,236 +36,13 @@ import { } from "./types"; import { isAdminRole } from "@/utils/roles"; import { MCPServerView } from "./mcp_server_view"; +import CreateMCPServer from "./create_mcp_server"; const displayFriendlyId = (id: string) => { return `${id.slice(0, 7)}...`; }; -interface CreateMCPServerProps { - userRole: string; - accessToken: string | null; - onCreateSuccess: (newMcpServer: MCPServer) => void; -} - -const CreateMCPServer: React.FC = ({ - userRole, - accessToken, - onCreateSuccess, -}) => { - const [form] = Form.useForm(); - const [isLoading, setIsLoading] = useState(false); - - const handleCreate = async (formValues: Record) => { - setIsLoading(true); - try { - console.log(`formValues: ${JSON.stringify(formValues)}`); - - if (accessToken != null) { - const response: MCPServer = await createMCPServer( - accessToken, - formValues - ); - - message.success("MCP Server created successfully"); - form.resetFields(); - setModalVisible(false); - onCreateSuccess(response); - } - } catch (error) { - message.error("Error creating MCP Server: " + error, 20); - } finally { - setIsLoading(false); - } - }; - - // state - const [isModalVisible, setModalVisible] = useState(false); - - const handleCancel = () => { - form.resetFields(); - setModalVisible(false); - }; - // rendering - if (!isAdminRole(userRole)) { - return null; - } - - return ( -
- - - -
- - - -
-
-

Create New MCP Server

-

Configure your MCP server connection

-
-
- } - open={isModalVisible} - width={1000} - onCancel={handleCancel} - footer={null} - className="top-8" - styles={{ - body: { padding: '24px' }, - header: { padding: '24px 24px 0 24px', border: 'none' }, - }} - > -
-
-
- MCP Server Name} - name="alias" - rules={[ - { required: false, message: "Please enter a server name" }, - ]} - > - - - - Description} - name="description" - rules={[ - { - required: false, - message: "Please enter a server description", - }, - ]} - > - - - - - MCP Server URL * - - } - name="url" - rules={[ - { required: true, message: "Please enter a server URL" }, - { type: 'url', message: "Please enter a valid URL" } - ]} - > - - - -
- - Transport Type * - - } - name="transport" - rules={[{ required: true, message: "Please select a transport type" }]} - > - - - - - Authentication * - - } - name="auth_type" - rules={[{ required: true, message: "Please select an auth type" }]} - > - - -
- - - MCP Version * - - - - - } - name="spec_version" - rules={[ - { required: true, message: "Please select a spec version" }, - ]} - > - - -
- -
- - -
-
-
- - - ); -}; interface DeleteModalProps { isModalOpen: boolean; From 75e1dea9ecbad4cf08c20e7c2f31817a55bd0d60 Mon Sep 17 00:00:00 2001 From: Ishaan Jaff Date: Tue, 10 Jun 2025 17:19:35 -0700 Subject: [PATCH 3/3] docs add MCP on ui --- .../src/components/mcp_tools/create_mcp_server.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx index c10ec02acbea..3faeb50dd713 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx @@ -106,15 +106,22 @@ const CreateMCPServer: React.FC = ({ className="space-y-6" >
- MCP Server Name} + + MCP Server Name + + + + + } name="alias" rules={[ { required: false, message: "Please enter a server name" }, ]} >