From ea0770990c99c7d10c7bbb9e1403b9f72f0d549c Mon Sep 17 00:00:00 2001 From: Felarof Date: Mon, 16 Mar 2026 10:09:15 -0700 Subject: [PATCH] feat: add docs links to feature page headers Add HelpCircle icon with tooltip linking to docs.browseros.com for each feature page: Skills, Connect Apps, Memory, Soul, LLM Providers, LLM Chat Hub, and MCP Server. Follows the existing pattern from Workflows and Scheduled Tasks headers. Also centralizes the MCP Server docs URL into productUrls.ts instead of being hardcoded in the component. Co-Authored-By: Claude Opus 4.6 --- .../app/ai-settings/LlmProvidersHeader.tsx | 28 ++++++++++++- .../app/connect-mcp/ConnectMCP.tsx | 28 ++++++++++++- .../entrypoints/app/llm-hub/LlmHubHeader.tsx | 28 ++++++++++++- .../app/mcp-settings/MCPServerHeader.tsx | 5 +-- .../entrypoints/app/memory/MemoryHeader.tsx | 28 ++++++++++++- .../entrypoints/app/skills/SkillsPage.tsx | 35 ++++++++++++++++- .../agent/entrypoints/app/soul/SoulHeader.tsx | 28 ++++++++++++- .../apps/agent/lib/constants/productUrls.ts | 39 +++++++++++++++++++ 8 files changed, 204 insertions(+), 15 deletions(-) diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/LlmProvidersHeader.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/LlmProvidersHeader.tsx index 920c4e93b..e9708668b 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/LlmProvidersHeader.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/LlmProvidersHeader.tsx @@ -1,4 +1,4 @@ -import { Plus } from 'lucide-react' +import { HelpCircle, Plus } from 'lucide-react' import type { FC } from 'react' import ProductLogoSvg from '@/assets/product_logo.svg' import { Button } from '@/components/ui/button' @@ -9,6 +9,13 @@ import { SelectTrigger, SelectValue, } from '@/components/ui/select' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' +import { bringYourOwnLlmHelpUrl } from '@/lib/constants/productUrls' import type { LlmProviderConfig } from '@/lib/llm-providers/types' interface LlmProvidersHeaderProps { @@ -34,7 +41,24 @@ export const LlmProvidersHeader: FC = ({ BrowserOS
-

LLM Providers

+
+

LLM Providers

+ + + + + + + + Learn more about LLM providers + + +

Add your provider and choose the default LLM

diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx index 0a0f4f26f..d2fe7db8d 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/connect-mcp/ConnectMCP.tsx @@ -1,11 +1,18 @@ -import { Check, Loader2, Plus, Server, Trash2 } from 'lucide-react' +import { Check, HelpCircle, Loader2, Plus, Server, Trash2 } from 'lucide-react' import { type FC, useState } from 'react' import { toast } from 'sonner' import { Button } from '@/components/ui/button' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' import { CUSTOM_MCP_ADDED_EVENT, MANAGED_MCP_ADDED_EVENT, } from '@/lib/constants/analyticsEvents' +import { connectAppsHelpUrl } from '@/lib/constants/productUrls' import { useMcpServers } from '@/lib/mcp/mcpServerStorage' import { useSyncRemoteIntegrations } from '@/lib/mcp/useSyncRemoteIntegrations' import { track } from '@/lib/metrics/track' @@ -218,7 +225,24 @@ export const ConnectMCP: FC = () => {
-

Connected Apps

+
+

Connected Apps

+ + + + + + + + Learn more about Connect Apps + + +

Connect BrowserOS assistant to apps to send email, schedule calendar events, write docs, and more diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx index e98d24418..9e4b47639 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/llm-hub/LlmHubHeader.tsx @@ -1,5 +1,12 @@ -import { MessageSquare } from 'lucide-react' +import { HelpCircle, MessageSquare } from 'lucide-react' import type { FC } from 'react' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' +import { llmChatHubHelpUrl } from '@/lib/constants/productUrls' export const LlmHubHeader: FC = () => { return ( @@ -9,7 +16,24 @@ export const LlmHubHeader: FC = () => {

-

LLM Chat & Hub

+
+

LLM Chat & Hub

+ + + + + + + + Learn more about Chat & Hub + + +

