Use packagemanagers for everything (#22506)

Author: GregBrimble

src/components/PackageManagers.astro

@@ -0,0 +1,13 @@
+---
+import {
+	PackageManagers as PackageManagersComponent,
+	type PackageManagersProps,
+} from "starlight-package-managers";
+
+type Props = PackageManagersProps;
+---
+
+<PackageManagersComponent
+	pkgManagers={["npm", "yarn", "pnpm", "bun"]}
+	{...Astro.props}
+/>

src/components/index.ts

@@ -2,7 +2,6 @@
 export * from "@astrojs/starlight/components";
 export { Icon as StarlightIcon } from "@astrojs/starlight/components";
 // Community packages
-export { PackageManagers } from "starlight-package-managers";
 export { Icon as AstroIcon } from "astro-icon/components";
 // Custom components
 export { default as AnchorHeading } from "./AnchorHeading.astro";
@@ -34,6 +33,7 @@ export { default as ListTutorials } from "./ListTutorials.astro";
 export { default as Markdown } from "./Markdown.astro";
 export { default as MetaInfo } from "./MetaInfo.astro";
 export { default as NetworkMap } from "./NetworkMap.astro";
+export { default as PackageManagers } from "./PackageManagers.astro";
 export { default as PagesBuildEnvironment } from "./PagesBuildEnvironment.astro";
 export { default as PagesBuildEnvironmentLanguages } from "./PagesBuildEnvironmentLanguages.astro";
 export { default as PagesBuildEnvironmentTools } from "./PagesBuildEnvironmentTools.astro";

src/content/docs/agents/api-reference/browse-the-web.mdx

@@ -5,7 +5,14 @@ sidebar:
   order: 7
 ---
 
-import { MetaInfo, Render, Type, TypeScriptExample, WranglerConfig } from "~/components";
+import {
+	MetaInfo,
+	Render,
+	Type,
+	TypeScriptExample,
+	WranglerConfig,
+	PackageManagers,
+} from "~/components";
 
 Agents can browse the web using the [Browser Rendering](/browser-rendering/) API or your preferred headless browser service.
 
@@ -30,8 +37,11 @@ export class MyAgent extends Agent<Env> {
 			const page = await browser.newPage();
 			await page.goto(url);
 
-			await page.waitForSelector('body');
-			const bodyContent = await page.$eval('body', (element) => element.innerHTML);
+			await page.waitForSelector("body");
+			const bodyContent = await page.$eval(
+				"body",
+				(element) => element.innerHTML,
+			);
 			const client = new OpenAI({
 				apiKey: this.env.OPENAI_API_KEY,
 			});
@@ -40,12 +50,12 @@ export class MyAgent extends Agent<Env> {
 				model: this.env.MODEL,
 				messages: [
 					{
-						role: 'user',
+						role: "user",
 						content: `Return a JSON object with the product names, prices and URLs with the following format: { "name": "Product Name", "price": "Price", "url": "URL" } from the website content below. <content>${bodyContent}</content>`,
 					},
 				],
 				response_format: {
-					type: 'json_object',
+					type: "json_object",
 				},
 			});
 
@@ -62,19 +72,17 @@ export class MyAgent extends Agent<Env> {
 
 You'll also need to add install the `@cloudflare/puppeteer` package and add the following to the wrangler configuration of your Agent:
 
-```sh
-npm install @cloudflare/puppeteer --save-dev
-```
+<PackageManagers pkg="@cloudflare/puppeteer" dev />
 
 <WranglerConfig>
 
 ```jsonc
 {
 	// ...
 	"browser": {
-    "binding": "MYBROWSER"
-  }
-  // ...
+		"binding": "MYBROWSER",
+	},
+	// ...
 }
 ```
 
@@ -90,6 +98,7 @@ Once you have your [Browserbase API key](https://docs.browserbase.com/integratio
 cd your-agent-project-folder
 npx wrangler@latest secret put BROWSERBASE_API_KEY
 ```
+
 ```sh output
 Enter a secret value: ******
 Creating the secret for the Worker "agents-example"
@@ -98,9 +107,7 @@ Success! Uploaded secret BROWSERBASE_API_KEY
 
 Install the `@cloudflare/puppeteer` package and use it from within your Agent to call the Browserbase API:
 
-```sh
-npm install @cloudflare/puppeteer
-```
+<PackageManagers pkg="@cloudflare/puppeteer" />
 
 <TypeScriptExample>