docs/content/docs/(root)/connect-mcp-servers.mdx (7)

11-19: Remove unused imports to avoid MDX/TS build warnings.

Only SquareTerminal and SquareChartGantt are used; Link and the other lucide icons are unused.

Apply this diff:

-import Link from "next/link";
-import {
-  Database,
-  Code,
-  Server,
-  Bot,
-  SquareTerminal,
-  SquareChartGantt,
-} from "lucide-react";
+import { SquareTerminal, SquareChartGantt } from "lucide-react";

---

39-45: Fix grammar in Composio step.

“find a server the suits your needs” → “find a server that suits your needs”

Apply this diff:

-          To get started, go to [Composio](https://mcp.composio.dev/), find a server the suits your needs and copy the SSE URL before continuing here.
+          To get started, go to [Composio](https://mcp.composio.dev/), find a server that suits your needs, and copy the SSE URL before continuing here.

---

66-79: Improve phrasing and punctuation for the CLI instruction.

“Just run this following command …” → “Just run the following command …” and use a colon before the code block.

Apply this diff:

-        Just run this following command in your Next.js application to get started!
+        Just run the following command in your Next.js application to get started:

---

121-128: Avoid placing MCP SSE URLs or tokens directly in client code.

If the MCP endpoint requires auth, embedding it in a client component can leak credentials. Prefer configuring MCP server connections on the server (runtime) and exposing only safe identifiers client-side.

Would you add a short note here advising readers to avoid hardcoding secrets in the browser and to route MCP connections via their Copilot runtime or a server API? If helpful, I can draft that note.

---

169-186: Simplify the generic type for the catch-all action renderer.

Catch-all tools can have varied arg types; using unknown is clearer than [] and avoids implying an empty tuple type.

Apply this diff:

-            render: ({ name, status, args, result }: CatchAllActionRenderProps<[]>) => (
+            render: ({ name, status, args, result }: CatchAllActionRenderProps<unknown>) => (
               <McpToolCall status={status} name={name} args={args} result={result} />
             ),

---

241-246: Align component name with import to reduce confusion.

Earlier you import McpToolCall (camel-cased acronym). Renaming the exported default to McpToolCall improves consistency in the example.

Apply this diff:

-export default function MCPToolCall({
+export default function McpToolCall({
   status,
   name = "",
   args,
   result,
 }: ToolCallProps) {

---

345-363: Add file placement guidance for the Next.js App Router example.

A brief note like “Place this in app/api/copilotkit/route.ts” helps readers wire the endpoint correctly. Also ensure the endpoint option matches the actual route path.

Do you want me to append a one-liner above the snippet clarifying the file path and the need to align endpoint with the route?

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.