Skip to content

feat: add mcp page#7687

Open
AmanVarshney01 wants to merge 2 commits intomainfrom
dr-7669-mcp-2026
Open

feat: add mcp page#7687
AmanVarshney01 wants to merge 2 commits intomainfrom
dr-7669-mcp-2026

Conversation

@AmanVarshney01
Copy link
Member

@AmanVarshney01 AmanVarshney01 commented Mar 21, 2026

Summary by CodeRabbit

  • New Features

    • Added a new MCP Server page with a hero, video demo, agents grid, capability cards, and CTA; plus multiple reusable UI components for agents, capabilities, bubbles, and layout.
  • Chores

    • Updated Tailwind/global CSS configuration paths used by several apps to point at the shared UI stylesheet.

@vercel
Copy link

vercel bot commented Mar 21, 2026

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

Project Deployment Actions Updated (UTC)
blog Ready Ready Preview, Comment Mar 21, 2026 11:16pm
docs Ready Ready Preview, Comment Mar 21, 2026 11:16pm
eclipse Ready Ready Preview, Comment Mar 21, 2026 11:16pm
site Ready Ready Preview, Comment Mar 21, 2026 11:16pm

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 21, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 99dd5b7f-e4a2-493e-b0f8-79092d001b9e

📥 Commits

Reviewing files that changed from the base of the PR and between 400a1f4 and ee727bf.

📒 Files selected for processing (7)
  • apps/site/src/app/mcp/_components/agent-card.tsx
  • apps/site/src/app/mcp/_components/capability-cards.tsx
  • apps/site/src/app/mcp/_components/mcp-agents-section.tsx
  • apps/site/src/app/mcp/_components/mcp-capabilities-section.tsx
  • apps/site/src/app/mcp/_components/mcp-cta-section.tsx
  • apps/site/src/app/mcp/_components/mcp-hero-section.tsx
  • apps/site/src/app/mcp/page.tsx
✅ Files skipped from review due to trivial changes (3)
  • apps/site/src/app/mcp/_components/mcp-cta-section.tsx
  • apps/site/src/app/mcp/_components/agent-card.tsx
  • apps/site/src/app/mcp/_components/capability-cards.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
  • apps/site/src/app/mcp/_components/mcp-agents-section.tsx
  • apps/site/src/app/mcp/page.tsx
  • apps/site/src/app/mcp/_components/mcp-capabilities-section.tsx
  • apps/site/src/app/mcp/_components/mcp-hero-section.tsx

Walkthrough

Updated Tailwind/CSS input paths in several app component configs and added a new MCP feature page with a set of reusable React components (agent cards, capability cards, bubble UI, hero/CTA/video sections), plus a barrel export to compose the page.

Changes

Cohort / File(s) Summary
Shadcn/Tailwind config updates
apps/blog/components.json, apps/docs/components.json, apps/site/components.json
Switched Tailwind CSS input path from local src/app/global.css to centralized ../../packages/ui/src/styles/globals.css.
Eclipse Tailwind config
apps/eclipse/components.json
Set tailwind.config to "" and changed CSS path from src/styles/globals.css to src/app/global.css.
MCP UI components (cards & bubble)
apps/site/src/app/mcp/_components/agent-card.tsx, .../capability-cards.tsx, .../mcp-bubble.tsx
Added AgentCard, MobileCapabilityCard, CapabilityCard, and McpBubble with variant config and rendering logic.
MCP sections (agents, capabilities, hero, CTA, video)
.../mcp-agents-section.tsx, .../mcp-capabilities-section.tsx, .../mcp-hero-section.tsx, .../mcp-cta-section.tsx, .../mcp-video-section.tsx
Added section components that render responsive layouts and accept typed props (agents, capabilities, features, docsHref).
Barrel export
apps/site/src/app/mcp/_components/index.ts
New barrel module re-exporting components and related types from the _components directory.
MCP page
apps/site/src/app/mcp/page.tsx
New Next.js route composing the MCP sections, exporting static metadata, and providing hardcoded feature/agent/capability data.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: add mcp page' directly and clearly summarizes the main change—a new MCP page component was added to the site. It aligns with the changeset's primary objective and follows conventional commit conventions.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Comment @coderabbitai help to get the list of available commands and usage tips.

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

@argos-ci
Copy link

argos-ci bot commented Mar 21, 2026

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ✅ No changes detected - Mar 21, 2026, 11:22 PM

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (5)
apps/site/src/app/mcp/_components/mcp-bubble.tsx (1)

63-69: Minor cleanup: remove duplicate utility tokens in shell config strings.

Line 63 and Line 69 repeat py-2; trimming duplicates makes these variant definitions easier to maintain.

