Features — Browser MCP — SideButton Marketing Website Knowledge Module

What This Is

Feature page for SideButton Browser MCP — the MCP server that gives AI tools (Claude Code, Cursor, Windsurf) full browser control. Includes: animated hero with live chat mock (support inbox scenario with auto-drafting reply cycling through 3 conversations), "How It Works" architecture diagram (AI Tool -> JSON-RPC -> SideButton MCP -> WebSocket -> Browser) with run log screenshot, MCP Tools Reference grid (8 tools in 2-column layout via CapabilityList component), Quick Setup section with 3 tabbed config examples (Claude Code / Cursor / Windsurf) and copy buttons, "Why Browser MCP?" 3-paragraph explainer, Related Features 3-card grid, and dark CTA section.

URL Patterns

Pattern	Description
/features/browser-mcp	Browser MCP feature page

Page Structure

+--[Header]-----------------------------------------------------+
|                                                                |
|  [1. HERO — BrowserMcpHero component]                         |
|  Animated background mesh (2 gradient blobs + grid overlay)    |
|  Badge: "Browser MCP" (orange dot + text, rounded pill)        |
|  H1: "Talk to AI. Control any website." (gradient text)        |
|  Subtitle + "Install Free Extension" / "Setup Guide" CTAs     |
|  Right: animated browser mockup (#mcp-hero-browser)            |
|    - Browser bar with lock icon + "support.sidebutton.com/inbox"|
|    - SideButton extension icon with notification pulse          |
|    - Sender avatar + name + role (cycles 3 conversations)      |
|    - 2 message bubbles                                         |
|    - Textarea with typing cursor animation                     |
|    - "Draft Reply" button with click ripple effect             |
|    - "One-click automation" floating annotation (>=1280px)     |
|                                                                |
|  [2. HOW IT WORKS — architecture diagram]                      |
|  bg-slate-50, 3-column flex layout inside white rounded card   |
|  AI Tool -> (JSON-RPC label) -> SideButton MCP -> (WebSocket  |
|  label) -> Browser                                             |
|  Flow description text below separator                         |
|  Run log screenshot: /screenshots/run-log.png (lazy loaded)    |
|                                                                |
|  [3. MCP TOOLS REFERENCE — CapabilityList component]           |
|  2×4 grid of capability cards                                  |
|  Each: icon + function name (h3) + one-line description        |
|                                                                |
|  [4. QUICK SETUP — tabbed config panel]                        |
|  bg-slate-50, dark panel (#mcp-config-panel, bg-slate-900)     |
|  3 tabs: [Claude Code] [Cursor] [Windsurf]                    |
|  Active tab: bg-slate-800 + border-primary + text-white        |
|  Config: filename (mono) + JSON block + Copy button            |
|                                                                |
|  [5. WHY BROWSER MCP? — 3 paragraphs in white card]           |
|  "Most apps don't have APIs..."                                |
|  "Browser MCP is the bridge..."                                |
|  "Real-time context..."                                        |
|                                                                |
|  [6. RELATED FEATURES — 3-card grid]                           |
|  bg-slate-50, hover:border-primary + shadow-md                 |
|  SideButton AI Assistant | AI Automation | Integrations        |
|                                                                |
|  [7. CTA — FeatureCTA component, bg-slate-900]                |
|  "Give AI Browser Control"                                     |
|  [Get Started Free] [View AI Automation]                       |
+--[Footer]-----------------------------------------------------+

Key Elements

Hero Section (BrowserMcpHero component)

Element	Selector	Notes
Hero section	.browser-mcp-hero	Custom component, not FeatureHero
Background gradient 1	.hero-gradient-1	Green radial gradient, 8s pulse animation
Background gradient 2	.hero-gradient-2	Purple radial gradient, 10s pulse animation
Background grid	.hero-grid	Subtle 60px grid pattern with radial mask
Badge	.hero-badge	Orange dot + "Browser MCP" text, rounded pill
Badge dot	.hero-badge-dot	6px dot, 2s pulse animation
Main heading	.hero-title	"Talk to AI. Control any website." clamp(2.5rem, 5vw, 3.75rem)
Gradient text	.gradient-text	"Control any website." with gradient effect
Subtitle	.hero-subtitle	1.25rem, secondary color
Install Free Extension	.btn.btn-primary	Links to Chrome Web Store
Setup Guide	.btn.btn-secondary	Links to docs.sidebutton.com/mcp-setup
Browser mockup	#mcp-hero-browser	.hero-browser class, 640px max-width
Browser URL bar	.hero-browser-url	Shows "support.sidebutton.com/inbox"
Extension icon	#mcp-hero-ext-icon	.hero-ext-icon, gains .active class during scan
Extension pulse	.hero-ext-pulse	Red notification dot, appears when .active
Scanline	#mcp-hero-scanline	Purple scanning line, .scanning class triggers 2s sweep
Sender area	#mcp-hero-sender	.hero-sender, gains .reading class during scan
Avatar	#mcp-hero-avatar	44px circle, background-image set by JS
Name	#mcp-hero-name	Sender name, set by JS
Role	#mcp-hero-role	Sender role text, set by JS
Message 1	#mcp-hero-msg-1	First message bubble
Message 2	#mcp-hero-msg-2	Second message bubble
Messages area	#mcp-hero-messages	Gains .reading class during scan
Textarea	#mcp-hero-textarea	Readonly, gains .typing / .focused / .thinking classes
Typing cursor	#mcp-hero-cursor	Purple blinking cursor, .visible class shows it
Draft Reply button	#mcp-hero-draft-btn	.hero-btn, cycles: default -> .pressed -> .loading -> .success
Ripple 1	#mcp-hero-ripple-1	.hero-ripple, .animate class triggers expansion
Ripple 2	#mcp-hero-ripple-2	.hero-ripple, .animate-delay class (0.1s delay)
Hint text	#mcp-hero-draft-hint	Shows "Uses conversation + your instructions as context" after draft
Annotation	.hero-annotation	"One-click automation" floating label, visible only >= 1280px

How It Works Section

Element	Selector	Notes
Section	section.py-16.bg-slate-50 (first)	Architecture diagram section
Section heading	h2 "How It Works"	text-2xl md:text-3xl
Subtitle	p "AI tools communicate through MCP..."	text-slate-600
Architecture card	.bg-white.rounded-2xl.border.border-slate-200	Contains 3-column diagram
AI Tool column	h3 "AI Tool"	With computer icon, "Claude Code, Cursor, ChatGPT, Windsurf"
JSON-RPC label	span.text-xs.font-mono "JSON-RPC"	On horizontal connector arrow
SideButton MCP column	h3 "SideButton MCP"	Primary color, "Translates AI requests to browser actions"
WebSocket label	span.text-xs.font-mono "WebSocket"	On horizontal connector arrow
Browser column	h3 "Browser"	With globe icon, "Extension controls any website"
Flow description	.mt-8.pt-8.border-t	"AI requests action -> MCP translates -> Extension executes -> Results returned to AI"
Arrow (desktop)	.hidden.md\\:flex	Horizontal arrows with protocol labels, hidden on mobile
Arrow (mobile)	.md\\:hidden	Vertical arrows, shown only on mobile
Run log caption	p.text-center.text-sm	"Real execution logs from the SideButton dashboard"
Run log screenshot	img[alt*="SideButton run log"]	/screenshots/run-log.png, 1280x800, lazy loaded, rounded-xl shadow-2xl

MCP Tools Reference (CapabilityList component)

Element	Selector	Notes
Section	section.py-16 (CapabilityList)	White background
Section heading	h2 "MCP Tools Reference"	text-2xl md:text-3xl
Subtitle	p "Available tools for AI agents..."	text-slate-600
Grid	.grid.md\\:grid-cols-2.gap-4	2-column grid of capability cards
navigate(url) card	Card containing h3 "navigate(url)"	Icon + "Navigate the browser to any URL"
snapshot() card	Card containing h3 "snapshot()"	Icon + "Capture accessibility tree for AI understanding"
click(ref) card	Card containing h3 "click(ref)"	Icon + "Click element by reference from snapshot"
type(ref, text) card	Card containing h3 "type(ref, text)"	Icon + "Type text into input element"
scroll(direction) card	Card containing h3 "scroll(direction)"	Icon + "Scroll page up, down, left, or right"
extract(selector) card	Card containing h3 "extract(selector)"	Icon + "Extract text content from elements"
screenshot() card	Card containing h3 "screenshot()"	Icon + "Capture visual screenshot of page"
run_workflow(id) card	Card containing h3 "run_workflow(id)"	Icon + "Execute automation workflow by ID"

Quick Setup Section

Element	Selector	Notes
Section heading	h2 "Quick Setup"	text-2xl md:text-3xl
Subtitle	p "Add to your AI tool's config and restart"	text-slate-600
Config panel	#mcp-config-panel	bg-slate-900 rounded-2xl
Claude Code tab	button[data-config-tab="0"]	Active by default (bg-slate-800 + border-primary)
Cursor tab	button[data-config-tab="1"]	Inactive style: border-slate-700 text-slate-400
Windsurf tab	button[data-config-tab="2"]	Inactive style
Config content 0	div[data-config-content="0"]	claude_desktop_config.json
Config content 1	div[data-config-content="1"]	.cursor/mcp.json (hidden by default)
Config content 2	div[data-config-content="2"]	~/.codeium/windsurf/mcp_config.json (hidden by default)
Config filename	span.font-mono.text-xs.text-slate-400	Shows config file path
Copy button 0	button[data-copy-btn="0"]	Copies Claude Code config JSON
Copy button 1	button[data-copy-btn="1"]	Copies Cursor config JSON
Copy button 2	button[data-copy-btn="2"]	Copies Windsurf config JSON
Config JSON	pre.text-sm.text-slate-300	Displays JSON config block

Why Browser MCP Section

Element	Selector	Notes
Section heading	h2 "Why Browser MCP?"	text-2xl md:text-3xl
Content card	.bg-white.rounded-2xl.border.border-slate-200.p-8	Contains 3 paragraphs
Paragraph 1 strong	strong "Most apps don't have APIs."	text-slate-900
Paragraph 2 strong	strong "Browser MCP is the bridge."	text-slate-900
Paragraph 3 strong	strong "Real-time context."	text-slate-900

Related Features

Element	Selector	Notes
Section heading	h2 "Related Features"	text-xl
Grid	.grid.md\\:grid-cols-3.gap-4	3-column card grid
AI Assistant card	a[href="/features/chat"]	h3 "SideButton AI Assistant", hover:border-primary
AI Automation card	a[href="/features/ai-automation"]	h3 "AI Automation", hover:border-primary
Integrations card	a[href="/integrations"]	h3 "Integrations", hover:border-primary

CTA Section (FeatureCTA component)

Element	Selector	Notes
CTA container	.bg-slate-900.rounded-2xl	Dark background with blur decorations
Section heading	h2 "Give AI Browser Control"	text-white
Subtitle	p "Set up SideButton Browser MCP in 1 minute..."	text-slate-300
Get Started Free	a[href*="docs.sidebutton.com/installation"]	bg-primary button
View AI Automation	a[href="/features/ai-automation"]	bg-white/10 button

Data Model

Static feature page — no editable entities. Content is rendered at build time from Astro components and inline data.

Field	Type	Description
mcpTools	array[8]	MCP tool definitions: icon, title (function signature), description
configs	array[3]	Tab config entries: name (tool name), file (config path), config (JSON string)
mcpConversations	array[3]	Hero animation data: name, role, avatar path, msg1, msg2, reply (~75 chars)
TIMING	object	Animation timing constants: INITIAL_DELAY=1200, CLICK_RIPPLE=500, SCAN_TOTAL=2000, THINKING=800, TYPING_TOTAL=900, HOLD=3500
Related features	array[3]	AI Assistant (/features/chat), AI Automation (/features/ai-automation), Integrations (/integrations)
SEO schemas	array[2]	BreadcrumbList (Home > Features > Browser MCP), SoftwareApplication (free, DeveloperApplication)

States & Variations

State	Trigger	Visual Indicator
Default	Page load	Hero animation starts after 1200ms delay if visible
Hero idle	Conversation loaded, waiting	Sender info + messages shown, Draft Reply button default green
Button pressed	Animation: click event	.pressed class, scale(0.95), ripple circles expand
Analyzing	After press	.loading class on button, text "Analyzing...", extension icon gets .active + red pulse dot
Scanning	During analysis	#mcp-hero-scanline.scanning — purple line sweeps top-to-bottom over 2s
Reading sender	Scan phase 1 (400ms)	.hero-sender.reading — purple highlight border + glow around sender
Reading messages	Scan phase 2 (800ms)	.hero-messages.reading — purple highlight border + glow around messages
Thinking	After scan	Textarea gets .focused + .thinking, placeholder "Thinking...", purple border + glow
Typing	After thinking	Button text "Drafting...", textarea .typing, cursor .visible, text typed char-by-char
Done	After typing complete	Button .success (green gradient), text "Done", hint text appears
Conversation cycle	After 3500ms hold	Loads next conversation (3 total: Mike Chen SRE, Rachel Torres AE, James Wilson Support Lead)
Tab active	Click config tab	Active: bg-slate-800 + border-primary + text-white; inactive: border-slate-700 + text-slate-400
Tab content shown	Click config tab	data-config-content div: active visible, others .hidden
Copy success	Click copy button	Button text "Copied!" for 2000ms, adds text-primary + border-primary classes
Cookie dialog	First visit	Cookie Notice dialog overlay with Accept/Reject buttons
SideButton FAB	Extension installed	Green "S" circle at bottom-right corner
Reduced motion	prefers-reduced-motion: reduce	All animations disabled, manual click mode enabled on Draft Reply
Annotation visible	Viewport >= 1280px	"One-click automation" floating label with green pulse dot appears right of mockup
Responsive mobile	<= 768px	Hero becomes single-column, architecture arrows rotate vertical, tabs stack
Responsive tablet	<= 1024px	Hero padding reduced (3rem 0 2rem), MCP tools grid may collapse
Tab not visible	document.hidden	Animation pauses, timeouts cleared
Tab visible again	document.visibilitychange	Animation reloads current conversation and restarts
Intersection out	Hero scrolled out of view	IntersectionObserver (threshold 0.3) stops animation
Intersection in	Hero scrolled into view	IntersectionObserver restarts animation

Common Tasks

Verify Page Loads Correctly

1. Navigate to /features/browser-mcp
2. Verify hero heading "Talk to AI. Control any website." is visible
3. Verify browser mockup #mcp-hero-browser renders with sender info
4. Scroll down and verify all 7 sections are present
5. Check that run log screenshot loads (no broken image)

Verify Hero Animation Cycle

1. Observe hero mockup for first conversation (Mike Chen, SRE)
2. Wait for Draft Reply button to show "Analyzing..." then "Drafting..."
3. Verify text types into textarea character by character
4. Verify button changes to green "Done" state
5. Wait 3500ms for next conversation (Rachel Torres, AE)
6. Verify name, role, avatar, and messages all update
7. Wait for full cycle back to Mike Chen (3 conversations total)

Test Config Tab Switching

1. Scroll to "Quick Setup" section
2. Verify Claude Code tab is active by default (bg-slate-800 + border-primary)
3. Verify config shows claude_desktop_config.json filename
4. Click "Cursor" tab button
5. Verify Cursor tab becomes active, Claude Code tab becomes inactive
6. Verify config shows .cursor/mcp.json filename
7. Click "Windsurf" tab and verify ~/.codeium/windsurf/mcp_config.json

Test Config Copy Functionality

1. Scroll to Quick Setup section
2. Click the "Copy" button for the active tab
3. Verify button text changes to "Copied!" with primary color
4. Wait 2000ms and verify button reverts to "Copy"
5. Verify clipboard contains valid JSON with mcpServers.sidebutton config

Verify All Links Work

1. Check hero "Install Free Extension" links to Chrome Web Store URL
2. Check hero "Setup Guide" links to docs.sidebutton.com/mcp-setup
3. Check Related Features: /features/chat, /features/ai-automation, /integrations
4. Check CTA "Get Started Free" links to docs installation page
5. Check CTA "View AI Automation" links to /features/ai-automation

Verify Responsive Layout

1. Resize viewport to mobile (375px width)
2. Verify architecture diagram arrows change from horizontal to vertical
3. Verify MCP tools grid collapses to single column
4. Verify config tabs remain accessible
5. Resize to tablet (768px) and verify 2-column grids
6. Resize to desktop (1280px+) and verify annotation label appears

Tips

• The hero animation uses IntersectionObserver (threshold 0.3) and visibilitychange — it only runs when the mockup is visible on screen and the tab is active
• Hero conversations cycle through 3 personas: Mike Chen (SRE @ Dataflow), Rachel Torres (AE @ CloudScale), James Wilson (Support Lead @ FinServe) — all replies are approximately 75 characters to avoid layout shifts
• The typing animation calculates per-character delay as TYPING_TOTAL / reply.length for consistent total duration
• Cursor position is calculated using a hidden canvas measureText for accurate placement
• All 3 config tab JSON contents are identical (npx @sidebutton/mcp) — only the filename differs
• Copy buttons use navigator.clipboard.writeText which requires secure context (HTTPS or localhost)
• The architecture diagram uses flex-col md:flex-row so the layout is vertical on mobile, horizontal on desktop
• BrowserMcpHero is a standalone component (not using the shared FeatureHero) with its own scoped styles and inline script

Gotchas

• Hero animation timing is sequential: Each phase depends on the previous completing — interrupting (scrolling away, tab switch) resets the entire animation to the beginning of the current conversation
• Reduced motion completely changes behavior: With prefers-reduced-motion: reduce, all CSS animations are disabled and the Draft Reply button becomes a manual click trigger that shows the reply instantly
• Annotation only visible at 1280px+: The "One-click automation" floating label uses display: none by default, only display: flex at min-width: 1280px — tests at smaller viewports will never see it
• Copy button requires clipboard API: navigator.clipboard.writeText fails silently in non-secure contexts — the catch block logs to console but shows no user-facing error
• Config tab state is DOM-based: Tab switching uses classList.add/remove not framework state — a snapshot after tab click will show the new state immediately
• Run log screenshot is lazy-loaded: The loading="lazy" attribute means the image may not be loaded when you first scroll to the section — wait or scroll past it to trigger load