Bindings (3)·续1

Use Vectorize index bindings

To use Vectorize index in your Pages Function, you can access your Vectorize index binding in your Pages Function code. In the following example, your Vectorize index binding is called VECTORIZE_INDEX and you can access the binding in your Pages Function code on context.env.

// Sample vectors: 3 dimensions wide.
//
// Vectors from a machine-learning model are typically ~100 to 1536 dimensions
// wide (or wider still).
const sampleVectors = [
    {
        id: "1",
        values: [32.4, 74.1, 3.2],
        metadata: { url: "/products/sku/13913913" },
    },
    {
        id: "2",
        values: [15.1, 19.2, 15.8],
        metadata: { url: "/products/sku/10148191" },
    },
    {
        id: "3",
        values: [0.16, 1.2, 3.8],
        metadata: { url: "/products/sku/97913813" },
    },
    {
        id: "4",
        values: [75.1, 67.1, 29.9],
        metadata: { url: "/products/sku/418313" },
    },
    {
        id: "5",
        values: [58.8, 6.7, 3.4],
        metadata: { url: "/products/sku/55519183" },
    },
];

export async function onRequest(context) {
    let path = new URL(context.request.url).pathname;
    if (path.startsWith("/favicon")) {
        return new Response("", { status: 404 });
    }

// You only need to insert vectors into your index once
    if (path.startsWith("/insert")) {
        // Insert some sample vectors into your index
        // In a real application, these vectors would be the output of a machine learning (ML) model,
        // such as Workers AI, OpenAI, or Cohere.
        let inserted = await context.env.VECTORIZE_INDEX.insert(sampleVectors);

// Return the number of IDs we successfully inserted
        return Response.json(inserted);
    }
}

export interface Env {
    // This makes our vector index methods available on context.env.VECTORIZE_INDEX.*
    // For example, context.env.VECTORIZE_INDEX.insert() or query()
    VECTORIZE_INDEX: VectorizeIndex;
}

// Sample vectors: 3 dimensions wide.
//
// Vectors from a machine-learning model are typically ~100 to 1536 dimensions
// wide (or wider still).
const sampleVectors: Array<VectorizeVector> = [
    {
        id: "1",
        values: [32.4, 74.1, 3.2],
        metadata: { url: "/products/sku/13913913" },
    },
    {
        id: "2",
        values: [15.1, 19.2, 15.8],
        metadata: { url: "/products/sku/10148191" },
    },
    {
        id: "3",
        values: [0.16, 1.2, 3.8],
        metadata: { url: "/products/sku/97913813" },
    },
    {
        id: "4",
        values: [75.1, 67.1, 29.9],
        metadata: { url: "/products/sku/418313" },
    },
    {
        id: "5",
        values: [58.8, 6.7, 3.4],
        metadata: { url: "/products/sku/55519183" },
    },
];

export const onRequest: PagesFunction<Env> = async (context) => {
    let path = new URL(context.request.url).pathname;
    if (path.startsWith("/favicon")) {
        return new Response("", { status: 404 });
    }

// You only need to insert vectors into your index once
    if (path.startsWith("/insert")) {
        // Insert some sample vectors into your index
        // In a real application, these vectors would be the output of a machine learning (ML) model,
        // such as Workers AI, OpenAI, or Cohere.
        let inserted = await context.env.VECTORIZE_INDEX.insert(sampleVectors);

// Return the number of IDs we successfully inserted
        return Response.json(inserted);
    }
};

Workers AI

Workers AI allows you to run machine learning models, powered by serverless GPUs, on Cloudflare’s global network.

To bind Workers AI to your Pages Function, you can configure a Workers AI binding in the Wrangler configuration file or the Cloudflare dashboard.

When developing locally using Wrangler, you can define an AI binding using the --ai flag. Start Wrangler in development mode by running wrangler pages dev --ai AI to expose the context.env.AI binding.

To configure a Workers AI binding via the Cloudflare dashboard:

  1. Go to the Workers & Pages page. Go to Workers & Pages ↗
  2. Select your Pages project > Settings.
  3. Select your Pages environment > Bindings > Add > Workers AI.
  4. Give your binding a name under Variable name.
  5. Redeploy your project for the binding to take effect.

Use Workers AI bindings

To use Workers AI in your Pages Function, you can access your Workers AI binding in your Pages Function code. In the following example, your Workers AI binding is called AI and you can access the binding in your Pages Function code on context.env.

export async function onRequest(context) {
    const input = { prompt: "What is the origin of the phrase Hello, World" };

const answer = await context.env.AI.run(
        "@cf/meta/llama-3.1-8b-instruct",
        input,
    );

return Response.json(answer);
}

interface Env {
    AI: Ai;
}

export const onRequest: PagesFunction<Env> = async (context) => {
    const input = { prompt: "What is the origin of the phrase Hello, World" };

const answer = await context.env.AI.run(
        "@cf/meta/llama-3.1-8b-instruct",
        input,
    );

return Response.json(answer);
};

Interact with your Workers AI binding locally

Workers AI local development usage charges

Using Workers AI always accesses your Cloudflare account in order to run AI models and will incur usage charges even in local development.

You can interact with your Workers AI bindings locally in one of two ways:

  • Configure your Pages project's Wrangler file and run npx wrangler pages dev.
  • Pass arguments to wrangler pages dev directly.

To interact with a Workers AI binding via the Wrangler CLI while developing locally, run:

