Add MCP examples and dynamic example selection

src/lib/components/chat/ChatWindow.svelte

@@ -25,7 +25,9 @@
 	import { useSettingsStore } from "$lib/stores/settings";
 	import ModelSwitch from "./ModelSwitch.svelte";
 	import { routerExamples } from "$lib/constants/routerExamples";
+	import { mcpExamples } from "$lib/constants/mcpExamples";
 	import type { RouterFollowUp, RouterExample } from "$lib/constants/routerExamples";
+	import { allBaseServersEnabled } from "$lib/stores/mcpServers";
 	import { shareModal } from "$lib/stores/shareModal";
 	import CarbonTools from "~icons/carbon/tools";
 
@@ -282,9 +284,13 @@
 	let focused = $state(false);
 
 	let activeRouterExamplePrompt = $state<string | null>(null);
+	// Use MCP examples when all base servers are enabled, otherwise use router examples
+	let activeExamples = $derived<RouterExample[]>(
+		$allBaseServersEnabled ? mcpExamples : routerExamples
+	);
 	let routerFollowUps = $derived<RouterFollowUp[]>(
 		activeRouterExamplePrompt
-			? (routerExamples.find((ex) => ex.prompt === activeRouterExamplePrompt)?.followUps ?? [])
+			? (activeExamples.find((ex) => ex.prompt === activeRouterExamplePrompt)?.followUps ?? [])
 			: []
 	);
 	let routerUserMessages = $derived(messages.filter((msg) => msg.from === "user"));
@@ -310,7 +316,7 @@
 			return;
 		}
 
-		const match = routerExamples.find((ex) => ex.prompt.trim() === firstUserMessage.content.trim());
+		const match = activeExamples.find((ex) => ex.prompt.trim() === firstUserMessage.content.trim());
 		activeRouterExamplePrompt = match ? match.prompt : null;
 	});
 
@@ -432,11 +438,11 @@
 			dark:from-gray-900 dark:via-gray-900/100
 			dark:to-gray-900/0 max-sm:py-0 sm:px-5 md:pb-4 xl:max-w-4xl [&>*]:pointer-events-auto"
 	>
-		{#if !draft.length && !messages.length && !sources.length && !loading && currentModel.isRouter && routerExamples.length && !hideRouterExamples && !lastIsError}
+		{#if !draft.length && !messages.length && !sources.length && !loading && currentModel.isRouter && activeExamples.length && !hideRouterExamples && !lastIsError}
 			<div
 				class="no-scrollbar mb-3 flex w-full select-none justify-start gap-2 overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500"
 			>
-				{#each routerExamples as ex}
+				{#each activeExamples as ex}
 					<button
 						class="flex items-center rounded-lg bg-gray-100/90 px-2 py-0.5 text-center text-sm backdrop-blur hover:text-gray-500 dark:bg-gray-700/50 dark:hover:text-gray-400"
 						onclick={() => startExample(ex)}>{ex.title}</button

src/lib/constants/mcpExamples.ts

@@ -0,0 +1,131 @@
+import type { RouterExample } from "./routerExamples";
+
+// Examples that showcase MCP tool capabilities (web search, Hugging Face, etc.)
+export const mcpExamples: RouterExample[] = [
+	{
+		title: "Latest world news",
+		prompt: "What is the latest world news?",
+		followUps: [
+			{
+				title: "Tech focus",
+				prompt: "What about technology news?",
+			},
+			{
+				title: "San Francisco",
+				prompt: "What's happening in San Francisco?",
+			},
+			{
+				title: "vs last week",
+				prompt: "How does this compare to last week's news?",
+			},
+		],
+	},
+	{
+		title: "Trending models",
+		prompt: "What are the top trending models on Hugging Face?",
+		followUps: [
+			{
+				title: "Text generation",
+				prompt: "What about text generation models?",
+			},
+			{
+				title: "Image generation",
+				prompt: "What about text-to-image models?",
+			},
+			{
+				title: "How to use",
+				prompt: "Show me how to use the most popular one",
+			},
+		],
+	},
+	{
+		title: "Plan a trip",
+		prompt: "Things to do in Tokyo next week",
+		followUps: [
+			{
+				title: "Transport & prices",
+				prompt: "How do I get around and how much will it cost?",
+			},
+			{
+				title: "Weather",
+				prompt: "What's the weather like in Tokyo next week?",
+			},
+			{
+				title: "Meet people",
+				prompt: "Where can I meet new people and make friends?",
+			},
+		],
+	},
+	{
+		title: "Compare technologies",
+		prompt: "Search the web to compare React, Vue, and Svelte for building web apps in 2025",
+		followUps: [
+			{
+				title: "Performance benchmarks",
+				prompt: "Search for recent performance benchmarks comparing these frameworks",
+			},
+			{
+				title: "Job market",
+				prompt: "Search for job market trends for each of these frameworks",
+			},
+			{
+				title: "Migration guides",
+				prompt: "Search for guides on migrating from React to Svelte",
+			},
+		],
+	},
+	{
+		title: "Find a dataset",
+		prompt: "Find datasets on Hugging Face for training a sentiment analysis model",
+		followUps: [
+			{
+				title: "Dataset details",
+				prompt: "Tell me more about the largest dataset - its size, format, and how to load it",
+			},
+			{
+				title: "Find models",
+				prompt: "Find pre-trained models that were trained on this dataset",
+			},
+			{
+				title: "Code snippet",
+				prompt: "Show me how to load and preprocess this dataset with the datasets library",
+			},
+		],
+	},
+	{
+		title: "Gift ideas",
+		prompt: "Search for unique gift ideas for someone who loves cooking",
+		followUps: [
+			{
+				title: "Budget options",
+				prompt: "Search for gift ideas under $50",
+			},
+			{
+				title: "Top rated",
+				prompt: "Search for the top-rated cooking gadgets of this year",
+			},
+			{
+				title: "DIY gifts",
+				prompt: "Search for homemade gift ideas for cooking enthusiasts",
+			},
+		],
+	},
+	{
+		title: "Learn something new",
+		prompt: "Search for the best resources to learn Rust programming in 2025",
+		followUps: [
+			{
+				title: "Project ideas",
+				prompt: "Search for beginner Rust project ideas to practice with",
+			},
+			{
+				title: "Find tools",
+				prompt: "Search for the most popular Rust tools and libraries I should know about",
+			},
+			{
+				title: "Community",
+				prompt: "Search for Rust communities and forums where I can ask questions",
+			},
+		],
+	},
+];

src/lib/stores/mcpServers.ts

@@ -122,6 +122,15 @@ export const enabledServers = derived([allMcpServers, selectedServerIds], ([$all
 // Derived store: count of enabled servers
 export const enabledServersCount = derived(enabledServers, ($enabled) => $enabled.length);
 
+// Derived store: true if all base servers are enabled
+export const allBaseServersEnabled = derived(
+	[allMcpServers, selectedServerIds],
+	([$all, $selected]) => {
+		const baseServers = $all.filter((s) => s.type === "base");
+		return baseServers.length > 0 && baseServers.every((s) => $selected.has(s.id));
+	}
+);
+
 // Note: Authorization overlay (with user's HF token) for the Hugging Face MCP host
 // is applied server-side when enabled via MCP_FORWARD_HF_USER_TOKEN.