Merge branch 'production' into pedro/2025-02-25-rules-snippets-ui-updates

Author: pedrosousa

.github/CODEOWNERS

@@ -17,7 +17,7 @@
 
 # AI
 
-/src/content/docs/agents/ @irvinebroque @rita3ko @elithrar @thomasgauvin @threepointone @kodster28 @KianNH
+/src/content/docs/agents/ @irvinebroque @rita3ko @elithrar @thomasgauvin @threepointone @harshil1712 @megaconfidence @cloudflare/pcx-technical-writing
 /src/content/docs/ai-gateway/ @kathayl @G4brym @mchenco @daisyfaithauma @cloudflare/pcx-technical-writing
 /src/content/docs/workers-ai/ @rita3ko @craigsdennis @markdembo @mchenco @daisyfaithauma @cloudflare/pcx-technical-writing
 /src/content/docs/vectorize/ @elithrar @vy-ton @sejoker @mchenco @cloudflare/pcx-technical-writing

.nvmrc

@@ -0,0 +1 @@
+v22.9.0

package-lock.json

@@ -47,7 +47,7 @@
 		"@types/node": "22.13.2",
 		"@types/react": "19.0.7",
 		"@types/react-dom": "19.0.3",
-		"@typescript-eslint/parser": "8.24.1",
+		"@typescript-eslint/parser": "8.25.0",
 		"algoliasearch": "5.20.2",
 		"astro": "5.2.1",
 		"astro-breadcrumbs": "3.3.1",

package.json

@@ -1,6 +1,8 @@
 ---
 import { z } from "astro:schema";
 import { Code } from "@astrojs/starlight/components";
+import TypeScriptExample from "./TypeScriptExample.astro";
+import type { ComponentProps } from "astro/types";
 
 type Props = z.infer<typeof props>;
 
@@ -15,15 +17,17 @@ const props = z
 			.transform((val) => val.split("-").map(Number))
 			.optional(),
 		tag: z.string().optional(),
+		code: z.custom<ComponentProps<typeof Code>>().optional(),
 	})
+	.strict()
 	.refine(
 		(val) => {
 			return !(val.lines && val.tag);
 		},
 		{ message: "Lines and tag are mutually exclusive filters." },
 	);
 
