diff --git a/packages/renderer/src/lib/chat/components/chat-header.svelte b/packages/renderer/src/lib/chat/components/chat-header.svelte
index 918a3bba8..01712e50e 100644
--- a/packages/renderer/src/lib/chat/components/chat-header.svelte
+++ b/packages/renderer/src/lib/chat/components/chat-header.svelte
@@ -9,8 +9,11 @@ import ModelSelector from '/@/lib/chat/components/model-selector.svelte';
 import { currentChatId } from '/@/lib/chat/state/current-chat-id.svelte';
 import { cn } from '/@/lib/chat/utils/shadcn';
 import { mcpRemoteServerInfos } from '/@/stores/mcp-remote-servers';
+import type { MCPRemoteServerInfo } from '/@api/mcp/mcp-server-info';
+import type { RagEnvironment } from '/@api/rag/rag-environment';
 
 import Plus from './icons/plus.svelte';
+import RagEnvironmentSelector from './rag-environment-selector.svelte';
 import SidebarToggle from './sidebar-toggle.svelte';
 import { Button } from './ui/button';
 import { useSidebar } from './ui/sidebar';
@@ -20,11 +23,15 @@ let {
   readonly,
   models,
   selectedModel = $bindable<ModelInfo | undefined>(),
+  onMCPServerAdd,
+  onMCPServerRemove,
   selectedMCPToolsCount,
   mcpSelectorOpen = $bindable(),
 }: {
   readonly: boolean;
   selectedModel: ModelInfo | undefined;
+  onMCPServerAdd: (mcpServer: MCPRemoteServerInfo) => void;
+  onMCPServerRemove: (mcpServer: MCPRemoteServerInfo) => void;
   models: Array<ModelInfo>;
   /**
    * Represent the number of tools selected
@@ -40,6 +47,18 @@ const noMcps = $derived($mcpRemoteServerInfos.length === 0);
 function onToolSelection(): void {
   mcpSelectorOpen = true;
 }
+
+let selectedRagEnvironment = $state<RagEnvironment | undefined>(undefined);
+
+function onSelectRagEnvironment(ragEnvironment: RagEnvironment | undefined): void {
+  if (selectedRagEnvironment?.mcpServer !== undefined) {
+    onMCPServerRemove(selectedRagEnvironment?.mcpServer);
+  }
+  if (ragEnvironment?.mcpServer !== undefined) {
+    onMCPServerAdd(ragEnvironment.mcpServer);
+  }
+  selectedRagEnvironment = ragEnvironment;
+}
 </script>
 
 <header class="bg-background sticky top-0 flex items-start gap-2 p-2">
@@ -77,7 +96,12 @@ function onToolSelection(): void {
             models={models}
             bind:value={selectedModel}
         />
-        <div class="flex flex-col gap-1">
+        <RagEnvironmentSelector
+            class="order-2 md:order-3"
+            onSelect={onSelectRagEnvironment}
+        />
+
+    <div class="flex flex-col gap-1">
             {#if noMcps}
                 <div class="flex items-center gap-1 px-1 text-xs text-muted-foreground">
                     <Button
diff --git a/packages/renderer/src/lib/chat/components/chat.svelte b/packages/renderer/src/lib/chat/components/chat.svelte
index 20f13d231..1c7d24192 100644
--- a/packages/renderer/src/lib/chat/components/chat.svelte
+++ b/packages/renderer/src/lib/chat/components/chat.svelte
@@ -26,6 +26,7 @@ import { mcpRemoteServerInfos } from '/@/stores/mcp-remote-servers';
 import { providerInfos } from '/@/stores/providers';
 import { MessageConfigSchema } from '/@api/chat/message-config';
 import type { Chat as DbChat, Message as DbMessage } from '/@api/chat/schema.js';
+import type { MCPRemoteServerInfo } from '/@api/mcp/mcp-server-info';
 
 import ChatHeader from './chat-header.svelte';
 import { IPCChatTransport } from './ipc-chat-transport';
@@ -82,6 +83,17 @@ const selectedMCPTools = new SvelteMap<string, SvelteSet<string>>(
   }, new Map<string, SvelteSet<string>>()),
 );
 
+function onMCPServerAdd(mcpServer: MCPRemoteServerInfo): void {
+  const server = $mcpRemoteServerInfos.find(r => r.id === mcpServer.id);
+  if (server) {
+    selectedMCPTools.set(mcpServer.id, new SvelteSet(Object.keys(server.tools)));
+  }
+}
+
+function onMCPServerRemove(mcpServer: MCPRemoteServerInfo): void {
+  selectedMCPTools.delete(mcpServer.id);
+}
+
 const selectedMCPToolsCount = $derived(
   selectedMCPTools.entries().reduce((acc, [, tools]) => {
     return acc + tools.size;
@@ -163,6 +175,8 @@ function onCheckMCPTool(mcpId: string, toolId: string, checked: boolean): void {
       bind:mcpSelectorOpen={mcpSelectorOpen}
       {readonly}
       models={models}
+      onMCPServerAdd={onMCPServerAdd}
+      onMCPServerRemove={onMCPServerRemove}
       selectedMCPToolsCount={selectedMCPToolsCount}
       bind:selectedModel={selectedModel}
     />
diff --git a/packages/renderer/src/lib/chat/components/rag-environment-selector.svelte b/packages/renderer/src/lib/chat/components/rag-environment-selector.svelte
new file mode 100644
index 000000000..34c79c881
--- /dev/null
+++ b/packages/renderer/src/lib/chat/components/rag-environment-selector.svelte
@@ -0,0 +1,124 @@
+<script lang="ts">
+import { faBook } from '@fortawesome/free-solid-svg-icons/faBook';
+import Fa from 'svelte-fa';
+
+import { cn } from '/@/lib/chat/utils/shadcn';
+import { ragEnvironments } from '/@/stores/rag-environments';
+import type { RagEnvironment } from '/@api/rag/rag-environment';
+
+import CheckCircleFillIcon from './icons/check-circle-fill.svelte';
+import ChevronDownIcon from './icons/chevron-down.svelte';
+import { Button } from './ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+
+interface Props {
+  class?: string;
+  disabled?: boolean;
+  open?: boolean;
+  onSelect: (env: RagEnvironment | undefined) => void;
+}
+
+let { class: className, disabled = false, open = $bindable(false), onSelect }: Props = $props();
+
+// Filter RAG environments to only show those with an MCP server
+const ragEnvironmentsWithMCP = $derived($ragEnvironments.filter(env => env.mcpServer !== undefined));
+
+let selected = $state<RagEnvironment | undefined>(undefined);
+
+const selectedText = $derived(selected?.name ?? 'No Knowledge Base');
+
+function onSelectRagEnvironment(env: RagEnvironment | undefined, event: Event): void {
+  event.preventDefault(); // prevent dropdown from closing itself
+  onSelect(env);
+  selected = env;
+  open = false; // close the dropdown after selection
+}
+</script>
+
+<DropdownMenu {open} onOpenChange={(val): boolean => (open = val)}>
+  <DropdownMenuTrigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        aria-label="Select knowledge base"
+        variant="outline"
+        {disabled}
+        class={cn('data-[state=open]:bg-accent data-[state=open]:text-accent-foreground w-fit md:h-[34px] md:px-2', className)}
+      >
+        <Fa icon={faBook} />
+        {selectedText}
+        <ChevronDownIcon />
+      </Button>
+    {/snippet}
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="start" class="min-w-[300px]">
+    <DropdownMenuLabel>
+      <div class="flex flex-col gap-1">
+        <div class="font-semibold">Select Knowledge Base</div>
+        <div class="text-xs font-normal text-muted-foreground">Choose a knowledge environment to enhance your chat</div>
+      </div>
+    </DropdownMenuLabel>
+    <DropdownMenuSeparator />
+
+    {#if ragEnvironmentsWithMCP.length === 0}
+      <DropdownMenuItem
+        disabled
+        class="group/item flex flex-row items-center justify-between gap-4"
+      >
+        No RAG environments with MCP available
+      </DropdownMenuItem>
+    {:else}
+      <DropdownMenuGroup>
+        <!-- No Knowledge Base option -->
+        <DropdownMenuItem
+          onSelect={onSelectRagEnvironment.bind(undefined, undefined)}
+          class="group/item flex flex-row items-center justify-between gap-4"
+          data-active={selected === undefined}
+        >
+          <div class="flex flex-col items-start gap-1">
+            <div class="font-medium">No Knowledge Base</div>
+            <div class="text-xs text-muted-foreground">Chat without RAG enhancement</div>
+          </div>
+
+          <div
+            class="text-foreground dark:text-foreground opacity-0 group-data-[active=true]/item:opacity-100"
+          >
+            <CheckCircleFillIcon />
+          </div>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <!-- RAG Environment options -->
+        {#each ragEnvironmentsWithMCP as ragEnv (ragEnv.name)}
+          <DropdownMenuItem
+            onSelect={onSelectRagEnvironment.bind(undefined, ragEnv)}
+            class="group/item flex flex-row items-center justify-between gap-4"
+            data-active={selected?.name === ragEnv.name}
+          >
+            <div class="flex flex-col items-start gap-1">
+              <div class="font-medium">{ragEnv.name}</div>
+              <div class="text-xs text-muted-foreground">
+                {ragEnv.ragConnection.providerId} • {ragEnv.files.length} sources
+              </div>
+            </div>
+
+            <div
+              class="text-foreground dark:text-foreground opacity-0 group-data-[active=true]/item:opacity-100"
+            >
+              <CheckCircleFillIcon />
+            </div>
+          </DropdownMenuItem>
+        {/each}
+      </DropdownMenuGroup>
+    {/if}
+  </DropdownMenuContent>
+</DropdownMenu>