Add MCP server install section on the home page

.changeset/mcp-server-install-section.md

@@ -0,0 +1,5 @@
+---
+'@pmndrs/docs': patch
+---
+
+Add an MCP server install section on the home page (Claude Code shortcut + JSON config for other clients, link to the MCP remote-servers spec, mention of per-lib `llms.txt`). Also bundles the earlier MCP server URL / client configuration fix.

README.md

@@ -18,6 +18,14 @@ $ curl -sL https://raw.githubusercontent.com/pmndrs/docs/refs/heads/main/preview
 - you can pass any option from [configuration](docs/getting-started/introduction.mdx#Configuration)
 - in `DOCKER_IMAGE`, you can specify any `:tag` value from [docs packages](https://github.com/pmndrs/docs/pkgs/container/docs) container registry
 
+# Releasing
+
+Every push to `main` redeploys [docs.pmnd.rs](https://docs.pmnd.rs) via [ci.yml](.github/workflows/ci.yml) — no [changeset](.changeset/) needed for that.
+
+Add one (`pnpm changeset`) only when downstream consumers pinning `pmndrs/docs/.github/workflows/build.yml@v3` or `ghcr.io/pmndrs/docs:v3` should pull the change. It bumps [`package.json`](package.json), tags `vX.Y.Z` + `vX`, and publishes a matching Docker image — so `@v3` resolves to the latest.
+
+TL;DR — site-only tweak: skip. Anything consumers see (workflow, build behavior, templates): add one.
+
 # Test
 
 Visual tests are performed in the cloud, through [chromatic.yml](.github/workflows/chromatic.yml).

docs/authoring/gha.mdx

@@ -44,3 +44,15 @@ result:
 
 > [!CAUTION]
 > Negative potential consequences of an action.
+
+---
+
+The `title` prop overrides the label derived from `keyword` (icon and background still follow the keyword). Only available via the JSX form:
+
+```md
+<Gha keyword="TIP" title="MCP-server">Browse these docs from your MCP-compatible client.</Gha>
+```
+
+result:
+
+<Gha keyword="TIP" title="MCP-server">Browse these docs from your MCP-compatible client.</Gha>

package.json

@@ -70,7 +70,7 @@
     "mcp-handler": "^1.0.7",
     "mermaid": "^11.12.2",
     "next": "^16.1.3",
-    "next-mdx-remote": "^5.0.0",
+    "next-mdx-remote": "^6.0.0",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/app/page.tsx

@@ -7,6 +7,8 @@ import reactSpringIcon from '@/assets/react-spring-icon.svg'
 import uiKitIcon from '@/assets/uikit-icon.svg'
 import zustandIcon from '@/assets/zustand-icon.svg'
 import Icon from '@/components/Icon'
+import { Code } from '@/components/mdx/Code/Code'
+import { Gha } from '@/components/mdx/Gha/Gha'
 import { svg } from '@/utils/icon'
 import { Metadata } from 'next'
 import Image from 'next/image'
@@ -180,6 +182,63 @@ export default function Page() {
             .<Link href="https://pmnd.rs">pmnd.rs</Link>
           </header>
 
+          <section className="mt-8 lg:mt-10">
+            <Gha keyword="TIP" title="MCP-server">
+              <div className="text-sm leading-relaxed!">
+                Browse these docs from your{' '}
+                <a
+                  href="https://modelcontextprotocol.io/docs/develop/connect-remote-servers"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  MCP-compatible client
+                </a>
+                , e.g. claude-code :
+              </div>
+              <Code className="language-bash">
+                <code className="language-bash">{`claude mcp add --transport http pmndrs https://docs.pmnd.rs/api/mcp`}</code>
+              </Code>
+              <details className="text-sm">
+                <summary className="cursor-pointer">Other clients (JSON config)</summary>
+                <Code className="language-json">
+                  <code className="language-json">{`{
+  "mcpServers": {
+    "pmndrs": {
+      "type": "http",
+      "url": "https://docs.pmnd.rs/api/mcp"
+    }
+  }
+}`}</code>
+                </Code>
+              </details>
+              <p className="mt-4 text-sm leading-relaxed!">
+                Each lib also exposes its{' '}
+                <code>
+                  <a
+                    href="https://pmndrs.github.io/react-three-fiber/llms.txt"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    llms.txt
+                  </a>
+                </code>{' '}
+                /{' '}
+                <code>
+                  <a
+                    href="https://pmndrs.github.io/react-three-fiber/llms-full.txt"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    llms-full.txt
+                  </a>
+                </code>{' '}
+              </p>
+            </Gha>
+          </section>
+
           <main className="max-w-8xl mt-8 grid w-full grid-cols-1 gap-8 lg:mt-10 lg:grid-cols-2 lg:gap-12 2xl:grid-cols-3">
             {Object.entries(libs).map(([id, data]) => (
               <div

src/components/mdx/Gha/Gha.tsx

@@ -41,10 +41,19 @@ const styles: Record<string, Style> = {
   },
 }
 
-export function Gha({ children, keyword }: { children: ReactNode; keyword?: string }) {
+export function Gha({
+  children,
+  keyword,
+  title,
+}: {
+  children: ReactNode
+  keyword?: string
+  title?: string
+}) {
   if (!keyword || !(keyword in styles)) keyword = 'NOTE' // default to "NOTE"
 
-  const { icon, label, bg } = styles[keyword]
+  const { icon, label: defaultLabel, bg } = styles[keyword]
+  const label = title ?? defaultLabel
   const Icon = icon
 
   // test if children is a string