Suggested cleanup
   "prompt-wide": {
     fill: fillTeal,
     monoPrompt: true,
     shell:
-      "items-center rounded-[10px] border border-stroke-ppg px-3.5 py-2 shadow-none sm:px-4 min-h-[41px] py-2 md:min-h-[45px]",
+      "items-center rounded-[10px] border border-stroke-ppg px-3.5 py-2 shadow-none sm:px-4 min-h-[41px] md:min-h-[45px]",
   },
   "prompt-compact": {
     fill: fillTeal,
     monoPrompt: true,
     shell:
-      "items-center rounded-[10px] border border-stroke-ppg px-3.5 py-2 shadow-none sm:px-4 min-h-[44px] py-2 md:min-h-[50px]",
+      "items-center rounded-[10px] border border-stroke-ppg px-3.5 py-2 shadow-none sm:px-4 min-h-[44px] md:min-h-[50px]",
   },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/site/src/app/mcp/_components/mcp-bubble.tsx` around lines 63 - 69, The
shell variant strings contain duplicate utility tokens ("py-2")—update the
"shell" value in both the default variant and the "prompt-compact" variant
(referencing the "shell" keys inside the component config and the
"prompt-compact" object) to remove the repeated "py-2" so each utility class
appears only once; ensure you keep the rest of the classes (e.g.,
"items-center", "rounded-[10px]", "border-stroke-ppg", "px-3.5", "min-h-[...]")
intact and preserve the "fill: fillTeal" and "monoPrompt: true" properties for
"prompt-compact".
apps/site/src/app/mcp/_components/mcp-video-section.tsx (1)

6-13: Consider privacy/performance hardening for the iframe embed.

Line 8 currently uses standard YouTube embed; switching to youtube-nocookie.com and adding loading="lazy" reduces early third-party tracking/cost.

Suggested update
           <iframe
             className="size-full"
-            src="https://www.youtube.com/embed/jFm41OPnOUc"
+            src="https://www.youtube-nocookie.com/embed/jFm41OPnOUc"
             title="Prisma MCP video"
+            loading="lazy"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             referrerPolicy="strict-origin-when-cross-origin"
             allowFullScreen
           />
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/site/src/app/mcp/_components/mcp-video-section.tsx` around lines 6 - 13,
Update the iframe in the mcp-video-section component to use the privacy-enhanced
YouTube domain and lazy loading: change the src from
"https://www.youtube.com/embed/jFm41OPnOUc" to
"https://www.youtube-nocookie.com/embed/jFm41OPnOUc" and add loading="lazy" to
the <iframe> element (keep existing attributes like title, referrerPolicy, and
allowFullScreen intact).
apps/site/src/app/mcp/_components/mcp-cta-section.tsx (1)

33-56: Optional: split CTA destinations instead of reusing one URL.

Lines 33-56 wire both “Add MCP server” and “Read Docs” to docsHref. Consider separate props (e.g., setupHref + docsHref) so each CTA can point to the most specific target and be tracked independently.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/site/src/app/mcp/_components/mcp-cta-section.tsx` around lines 33 - 56,
The two CTAs currently both use docsHref; change the component API to accept a
separate setupHref (or setupUrl) prop and use that for the “Add MCP server”
anchor while leaving docsHref for “Read Docs”; update the component
props/interface (e.g., the MCP CTA component in mcp-cta-section.tsx), replace
the first anchor's href to setupHref (falling back to docsHref if undefined),
and update any call sites/tests to pass a setupHref where appropriate so
tracking and destinations are independent.
apps/site/src/app/mcp/_components/capability-cards.tsx (1)

17-40: Consider extracting a shared card shell to remove duplication.

Both components repeat nearly identical container/header/description markup; extracting a shared internal primitive would reduce drift risk when styles evolve.

Also applies to: 60-81

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/site/src/app/mcp/_components/capability-cards.tsx` around lines 17 - 40,
The container/header/description layout is duplicated—extract a shared internal
primitive (e.g., CapabilityCardShell or CardShell) that accepts props: icon,
title, description, prompt (or children), and mobileTall; move the repeated JSX
(outer div with className, inner header block with icon and h4, description
paragraph, and the bottom McpBubble wrapper) into that component, preserve the
exact className strings and aria-hidden on the icon, and then refactor the two
places (the current capability-cards rendering and the other block at lines
60-81) to render this new primitive, passing through mobileTall to choose the
height variant and the prompt content to the McpBubble.
apps/site/src/app/mcp/_components/mcp-hero-section.tsx (1)

5-10: Use a stable id for feature keys instead of mutable text.

On line 60 and line 112, key={line1} ties component identity to text that could change. React keys should be stable and unique—when UI text becomes a key, any change to that text breaks component state preservation. Add an explicit id field to McpHeroFeature and key by that instead.

♻️ Suggested update
 export type McpHeroFeature = {
+  id: string;
   icon: LucideIcon;
   line1: string;
   line2: string;
   mobileText?: string;
 };
@@
-              <div key={feature.line1} className="flex items-center gap-4 text-left">
+              <div key={feature.id} className="flex items-center gap-4 text-left">
@@
-            <div key={line1} className="flex items-center gap-4 text-left">
+            <div key={id} className="flex items-center gap-4 text-left">

