feat: link AI section buttons to get-started AI pages

[katieschilling]

Summary

• Replace the home page AI card's MCP install deeplinks with links to the five "Use AI" pages from the get-started sidebar group: Agent Skills (featured top button) and a 2×2 grid for MCP Server, Agent Plugins, Agent Shell, and Agent Kit.
• Polish the home grid alignment: CLI terminal top now lines up with the SDK card's first terminal, the CLI box stretches so its bottom matches the SDK's lower terminal, and the AI button section fills its preview so the top aligns with the existing-code terminal.
• Move the editor install buttons (Cursor, VS Code, Claude, "See all integrations") to the MCP quickstart page as a new MCPInstallBox component placed near the top of docs/quickstarts/mcp.mdx.

Test plan

• Visit /docs/ and confirm the AI tool card shows the new featured "Agent Skills" button plus the 2×2 grid; click each button and verify it navigates to the correct page.
• On the home page, confirm the SDK / CLI terminal tops align and the CLI box bottom aligns with the SDK's app.ts box; confirm the AI buttons top aligns with the "Use Your Existing Code" terminal top.
• Visit /docs/quickstarts/mcp and confirm the install box renders with the eyebrow + title + subtitle, three install buttons, and the "See all integrations" link; verify the deeplinks/URLs match the previous behavior.
• Toggle light theme and confirm both the home grid and the MCP install box read correctly.
• Resize to mobile width (<640px) and confirm the install buttons collapse to one column.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs-redirect	Ready	Preview, Comment	May 8, 2026 0:38am
tigris-os-docs	Ready	Preview, Comment	May 8, 2026 0:38am

[greptile-apps]

Greptile Summary

This PR refactors the home-page AI tool card from MCP deeplink buttons to navigational links pointing to five "Use AI" doc pages, and moves the deeplink install buttons into a new MCPInstallBox component rendered near the top of the MCP quickstart page. It also adds CSS alignment fixes so the CLI and SDK card terminals line up vertically.

• New MCPInstallBox component (src/components/MCPInstallBox/) extracts the Cursor, VS Code, and Claude install buttons (preserving their original URLs) with full dark/light theme support and a responsive mobile layout.
• AI card in ToolCards now shows a featured "Agent Skills" link plus a 2×2 grid linking to MCP Server, Agent Plugins, Agent Shell, and Agent Kit pages; all paths resolve to existing docs files.
• CSS alignment uses :has() selectors on the preview containers to flex-stretch the CLI and AI preview areas so card bottoms align across the grid.

Confidence Score: 4/5

Safe to merge; all destination routes exist in the docs tree and the install deeplinks are unchanged from their previous location.

The link paths are all verified against existing files, and the URL strings for Cursor/VS Code/Claude deeplinks are correctly preserved in MCPInstallBox. The only notable issues are cosmetic: the transition: background-color property won't animate gradient changes on the featured button hover, and the AI grid buttons are missing a focus-visible state that their sibling MCPInstallBox already includes.

Minor styling inconsistencies are confined to src/components/ToolCards/styles.css; no other files need additional attention.

Important Files Changed

Filename	Overview
src/components/MCPInstallBox/index.jsx	New component extracting the MCP install buttons from ToolCards; uses plain anchor tags with correct deeplink/page URLs matching the previous behavior.
src/components/MCPInstallBox/styles.css	New CSS for MCPInstallBox; includes dark/light theme variants, responsive mobile collapse, and proper focus-visible states on buttons.
src/components/ToolCards/index.jsx	Replaces MCP deeplink buttons with Link components to five 'Use AI' doc pages; stopPropagation pattern is preserved correctly on inner buttons.
src/components/ToolCards/styles.css	Adds CLI/AI alignment fixes and AI button styles; the featured button uses transition: background-color but hover changes background: linear-gradient(), so the gradient transition will snap rather than animate.
docs/quickstarts/mcp.mdx	Adds MCPInstallBox import and renders it before the Overview section; straightforward placement.

_{Reviews (1): Last reviewed commit: "feat: link AI section buttons to get-sta..." | Re-trigger Greptile}

[greptile-apps]

The transition on the AI card buttons lists background-color, but the hover rules change background (a shorthand that includes linear-gradient). CSS cannot interpolate between gradient values using background-color, so the featured button's gradient shift on hover will snap instantly rather than animate smoothly. Transitioning background directly or using a pseudo-element overlay is the common workaround; at minimum switching the property name to background makes the intent consistent, though browsers will still snap gradients.

Suggested change

	transition:
	background-color 0.18s ease,
	border-color 0.18s ease,
	transform 0.18s ease;
	}
	.tool-card-ai-buttons .tool-card-mcp-btn:hover {
	transition:
	background 0.18s ease,
	border-color 0.18s ease,
	transform 0.18s ease;
	}
	.tool-card-ai-buttons .tool-card-mcp-btn:hover {

[greptile-apps]

Keyboard-navigable Link buttons inside the AI card have no :focus-visible style in these overrides, while MCPInstallBox (the sibling component) does include one. Users who tab into the AI grid will get the browser default outline (or nothing if it's stripped elsewhere) rather than the branded green highlight. Adding :focus-visible here mirrors the MCPInstallBox pattern and keeps the two components consistent.

Suggested change

	.tool-card-ai-buttons .tool-card-mcp-btn:hover {
	background: rgba(98, 254, 181, 0.1);
	border-color: rgba(98, 254, 181, 0.35);
	transform: translateY(-1px);
	}
	.tool-card-ai-buttons .tool-card-mcp-btn:hover,
	.tool-card-ai-buttons .tool-card-mcp-btn:focus-visible {
	background: rgba(98, 254, 181, 0.1);
	border-color: rgba(98, 254, 181, 0.35);
	transform: translateY(-1px);
	outline: none;
	}