Curate and configure your favourite LLM chat providers

diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx index 208f861b8..65f3dbb56 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx @@ -1,6 +1,7 @@ import { Check, Copy, ExternalLink, Globe, Server } from 'lucide-react' import { type FC, useState } from 'react' import { Button } from '@/components/ui/button' +import { mcpClientsHelpUrl } from '@/lib/constants/productUrls' interface MCPServerHeaderProps { serverUrl: string | null @@ -11,8 +12,6 @@ interface MCPServerHeaderProps { remoteAccessEnabled?: boolean } -const DOCS_URL = 'https://docs.browseros.com/features/use-with-claude-code' - export const MCPServerHeader: FC = ({ serverUrl, isLoading, @@ -45,7 +44,7 @@ export const MCPServerHeader: FC = ({
-

Agent Memory

+
+

Agent Memory

+ + + + + + + + Learn more about memory + + +

Facts your agent remembers about you — your name, preferences, projects, and tools. Edit directly or teach through conversation. diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx index 831b14647..7bbac2dd4 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/skills/SkillsPage.tsx @@ -1,4 +1,11 @@ -import { AlertCircle, Pencil, Plus, Trash2, Wand2 } from 'lucide-react' +import { + AlertCircle, + HelpCircle, + Pencil, + Plus, + Trash2, + Wand2, +} from 'lucide-react' import { type FC, useEffect, useState } from 'react' import { toast } from 'sonner' import { @@ -26,6 +33,13 @@ import { Label } from '@/components/ui/label' import { MarkdownEditor } from '@/components/ui/MarkdownEditor' import { Switch } from '@/components/ui/switch' import { Textarea } from '@/components/ui/textarea' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' +import { skillsHelpUrl } from '@/lib/constants/productUrls' import { type SkillDetail, type SkillMeta, useSkills } from './useSkills' const loadingSkillCards = [ @@ -174,7 +188,24 @@ const SkillsHeader: FC<{ return (

-

Skills

+
+

Skills

+ + + + + + + + Learn more about skills + + +

Define reusable instructions that extend how your agent responds.

diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/soul/SoulHeader.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/soul/SoulHeader.tsx index 9ed1c239a..a8491b44f 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/soul/SoulHeader.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/soul/SoulHeader.tsx @@ -1,5 +1,12 @@ -import { Sparkles } from 'lucide-react' +import { HelpCircle, Sparkles } from 'lucide-react' import type { FC } from 'react' +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/tooltip' +import { soulHelpUrl } from '@/lib/constants/productUrls' export const SoulHeader: FC = () => { return ( @@ -9,7 +16,24 @@ export const SoulHeader: FC = () => {
-

Agent Soul

+
+

Agent Soul

+ + + + + + + + Learn more about SOUL.md + + +

Your agent's personality, tone, and behavioral rules. The soul evolves as your agent learns how you like to interact. diff --git a/packages/browseros-agent/apps/agent/lib/constants/productUrls.ts b/packages/browseros-agent/apps/agent/lib/constants/productUrls.ts index 34c38a5fb..6877e1cb3 100644 --- a/packages/browseros-agent/apps/agent/lib/constants/productUrls.ts +++ b/packages/browseros-agent/apps/agent/lib/constants/productUrls.ts @@ -59,3 +59,42 @@ export const workflowsHelpUrl = 'https://docs.browseros.com/features/workflows' */ export const scheduledTasksHelpUrl = 'https://docs.browseros.com/features/scheduled-tasks' + +/** + * @public + */ +export const skillsHelpUrl = 'https://docs.browseros.com/features/skills' + +/** + * @public + */ +export const connectAppsHelpUrl = + 'https://docs.browseros.com/features/connect-mcps' + +/** + * @public + */ +export const memoryHelpUrl = 'https://docs.browseros.com/features/memory' + +/** + * @public + */ +export const soulHelpUrl = 'https://docs.browseros.com/features/soul' + +/** + * @public + */ +export const bringYourOwnLlmHelpUrl = + 'https://docs.browseros.com/features/bring-your-own-llm' + +/** + * @public + */ +export const llmChatHubHelpUrl = + 'https://docs.browseros.com/features/llm-chat-hub' + +/** + * @public + */ +export const mcpClientsHelpUrl = + 'https://docs.browseros.com/features/use-with-claude-code'