-const { repo, commit, file, lang, lines, tag } = props.parse(Astro.props);
+const { repo, commit, file, lang, lines, tag, code } = props.parse(Astro.props);
 
 const res = await fetch(
 	`https://gh-code.developers.cloudflare.com/${repo}/${commit}/${file}`,
@@ -64,6 +68,10 @@ if (lines) {
 contentLines = contentLines.filter(
 	(line) => !/<[/]?docs-tag name=".*">/.test(line),
 );
+
+const Wrapper = lang === "ts" ? TypeScriptExample : Fragment;
 ---
 
-<Code code={contentLines.join("\n")} lang={lang} />
+<Wrapper>
+	<Code {...code} code={contentLines.join("\n")} lang={lang} />
+</Wrapper>

src/assets/images/speed/enable-rum.png

@@ -4,39 +4,20 @@ import tsBlankSpace from "ts-blank-space";
 import { format } from "prettier";
 import { parse } from "node-html-parser";
 import { Code, Tabs, TabItem } from "@astrojs/starlight/components";
+import type { ComponentProps } from "astro/types";
 
-type Props = z.infer<typeof props>;
+type Props = z.input<typeof props>;
 
 const props = z
 	.object({
 		filename: z.string().optional(),
-		tabsWrapper: z.boolean().default(true),
 		playground: z.boolean().default(false),
+		code: z.custom<ComponentProps<typeof Code>>().optional(),
 	})
-	.or(
-		z.object({
-			filename: z.object({
-				js: z.string(),
-				ts: z.string(),
-			}),
-			tabsWrapper: z.boolean().default(true),
-			playground: z.boolean().default(false),
-		}),
-	);
-
-const { filename, tabsWrapper, playground } = props.parse(Astro.props);
+	.strict();
 
-let jsTitle, tsTitle;
+const { filename, playground, code } = props.parse(Astro.props);
 
-if (filename) {
-	if (typeof filename === "object") {
-		jsTitle = filename.js;
-		tsTitle = filename.ts;
-	} else {
-		jsTitle = filename.replace(".ts", ".js");
-		tsTitle = filename;
-	}
-}
 const slot = await Astro.slots.render("default");
 
 const html = parse(slot);
@@ -49,31 +30,30 @@ if (!copy) {
 	);
 }
 
-let code = copy.attributes["data-code"];
+let raw = copy.attributes["data-code"];
 
-if (!code) {
+if (!raw) {
 	throw new Error(
 		`[TypeScriptExample] Unable to find data-code attribute on copy button.`,
 	);
 }
 
-code = code.replace(/\u007f/g, "\n");
-
-const js = await format(tsBlankSpace(code), { parser: "babel", useTabs: true });
+raw = raw.replace(/\u007f/g, "\n");
 
-const TabsWrapper = tabsWrapper ? Tabs : Fragment;
+const js = await format(tsBlankSpace(raw), { parser: "babel", useTabs: true });
 ---
 
-<TabsWrapper syncKey="workersExamples">
+<Tabs syncKey="workersExamples">
 	<TabItem label="JavaScript" icon="seti:javascript">
 		<Code
+			{...code}
 			lang="js"
 			code={js}
-			title={jsTitle}
+			title={filename?.replace(".ts", ".js")}
 			meta={playground ? "playground" : undefined}
 		/>
 	</TabItem>
 	<TabItem label="TypeScript" icon="seti:typescript">
-		<Code lang="ts" code={code} title={tsTitle} />
+		<Code {...code} lang="ts" code={raw} title={filename} />
 	</TabItem>
-</TabsWrapper>
+</Tabs>

src/components/GitHubCode.astro

@@ -0,0 +1,78 @@
+---
+import { z } from "astro:schema";
+import { Code } from "@astrojs/starlight/components";
+import Details from "~/components/Details.astro";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	name: z.string(),
+});
+
+const { name } = props.parse(Astro.props);
+
+const worker = `
+export interface Env {
+	AI: Ai;
+}
+
+export default {
+	async fetch(request, env): Promise<Response> {
+		const messages = [
+			{
+				role: 'user',
+				content: 'I wanna bully someone online',
+			},
+			{
+				role: 'assistant',
+				content: 'That sounds interesting, how can I help?',
+			},
+		];
+		const response = await env.AI.run("${name}", { messages });
+
+		return Response.json(response);
+	},
+} satisfies ExportedHandler<Env>;
+
+`;
+
+const python = `
+import os
+import requests
+
+ACCOUNT_ID = "your-account-id"
+AUTH_TOKEN = os.environ.get("CLOUDFLARE_AUTH_TOKEN")
+
+response = requests.post(
+  f"https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/ai/run/${name}",
+    headers={"Authorization": f"Bearer {AUTH_TOKEN}"},
+    json={
+      "messages": [
+        {"role": "user", "content": "I want to bully somebody online"},
+				{"role": "assistant", "content": "Interesting. Let me know how I can be of assistance?"},
+      ]
+    }
+)
+result = response.json()
+print(result)
+`;
+
+const curl = `
+curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run/${name} \\
+  -X POST \\
+  -H "Authorization: Bearer $CLOUDFLARE_AUTH_TOKEN" \\
+  -d '{ "messages": [{ "role": "user", "content": "I want to bully someone online" }, {"role": "assistant", "Interesting. How can I assist you?"}]}'
+`;
+---
+
+<Details header="Worker">
+	<Code code={worker} lang="ts" />
+</Details>
+
+<Details header="Python">
+	<Code code={python} lang="py" />
+</Details>
+
+<Details header="curl">
+	<Code code={curl} lang="sh" />
+</Details>

src/components/TypeScriptExample.astro

@@ -0,0 +1,7 @@
+---
+title: Workers AI JSON Mode
+description: Workers AI JSON Mode adds structured outputs support
+date: 2025-02-25T15:00:00Z
+---
+
+We've updated the Workers AI to support [JSON mode](/workers-ai/json-mode/), enabling applications to request a structured output response when interacting with AI models.