hid overviews on ai gateway (#16476)

* hid overviews

* spelling error fixed

* hid overview on pages

* Update src/content/docs/ai-gateway/providers/vertex.mdx

Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>

* Update src/content/docs/ai-gateway/tutorials/index.mdx

Fixed hide overview

Co-authored-by: Jun Lee <[email protected]>

* Corrected issues on overview

---------

Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>
Co-authored-by: Jun Lee <[email protected]>

Author: 3 people

.vscode/settings.json

@@ -2,5 +2,6 @@
 	"astro.content-intellisense": true,
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"typescript.tsdk": "node_modules/typescript/lib"
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"cSpell.enableFiletypes": ["mdx"]
 }

src/content/docs/ai-gateway/configuration/index.mdx

@@ -2,11 +2,12 @@
 pcx_content_type: navigation
 title: Configuration
 sidebar:
+  group:
+    hideIndex: true
   order: 5
-
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
 
 Configure your AI Gateway with multiple options and customizations.
 

src/content/docs/ai-gateway/demos.mdx

@@ -2,16 +2,24 @@
 pcx_content_type: navigation
 title: Architectures
 sidebar:
-  order: 5
-
+  group:
+    hideIndex: true
+    order: 5
 ---
 
-import { GlossaryTooltip, ResourcesBySelector } from "~/components"
+import { GlossaryTooltip, ResourcesBySelector } from "~/components";
 
 Learn how you can use AI Gateway within your existing architecture.
 
 ## Reference architectures
 
 Explore the following <GlossaryTooltip term="reference architecture">reference architectures</GlossaryTooltip> that use AI Gateway:
 
-<ResourcesBySelector types={["reference-architecture","design-guide","reference-architecture-diagram"]} products={["AI Gateway"]} />
+<ResourcesBySelector
+	types={[
+		"reference-architecture",
+		"design-guide",
+		"reference-architecture-diagram",
+	]}
+	products={["AI Gateway"]}
+/>

src/content/docs/ai-gateway/get-started.mdx

@@ -4,20 +4,19 @@ title: Get started
 updated: 2024-06-19
 sidebar:
   order: 2
-
 ---
 
-
-
-import { Details, DirectoryListing, LinkButton, Render } from "~/components"
+import { Details, DirectoryListing, LinkButton, Render } from "~/components";
 
 In this guide, you will learn how to create your first AI Gateway. You can create multiple gateways to control different applications.
 
 ## Prerequisites
 
 Before you get started, you need a Cloudflare account.
 
-<LinkButton variant="primary" href="https://dash.cloudflare.com/sign-up">Sign up</LinkButton>
+<LinkButton variant="primary" href="https://dash.cloudflare.com/sign-up">
+	Sign up
+</LinkButton>
 
 ## Create gateway
 
@@ -31,37 +30,33 @@ Next, connect your AI provider to your gateway.
 
 AI Gateway offers multiple endpoints for each Gateway you create - one endpoint per provider, and one Universal Endpoint.
 
-
 <Details header="Supported providers">
 
 <DirectoryListing folder="ai-gateway/providers" />
 
-
 </Details>
 
 If you do not have a provider preference, start with one of our dedicated tutorials.
 
-
 <Details header="Onboarding tutorials">
 
-* [OpenAI](/ai-gateway/tutorials/deploy-aig-worker/)
-* [Worker AI](/ai-gateway/tutorials/create-first-aig-workers/)
-
+- [OpenAI](/ai-gateway/tutorials/deploy-aig-worker/)
+- [Worker AI](/ai-gateway/tutorials/create-first-aig-workers/)
 
 </Details>
 
 ## View analytics
 
 Now that your provider is connected to the AI Gateway, you can view analytics for requests going through your gateway.
 
-<Render file="analytics-overview" /> <br/>
+<Render file="analytics-overview" /> <br />
 
 <Render file="analytics-dashboard" />
 
 <Render file="analytics-warning" />
 
 ## Next steps
 
-* Learn more about [caching](/ai-gateway/configuration/caching/) for faster requests and cost savings and [rate limiting](/ai-gateway/configuration/rate-limiting/) to control how your application scales.
-* Explore how to specify model or provider [fallbacks](/ai-gateway/configuration/fallbacks/) for resiliency.
-* Learn how to use low-cost, open source models on [Workers AI](/ai-gateway/providers/workersai/) - our AI inference service.
+- Learn more about [caching](/ai-gateway/configuration/caching/) for faster requests and cost savings and [rate limiting](/ai-gateway/configuration/rate-limiting/) to control how your application scales.
+- Explore how to specify model or provider [fallbacks](/ai-gateway/configuration/fallbacks/) for resiliency.
+- Learn how to use low-cost, open source models on [Workers AI](/ai-gateway/providers/workersai/) - our AI inference service.

