Sign In Sign Up

Warn user about excessive non-builtin tools

QS
Quinn Slack • @sqs
QS
show a warning in web/'s /settings screen if the user has more than 20 enabled non-builtin tools from all MCP servers combined

I'll help you add a warning in the web app's settings screen when users have more than 20 enabled non-builtin tools. Let me start by exploring the structure.

web/src/**/*settings* 13 files found
Find settings page route in web/ directory that manages tool configuration or MCP settings

Let me look at the tool settings section:

Perfect! Now let me check the tool-list component to understand how tools are displayed:

Now let me check the tool-list to see how it displays tools and where we should add the warning:

Now I have the complete picture. I need to modify tool-settings-section.svelte to add a warning when enabled non-builtin tools exceed 20. Let me make the change:

web/src/routes/settings/ tool-settings-section.svelte
+12
@@ -70,8 +70,20 @@
	let builtinTools = $derived.by(() => {
		if (!$tools || $tools instanceof Error) return $tools
		return $tools.filter((tool) => tool.spec.source === 'builtin')
	})

	let enabledNonBuiltinToolsCount = $derived.by(() => {
		if (!$tools || $tools instanceof Error) return 0
		return $tools.filter(
			(tool) =>
				tool.enabled &&
				tool.spec.source !== 'builtin' &&
				!(typeof tool.spec.source === 'object' && 'toolbox' in tool.spec.source),
		).length
	})

	let showTooManyToolsWarning = $derived(enabledNonBuiltinToolsCount > 20)
</script>

<SettingsSection title="Tools">
	<!-- Hidden div to trigger initialization of disabledTools value -->

Now let me add the warning UI component. I need to check what warning/alert components are available:

lib/web-ui/src/**/*alert* 3 files found
lib/web-ui/src/**/*warning*