As a developer, you’re always looking for ways to enhance your productivity and streamline your workflow. One of the most exciting developments in recent times is the integration of Cloudflare Workers AI with local development environments, made possible by the Continue.dev plugin for Visual Studio Code (VSCode).

In this tutorial, we’ll walk you through the process of integrating Cloudflare Workers AI with your local VSCode environment using the Continue.dev plugin. We’ll also cover the configuration of the config.json file for Continue.dev.

Prerequisites

Before you begin, make sure you have the following:

1. VSCode installed: Download and install VSCode from the official website.
2. Continue.dev plugin installed: Install the Continue.dev plugin from the VSCode Extensions Marketplace.
3. Cloudflare account: Create a Cloudflare account and obtain an API key.
4. Cloudflare Workers AI models: Familiarize yourself with Cloudflare Workers AI models and choose the ones you want to integrate with Continue.dev.

Configuring Continue.dev

To configure Continue.dev, create a new file named config.json in your project root directory. This file will contain the settings for your Cloudflare Workers AI integrations.

Here’s an example config.json file:

{
  "models": [
    {
      "title": "Llama 3 8B",
      "provider": "cloudflare",
      "accountId": "YOUR_CLOUDFLARE_ACCOUNT_ID",
      "apiKey": "YOUR_CLOUDFLARE_API_KEY",
      "contextLength": 2400,
      "completionOptions": {
        "maxTokens": 500
      },
      "model": "@cf/meta/llama-3-8b-instruct"
    },
    {
      "title": "DeepSeek Coder 6.7b Instruct",
      "provider": "cloudflare",
      "accountId": "YOUR_CLOUDFLARE_ACCOUNT_ID",
      "apiKey": "YOUR_CLOUDFLARE_API_KEY",
      "contextLength": 2400,
      "completionOptions": {
        "maxTokens": 500
      },
      "model": "@hf/thebloke/deepseek-coder-6.7b-instruct-awq"
    }
  ],
  "tabAutocompleteModel": {
    "title": "DeepSeek 7b",
    "provider": "cloudflare",
    "accountId": "YOUR_CLOUDFLARE_ACCOUNT_ID",
    "apiKey": "YOUR_CLOUDFLARE_API_KEY",
    "model": "@hf/thebloke/deepseek-coder-6.7b-base-awq"
  }
}

Replace YOUR_CLOUDFLARE_ACCOUNT_ID and YOUR_CLOUDFLARE_API_KEY with your actual Cloudflare account ID and API key.

Integrating Cloudflare Workers AI with Continue.dev

To integrate Cloudflare Workers AI with Continue.dev, follow these steps:

1. Open your VSCode project and open the Command Palette by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac).
2. Type Continue.dev: Configure and select the command from the dropdown list.
3. A new panel will open where you can configure the Continue.dev settings. Select the models option from the left-hand menu.
4. In the models section, click on the Add Model button to add a new model.
5. Select the Cloudflare provider and enter your Cloudflare account ID and API key.
6. Choose the model you want to integrate (e.g., Llama 3 8B or DeepSeek Coder 6.7b Instruct).
7. Repeat steps 4-6 for each model you want to integrate.

Once you’ve configured the models, you can use them in your code by typing continue followed by the model name (e.g., continue llama-3-8b-instruct).

Tab Autocomplete with DeepSeek 7b

To enable tab autocomplete with DeepSeek 7b, follow these steps:

1. Open your VSCode project and open the Command Palette by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (Mac).
2. Type Continue.dev: Configure and select the command from the dropdown list.
3. A new panel will open where you can configure the Continue.dev settings. Select the tabAutocompleteModel option from the left-hand menu.
4. In the tabAutocompleteModel section, select the Cloudflare provider and enter your Cloudflare account ID and API key.
5. Choose the DeepSeek 7b model.

With these steps, you’ve successfully integrated Cloudflare Workers AI with your local VSCode environment using Continue.dev. You can now use Cloudflare Workers AI models to enhance your productivity and streamline your workflow.