Update step 1

maxvp · maxvp · commit 21697c343884 · 2025-04-16T13:46:47.000-05:00
diff --git a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx
@@ -2,81 +2,89 @@
 updated: 2025-04-15
 category: 🔐 Zero Trust
 pcx_content_type: tutorial
-title: Build an AI Agent Wrapper using Workers AI Gateway for Tenant Control and Gateway filtering
+title: Create an AI agent wrapper using AI Gateway for Secure Web Gateway filtering and tenant control
 ---
 
-## Introduction
+import { TabItem, Tabs, Details } from "~/components";
 
-This tutorial provides a step-by-step guide on how to leverage Cloudflare Workers AI Gateway to create a functional and secure AI Assistant Wrapper. This way, Cloudflare Zero Trust customers are able to enforce Secure Web Gateway controls on how their users interact with AI agents, including Remote Browser Isolation, enforcement of DLP Profiles to prevent sensitive data leakage to the agents, and content scanning controls to avoid getting answers from AI agents that violate internal corporate guidelines.
+This tutorial explains how to use [Cloudflare AI Gateway](/ai-gateway/) and Zero Trust to create a functional and secure AI agent wrapper. Cloudflare Zero Trust admins can enforce [Gateway](/cloudflare-one/policies/gateway/) controls on how their users interact with AI agents, including executing AI agents in an isolated browser with [Browser Isolation](/cloudflare-one/policies/browser-isolation/), enforcing [Data Loss Prevention](/cloudflare-one/policies/data-loss-prevention/) profiles to prevent sensitive data exfiltration, and scanning content to avoid answers from AI agents that violate internal corporate guidelines. Creating an AI agent wrapper is also an effective way to enforce tenant control if you have an enterprise plan of a specific AI provider, such as ChatGPT Enterprise.
 
-This is also an effective way to enforce tenant control if you happen to be a customer of premium tier of a specific AI provider such as ChatGPT Enterprise.
+This tutorial uses ChatGPT as an example AI agent.
 
 ## Prerequisites
 
-- API key to authenticate the consumption of the desired AI provider, such as OpenAI API key for ChatGPT.
+- API key for your desired AI provider, such as an [OpenAI API key](https://platform.openai.com/api-keys) for ChatGPT.
 
-## 1. Create an AI Gateway
+## 1. Create an AI gateway
+
+First, create an AI gateway to control an AI app.
 
 1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. Go to **AI** > **AI Gateway**.
-3. Select **Create gateway**.
-4. Give your Gateway a name, and toggle the options you want.
+3. Select **Create Gateway**.
+4. Name your gateway.
 5. Select **Create**.
-6. Follow [our documentation](https://developers.cloudflare.com/ai-gateway/get-started/) to understand how to proxy queries to your AI agent of choice via your **AI Gateway**.
-7. (Optional) The [**Authenticated Gateway**](https://developers.cloudflare.com/ai-gateway/configuration/authentication/) feature ensures your AI Gateway can only be called securely by enforcing a token in the form of a request header `cf-aig-authorization`.
-   1. To do this, go to **AI** > **AI Gateway** > **Settings** and toggle **Authenticated Gateway**.
-   2. When creating your Worker, you will need to pass this token through when calling your AI Gateway.
+6. Configure your desired options for the gateway.
+7. [Connect your AI provider](/ai-gateway/get-started/#connect-application) to proxy queries to your AI agent of choice using your AI gateway.
+8. Turn on [Authenticated Gateway](/ai-gateway/configuration/authentication/). The Authenticated Gateway feature ensures your AI gateway can only be called securely by enforcing a token in the form of a request header `cf-aig-authorization`.
+   1. Go to **AI** > **AI Gateway**.
+   2. Select your AI gateway, then go to **Settings**.
+   3. Turn on **Authenticated Gateway**, then choose **Confirm**.
+   4. Select **Create authentication token**, then select **Create an AI Gateway authentication token**.
+   5. Configure your token and copy the token value. When creating your Worker, you will need to pass this token when calling your AI gateway.
+
+For more information, refer to [Getting started with AI Gateway](/ai-gateway/get-started/).
 
-### (Optional) Use Guardrails to block unsafe or inappropriate content
+### 2. (Optional) Use Guardrails to block unsafe or inappropriate content
 
-[**Guardrails**](https://developers.cloudflare.com/ai-gateway/guardrails/) is an AI Gateway built-in security feature that allows Cloudflare to identify unsafe or inappropriate content in prompts and responses based on selected categories.
+[Guardrails](/ai-gateway/guardrails/) is an built-in AI Gateway security feature that allows Cloudflare to identify unsafe or inappropriate content in prompts and responses based on selected categories.
 
 1. Go to **AI** > **AI Gateway**.
-2. Select your Gateway.
-3. Go to the **Guardrails** tab.
-4. Select the toggle to enable Guardrails.
-5. Select the categories you would like to filter, for both prompts and responses.
+2. Select your AI gateway.
+3. Go to **Guardrails**.
+4. Turn on Guardrails.
+5. Select **Change** to configure the categories you would like to filter for both prompts and responses.
 
-## 2. Create a Worker to serve a wrapper
+## 3. Create a Worker to serve a wrapper
 
-In order to build the Worker, you will need to choose if you want to build it locally using [**Wrangler**](https://developers.cloudflare.com/workers/wrangler/install-and-update/) or remotely using the [**Dash**](https://dash.cloudflare.com/).
+In order to build the Worker, you will need to choose if you want to build it locally using [Wrangler](/workers/wrangler/install-and-update/) or remotely using the [dashboard](https://dash.cloudflare.com/).
 
-### Option 1: Build a Worker locally using Wrangler
+<Tabs> <TabItem label="Wrangler">
 
 1. Log in to your Cloudlare account:
 
-```bash
-wrangler login
-```
+   ```bash
+   wrangler login
+   ```
 
 2. Initiate the project locally:
 
-```bash
-mkdir ai-agent-wrapper
-cd ai-agent-wrapper
-wrangler init
-```
+   ```bash
+   mkdir ai-agent-wrapper
+   cd ai-agent-wrapper
+   wrangler init
+   ```
 
 3. Create a `wrangler.toml` configuration file:
 
-```toml
-name = "ai-agent-wrapper"
-main = "src/index.js"
-compatibility_date = "2023-10-30"
+   ```toml
+   name = "ai-agent-wrapper"
+   main = "src/index.js"
+   compatibility_date = "2023-10-30"
 
-[vars]
-# Add any environment variables here
-```
+   [vars]
+   # Add any environment variables here
+   ```
 
 4. Add your AI provider API Key as a secret:
 
-```bash
-wrangler secret put OPENAI_API_KEY
-```
+   ```bash
+   wrangler secret put OPENAI_API_KEY
+   ```
 
 5. The Worker can now be built using the `index.js` file that was created by **Wrangler**.
 
-### Option 2: Build a Worker remotely using the Dash
+</TabItem> <TabItem label="Dashboard">
 
 1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
 2. Go to **Workers & Pages** > **Workers & Pages**.
@@ -88,9 +96,13 @@ wrangler secret put OPENAI_API_KEY
 8. Choose **Secret** as the type, give your variable a name such as `OPENAI_API_KEY`, and past the value of your AI provider API key in the **Value** field.
 9. The Worker can now be built by using the online code editor by clicking the **Edit code** icon at the top-right.
 
+</TabItem> </Tabs>
+
 ### Build the Worker
 
-The following is an example starter Worker that serves a simple front-end to allow a user to interact with an AI provider behind **AI Gateway**. For this example, Open AI was used as the provider.
+The following is an example starter Worker that serves a simple front-end to allow a user to interact with an AI provider behind **AI Gateway**. For this example, OpenAI was used as the provider:
+
+<Details header="Example Worker">
 
 ```javascript
 export default {
@@ -101,7 +113,7 @@ export default {
 					const { messages } = await request.json();
 
 					const response = await fetch(
-						"https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai/chat/completions",
+						"https://gateway.ai.cloudflare.com/v1/<ACCOUNT_ID>/<GATEWAY_ID>/openai/chat/completions",
 						{
 							method: "POST",
 							headers: {
@@ -326,6 +338,8 @@ const HTML = `<!DOCTYPE html>
   </html>`;
 ```
 
+</Details>
+
 Notice that the **Account ID** and the **Gateway ID** need to be replaced in the AI Gateway endpoint. You can add these as environment variables or Secrets. If you chose to use the **Authenticated Gateway** option when creating your AI Gateway, make sure to also add your token as a Secret and pass its value through to the AI Gateway in the form of the `cf-aig-authorization` header.
 
 This Worker can serve as a starting point and extra functionality can be built on top.
@@ -334,7 +348,7 @@ This Worker can serve as a starting point and extra functionality can be built o
 
 Once the Worker is code is completed, it is almost ready to be published. We now need to make the Worker addressable via a hostname that can be controlled by Cloudlare Access.
 
-#### Option 1: Worker built locally using Wrangler
+<Tabs> <TabItem label="Wrangler">
 
 Edit the `wrangler.toml` configuration file and add the following information to ensure that the worker is only accessible via the custom hostname.
 
@@ -355,7 +369,7 @@ routes = [
 
 To publish the worker do: `wrangler publish`.
 
-#### Option 2: Worker built remotely using the Dash
+</TabItem> <TabItem label="Dashboard">
 
 If the worker was built remotely using the online code editor available in the **Dash**, it can be published by clicking **Deploy**.
 
@@ -364,13 +378,15 @@ In order to ensure that the worker is only accessible via the custom hostname, d
 2. Go to **Workers & Pages** > **Workers & Pages**.
 3. Select your Worker.
 4. Select the **Settings** tab.
-5. Within the **Domains & Routes** section, select **+ Add**.
+5. Within the **Domains & Routes** section, select **Add**.
 6. Choose **Custom domain (Recommended)** (**Route** is also a viable option).
 7. Add your desired custom domain name.
 8. Select **Add domain**.
 
 The Worker now sits behind an addressable public hostname. Make sure to disable both your **workers.dev** and **Preview URLs** so that the Worker can only be accessed via its **Custom domain**.
 
+</TabItem> </Tabs>
+
 ## Secure the AI Agent Wrapper using Access
 
 We need to secure our AI Agent Wrapper to ensure that only trusted users can access it. We will use [**Access**](https://developers.cloudflare.com/cloudflare-one/policies/access/) to achieve this.
@@ -393,7 +409,7 @@ If you use another gateway for web filtering, try to replicate a similar policy.
 
 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Gateway** > **Firewall policies**.
 2. Select **HTTP**.
-3. Select **+ Add a policy**.
+3. Select **Add a policy**.
 4. Under the **Traffic** section, select **Add condition**.
 5. Select **Content Categories**.
 6. Select **Artificial Intelligence**.
@@ -416,10 +432,10 @@ Since you have full control over access to your AI Agent wrapper, you can enforc
 2. Ensure that the DLP profiles you wish to enforce are properly configured.
 3. Then, go to **Gateway** > **Firewall policies**.
 4. Select **HTTP**.
-5. Select **+ Add a policy**.
+5. Select **Add a policy**.
 6. Under the **Traffic** section, select **Add condition**.
 7. Select **Host** and enter the custom domain of your AI Agent Wrapper.
-8. Select **+ Add** to add another condition.
+8. Select **Add** to add another condition.
 9. Select **DLP Profile** and choose the DLP profiles you would like to enforce.
 10. Add any other conditions that apply to your environment.
 11. Under **Action**, select **Block**.
@@ -454,7 +470,7 @@ Organizations that adopt Cloudflare to secure access to AI agents as exemplified
 
 All [access events](https://developers.cloudflare.com/cloudflare-one/insights/logs/audit-logs/) to the AI wrapper and [DLP violations](https://developers.cloudflare.com/cloudflare-one/insights/logs/gateway-logs/#http-logs) will be logged in Cloudflare's dashboard. In addition, AI gateway provides [visibility](https://developers.cloudflare.com/ai-gateway/observability/logging/) into user prompts, model response, token usage and costs.
 
-Finally, all the logs can be easily exported to external systems using [logpush](https://developers.cloudflare.com/logs/).
+Finally, all the logs can be easily exported to external systems using [Logpush](https://developers.cloudflare.com/logs/).
 
 ### Cost control and agility
 