src/content/docs/ai-gateway/providers/anthropic.mdx

@@ -1,10 +1,9 @@
 ---
 title: Anthropic
 pcx_content_type: get-started
-
 ---
 
-[Anthropic](https://www.anthropic.com/) helps  build reliable, interpretable, and steerable AI systems.
+[Anthropic](https://www.anthropic.com/) helps build reliable, interpretable, and steerable AI systems.
 
 ## Endpoint
 
@@ -29,25 +28,25 @@ curl https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/anthropic/v1
 If you are using the `@anthropic-ai/sdk`, you can set your endpoint like this:
 
 ```js title="JavaScript"
-import Anthropic from '@anthropic-ai/sdk';
+import Anthropic from "@anthropic-ai/sdk";
 
 const apiKey = env.ANTHROPIC_API_KEY;
-const accountId = '{account_id}';
-const gatewayId = '{gateway_id}';
+const accountId = "{account_id}";
+const gatewayId = "{gateway_id}";
 const baseURL = `https://gateway.ai.cloudflare.com/v1/${accountId}/${gatewayId}/anthropic`;
 
 const anthropic = new Anthropic({
-  apiKey,
-  baseURL,
+	apiKey,
+	baseURL,
 });
 
-const model = 'claude-3-opus-20240229';
+const model = "claude-3-opus-20240229";
 const messages = [{ role: "user", content: "What is Cloudflare?" }];
 const maxTokens = 1024;
 
 const message = await anthropic.messages.create({
-  model,
-  messages,
-  max_tokens: maxTokens,
+	model,
+	messages,
+	max_tokens: maxTokens,
 });
 ```

src/content/docs/ai-gateway/providers/azureopenai.mdx

@@ -1,7 +1,6 @@
 ---
 title: Azure OpenAI
 pcx_content_type: get-started
-
 ---
 
 [Azure OpenAI](https://azure.microsoft.com/en-gb/products/ai-services/openai-service/) allows you apply natural language algorithms on your data.
@@ -14,11 +13,11 @@ pcx_content_type: get-started
 
 When making requests to Azure OpenAI, you will need:
 
-* AI Gateway account ID
-* AI Gateway gateway name
-* Azure OpenAI API key
-* Azure OpenAI resource name
-* Azure OpenAI deployment name (aka model name)
+- AI Gateway account ID
+- AI Gateway gateway name
+- Azure OpenAI API key
+- Azure OpenAI resource name
+- Azure OpenAI deployment name (aka model name)
 
 ## URL structure
 
@@ -45,19 +44,18 @@ If you are using the `openai-node` library, you can set your endpoint like this:
 ```js title="JavaScript"
 import OpenAI from "openai";
 
-const resource = 'xxx';
-const model = 'xxx';
-const apiVersion = 'xxx';
+const resource = "xxx";
+const model = "xxx";
+const apiVersion = "xxx";
 const apiKey = env.AZURE_OPENAI_API_KEY;
-const accountId = '{account_id}';
-const gatewayId = '{gateway_id}';
+const accountId = "{account_id}";
+const gatewayId = "{gateway_id}";
 const baseURL = `https://gateway.ai.cloudflare.com/v1/${accountId}/${gatewayId}/azure-openai/${resource}/${model}`;
 
 const azure_openai = new OpenAI({
-  apiKey,
-  baseURL,
-  defaultQuery: { 'api-version': apiVersion },
-  defaultHeaders: { 'api-key': apiKey },
+	apiKey,
+	baseURL,
+	defaultQuery: { "api-version": apiVersion },
+	defaultHeaders: { "api-key": apiKey },
 });
-
 ```

src/content/docs/ai-gateway/providers/bedrock.mdx

@@ -4,7 +4,6 @@ pcx_content_type: get-started
 sidebar:
   badge:
     text: Beta
-
 ---
 
 [Amazon Bedrock](https://aws.amazon.com/bedrock/) allows you to build and scale generative AI applications with foundation models.
@@ -22,66 +21,74 @@ With Bedrock, you will need to sign the URL before you make requests to AI Gatew
 ## Example:
 
 ```typescript
-import { AwsClient } from 'aws4fetch'
+import { AwsClient } from "aws4fetch";
 
 interface Env {
-  accessKey: string;
-  secretAccessKey: string;
+	accessKey: string;
+	secretAccessKey: string;
 }
 
 export default {
-  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
-
-    // replace with your configuration
-    const cfAccountId = "{account_id}";
-    const gatewayName = "{gateway_id}";
-    const region = 'us-east-1';
-
-    // added as secrets (https://developers.cloudflare.com/workers/configuration/secrets/)
-    const accessKey = env.accessKey;
-    const secretKey = env.secretAccessKey;
-
-    const requestData = {
-      inputText: "What does ethereal mean?"
-    };
-
-    const headers = {
-      'Content-Type': 'application/json'
-    };
-
-    // sign the original request
-    const stockUrl = new URL("https://bedrock-runtime.us-east-1.amazonaws.com/model/amazon.titan-embed-text-v1/invoke")
-
-    const awsClient = new AwsClient({
-      accessKeyId: accessKey,
-      secretAccessKey: secretKey,
-      region: region,
-      service: "bedrock"
-    });
-
-    const presignedRequest = await awsClient.sign(stockUrl.toString(), {
-      method: "POST",
-      headers: headers
-    });
-
-    // change the signed request's host to AI Gateway
-    const stockUrlSigned = new URL(presignedRequest.url);
-    stockUrlSigned.host = "gateway.ai.cloudflare.com"
-    stockUrlSigned.pathname = `/v1/${cfAccountId}/${gatewayName}/aws-bedrock/bedrock-runtime/${region}/model/amazon.titan-embed-text-v1/invoke`
-
-    // make request
-    const response = await fetch(stockUrlSigned, {
-      method: 'POST',
-      headers: presignedRequest.headers,
-      body: JSON.stringify(requestData)
-    })
-
-    if (response.ok && response.headers.get('content-type')?.includes('application/json')) {
-      const data = await response.json();
-      return new Response(JSON.stringify(response));
-    } else {
-      return new Response("Invalid response", { status: 500 });
-    }
-  },
+	async fetch(
+		request: Request,
+		env: Env,
+		ctx: ExecutionContext,
+	): Promise<Response> {
+		// replace with your configuration
+		const cfAccountId = "{account_id}";
+		const gatewayName = "{gateway_id}";
+		const region = "us-east-1";
+
+		// added as secrets (https://developers.cloudflare.com/workers/configuration/secrets/)
+		const accessKey = env.accessKey;
+		const secretKey = env.secretAccessKey;
+
+		const requestData = {
+			inputText: "What does ethereal mean?",
+		};
+
+		const headers = {
+			"Content-Type": "application/json",
+		};
+
+		// sign the original request
+		const stockUrl = new URL(
+			"https://bedrock-runtime.us-east-1.amazonaws.com/model/amazon.titan-embed-text-v1/invoke",
+		);
+
+		const awsClient = new AwsClient({
+			accessKeyId: accessKey,
+			secretAccessKey: secretKey,
+			region: region,
+			service: "bedrock",
+		});
+
+		const presignedRequest = await awsClient.sign(stockUrl.toString(), {
+			method: "POST",
+			headers: headers,
+		});
+
+		// change the signed request's host to AI Gateway
+		const stockUrlSigned = new URL(presignedRequest.url);
+		stockUrlSigned.host = "gateway.ai.cloudflare.com";
+		stockUrlSigned.pathname = `/v1/${cfAccountId}/${gatewayName}/aws-bedrock/bedrock-runtime/${region}/model/amazon.titan-embed-text-v1/invoke`;
+
+		// make request
+		const response = await fetch(stockUrlSigned, {
+			method: "POST",
+			headers: presignedRequest.headers,
+			body: JSON.stringify(requestData),
+		});
+
+		if (
+			response.ok &&
+			response.headers.get("content-type")?.includes("application/json")
+		) {
+			const data = await response.json();
+			return new Response(JSON.stringify(response));
+		} else {
+			return new Response("Invalid response", { status: 500 });
+		}
+	},
 };
 ```

src/content/docs/ai-gateway/providers/cohere.mdx

@@ -1,7 +1,6 @@
 ---
 title: Cohere
 pcx_content_type: get-started
-
 ---
 
 [Cohere](https://cohere.com/) build AI models designed to solve real-world business challenges.