[Fundamentals / Docs site] Expand page options dropdown + add fundamentals page on AI tooling (#25832)

* [Fundamentals / Docs site] Expand page options dropdown + add fundamentals page on AI tooling

* update location

Author: kodster28

src/assets/images/style-guide/how-we-docs/page-options.png

@@ -16,6 +16,8 @@ import {
 	PiCheckCircleLight,
 	PiXCircleLight,
 	PiChatCircleLight,
+	PiLinkLight,
+	PiPlugsConnectedLight,
 } from "react-icons/pi";
 import ClaudeIcon from "./icons/ClaudeIcon";
 import ChatGPTIcon from "./icons/ChatGPTIcon";
@@ -58,6 +60,14 @@ export default function CopyPageButton() {
 		window.open(docsAIUrl, "_blank");
 	};
 
+	const handleViewAIOptions = () => {
+		const aiOptionsUrl = "/style-guide/ai-tooling/";
+		track("clicked copy page button", {
+			value: "view ai options",
+		});
+		window.open(aiOptionsUrl, "_blank");
+	};
+
 	const handleExternalAI = (url: string, vendor: string) => {
 		const externalAIURL = url;
 		const indexMdUrl = new URL("index.md", window.location.href).toString();
@@ -99,7 +109,34 @@ export default function CopyPageButton() {
 		}
 	};
 
+	const handleCopyPageLink = async () => {
+		try {
+			await navigator.clipboard.writeText(window.location.href);
+			track("clicked copy page button", {
+				value: "copy page link",
+			});
+
+			setCopyState("success");
+			setTimeout(() => {
+				setCopyState("idle");
+			}, 1500);
+		} catch (error) {
+			console.error("Failed to copy page link:", error);
+
+			setCopyState("error");
+			setTimeout(() => {
+				setCopyState("idle");
+			}, 1500);
+		}
+	};
+
 	const options = [
+		{
+			label: "Copy page link",
+			description: "Copy the current page URL to clipboard",
+			icon: PiLinkLight,
+			onClick: handleCopyPageLink,
+		},
 		{
 			label: "View Page as Markdown",
 			description: "Open the Markdown file in a new tab",
@@ -119,6 +156,12 @@ export default function CopyPageButton() {
 			onClick: () =>
 				handleExternalAI("https://chat.openai.com/?prompt=", "chatgpt"),
 		},
+		{
+			label: "View other AI options",
+			description: "Explore more AI tooling options",
+			icon: PiPlugsConnectedLight,
+			onClick: handleViewAIOptions,
+		},
 		{
 			label: "Ask Docs AI",
 			description: "Open our Docs AI assistant in a new tab",

src/components/CopyPageButton.tsx

@@ -0,0 +1,54 @@
+---
+pcx_content_type: reference
+title: AI Tooling
+sidebar:
+  order: 4
+---
+
+import { Render, Tabs, TabItem } from "~/components";
+
+Use the following AI tools to get the most out of Cloudflare (and our docs).
+
+## llms.txt
+
+<Render file="llms-txt" product="style-guide" />
+
+## MCP
+
+Cloudflare runs a catalog of managed remote MCP Servers which you can connect to using OAuth on clients like [Claude](https://modelcontextprotocol.io/quickstart/user), [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp), our own [AI Playground](https://playground.ai.cloudflare.com/) or any [SDK that supports MCP](https://github.com/cloudflare/agents/tree/main/packages/agents/src/mcp).
+
+<Tabs>
+	<TabItem label="Cursor">
+
+    To install in Cursor, use this [Direct install link](https://cursor.com/en-US/install-mcp?name=cloudflare&config=eyJjb21tYW5kIjoibnB4IG1jcC1yZW1vdGUgaHR0cHM6Ly9kb2NzLm1jcC5jbG91ZGZsYXJlLmNvbS9zc2UifQ%3D%3D).
+
+    </TabItem>
+    <TabItem label="VSCode">
+
+    To install in VSCode, use this [Direct install link](vscode:mcp/install?%7B%22name%22%3A%22cloudflare%22%2C%22url%22%3A%22https%3A%2F%2Fdocs.mcp.cloudflare.com%2Fmcp%22%7D).
+
+    </TabItem>
+    <TabItem label="Manually">
+
+    To install manually, add the following specification to your MCP config:
+
+    ```json
+    	{
+    		"mcpServers": {
+    				"cloudflare": {
+    				"command": "npx",
+    				"args": ["mcp-remote", "https://docs.mcp.cloudflare.com/mcp"]
+    			}
+    		}
+    	}
+    ```
+
+    </TabItem>
+
+</Tabs>
+
+:::note
+
+For other MCP servers offered by Cloudflare, refer to [Cloudflare's MCP servers](/agents/model-context-protocol/mcp-servers-for-cloudflare/).
+
+:::

src/content/docs/style-guide/ai-tooling.mdx

@@ -5,30 +5,15 @@ meta:
   title: AI consumability | How we docs
 ---
 
-import { Tabs, TabItem, Width } from "~/components";
+import { Tabs, TabItem, Render } from "~/components";
 
 We have various approaches for making our content visible to AI as well as making sure it's easily consumed in a plain-text format.
 
 ## AI discoverability
 
 The primary proposal in this space is [`llms.txt`](https://llmstxt.org/), offering a well-known path for a Markdown list of all your pages.
 
-We have implemented `llms.txt`, `llms-full.txt` and also created per-page Markdown links as follows:
-
-- [`llms.txt`](/llms.txt)
-- [`llms-full.txt`](/llms-full.txt)
-  - We also provide a `llms-full.txt` file on a per-product basis, i.e [`/workers/llms-full.txt`](/workers/llms-full.txt)
-- [`/$page/index.md`](index.md)
-  - Add `/index.md` to the end of any page to get the Markdown version, i.e [`/style-guide/index.md`](/style-guide/index.md)
-- [`/markdown.zip`](/markdown.zip)
-  - An export of all of our documentation in the aforementioned `index.md` format.
-
-In the top right of this page, you will see a `Page options` button where you can copy the current page as Markdown that can be given to your LLM of choice.
-
-<Width size="medium">
-	![Page options
-	button](~/assets/images/style-guide/how-we-docs/page-options.png)
-</Width>
+<Render file="llms-txt" product="style-guide" />
 
 ## Textual representation of interactive elements
 

src/content/docs/style-guide/how-we-docs/ai-consumability.mdx

@@ -0,0 +1,22 @@
+---
+{}
+---
+
+import { Width } from "~/components";
+
+We have implemented `llms.txt`, `llms-full.txt` and also created per-page Markdown links as follows:
+
+- [`llms.txt`](/llms.txt)
+- [`llms-full.txt`](/llms-full.txt)
+  - We also provide a `llms-full.txt` file on a per-product basis, i.e [`/workers/llms-full.txt`](/workers/llms-full.txt)
+- [`/$page/index.md`](index.md)
+  - Add `/index.md` to the end of any page to get the Markdown version, i.e [`/style-guide/index.md`](/style-guide/index.md)
+- [`/markdown.zip`](/markdown.zip)
+  - An export of all of our documentation in the aforementioned `index.md` format.
+
+In the top right of this page, you will see a `Page options` button where you can copy the current page as Markdown that can be given to your LLM of choice.
+
+<Width size="medium">
+	![Page options
+	button](~/assets/images/style-guide/how-we-docs/page-options.png)
+</Width>