npx wrangler pages dev --ai=<BINDING_NAME>

Note

If a binding is specified in a Wrangler configuration file and via a command-line argument, the command-line argument takes precedence.

Service bindings

Service bindings enable you to call a Worker from within your Pages Function.

To bind your Pages Function to a Worker, configure a Service binding in your Pages Function using the Wrangler configuration file or the Cloudflare dashboard.

To configure a Service binding via the Cloudflare dashboard:

  1. In the Cloudflare dashboard, go to the Workers & Pages page. Go to Workers & Pages ↗
  2. Select your Pages project.
  3. Go to Settings > Bindings > Add > Service binding.
  4. Give your binding a name under Variable name.
  5. Under Service, select your desired Worker.
  6. Redeploy your project for the binding to take effect.

Below is an example of how to use Service bindings in your Function. In the following example, your Service binding is called SERVICE and you can access the binding in your Function code on context.env:

export async function onRequestGet(context) {
    return context.env.SERVICE.fetch(context.request);
}

interface Env {
    SERVICE: Fetcher;
}

export const onRequest: PagesFunction<Env> = async (context) => {
    return context.env.SERVICE.fetch(context.request);
};

Interact with your Service bindings locally

You can interact with your Service bindings locally in one of two ways:

  • Configure your Pages project's Wrangler file and run npx wrangler pages dev.
  • Pass arguments to wrangler pages dev directly.

To interact with a Service binding while developing locally, run the Worker you want to bind to via wrangler dev and in parallel, run wrangler pages dev with --service <BINDING_NAME>=<SCRIPT_NAME> where SCRIPT_NAME indicates the name of the Worker. For example, if your Worker is called my-worker, connect with this Worker by running it via npx wrangler dev (in the Worker's directory) alongside npx wrangler pages dev <OUTPUT_DIR> --service MY_SERVICE=my-worker (in the Pages' directory). Interact with this binding by using context.env (for example, context.env.MY_SERVICE).

If you set up the Service binding via the Cloudflare dashboard, you will need to append wrangler pages dev with --service <BINDING_NAME>=<SCRIPT_NAME> where BINDING_NAME is the name of the Service binding and SCRIPT_NAME is the name of the Worker.

For example, to develop locally, if your Worker is called my-worker, run npx wrangler dev in the my-worker directory. In a different terminal, also run npx wrangler pages dev <OUTPUT_DIR> --service MY_SERVICE=my-worker in your Pages project directory. Interact with this Service binding by using context.env (for example, context.env.MY_SERVICE).

Wrangler also supports running your Pages project and bound Workers in the same dev session with one command. To try it out, pass multiple -c flags to Wrangler, like this: wrangler pages dev -c wrangler.jsonc -c ../other-worker/wrangler.jsonc. The first argument must point to your Pages configuration file, and the subsequent configurations will be accessible via a Service binding from your Pages project.

Caution

Support for running multiple Workers in the same dev session with one Wrangler command is experimental, and subject to change as we work on the experience. If you run into bugs or have any feedback, open an issue on the workers-sdk repository ↗︎

Note

If a binding is specified in a Wrangler configuration file and via a command-line argument, the command-line argument takes precedence.

Queue Producers

Queue Producers enable you to send messages into a queue within your Pages Function.

To bind a queue to your Pages Function, configure a queue producer binding in your Pages Function using the Wrangler configuration file or the Cloudflare dashboard:

To configure a queue producer binding via the Cloudflare dashboard:

  1. In the Cloudflare dashboard, go to the Workers & Pages page. Go to Workers & Pages ↗
  2. Select your Pages project.
  3. Go to Settings > Bindings > Add > Queue.
  4. Give your binding a name under Variable name.
  5. Under Queue, select your desired queue.
  6. Redeploy your project for the binding to take effect.

Below is an example of how to use a queue producer binding in your Function. In this example, the binding is named MY_QUEUE and you can access the binding in your Function code on context.env:

export async function onRequest(context) {
    await context.env.MY_QUEUE.send({
        url: request.url,
        method: request.method,
        headers: Object.fromEntries(request.headers),
    });

return new Response("Sent!");
}

interface Env {
    MY_QUEUE: Queue<any>;
}

export const onRequest: PagesFunction<Env> = async (context) => {
    await context.env.MY_QUEUE.send({
        url: request.url,
        method: request.method,
        headers: Object.fromEntries(request.headers),
    });

return new Response("Sent!");
};

Interact with your Queue Producer binding locally

If using a queue producer binding with a Pages Function, you will be able to send events to a queue locally. However, it is not possible to consume events from a queue with a Pages Function. You will have to create a separate consumer Worker with a queue consumer handler to consume events from the queue. Wrangler does not yet support running separate producer Functions and consumer Workers bound to the same queue locally.

Hyperdrive configs

Note

PostgreSQL drivers like Postgres.js ↗︎ depend on Node.js APIs. Pages Functions with Hyperdrive bindings must be deployed with Node.js compatibility.

{
    "compatibility_flags": [
        "nodejs_compat"
    ],
    // Set this to today's date
    "compatibility_date": "2026-10-27"
}

compatibility_flags = [ "nodejs_compat" ]
# Set this to today's date
compatibility_date = "2026-10-27"

Hyperdrive is a service for connecting to your existing databases from Cloudflare Workers and Pages Functions.

To bind your Hyperdrive config to your Pages Function, you can configure a Hyperdrive binding in the Wrangler configuration file or the Cloudflare dashboard.