From 2f4b14798bcdf9e1be5241d06562a10386287b66 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 11 Mar 2026 02:42:18 +0000 Subject: [PATCH] feat(ui): use local SVG logos for MCP services, fix Chat UI rendering - Add 15 new MCP service logo SVGs (Slack, Notion, Linear, Jira, Figma, Gmail, Stripe, Salesforce, Shopify, HubSpot, Twilio, Sentry, Zapier, GitLab, Google Drive) to both source and pre-built directories - Switch MCPLogoSelector from CDN URLs (cdn.simpleicons.org) to local asset paths (/ui/assets/logos/) for reliable rendering - Logos now served by the proxy itself, working from any page path including /ui/chat/ (absolute paths resolve correctly everywhere) Co-authored-by: Ishaan Jaff --- .../_experimental/out/assets/logos/figma.svg | 7 ++++ .../_experimental/out/assets/logos/gitlab.svg | 8 ++++ .../_experimental/out/assets/logos/gmail.svg | 3 ++ .../out/assets/logos/google_drive.svg | 6 +++ .../out/assets/logos/hubspot.svg | 3 ++ .../_experimental/out/assets/logos/jira.svg | 15 +++++++ .../_experimental/out/assets/logos/linear.svg | 3 ++ .../_experimental/out/assets/logos/notion.svg | 3 ++ .../out/assets/logos/salesforce.svg | 3 ++ .../_experimental/out/assets/logos/sentry.svg | 3 ++ .../out/assets/logos/shopify.svg | 4 ++ .../_experimental/out/assets/logos/slack.svg | 6 +++ .../_experimental/out/assets/logos/stripe.svg | 3 ++ .../_experimental/out/assets/logos/twilio.svg | 3 ++ .../_experimental/out/assets/logos/zapier.svg | 3 ++ .../public/assets/logos/figma.svg | 7 ++++ .../public/assets/logos/gitlab.svg | 8 ++++ .../public/assets/logos/gmail.svg | 3 ++ .../public/assets/logos/google_drive.svg | 6 +++ .../public/assets/logos/hubspot.svg | 3 ++ .../public/assets/logos/jira.svg | 15 +++++++ .../public/assets/logos/linear.svg | 3 ++ .../public/assets/logos/notion.svg | 3 ++ .../public/assets/logos/salesforce.svg | 3 ++ .../public/assets/logos/sentry.svg | 3 ++ .../public/assets/logos/shopify.svg | 4 ++ .../public/assets/logos/slack.svg | 6 +++ .../public/assets/logos/stripe.svg | 3 ++ .../public/assets/logos/twilio.svg | 3 ++ .../public/assets/logos/zapier.svg | 3 ++ .../components/mcp_tools/MCPLogoSelector.tsx | 42 ++++++++++--------- 31 files changed, 168 insertions(+), 20 deletions(-) create mode 100644 litellm/proxy/_experimental/out/assets/logos/figma.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/gitlab.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/gmail.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/google_drive.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/hubspot.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/jira.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/linear.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/notion.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/salesforce.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/sentry.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/shopify.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/slack.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/stripe.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/twilio.svg create mode 100644 litellm/proxy/_experimental/out/assets/logos/zapier.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/figma.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/gitlab.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/gmail.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/google_drive.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/hubspot.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/jira.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/linear.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/notion.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/salesforce.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/sentry.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/shopify.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/slack.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/stripe.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/twilio.svg create mode 100644 ui/litellm-dashboard/public/assets/logos/zapier.svg diff --git a/litellm/proxy/_experimental/out/assets/logos/figma.svg b/litellm/proxy/_experimental/out/assets/logos/figma.svg new file mode 100644 index 00000000000..2d8b70457d9 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/figma.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/gitlab.svg b/litellm/proxy/_experimental/out/assets/logos/gitlab.svg new file mode 100644 index 00000000000..18a89fa328d --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/gitlab.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/gmail.svg b/litellm/proxy/_experimental/out/assets/logos/gmail.svg new file mode 100644 index 00000000000..d702890620d --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/gmail.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/google_drive.svg b/litellm/proxy/_experimental/out/assets/logos/google_drive.svg new file mode 100644 index 00000000000..7048af9915e --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/google_drive.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/hubspot.svg b/litellm/proxy/_experimental/out/assets/logos/hubspot.svg new file mode 100644 index 00000000000..b993945ac6b --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/hubspot.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/jira.svg b/litellm/proxy/_experimental/out/assets/logos/jira.svg new file mode 100644 index 00000000000..fb10ca75173 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/jira.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/linear.svg b/litellm/proxy/_experimental/out/assets/logos/linear.svg new file mode 100644 index 00000000000..83662a1f9ff --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/linear.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/notion.svg b/litellm/proxy/_experimental/out/assets/logos/notion.svg new file mode 100644 index 00000000000..170b9bb4140 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/notion.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/salesforce.svg b/litellm/proxy/_experimental/out/assets/logos/salesforce.svg new file mode 100644 index 00000000000..1a541a004f1 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/salesforce.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/sentry.svg b/litellm/proxy/_experimental/out/assets/logos/sentry.svg new file mode 100644 index 00000000000..9c3733dc43e --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/sentry.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/shopify.svg b/litellm/proxy/_experimental/out/assets/logos/shopify.svg new file mode 100644 index 00000000000..fcc7547269d --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/shopify.svg @@ -0,0 +1,4 @@ + + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/slack.svg b/litellm/proxy/_experimental/out/assets/logos/slack.svg new file mode 100644 index 00000000000..801de4f70c8 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/slack.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/stripe.svg b/litellm/proxy/_experimental/out/assets/logos/stripe.svg new file mode 100644 index 00000000000..ac16a6fb170 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/stripe.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/twilio.svg b/litellm/proxy/_experimental/out/assets/logos/twilio.svg new file mode 100644 index 00000000000..3517a2824d9 --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/twilio.svg @@ -0,0 +1,3 @@ + + + diff --git a/litellm/proxy/_experimental/out/assets/logos/zapier.svg b/litellm/proxy/_experimental/out/assets/logos/zapier.svg new file mode 100644 index 00000000000..8428ba82a5b --- /dev/null +++ b/litellm/proxy/_experimental/out/assets/logos/zapier.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/figma.svg b/ui/litellm-dashboard/public/assets/logos/figma.svg new file mode 100644 index 00000000000..2d8b70457d9 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/figma.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/ui/litellm-dashboard/public/assets/logos/gitlab.svg b/ui/litellm-dashboard/public/assets/logos/gitlab.svg new file mode 100644 index 00000000000..18a89fa328d --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/gitlab.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui/litellm-dashboard/public/assets/logos/gmail.svg b/ui/litellm-dashboard/public/assets/logos/gmail.svg new file mode 100644 index 00000000000..d702890620d --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/gmail.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/google_drive.svg b/ui/litellm-dashboard/public/assets/logos/google_drive.svg new file mode 100644 index 00000000000..7048af9915e --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/google_drive.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui/litellm-dashboard/public/assets/logos/hubspot.svg b/ui/litellm-dashboard/public/assets/logos/hubspot.svg new file mode 100644 index 00000000000..b993945ac6b --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/hubspot.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/jira.svg b/ui/litellm-dashboard/public/assets/logos/jira.svg new file mode 100644 index 00000000000..fb10ca75173 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/jira.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/ui/litellm-dashboard/public/assets/logos/linear.svg b/ui/litellm-dashboard/public/assets/logos/linear.svg new file mode 100644 index 00000000000..83662a1f9ff --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/linear.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/notion.svg b/ui/litellm-dashboard/public/assets/logos/notion.svg new file mode 100644 index 00000000000..170b9bb4140 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/notion.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/salesforce.svg b/ui/litellm-dashboard/public/assets/logos/salesforce.svg new file mode 100644 index 00000000000..1a541a004f1 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/salesforce.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/sentry.svg b/ui/litellm-dashboard/public/assets/logos/sentry.svg new file mode 100644 index 00000000000..9c3733dc43e --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/sentry.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/shopify.svg b/ui/litellm-dashboard/public/assets/logos/shopify.svg new file mode 100644 index 00000000000..fcc7547269d --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/shopify.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/litellm-dashboard/public/assets/logos/slack.svg b/ui/litellm-dashboard/public/assets/logos/slack.svg new file mode 100644 index 00000000000..801de4f70c8 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/slack.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui/litellm-dashboard/public/assets/logos/stripe.svg b/ui/litellm-dashboard/public/assets/logos/stripe.svg new file mode 100644 index 00000000000..ac16a6fb170 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/stripe.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/twilio.svg b/ui/litellm-dashboard/public/assets/logos/twilio.svg new file mode 100644 index 00000000000..3517a2824d9 --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/twilio.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/public/assets/logos/zapier.svg b/ui/litellm-dashboard/public/assets/logos/zapier.svg new file mode 100644 index 00000000000..8428ba82a5b --- /dev/null +++ b/ui/litellm-dashboard/public/assets/logos/zapier.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx b/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx index 706cb6e5301..be05d74ec24 100644 --- a/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx +++ b/ui/litellm-dashboard/src/components/mcp_tools/MCPLogoSelector.tsx @@ -2,27 +2,29 @@ import React, { useState } from "react"; import { Input, Tooltip } from "antd"; import { InfoCircleOutlined, LinkOutlined } from "@ant-design/icons"; +const logos = "/ui/assets/logos/"; + const WELL_KNOWN_LOGOS: { name: string; url: string }[] = [ - { name: "GitHub", url: "https://cdn.simpleicons.org/github" }, - { name: "Slack", url: "https://cdn.simpleicons.org/slack" }, - { name: "Notion", url: "https://cdn.simpleicons.org/notion" }, - { name: "Linear", url: "https://cdn.simpleicons.org/linear" }, - { name: "Jira", url: "https://cdn.simpleicons.org/jira" }, - { name: "Figma", url: "https://cdn.simpleicons.org/figma" }, - { name: "Gmail", url: "https://cdn.simpleicons.org/gmail" }, - { name: "Google Drive", url: "https://cdn.simpleicons.org/googledrive" }, - { name: "Stripe", url: "https://cdn.simpleicons.org/stripe" }, - { name: "Shopify", url: "https://cdn.simpleicons.org/shopify" }, - { name: "Salesforce", url: "https://cdn.simpleicons.org/salesforce" }, - { name: "HubSpot", url: "https://cdn.simpleicons.org/hubspot" }, - { name: "Twilio", url: "https://cdn.simpleicons.org/twilio" }, - { name: "Cloudflare", url: "https://cdn.simpleicons.org/cloudflare" }, - { name: "Sentry", url: "https://cdn.simpleicons.org/sentry" }, - { name: "PostgreSQL", url: "https://cdn.simpleicons.org/postgresql" }, - { name: "Snowflake", url: "https://cdn.simpleicons.org/snowflake" }, - { name: "Zapier", url: "https://cdn.simpleicons.org/zapier" }, - { name: "Confluence", url: "https://cdn.simpleicons.org/confluence" }, - { name: "GitLab", url: "https://cdn.simpleicons.org/gitlab" }, + { name: "GitHub", url: `${logos}github.svg` }, + { name: "Slack", url: `${logos}slack.svg` }, + { name: "Notion", url: `${logos}notion.svg` }, + { name: "Linear", url: `${logos}linear.svg` }, + { name: "Jira", url: `${logos}jira.svg` }, + { name: "Figma", url: `${logos}figma.svg` }, + { name: "Gmail", url: `${logos}gmail.svg` }, + { name: "Google Drive", url: `${logos}google_drive.svg` }, + { name: "Stripe", url: `${logos}stripe.svg` }, + { name: "Shopify", url: `${logos}shopify.svg` }, + { name: "Salesforce", url: `${logos}salesforce.svg` }, + { name: "HubSpot", url: `${logos}hubspot.svg` }, + { name: "Twilio", url: `${logos}twilio.svg` }, + { name: "Cloudflare", url: `${logos}cloudflare.svg` }, + { name: "Sentry", url: `${logos}sentry.svg` }, + { name: "PostgreSQL", url: `${logos}postgresql.svg` }, + { name: "Snowflake", url: `${logos}snowflake.svg` }, + { name: "Zapier", url: `${logos}zapier.svg` }, + { name: "Google", url: `${logos}google.svg` }, + { name: "GitLab", url: `${logos}gitlab.svg` }, ]; interface MCPLogoSelectorProps {