feat(website): move MCP guide into docs

.gitignore

@@ -30,5 +30,6 @@ src/content/docs/workflows
 /public/agentos/
 /public/cloud/
 /public/dynamic-apps/
+/public/docs/
 /public/workflows/
 /public/metadata/

Caddyfile

@@ -52,14 +52,26 @@
 
 	# www -> apex. Railway terminates TLS upstream, so always redirect to https.
 	# Only takes effect when www.rivet.dev is attached to the Railway service.
-	@www host www.rivet.dev
+	@www {
+		host www.rivet.dev
+		not path /mcp /mcp/
+	}
 	redir @www https://rivet.dev{uri} 301
 
-	# mcp.rivet.dev serves the MCP landing page at its root while the MCP server
-	# keeps every route it owns, which are proxied to MCP_UPSTREAM. A blanket
-	# host redirect is not possible: https://mcp.rivet.dev/mcp is the endpoint
-	# the landing page tells people to connect to. Only takes effect when
-	# mcp.rivet.dev is attached to the Railway service and MCP_UPSTREAM is set.
+	# The former apex landing route now lives in the docs. Keep this redirect
+	# host-aware: an unconditional /mcp redirect would intercept the MCP service
+	# endpoint on mcp.rivet.dev before its reverse-proxy handler runs.
+	@mcpDocsPage {
+		not host mcp.rivet.dev
+		path /mcp /mcp/
+	}
+	redir @mcpDocsPage https://rivet.dev/docs/mcp/{http.request.uri.prefixed_query} 301
+
+	# mcp.rivet.dev redirects its root to the canonical docs page while the MCP
+	# server keeps every route it owns, which are proxied to MCP_UPSTREAM. A
+	# blanket host redirect is not possible: https://mcp.rivet.dev/mcp is the
+	# endpoint clients connect to. Only takes effect when mcp.rivet.dev is
+	# attached to the Railway service and MCP_UPSTREAM is set.
 	@mcpHost host mcp.rivet.dev
 	handle @mcpHost {
 		@mcpService path /mcp /mcp/* /.well-known/oauth-protected-resource /health /ready
@@ -68,12 +80,11 @@
 		}
 
 		handle / {
-			rewrite * /mcp/index.html
-			file_server
+			redir https://rivet.dev/docs/mcp/{http.request.uri.prefixed_query} 301
 		}
 
-		# The landing page is the only page this host serves; the rest of the
-		# site keeps one canonical home.
+		# The service routes above are the only content this host serves; the rest
+		# of the site keeps one canonical home.
 		handle {
 			redir https://rivet.dev{uri} 301
 		}

examples/docs/mcp/call-actor-action.txt

@@ -0,0 +1 @@
+What has Acme been saying?

examples/docs/mcp/claude-code.sh

@@ -0,0 +1 @@
+claude mcp add --transport http rivet https://mcp.rivet.dev/mcp

examples/docs/mcp/codex.sh

@@ -0,0 +1 @@
+codex mcp add rivet --url https://mcp.rivet.dev/mcp

examples/docs/mcp/cursor.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "rivet": {
+      "url": "https://mcp.rivet.dev/mcp"
+    }
+  }
+}

examples/docs/mcp/find-running-actors.txt

@@ -0,0 +1 @@
+Which chat rooms are still awake?

examples/docs/mcp/gemini-cli.sh

@@ -0,0 +1 @@
+gemini mcp add --transport http rivet https://mcp.rivet.dev/mcp

examples/docs/mcp/inspect-actor-inline.txt

@@ -0,0 +1 @@
+Open the Actor Inspector for chat-room · acme.

examples/docs/mcp/local.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "rivet": {
+      "command": "npx",
+      "args": ["-y", "@rivet-dev/mcp", "--target", "local"]
+    }
+  }
+}

examples/docs/mcp/one-request.js

@@ -0,0 +1,10 @@
+// "Which chat rooms are still awake, and what has Acme been saying?"
+const { actors } = await rivet.actors.list({ name: "chat-room" });
+const awake = actors.filter((room) => room.status === "running");
+
+const history = await rivet.actor.action({
+  actor: { name: "chat-room", key: ["acme"] },
+  name: "getHistory",
+});
+
+return { awake: awake.length, history };

examples/docs/mcp/vs-code.sh

@@ -0,0 +1 @@
+code --add-mcp '{"name":"rivet","type":"http","url":"https://mcp.rivet.dev/mcp"}'

src/components/Footer.jsx

@@ -33,6 +33,7 @@ const footer = {
 	],
 	devs: [
 		{ name: "Documentation", href: "/docs" },
+		{ name: "MCP", href: "https://rivet.dev/docs/mcp/" },
 		{ name: "Changelog", href: "/blog/" },
 		{ name: "Status Page", href: "https://rivet.betteruptime.com/" },
 	],

src/components/Tabs.tsx

@@ -1,29 +1,41 @@
 import { cn } from "@rivet-gg/components";
+import { Icon } from "@rivet-gg/icons";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import type { ReactNode } from "react";
 
 interface TabProps {
 	title: string;
+	icon?: IconDefinition;
 	children: ReactNode;
 }
 
-export const Tab = ({ title, children }: TabProps) => {
+export const Tab = ({ title, icon, children }: TabProps) => {
 	return (
-		<div data-tab-item data-tab-title={title}>
+		<div data-tab-item data-tab-title={title} className="mt-8 first:mt-0">
+			<h3
+				data-tab-fallback-title
+				className="flex items-center gap-2.5 text-xl font-medium"
+			>
+				{icon && <Icon icon={icon} className="size-4 shrink-0" />}
+				<span>{title}</span>
+			</h3>
 			<button
 				type="button"
 				data-tab-trigger={title}
 				className={cn(
-					"relative inline-flex min-h-[2.75rem] items-center justify-center whitespace-nowrap",
+					"hidden",
+					"relative inline-flex min-h-[2.75rem] items-center justify-center gap-2.5 whitespace-nowrap",
 					"rounded-none border-b-2 bg-transparent px-4 py-2.5 text-sm font-semibold",
 					"ring-offset-background transition-none",
 					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 					"disabled:pointer-events-none disabled:opacity-50",
 					"border-b-transparent text-muted-foreground",
 				)}
 			>
-				{title}
+				{icon && <Icon icon={icon} className="size-4 shrink-0" />}
+				<span>{title}</span>
 			</button>
-			<div data-tab-content className="hidden mt-4">
+			<div data-tab-content className="mt-4">
 				{children}
 			</div>
 		</div>
@@ -32,21 +44,24 @@ export const Tab = ({ title, children }: TabProps) => {
 
 interface TabsProps {
 	children: ReactNode;
+	label?: string;
 }
 
-export const Tabs = ({ children }: TabsProps) => {
+export const Tabs = ({ children, label = "Options" }: TabsProps) => {
 	return (
 		<div data-tabs-container className="my-4">
-			<div className="overflow-x-auto">
+			<div data-tabs-controls className="overflow-x-auto" hidden>
 				<div
 					data-tabs-list
+					role="tablist"
+					aria-label={label}
 					className="inline-flex text-ink-soft border-b border-ink/10 w-full"
 				>
 				</div>
 			</div>
-			<div data-tabs-content-container>
+			<div data-tabs-content-container hidden>
 			</div>
-			<div data-tabs-source className="hidden">
+			<div data-tabs-source>
 				{children}
 			</div>
 		</div>