From dda970d9b8ba09f258e2fc5ff78386004e0159fc Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:43:19 +0000
Subject: [PATCH] chore(studio): ai assistant dropdown llm consistency (#43599)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

This matches our wording and icon colours from docs, so we have a
unified language when "Ask Claude" etc is used. See change below:

| Before | After |
|--------|--------|
| <img width="208" height="193" alt="Screenshot 2026-03-10 at 15 13 00"
src="https://github.com/user-attachments/assets/d6720fee-8e50-4c08-91b2-160829f293a8"
/> | <img width="229" height="195" alt="Screenshot 2026-03-10 at 15 10
13"
src="https://github.com/user-attachments/assets/28a8b15b-e6b3-40d5-8687-e8ccc886ff7f"
/> |
---
 .../components/ui/AiAssistantDropdown.tsx     | 30 ++++---------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/apps/studio/components/ui/AiAssistantDropdown.tsx b/apps/studio/components/ui/AiAssistantDropdown.tsx
index 009d83d6ba8..a1a5b2d82fa 100644
--- a/apps/studio/components/ui/AiAssistantDropdown.tsx
+++ b/apps/studio/components/ui/AiAssistantDropdown.tsx
@@ -1,10 +1,9 @@
 import { AiPromptCopiedEvent } from 'common/telemetry-constants'
-import { BASE_PATH } from 'lib/constants'
+import { Chatgpt, Claude } from 'icons'
 import { useTrack } from 'lib/telemetry/track'
 import { Check, ChevronDown, Copy } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import Image from 'next/image'
 import { ComponentProps, ReactNode, useEffect, useState } from 'react'
+
 import {
   AiIconAnimation,
   Button,
@@ -23,21 +22,8 @@ import {
 type TelemetrySource = AiPromptCopiedEvent['properties']['source']
 
 const EXTERNAL_AI_TOOLS = [
-  {
-    label: 'Open in ChatGPT',
-    url: 'https://chatgpt.com/',
-    promptParam: 'q',
-    icon: {
-      light: '/img/mcp-clients/openai-icon.svg',
-      dark: '/img/mcp-clients/openai-icon-dark.svg',
-    },
-  },
-  {
-    label: 'Open in Claude.ai',
-    url: 'https://claude.ai/new',
-    promptParam: 'q',
-    icon: { light: '/img/mcp-clients/claude-icon.svg', dark: '/img/mcp-clients/claude-icon.svg' },
-  },
+  { label: 'Ask ChatGPT', url: 'https://chatgpt.com/', promptParam: 'q', icon: Chatgpt },
+  { label: 'Ask Claude', url: 'https://claude.ai/new', promptParam: 'q', icon: Claude },
 ]
 
 export interface AiAssistantDropdownItem {
@@ -82,7 +68,6 @@ export function AiAssistantDropdown({
   additionalDropdownItems,
 }: AiAssistantDropdownProps) {
   const track = useTrack()
-  const { resolvedTheme } = useTheme()
   const [showCopied, setShowCopied] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
 
@@ -156,12 +141,7 @@ export function AiAssistantDropdown({
                   className="gap-2"
                   onClick={() => handleOpenExternalAI(tool)}
                 >
-                  <Image
-                    src={`${BASE_PATH}${resolvedTheme?.includes('dark') ? tool.icon.dark : tool.icon.light}`}
-                    alt={tool.label}
-                    width={14}
-                    height={14}
-                  />
+                  <tool.icon size={14} />
                   {tool.label}
                 </DropdownMenuItem>
               ))}