Update the features array in page.tsx to include id values for each feature:

 const heroFeatures: McpHeroFeature[] = [
   {
+    id: "natural-language",
     icon: MessagesSquare,
     line1: "Natural language",
     line2: "database operations",
     mobileText: "Natural language db operations",
   },
   { 
+    id: "works-any-agent",
     icon: Rocket, 
     line1: "Works with any", 
     line2: "AI agent" 
   },
   { 
+    id: "quick-setup",
     icon: Zap, 
     line1: "Super quick", 
     line2: "2-minute setup" 
   },
   { 
+    id: "enterprise-security",
     icon: Lock, 
     line1: "Enterprise-grade", 
     line2: "security & OAuth" 
   },
 ];
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@apps/site/src/app/mcp/_components/mcp-hero-section.tsx` around lines 5 - 10,
The McpHeroFeature type and the render that uses key={line1} must use a stable
unique id: add an id: string field to the McpHeroFeature type, update the
features data (where the features array is created, e.g., in page.tsx) to
include stable id values for each feature, and change the component render to
use key={feature.id} (or feature.id as the key) instead of key={line1}; update
any places that destructure McpHeroFeature (e.g., mapping callback parameters)
to accept the id as well so type-checking passes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/site/src/app/mcp/_components/capability-cards.tsx`:
- Around line 17-40: The container/header/description layout is
duplicated—extract a shared internal primitive (e.g., CapabilityCardShell or
CardShell) that accepts props: icon, title, description, prompt (or children),
and mobileTall; move the repeated JSX (outer div with className, inner header
block with icon and h4, description paragraph, and the bottom McpBubble wrapper)
into that component, preserve the exact className strings and aria-hidden on the
icon, and then refactor the two places (the current capability-cards rendering
and the other block at lines 60-81) to render this new primitive, passing
through mobileTall to choose the height variant and the prompt content to the
McpBubble.

In `@apps/site/src/app/mcp/_components/mcp-bubble.tsx`:
- Around line 63-69: The shell variant strings contain duplicate utility tokens
("py-2")—update the "shell" value in both the default variant and the
"prompt-compact" variant (referencing the "shell" keys inside the component
config and the "prompt-compact" object) to remove the repeated "py-2" so each
utility class appears only once; ensure you keep the rest of the classes (e.g.,
"items-center", "rounded-[10px]", "border-stroke-ppg", "px-3.5", "min-h-[...]")
intact and preserve the "fill: fillTeal" and "monoPrompt: true" properties for
"prompt-compact".

In `@apps/site/src/app/mcp/_components/mcp-cta-section.tsx`:
- Around line 33-56: The two CTAs currently both use docsHref; change the
component API to accept a separate setupHref (or setupUrl) prop and use that for
the “Add MCP server” anchor while leaving docsHref for “Read Docs”; update the
component props/interface (e.g., the MCP CTA component in mcp-cta-section.tsx),
replace the first anchor's href to setupHref (falling back to docsHref if
undefined), and update any call sites/tests to pass a setupHref where
appropriate so tracking and destinations are independent.

In `@apps/site/src/app/mcp/_components/mcp-hero-section.tsx`:
- Around line 5-10: The McpHeroFeature type and the render that uses key={line1}
must use a stable unique id: add an id: string field to the McpHeroFeature type,
update the features data (where the features array is created, e.g., in
page.tsx) to include stable id values for each feature, and change the component
render to use key={feature.id} (or feature.id as the key) instead of
key={line1}; update any places that destructure McpHeroFeature (e.g., mapping
callback parameters) to accept the id as well so type-checking passes.

In `@apps/site/src/app/mcp/_components/mcp-video-section.tsx`:
- Around line 6-13: Update the iframe in the mcp-video-section component to use
the privacy-enhanced YouTube domain and lazy loading: change the src from
"https://www.youtube.com/embed/jFm41OPnOUc" to
"https://www.youtube-nocookie.com/embed/jFm41OPnOUc" and add loading="lazy" to
the <iframe> element (keep existing attributes like title, referrerPolicy, and
allowFullScreen intact).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 2088231c-2575-49b3-9a94-9b4bb392be20

📥 Commits

Reviewing files that changed from the base of the PR and between 1a02c1b and 400a1f4.

📒 Files selected for processing (14)
  • apps/blog/components.json
  • apps/docs/components.json
  • apps/eclipse/components.json
  • apps/site/components.json
  • apps/site/src/app/mcp/_components/agent-card.tsx
  • apps/site/src/app/mcp/_components/capability-cards.tsx
  • apps/site/src/app/mcp/_components/index.ts
  • apps/site/src/app/mcp/_components/mcp-agents-section.tsx
  • apps/site/src/app/mcp/_components/mcp-bubble.tsx
  • apps/site/src/app/mcp/_components/mcp-capabilities-section.tsx
  • apps/site/src/app/mcp/_components/mcp-cta-section.tsx
  • apps/site/src/app/mcp/_components/mcp-hero-section.tsx
  • apps/site/src/app/mcp/_components/mcp-video-section.tsx
  • apps/site/src/app/mcp/page.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant