From 89e5d5fc777d6d64da67d4cba42502291e536e9c Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Tue, 15 Apr 2025 11:54:04 -0500 Subject: [PATCH 01/14] Initial commit --- .../tutorials/ai-wrapper-tenant-control.mdx | 463 ++++++++++++++++++ 1 file changed, 463 insertions(+) create mode 100644 src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx 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 new file mode 100644 index 00000000000000..80db0c16140c80 --- /dev/null +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -0,0 +1,463 @@ +--- +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 +--- + +## Introduction + +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 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. + +## Prerequisites + +- API key to authenticate the consumption of the desired AI provider, such as OpenAI API key for ChatGPT. + +## 1. Create an AI Gateway + +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. +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. + +### (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. + +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. 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/). + +### Option 1: Build a Worker locally using Wrangler + +1. Log in to your Cloudlare account: + +```bash +wrangler login +``` + +2. Initiate the project locally: + +```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" + +[vars] +# Add any environment variables here +``` + +4. Add your AI provider API Key as a secret: + +```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 + +1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. +2. Go to **Workers & Pages** > **Workers & Pages**. +3. Select **Create**. +4. Select **Workers** and the **Hello world** template. +5. Select **Deploy**. +6. Go to your Worker, select the **Settings** tab. +7. Within the **Variables and Secrets** section, select **Add**. +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. + +### 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. + +```javascript +export default { + async fetch(request, env) { + if (request.url.endsWith("/api/chat")) { + if (request.method === "POST") { + try { + const { messages } = await request.json(); + + const response = await fetch( + "https://gateway.ai.cloudflare.com/v1/{account_id}/{gateway_id}/openai/chat/completions", + { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${env.OPENAI_API_KEY}`, + }, + body: JSON.stringify({ + model: "gpt-4o-mini", + messages: messages, + }), + }, + ); + + if (!response.ok) { + throw new Error(`AI Gateway Error: ${response.status}`); + } + + const result = await response.json(); + return new Response( + JSON.stringify({ + response: result.choices[0].message.content, + }), + { + headers: { "Content-Type": "application/json" }, + }, + ); + } catch (error) { + return new Response(JSON.stringify({ error: error.message }), { + status: 500, + headers: { "Content-Type": "application/json" }, + }); + } + } + return new Response("Method not allowed", { status: 405 }); + } + + return new Response(HTML, { + headers: { "Content-Type": "text/html" }, + }); + }, +}; + +const HTML = ` + + + + + ChatGPT Wrapper + + + +
+
+

AI Assistant

+
+
+
+ + +
+
+ + + + `; +``` + +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. + +### Publish the Worker + +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 + +Edit the `wrangler.toml` configuration file and add the following information to ensure that the worker is only accessible via the custom hostname. + +```toml +name = "ai-agent-wrapper" +main = "src/index.js" +compatibility_date = "2023-10-30" +workers_dev = false + +# replace with your custom domain +routes = [ + { pattern = "", custom_domain = true } +] + +[vars] +# Add any environment variables here +``` + +To publish the worker do: `wrangler publish`. + +#### Option 2: Worker built remotely using the Dash + +If the worker was built remotely using the online code editor available in the **Dash**, it can be published by clicking **Deploy**. + +In order to ensure that the worker is only accessible via the custom hostname, do: + +2. Go to **Workers & Pages** > **Workers & Pages**. +3. Select your Worker. +4. Select the **Settings** tab. +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**. + +## 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. + +1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Access** > **Applications**. +2. Select **Add an application**. +3. Select **Self-hosted**. +4. Enter any name for your AI Agent Wrapper application,. +5. In Session Duration, choose how often the user's application token should expire. +6. Select **Add public hostname** and enter the **custom domain** of your AI Agent Wrapper Worker. +7. Add [Access policies](https://developers.cloudflare.com/cloudflare-one/policies/access/) to control who can connect to your application. + +Now your AI Wrapper can only be accessed by clients that successfully match your Access policies. Consult our [Zero Trust documentation](https://developers.cloudflare.com/cloudflare-one/applications/configure-apps/self-hosted-public-app/#1-add-your-application-to-access) to know more. + +## Block access to public AI agents using Gateway + +You can now block access to all unauthorized public AI agents by using the [**Secure Web Gateway[**(https://developers.cloudflare.com/cloudflare-one/policies/gateway/) to create a HTTP policy. + +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**. +4. Under the **Traffic** section, select **Add condition**. +5. Select **Content Categories**. +6. Select **Artificial Intelligence**. +7. Add any other conditions that apply to your environment. +8. Under **Action**, select **Block**. + +This ensures that public AI agents are not accessible using a managed endpoint. + +User coaching is also possible, by displaying a [custom block message](https://developers.cloudflare.com/cloudflare-one/policies/gateway/block-page/) or a [user notification](https://developers.cloudflare.com/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. + +## Enforce DLP and agentless RBI + +Since you have full control over access to your AI Agent wrapper, you can enforce extra security methods such as [**Data Loss Prevention**](https://developers.cloudflare.com/cloudflare-one/policies/data-loss-prevention/) and [**Remote Browser Isolation**](https://developers.cloudflare.com/cloudflare-one/policies/browser-isolation/). + +### Data Loss Prevention + +[**Data Loss Prevention**](https://developers.cloudflare.com/cloudflare-one/policies/data-loss-prevention/) can be used to avoid sensitive data to be used in prompts made to the AI agent. You will need to have an adequate HTTP policy in place for DLP to be enforced. + +1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **DLP** > **DLP profiles**. +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**. +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. +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**. + +### Agentless Remote Browser Isolation + +Since your AI Agent Wrapper has been published as a self-hosted Access application, we can enforce it to run as an isolated session by creating a new policy and attaching it to your application. + +1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Access** > **Policies**. +2. Select **Add a policy**. +3. Set the **Action** to **Allow**. +4. Within the **Add rules** section, add identity rules to define who the application should be isolated for. +5. Within the **Additional settings (optional)** section, tick the **Isolate application** toggle. + +Once policy has been created, you can now attach it to your AI Agent wrapper. + +1. Go to **Access** > **Applications**. +2. Select your AI Agent wrapper application. +3. Select **Configure**. +4. Go to the **Policies** tab. +5. Select **Select existing policies**. +6. Select the policy you previously created. +7. Make sure that the order of your policies is correct. + +Since agentless Remote Browser Isolation sessions honor your Secure Web Gateway HTTP policies, your DLP Profiles will be applied. + +## Additional benefits + +Organizations that adopt Cloudflare to secure access to AI agents as exemplified in this tutorial, will also benefit from improved visibility, better cost control and agility. + +### Visibility + +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/). + +### Cost control and agility + +The worker exemplified in this tutorial could be easily modified to use a [different AI provider](https://developers.cloudflare.com/ai-gateway/providers/) or give the user with the option to choose between multiple AI providers, including [AI models running directly on Cloudflare's global network](https://developers.cloudflare.com/workers-ai/). + +This enables organizations to better control costs related to AI usage and/or quickly adopt the latest innovations in the field without impacting the frontend users are accessing or the access controls already put in place. From 21697c3438843f68c210c1fec88d3ccb24e00264 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Tue, 15 Apr 2025 15:51:37 -0500 Subject: [PATCH 02/14] Update step 1 --- .../tutorials/ai-wrapper-tenant-control.mdx | 114 ++++++++++-------- 1 file changed, 65 insertions(+), 49 deletions(-) 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 index 80db0c16140c80..6c88ebe21c78f7 100644 --- 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 + 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 + 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. + + ### 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: + +
```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///openai/chat/completions", { method: "POST", headers: { @@ -326,6 +338,8 @@ const HTML = ` `; ``` +
+ 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 + 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 + 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**. + + ## 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 From 2a32c8a448859d41d8e5210f542536855aae4d91 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Wed, 16 Apr 2025 16:57:33 -0500 Subject: [PATCH 03/14] Update step 3 --- .../tutorials/ai-wrapper-tenant-control.mdx | 67 ++++++++++--------- 1 file changed, 34 insertions(+), 33 deletions(-) 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 index 6c88ebe21c78f7..06728b27efee46 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -7,7 +7,7 @@ title: Create an AI agent wrapper using AI Gateway for Secure Web Gateway filter import { TabItem, Tabs, Details } from "~/components"; -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 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 protect access to the wrapper with [Cloudflare Access](/cloudflare-one/policies/access/). Additionally, you can enforce [Gateway](/cloudflare-one/policies/gateway/) controls on how your 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 tutorial uses ChatGPT as an example AI agent. @@ -26,7 +26,7 @@ First, create an AI gateway to control an AI app. 5. Select **Create**. 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`. +8. (Optional) 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**. @@ -35,7 +35,7 @@ First, create an AI gateway to control an AI app. For more information, refer to [Getting started with AI Gateway](/ai-gateway/get-started/). -### 2. (Optional) Use Guardrails to block unsafe or inappropriate content +## 2. (Optional) Use Guardrails to block unsafe or inappropriate content [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. @@ -45,13 +45,15 @@ For more information, refer to [Getting started with AI Gateway](/ai-gateway/get 4. Turn on Guardrails. 5. Select **Change** to configure the categories you would like to filter for both prompts and responses. -## 3. Create a Worker to serve a wrapper +## 3. Build a Worker to serve the wrapper + +### 1. Create the Worker 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/). -1. Log in to your Cloudlare account: +1. In a terminal, log in to your Cloudflare account: ```bash wrangler login @@ -76,33 +78,34 @@ In order to build the Worker, you will need to choose if you want to build it lo # Add any environment variables here ``` -4. Add your AI provider API Key as a secret: +4. Add your AI provider's API key as a [secret](/workers/configuration/secrets/): ```bash - wrangler secret put OPENAI_API_KEY + wrangler secret put ``` -5. The Worker can now be built using the `index.js` file that was created by **Wrangler**. +You can now build the Worker using the `index.js` file created by Wrangler. -1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. +1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. 2. Go to **Workers & Pages** > **Workers & Pages**. 3. Select **Create**. -4. Select **Workers** and the **Hello world** template. -5. Select **Deploy**. -6. Go to your Worker, select the **Settings** tab. -7. Within the **Variables and Secrets** section, select **Add**. -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. +4. In **Workers**, choose the **Hello world** template. +5. Name your worker, then select **Deploy**. +6. Select your Worker, then go to the **Settings** tab. +7. Go to **Variables and Secrets**, then select **Add**. +8. Choose _Secret_ as the type, name your secret (for example, `OPENAI_API_KEY`), and enter the value of your AI provider's API key in **Value**. + +You can now build the Worker using the online code editor by selecting **Edit code** on your Worker page. -### Build the Worker +### 2. 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, OpenAI 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. This example uses OpenAI as its AI provider: -
+
```javascript export default { @@ -340,17 +343,15 @@ const HTML = `
-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. +Note that the account ID and gateway ID need to be replaced in the AI Gateway endpoint. You can add these as [environment variables](/workers/configuration/environment-variables/) or [secrets](/workers/configuration/secrets/) in Workers. If you chose to use Authenticated Gateway when creating your AI gateway, make sure to also add your token as a secret and pass its value to the AI gateway in the `cf-aig-authorization` header. -### Publish the Worker +### 3. Publish the Worker -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. +Once the Worker code is complete, you need to make the Worker addressable using a hostname controllable by Cloudflare Access. -Edit the `wrangler.toml` configuration file and add the following information to ensure that the worker is only accessible via the custom hostname. +Edit the `wrangler.toml` configuration file and add the following information to ensure that the worker is only accessible using the custom hostname: ```toml name = "ai-agent-wrapper" @@ -360,14 +361,14 @@ workers_dev = false # replace with your custom domain routes = [ - { pattern = "", custom_domain = true } + { pattern = "", custom_domain = true } ] [vars] # Add any environment variables here ``` -To publish the worker do: `wrangler publish`. +To publish the worker, run `wrangler publish`. @@ -377,19 +378,19 @@ 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**. -6. Choose **Custom domain (Recommended)** (**Route** is also a viable option). -7. Add your desired custom domain name. +4. Go to **Settings**. +5. Within **Domains & Routes**, select **Add**. +6. Choose **Custom domain**. +7. Enter 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**. +The Worker is now behind an addressable public hostname. Make sure to turn off both **workers.dev** and **Preview URLs** so that the Worker can only be accessed with its custom domain. -## Secure the AI Agent Wrapper using Access +## 4. Secure the wrapper with 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. +To secure the AI agent wrapper to ensure that only trusted users can access it: 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Access** > **Applications**. 2. Select **Add an application**. From 95aab120c14a1975701bc5e8bf495b2e99e34205 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Wed, 16 Apr 2025 17:06:02 -0500 Subject: [PATCH 04/14] Update step 4 --- .../tutorials/ai-wrapper-tenant-control.mdx | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) 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 index 06728b27efee46..f2ea9f669f74e2 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -394,17 +394,18 @@ To secure the AI agent wrapper to ensure that only trusted users can access it: 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Access** > **Applications**. 2. Select **Add an application**. -3. Select **Self-hosted**. -4. Enter any name for your AI Agent Wrapper application,. -5. In Session Duration, choose how often the user's application token should expire. -6. Select **Add public hostname** and enter the **custom domain** of your AI Agent Wrapper Worker. -7. Add [Access policies](https://developers.cloudflare.com/cloudflare-one/policies/access/) to control who can connect to your application. +3. Choose **Self-hosted**. +4. Enter a name for your AI agent wrapper application. +5. In **Session Duration**, choose when the user's application token should expire. +6. Select **Add public hostname** and enter the custom domain you set for your Worker. +7. [Configure your Access application](/cloudflare-one/applications/configure-apps/self-hosted-public-app/) for your Worker. +8. Add [Access policies](/cloudflare-one/policies/access/policy-management/) to control who can connect to your application. -Now your AI Wrapper can only be accessed by clients that successfully match your Access policies. Consult our [Zero Trust documentation](https://developers.cloudflare.com/cloudflare-one/applications/configure-apps/self-hosted-public-app/#1-add-your-application-to-access) to know more. +Now your AI wrapper can only be accessed by your users that successfully match your Access policies. -## Block access to public AI agents using Gateway +## 5. Block access to public AI agents with Gateway -You can now block access to all unauthorized public AI agents by using the [**Secure Web Gateway[**(https://developers.cloudflare.com/cloudflare-one/policies/gateway/) to create a HTTP policy. +You can now block access to all unauthorized public AI agents by using the [**Secure Web Gateway[**(/cloudflare-one/policies/gateway/) to create a HTTP policy. If you use another gateway for web filtering, try to replicate a similar policy. @@ -419,15 +420,15 @@ If you use another gateway for web filtering, try to replicate a similar policy. This ensures that public AI agents are not accessible using a managed endpoint. -User coaching is also possible, by displaying a [custom block message](https://developers.cloudflare.com/cloudflare-one/policies/gateway/block-page/) or a [user notification](https://developers.cloudflare.com/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. +User coaching is also possible, by displaying a [custom block message](/cloudflare-one/policies/gateway/block-page/) or a [user notification](/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. ## Enforce DLP and agentless RBI -Since you have full control over access to your AI Agent wrapper, you can enforce extra security methods such as [**Data Loss Prevention**](https://developers.cloudflare.com/cloudflare-one/policies/data-loss-prevention/) and [**Remote Browser Isolation**](https://developers.cloudflare.com/cloudflare-one/policies/browser-isolation/). +Since you have full control over access to your AI Agent wrapper, you can enforce extra security methods such as [**Data Loss Prevention**](/cloudflare-one/policies/data-loss-prevention/) and [**Remote Browser Isolation**](/cloudflare-one/policies/browser-isolation/). ### Data Loss Prevention -[**Data Loss Prevention**](https://developers.cloudflare.com/cloudflare-one/policies/data-loss-prevention/) can be used to avoid sensitive data to be used in prompts made to the AI agent. You will need to have an adequate HTTP policy in place for DLP to be enforced. +[**Data Loss Prevention**](/cloudflare-one/policies/data-loss-prevention/) can be used to avoid sensitive data to be used in prompts made to the AI agent. You will need to have an adequate HTTP policy in place for DLP to be enforced. 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **DLP** > **DLP profiles**. 2. Ensure that the DLP profiles you wish to enforce are properly configured. @@ -469,12 +470,12 @@ Organizations that adopt Cloudflare to secure access to AI agents as exemplified ### Visibility -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. +All [access events](/cloudflare-one/insights/logs/audit-logs/) to the AI wrapper and [DLP violations](/cloudflare-one/insights/logs/gateway-logs/#http-logs) will be logged in Cloudflare's dashboard. In addition, AI gateway provides [visibility](/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](/logs/). ### Cost control and agility -The worker exemplified in this tutorial could be easily modified to use a [different AI provider](https://developers.cloudflare.com/ai-gateway/providers/) or give the user with the option to choose between multiple AI providers, including [AI models running directly on Cloudflare's global network](https://developers.cloudflare.com/workers-ai/). +The worker exemplified in this tutorial could be easily modified to use a [different AI provider](/ai-gateway/providers/) or give the user with the option to choose between multiple AI providers, including [AI models running directly on Cloudflare's global network](/workers-ai/). This enables organizations to better control costs related to AI usage and/or quickly adopt the latest innovations in the field without impacting the frontend users are accessing or the access controls already put in place. From a6eb0f046650a0bde240249e71b6021f8fffa5b1 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Thu, 17 Apr 2025 14:33:21 -0500 Subject: [PATCH 05/14] Update step 5 --- .../tutorials/ai-wrapper-tenant-control.mdx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) 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 index f2ea9f669f74e2..0ea460443c8aed 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -405,23 +405,25 @@ Now your AI wrapper can only be accessed by your users that successfully match y ## 5. Block access to public AI agents with Gateway -You can now block access to all unauthorized public AI agents by using the [**Secure Web Gateway[**(/cloudflare-one/policies/gateway/) to create a HTTP policy. - -If you use another gateway for web filtering, try to replicate a similar policy. +You can now block access to all unauthorized public AI agents with a Gateway [HTTP policy](/cloudflare-one/policies/gateway/http-policies/). 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Gateway** > **Firewall policies**. 2. Select **HTTP**. 3. Select **Add a policy**. -4. Under the **Traffic** section, select **Add condition**. -5. Select **Content Categories**. -6. Select **Artificial Intelligence**. -7. Add any other conditions that apply to your environment. -8. Under **Action**, select **Block**. +4. Add the following policy: + + | Selector | Operator | Value | Action | + | ------------------ | -------- | ------------------------- | ------ | + | Content Categories | in | _Artificial Intelligence_ | Block | + +5. Select **Create policy**. This ensures that public AI agents are not accessible using a managed endpoint. User coaching is also possible, by displaying a [custom block message](/cloudflare-one/policies/gateway/block-page/) or a [user notification](/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. +If you use another gateway for web filtering, try to replicate a similar policy. + ## Enforce DLP and agentless RBI Since you have full control over access to your AI Agent wrapper, you can enforce extra security methods such as [**Data Loss Prevention**](/cloudflare-one/policies/data-loss-prevention/) and [**Remote Browser Isolation**](/cloudflare-one/policies/browser-isolation/). From 0d6271919b4b6fef282b46660fcf273cbc42e21b Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Thu, 17 Apr 2025 14:33:21 -0500 Subject: [PATCH 06/14] Update step 5 --- .../docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 0ea460443c8aed..5202c4cb6dfbbc 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -420,7 +420,7 @@ You can now block access to all unauthorized public AI agents with a Gateway [HT This ensures that public AI agents are not accessible using a managed endpoint. -User coaching is also possible, by displaying a [custom block message](/cloudflare-one/policies/gateway/block-page/) or a [user notification](/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. +Alternatively, you can prevent users from using public AI agents by displaying a [custom block message](/cloudflare-one/policies/gateway/block-page/#customize-the-block-page), [redirect](/cloudflare-one/policies/gateway/block-page/#redirect-to-a-block-page), or a [user notification](/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. If you use another gateway for web filtering, try to replicate a similar policy. From f59159e01727b87087cb930267845bdf856f46d2 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Wed, 23 Apr 2025 17:11:35 -0500 Subject: [PATCH 07/14] Add DLP and RBI sections --- .../tutorials/ai-wrapper-tenant-control.mdx | 65 +++++++++---------- 1 file changed, 32 insertions(+), 33 deletions(-) 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 index 5202c4cb6dfbbc..fd54eb78740853 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -5,7 +5,7 @@ pcx_content_type: tutorial title: Create an AI agent wrapper using AI Gateway for Secure Web Gateway filtering and tenant control --- -import { TabItem, Tabs, Details } from "~/components"; +import { TabItem, Tabs, Details, Render } from "~/components"; 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 protect access to the wrapper with [Cloudflare Access](/cloudflare-one/policies/access/). Additionally, you can enforce [Gateway](/cloudflare-one/policies/gateway/) controls on how your 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. @@ -422,49 +422,48 @@ This ensures that public AI agents are not accessible using a managed endpoint. Alternatively, you can prevent users from using public AI agents by displaying a [custom block message](/cloudflare-one/policies/gateway/block-page/#customize-the-block-page), [redirect](/cloudflare-one/policies/gateway/block-page/#redirect-to-a-block-page), or a [user notification](/cloudflare-one/policies/gateway/http-policies/#warp-client-block-notifications) directing users to the AI agent wrapper. -If you use another gateway for web filtering, try to replicate a similar policy. +## 6. Enforce Data Loss Prevention and Clientless Browser Isolation -## Enforce DLP and agentless RBI +Now that you have full control over access to your AI agent wrapper, you can enforce extra security methods such as Data Loss Prevention (DLP) and Clientless Web Isolation to protect and control data shared with the AI agent. -Since you have full control over access to your AI Agent wrapper, you can enforce extra security methods such as [**Data Loss Prevention**](/cloudflare-one/policies/data-loss-prevention/) and [**Remote Browser Isolation**](/cloudflare-one/policies/browser-isolation/). +### Apply Data Loss Prevention profiles -### Data Loss Prevention - -[**Data Loss Prevention**](/cloudflare-one/policies/data-loss-prevention/) can be used to avoid sensitive data to be used in prompts made to the AI agent. You will need to have an adequate HTTP policy in place for DLP to be enforced. +You can use [Data Loss Prevention](/cloudflare-one/policies/data-loss-prevention/) to prevent your users from sending sensitive data to the AI agent. 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **DLP** > **DLP profiles**. -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**. -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. -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**. +2. Ensure that the [DLP profiles](/cloudflare-one/policies/data-loss-prevention/dlp-profiles/) you want to enforce are properly configured. +3. Add an HTTP policy to enforce the DLP profile for the hostname for your wrapper. For example: + + | Selector | Operator | Value | Logic | Action | + | ----------- | -------- | ------------------------ | ----- | ------ | + | Host | is | `ai-wrapper.example.com` | And | Block | + | DLP Profile | in | _AI DLP profile_ | | | + +4. Select **Create policy**. -### Agentless Remote Browser Isolation +### Execute in a clientless isolated browser -Since your AI Agent Wrapper has been published as a self-hosted Access application, we can enforce it to run as an isolated session by creating a new policy and attaching it to your application. +Because you published your wrapper as a self-hosted Access application, you can execute it in an [isolated session](/cloudflare-one/policies/browser-isolation/setup/clientless-browser-isolation/) for your users by creating an [Access policy](/cloudflare-one/policies/access/) and configuring it for your application. -1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **Access** > **Policies**. -2. Select **Add a policy**. -3. Set the **Action** to **Allow**. -4. Within the **Add rules** section, add identity rules to define who the application should be isolated for. -5. Within the **Additional settings (optional)** section, tick the **Isolate application** toggle. + -Once policy has been created, you can now attach it to your AI Agent wrapper. +3. Go to **Access** > **Policies**. +4. Select **Add a policy**. +5. Set the **Action** to _Allow_. +6. In **Add rules**, add identity rules to define who the application should be isolated for. +7. In **Additional settings (optional)**, turn on **Isolate application**. + +Once the Access policy has been created, you can attach it to your wrapper. 1. Go to **Access** > **Applications**. -2. Select your AI Agent wrapper application. -3. Select **Configure**. -4. Go to the **Policies** tab. -5. Select **Select existing policies**. -6. Select the policy you previously created. -7. Make sure that the order of your policies is correct. - -Since agentless Remote Browser Isolation sessions honor your Secure Web Gateway HTTP policies, your DLP Profiles will be applied. +2. Choose your wrapper application, then select **Configure**. +3. In **Policies**, select **Select existing policies**. +4. Choose the Access policy you previously created. +5. Select **Confirm**, then select **Save application**. + +Because Clientless Web Isolation traffic applies your Gateway HTTP policies, your configured DLP profiles will apply to isolated sessions. + +For more information on isolating an Access application, refer to [Isolate self-hosted application](/cloudflare-one/policies/access/isolate-application/). ## Additional benefits From febb99563d543f510e3b24c5b0fce6c6f45b3c01 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Wed, 23 Apr 2025 17:39:07 -0500 Subject: [PATCH 08/14] Add additional benefits --- .../tutorials/ai-wrapper-tenant-control.mdx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) 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 index fd54eb78740853..f6359c558da79f 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -467,16 +467,14 @@ For more information on isolating an Access application, refer to [Isolate self- ## Additional benefits -Organizations that adopt Cloudflare to secure access to AI agents as exemplified in this tutorial, will also benefit from improved visibility, better cost control and agility. +Organizations that adopt Cloudflare to secure access to AI agents will benefit from improved visibility and configurability. ### Visibility -All [access events](/cloudflare-one/insights/logs/audit-logs/) to the AI wrapper and [DLP violations](/cloudflare-one/insights/logs/gateway-logs/#http-logs) will be logged in Cloudflare's dashboard. In addition, AI gateway provides [visibility](/ai-gateway/observability/logging/) into user prompts, model response, token usage and costs. +Zero Trust will log all [Access events](/cloudflare-one/insights/logs/audit-logs/) and [DLP detections](/cloudflare-one/insights/logs/gateway-logs/#http-logs). In addition, AI Gateway provides [visibility](/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](/logs/). +Logs can be exported to external providers with [Logpush](/logs/get-started/). -### Cost control and agility +### Configurability -The worker exemplified in this tutorial could be easily modified to use a [different AI provider](/ai-gateway/providers/) or give the user with the option to choose between multiple AI providers, including [AI models running directly on Cloudflare's global network](/workers-ai/). - -This enables organizations to better control costs related to AI usage and/or quickly adopt the latest innovations in the field without impacting the frontend users are accessing or the access controls already put in place. +You can configure your wrapper to use a [different AI provider](/ai-gateway/providers/) or give your user the option to choose between multiple AI providers, including AI models running directly on Cloudflare's global network with [Workers AI](/workers-ai/). With this, you can control costs related to AI usage or adopt newer models without impacting your users or the access controls already put in place. From 8e9d1ebab6072753799994dd7028b180473a340f Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Fri, 25 Apr 2025 12:58:09 -0500 Subject: [PATCH 09/14] Edit wording --- .../tutorials/ai-wrapper-tenant-control.mdx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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 index f6359c558da79f..d445311ec88901 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -1,19 +1,21 @@ --- -updated: 2025-04-15 +updated: 2025-04-25 category: 🔐 Zero Trust pcx_content_type: tutorial -title: Create an AI agent wrapper using AI Gateway for Secure Web Gateway filtering and tenant control +title: Create and secure an AI agent wrapper using AI Gateway and Zero Trust --- import { TabItem, Tabs, Details, Render } from "~/components"; -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 protect access to the wrapper with [Cloudflare Access](/cloudflare-one/policies/access/). Additionally, you can enforce [Gateway](/cloudflare-one/policies/gateway/) controls on how your 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 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 administrators can protect access to the wrapper with [Cloudflare Access](/cloudflare-one/policies/access/). Additionally, you can enforce [Gateway policies](/cloudflare-one/policies/gateway/) to control how your 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 tutorial uses ChatGPT as an example AI agent. -## Prerequisites +## Before you begin -- API key for your desired AI provider, such as an [OpenAI API key](https://platform.openai.com/api-keys) for ChatGPT. +Make sure you have: + +- An 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 @@ -477,4 +479,4 @@ Logs can be exported to external providers with [Logpush](/logs/get-started/). ### Configurability -You can configure your wrapper to use a [different AI provider](/ai-gateway/providers/) or give your user the option to choose between multiple AI providers, including AI models running directly on Cloudflare's global network with [Workers AI](/workers-ai/). With this, you can control costs related to AI usage or adopt newer models without impacting your users or the access controls already put in place. +You can configure your wrapper to use a [different AI provider](/ai-gateway/providers/) or give your users the option to choose between multiple AI providers, including AI models running directly on Cloudflare's global network with [Workers AI](/workers-ai/). With this, you can control costs related to AI usage or adopt newer models without impacting your users or the access controls already put in place. From f2397d2f73c71dc7c02e6ce7072ae15152428c9f Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Thu, 1 May 2025 18:17:12 -0400 Subject: [PATCH 10/14] Apply suggestions from code review --- .../docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index d445311ec88901..89ae45878750e9 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -1,5 +1,5 @@ --- -updated: 2025-04-25 +updated: 2025-05-02 category: 🔐 Zero Trust pcx_content_type: tutorial title: Create and secure an AI agent wrapper using AI Gateway and Zero Trust From 1e9792d5ebf47eecc1043325bdf8e4526b243aea Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Thu, 1 May 2025 18:18:16 -0500 Subject: [PATCH 11/14] Fix wording --- .../tutorials/ai-wrapper-tenant-control.mdx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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 index 89ae45878750e9..d73691f1f75acd 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -7,7 +7,7 @@ title: Create and secure an AI agent wrapper using AI Gateway and Zero Trust import { TabItem, Tabs, Details, Render } from "~/components"; -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 administrators can protect access to the wrapper with [Cloudflare Access](/cloudflare-one/policies/access/). Additionally, you can enforce [Gateway policies](/cloudflare-one/policies/gateway/) to control how your 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 tutorial explains how to use [Cloudflare AI Gateway](/ai-gateway/) and Zero Trust to create a functional and secure website wrapper for an AI agent. Cloudflare Zero Trust administrators can protect access to the wrapper with [Cloudflare Access](/cloudflare-one/policies/access/). Additionally, you can enforce [Gateway policies](/cloudflare-one/policies/gateway/) to control how your 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 your users from sharing sensitive data, 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 for a specific AI provider, such as ChatGPT Enterprise. This tutorial uses ChatGPT as an example AI agent. @@ -15,13 +15,14 @@ This tutorial uses ChatGPT as an example AI agent. Make sure you have: +- A [Cloudflare Zero Trust organization](/cloudflare-one/setup/). - An 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 -First, create an AI gateway to control an AI app. +First, create an AI gateway to control your AI app. -1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. +1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account. 2. Go to **AI** > **AI Gateway**. 3. Select **Create Gateway**. 4. Name your gateway. @@ -430,7 +431,7 @@ Now that you have full control over access to your AI agent wrapper, you can enf ### Apply Data Loss Prevention profiles -You can use [Data Loss Prevention](/cloudflare-one/policies/data-loss-prevention/) to prevent your users from sending sensitive data to the AI agent. +You can use [Data Loss Prevention (DLP)](/cloudflare-one/policies/data-loss-prevention/) to prevent your users from sending sensitive data to the AI agent. 1. In [Zero Trust](https://one.dash.cloudflare.com/), go to **DLP** > **DLP profiles**. 2. Ensure that the [DLP profiles](/cloudflare-one/policies/data-loss-prevention/dlp-profiles/) you want to enforce are properly configured. @@ -443,6 +444,8 @@ You can use [Data Loss Prevention](/cloudflare-one/policies/data-loss-prevention 4. Select **Create policy**. +For more information on creating DLP policies, refer to [Scan HTTP traffic](/cloudflare-one/policies/data-loss-prevention/dlp-policies/). + ### Execute in a clientless isolated browser Because you published your wrapper as a self-hosted Access application, you can execute it in an [isolated session](/cloudflare-one/policies/browser-isolation/setup/clientless-browser-isolation/) for your users by creating an [Access policy](/cloudflare-one/policies/access/) and configuring it for your application. From 1f6122e78901009d58f166b612e77b7672175d76 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Mon, 5 May 2025 16:36:54 -0400 Subject: [PATCH 12/14] Apply suggestions from code review Co-authored-by: Pedro Sousa <680496+pedrosousa@users.noreply.github.com> --- .../tutorials/ai-wrapper-tenant-control.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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 index d73691f1f75acd..8125c7ace623ae 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -377,15 +377,15 @@ To publish the worker, run `wrangler publish`. If the worker was built remotely using the online code editor available in the **Dash**, it can be published by clicking **Deploy**. -In order to ensure that the worker is only accessible via the custom hostname, do: - -2. Go to **Workers & Pages** > **Workers & Pages**. -3. Select your Worker. -4. Go to **Settings**. -5. Within **Domains & Routes**, select **Add**. -6. Choose **Custom domain**. -7. Enter your desired custom domain name. -8. Select **Add domain**. +To ensure that the worker is only accessible via the custom hostname, do the following: + +1. Go to **Workers & Pages** > **Workers & Pages**. +2. Select your Worker. +3. Go to **Settings**. +4. Within **Domains & Routes**, select **Add**. +5. Choose **Custom domain**. +6. Enter your desired custom domain name. +7. Select **Add domain**. The Worker is now behind an addressable public hostname. Make sure to turn off both **workers.dev** and **Preview URLs** so that the Worker can only be accessed with its custom domain. From 4a3e77b7029cd12800340f810695578461779452 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Mon, 5 May 2025 15:41:05 -0500 Subject: [PATCH 13/14] Edit wording for remote build --- .../cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 index 8125c7ace623ae..90ea501c179c00 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -354,7 +354,7 @@ Once the Worker code is complete, you need to make the Worker addressable using -Edit the `wrangler.toml` configuration file and add the following information to ensure that the worker is only accessible using the custom hostname: +Edit the `wrangler.toml` configuration file and add the following information to ensure that the Worker is only accessible using the custom hostname: ```toml name = "ai-agent-wrapper" @@ -375,9 +375,9 @@ To publish the worker, run `wrangler publish`. -If the worker was built remotely using the online code editor available in the **Dash**, it can be published by clicking **Deploy**. +If you built your Worker remotely using the [code editor](/workers/get-started/dashboard/) available in the Cloudflare dashboard, you can deploy it by selecting **Deploy**. -To ensure that the worker is only accessible via the custom hostname, do the following: +To ensure that the Worker is only accessible from the custom hostname: 1. Go to **Workers & Pages** > **Workers & Pages**. 2. Select your Worker. From f5dbe97809a9258f4b914df8a0c8a9492b4cc641 Mon Sep 17 00:00:00 2001 From: Max Phillips Date: Mon, 5 May 2025 16:04:21 -0500 Subject: [PATCH 14/14] Add code block highlighting --- .../tutorials/ai-wrapper-tenant-control.mdx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) 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 index 90ea501c179c00..0de6577bb42cf7 100644 --- a/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx +++ b/src/content/docs/cloudflare-one/tutorials/ai-wrapper-tenant-control.mdx @@ -108,9 +108,7 @@ You can now build the Worker using the online code editor by selecting **Edit co 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. This example uses OpenAI as its AI provider: -
- -```javascript +```javascript {9} collapse={54-230} export default { async fetch(request, env) { if (request.url.endsWith("/api/chat")) { @@ -119,7 +117,7 @@ export default { const { messages } = await request.json(); const response = await fetch( - "https://gateway.ai.cloudflare.com/v1///openai/chat/completions", + "https://gateway.ai.cloudflare.com/v1/$ACCOUNT_ID/$GATEWAY_ID/openai/chat/completions", { method: "POST", headers: { @@ -344,8 +342,6 @@ const HTML = ` `; ``` -
- Note that the account ID and gateway ID need to be replaced in the AI Gateway endpoint. You can add these as [environment variables](/workers/configuration/environment-variables/) or [secrets](/workers/configuration/secrets/) in Workers. If you chose to use Authenticated Gateway when creating your AI gateway, make sure to also add your token as a secret and pass its value to the AI gateway in the `cf-aig-authorization` header. ### 3. Publish the Worker @@ -356,16 +352,16 @@ Once the Worker code is complete, you need to make the Worker addressable using Edit the `wrangler.toml` configuration file and add the following information to ensure that the Worker is only accessible using the custom hostname: -```toml +```diff lang="toml" name = "ai-agent-wrapper" main = "src/index.js" compatibility_date = "2023-10-30" workers_dev = false -# replace with your custom domain -routes = [ - { pattern = "", custom_domain = true } -] ++# Replace with your custom domain ++routes = [ ++ { pattern = "", custom_domain = true } ++] [vars] # Add any environment variables here