Call AI Models with Convex

Build a Convex app that calls AI models from a backend function.

Introduction

30 Second Summary

Adding a small AI feature often creates more account work than coding. You can spend the first hour juggling provider signups, payment details, secret keys, and billing pages.

In this project, you will build a Convex app that sends a prompt from a backend function through the Convex AI Gateway. The browser displays the model's answer.

What You'll Build

You will enter a prompt on your deployed page, watch a model answer appear, and open the dashboard to see what the call consumed.

By the end of this project, you'll have:

A deployed AI app that sends prompts from a backend function without your own provider API key.
A browser result that shows the model's answer on your page.
A usage comparison that reveals what different model calls consumed.
Secret Mission: An optional challenge to push your skills further.

Are there any prerequisites?

You'll need Node, a free Convex account, and basic JavaScript knowledge.

Before We Start

Your model call will run inside a Convex backend function. You need a local JavaScript runtime before you can build or test that function.

This step prepares Node.js and npm on your computer. These tools run the project locally.

Your browser gives you access to the Convex Dashboard. Your code editor gives you a place to build the app.

In this step, get ready to:

Install Node.js and confirm npm is available.
Create a Convex account and access the dashboard.
Prepare Visual Studio Code and your browser.

Install Node.js and npm

Node.js runs JavaScript outside your browser. Convex requires Node.js version 20 or newer.

The Node.js installer includes npm. npm downloads the packages your project needs.

Open your operating system search by pressing Cmd+Space on macOS or the Windows key on Windows.
Type Terminal on macOS or Windows PowerShell on Windows.
Select Terminal on macOS or Windows PowerShell on Windows.
Check your Node.js and npm versions by running these commands:

node --version
npm --version

What does this check do?

The node check shows the installed Node.js version.
The npm check confirms the bundled package manager is available in your terminal.

✔️ I see a supported Node.js version

Great, your Node.js major version is 20 or higher. Your local JavaScript toolchain is ready.

ⓧ I see an older version

Your installed Node.js version is below the minimum major version of 20.

Visit the official Node.js download page.
Download the LTS installer for your operating system.
Run the downloaded installer with its default options.
Open your operating system search by pressing Cmd+Space on macOS or the Windows key on Windows.
Type Terminal on macOS or Windows PowerShell on Windows.
Select Terminal on macOS or Windows PowerShell on Windows.
Verify the upgraded versions by running these commands:

node --version
npm --version

What should you see?

The first line should show a Node.js major version of 20 or higher. The second line should show an npm version number.

Still seeing the older version?

Close every terminal window after installation. Open a fresh terminal so your system reloads its command locations.

On a managed computer, ask your administrator whether an older Node.js installation takes priority.

Help me fix an older Node.js version that still appears after installing the current LTS release.

ⓧ Command not found

Node.js is missing from your computer. Installing it also installs npm.

Visit the official Node.js download page.
Download the LTS installer for your operating system.
Run the downloaded installer with its default options.
Open your operating system search by pressing Cmd+Space on macOS or the Windows key on Windows.
Type Terminal on macOS or Windows PowerShell on Windows.
Select Terminal on macOS or Windows PowerShell on Windows.
Confirm both tools are installed by running these commands:

node --version
npm --version

What should you see?

The first line should show a Node.js version number. The second line should show an npm version number.

Commands still unavailable?

Make sure the installer completed before opening the fresh terminal. Restart your computer if the commands remain unavailable.

Help me make Node.js and npm available in my terminal after installation.

Create your Convex account

The Convex Dashboard is the central place for managing your account and future deployments. You only create the account here.

Project creation stays for the next step. This keeps your setup separate from the app you are about to build.

What is the Convex Dashboard?

The dashboard lets you manage Convex projects and deployments from your browser. Later, you will also use it to run backend functions and inspect gateway usage.

Visit the Convex Dashboard in your browser.
Click Sign up.
Select Continue with email, Continue with Google, or Continue with GitHub.
Complete the verification prompts for your selected sign-up method.
Stop when the dashboard home page loads.

You should now see the Convex Dashboard while signed in. This confirms your account is ready for project creation.

Dashboard not loading?

Refresh the page after completing verification. Check that your browser allows cookies for the Convex sign-in flow.

Help me access the Convex Dashboard after completing account verification.

Prepare your editor and browser

A code editor keeps your backend function and page code organized. You will use Visual Studio Code throughout this project.

Your successful dashboard sign-in already confirms your browser is ready. Now you only need to confirm that the editor opens.

Open your operating system search by pressing Cmd+Space on macOS or the Windows key on Windows.
Type Visual Studio Code into the search field.

✔️ I see Visual Studio Code

Select Visual Studio Code from the search results.

You should see a Visual Studio Code window with an editor area and sidebar. Your code editor is ready.

ⓧ I do not see Visual Studio Code

Visual Studio Code needs to be installed before you start building. Your operating system may ask for permission during installation.

Visit the official Visual Studio Code download page.
Download the installer for your operating system.
Run the downloaded installer.
Approve the operating system installation request if it appears.
Open your operating system search by pressing Cmd+Space on macOS or the Windows key on Windows.
Type Visual Studio Code into the search field.
Select Visual Studio Code from the search results.

You should see a Visual Studio Code window with an editor area and sidebar. The editor is now available for the project.

Visual Studio Code did not open?

Make sure the installer reached its completion screen. Restart your computer if the application remains absent from search.

Help me install and open Visual Studio Code on my computer.

Before the final check, do you expect the terminal to return two version numbers? Keep your prediction in mind.

Switch back to the Terminal window from earlier on macOS or the Windows PowerShell window from earlier on Windows.
Run both version checks one last time:

node --version
npm --version

What should you see?

The first line starts with v and shows a Node.js major version of 20 or higher.
The second line shows your installed npm version.

Missing one of the version numbers?

Open a fresh terminal so it reloads the Node.js installation. Reinstall the LTS release if either command remains unavailable.

Help me complete the final Node.js and npm verification.

Switch back to the browser tab showing the Convex Dashboard.
Confirm your signed-in dashboard remains visible.
Switch back to the Visual Studio Code window.

You handled the full setup. Node.js, npm, Convex, and Visual Studio Code are ready.

Next, you will create your Convex project and start its development server.

Create Your Convex Project

An AI call needs a backend home before it can reach a model. This step creates that home without adding application logic yet.

Your local files connect to Convex through a cloud development deployment. A running development loop keeps that deployment aligned with the backend files you add later.

In this step, get ready to:

Create a local React application on your Desktop.
Connect the local project to a new Convex development deployment.
Open the linked deployment in the Convex dashboard.

Scaffold the local application

A scaffold supplies the folders that your browser page needs. You will use React with Vite so the project can run locally in a later step.

Move to your Desktop by running this command:

cd ~/Desktop

What does this command do?

This moves your terminal into the Desktop folder. The new project folder will appear somewhere easy to find.

The scaffold command may ask for permission to download its setup package. Approve that prompt so npm can continue.

Create the React application by running this command:

npm create vite@latest my-app -- --template react-ts

What does this command create?

The Vite scaffolder creates a folder named `my-app`.
The React TypeScript template supplies the initial browser application files.
The project remains local until you connect it to a Convex deployment.

Confirm the new project files exist by running this command:

ls my-app

What should this show?

The command lists the contents of `my-app`. You should see `package.json` plus the `src/` folder among the results.

Project folder missing?

Check the scaffold output for a network or permission error.
Check whether an older folder named `my-app` already exists on your Desktop.
Rename the older folder before rerunning the scaffold command.

Ask for help with the terminal output using this troubleshooting prompt. You can also share the error in the Convex community.

The project now has a browser application. It still needs the Convex package that provides the client plus the development commands.

Install Convex inside `my-app` by running this command:

cd my-app && npm install convex

What does this command install?

The first command moves your terminal into `my-app`.
The installation adds the Convex client plus the Convex CLI to this project.
The package is recorded in `package.json` for future installs.

Check that the installation finishes without an error.

Your local application now contains the tools needed to create its backend connection.

Convex installation failed?

Check that the terminal is inside the `my-app` folder.
Check your internet connection if npm cannot download a package.
Rerun the installation after the failed process returns control to the terminal.

Use this installation troubleshooting prompt for help with your output. You can also post the error in the Convex community.

Connect a development deployment

The local project needs a cloud development deployment before it can run backend functions. The first development session creates that deployment plus the local configuration that links to it.

The authorization only grants this local CLI access to your Convex account. Your model providers stay outside this setup.

The development command remains active after setup because it watches your backend files. You will use a second terminal for the dashboard.

Approve access if the CLI opens a browser authorization page.
Choose the option for creating a new project when the CLI asks which project to use.
Keep `my-app` as the project name if the CLI asks for a name.
Start the Convex development loop by running this command:

npx convex dev

What happens during setup?

The CLI creates a cloud development deployment in your Convex account.
The CLI creates `convex/` as the home for backend functions.
The CLI saves the deployment connection in `.env.local` using `CONVEX_DEPLOYMENT`.
The development loop watches for backend changes after the initial synchronization.

Watch the terminal until the initial synchronization completes without an error.
Leave the development loop running in this terminal.

That is the main setup hurdle cleared. Your local application now has a live development deployment ready for backend code.

Deployment did not connect?

Complete the browser authorization before returning to the terminal.
Confirm the terminal is inside `my-app` before rerunning the command.
Choose a new cloud project when the CLI presents the project options.

Use this deployment troubleshooting prompt for help with your terminal output. You can also ask in the Convex community.

Open the empty deployment

The dashboard gives you a browser view of the deployment selected by your local project. Opening it from `my-app` keeps the check tied to the correct deployment.

Press **Cmd+Space** on macOS or the **Windows** key on Windows to open system search.
Type `Terminal` on macOS or `PowerShell` on Windows.
Press **Enter** to open a second terminal window.
Return to the `my-app` folder by running these commands:

cd ~/Desktop
cd my-app

Why use the project folder?

The deployment connection lives in the configuration inside `my-app`. Running Convex commands from this folder targets the linked development deployment.

Before you open the dashboard, what do you expect an untouched deployment to contain?

Open the dashboard for the linked deployment by running this command:

npx convex dashboard

What does this command open?

The command opens your default browser directly to the dashboard for the deployment linked to `my-app`. This avoids selecting the wrong project by hand.

Select **Functions** in the dashboard sidebar.
Confirm the deployment has no custom backend functions.
Select **Data** in the dashboard sidebar.
Confirm the deployment has no application tables or documents.

You will find no custom functions or application data. That empty state proves the new deployment is connected without pulling in work from a different project.

Dashboard opened the wrong deployment?

Close the incorrect dashboard tab.
Confirm the second terminal is inside `my-app`.
Confirm the first terminal still has the development loop running.
Rerun the dashboard command from `my-app`.

Use this dashboard troubleshooting prompt if the linked deployment still does not open.

Your empty Convex deployment is live plus linked to the local application. Next, you will give that backend its first model-calling function.

Call a Model Through the Gateway

Your Convex development deployment is connected to your local project. Its function list is still empty.

A backend action gives your app a server-side place to send prompts. The Convex AI Gateway supplies the provider credentials through a short-lived deployment token.

This step takes you from an empty deployment to a real model completion. You do not need to configure a provider API key.

In this step, get ready to:

Install the packages used by the gateway action.
Define a backend action for text prompts.
Run the action from the Convex dashboard.

Install the gateway packages

The AI SDK provides the text-generation helper used by your action. Its Convex provider routes that request through the gateway.

Keep the terminal running your Convex development server untouched.
Open another terminal at the local Convex project you created earlier.
Install the gateway packages by running this command:

npm install @convex-dev/ai-sdk-provider@^0.2.1 ai

What Did This Command Add?

The ai package provides generateText() for turning a prompt into completion text.
The @convex-dev/ai-sdk-provider package provides convexGateway() for routing model requests through Convex.

Confirm the installation finishes without an error.
Check that package.json now lists both packages.

Good progress. Your project now has the two libraries needed for its first model call.

Package Installation Failed?

Confirm the second terminal is inside the folder containing package.json.
Check your network connection before retrying the installation.

help me troubleshoot this npm package installation.

Build the backend action

A Convex action runs on the backend. This gives the gateway call a server-side boundary for receiving prompts.

Create convex/chat.ts inside your local Convex project by pasting the code below:

// Load the server and model helpers used by this backend action.
import { action } from "./_generated/server";
import { v } from "convex/values";
import { generateText } from "ai";
import { convexGateway } from "@convex-dev/ai-sdk-provider";

// Accept a text prompt from the dashboard or app.
export const chat = action({
  args: { prompt: v.string() },
  handler: async (ctx, { prompt }) => {
    // Route the prompt through a gateway-supported chat model.
    const { text } = await generateText({
      model: convexGateway("openai/gpt-4o-mini"),
      prompt,
    });

    // Return only the generated completion text.
    return text;
  },
});

What Does This Action Do?

The action() constructor creates a callable backend function.
The v.string() validator requires the caller to provide a text prompt.
The convexGateway() provider obtains gateway authentication for the connected deployment.
The generateText() helper sends the prompt to openai/gpt-4o-mini.
Returning text gives the caller the model's completion.

Save convex/chat.ts.
Switch back to the terminal running your development server.
Wait for the backend sync to finish without an error.
Return to the Convex dashboard from earlier.
Select Functions in the left navigation.

You should see chat:chat in the function list. This confirms that the backend action reached your development deployment.

Action Missing From the Dashboard?

Check the terminal running your development server for a highlighted TypeScript error.
Confirm the file is saved at convex/chat.ts.
Compare each package name in the imports with package.json.

help me find why my Convex action is missing from the dashboard.

✔️ Awesome, I've got everything!

Your backend action is deployed. Keep the Convex development server running.

ⓧ I'd like to double check the full code

// Load the server and model helpers used by this backend action.
import { action } from "./_generated/server";
import { v } from "convex/values";
import { generateText } from "ai";
import { convexGateway } from "@convex-dev/ai-sdk-provider";

// Accept a text prompt from the dashboard or app.
export const chat = action({
  args: { prompt: v.string() },
  handler: async (ctx, { prompt }) => {
    // Route the prompt through a gateway-supported chat model.
    const { text } = await generateText({
      model: convexGateway("openai/gpt-4o-mini"),
      prompt,
    });

    // Return only the generated completion text.
    return text;
  },
});

Run the action from the dashboard

The dashboard function runner can invoke your action before you build a browser interface. Its output pane displays the value returned by the backend.

Select chat:chat from the function list.
Click Run Function beside the function name.
Enter Explain why the sky looks blue in one sentence. in the prompt argument field.

Before you run it, consider what you expect the output pane to show.

Click Run in the function runner.

The output pane shows a generated sentence about the blue sky. The exact wording can vary between runs.

That is your first live gateway response. The model text has travelled from the dashboard through your backend action.

What Did This Prove?

The dashboard sent your prompt argument to chat:chat. The action passed that prompt to the selected model through the gateway.

The returned completion confirms that the deployment can call a model without your own provider API key.

Model Call Did Not Complete?

Confirm the development server still shows the connected deployment.
Check that your Convex team has AI Gateway access.
Retry the function after the backend sync completes.

help me troubleshoot this Convex AI Gateway function run.

Your deployment can now turn a prompt into model-generated text. Next, you will call chat:chat from the app page so the answer appears in the browser.

Show the Answer in Your App

Your backend action already reaches the model through the Convex AI Gateway. The successful dashboard run proves that the backend path works.

Now you will connect the React page to that action with useAction. The browser becomes the place where someone can request an answer.

A dashboard completion is useful for testing. A page-rendered completion turns that backend proof into an app feature.

In this step, get ready to:

Connect the React page to the deployed backend action.
Send the existing test prompt from a browser control.
Render the returned model completion in the local app.

Connect the page to the backend action

The useAction hook gives a page an asynchronous function for invoking a deployed action. Convex generates an api object that points the hook to the correct backend function.

Open the local Convex project in your code editor.
Open the page component that controls the current local route.
Add an import group that brings useAction from convex/react plus api from the generated API module.
Save the page component.
Return to the development terminal from earlier to check the compilation result.

You should see the development server continue without a compilation error.

How does the page reach the action?

The generated api reference identifies your deployed backend action. The useAction hook turns that reference into a function the page can call.

The model request still runs in the backend action. The page only supplies the prompt before displaying the returned text.

Return to the page component in your code editor.
Bind the existing model action by selecting its generated api reference through your editor's autocomplete.
Save the page component.
Return to the development terminal to confirm the page still compiles.

You should see the development server remain active without reporting an import or function reference problem.

Seeing a compilation problem?

Check that useAction comes from convex/react. Confirm that the selected api reference belongs to the backend action you ran from the dashboard.

Use your editor's generated autocomplete to avoid guessing the backend file or action name.

Help me fix the page connection to my deployed Convex action.

Send a prompt from the page

The page needs a browser control that starts the request. Reusing the successful dashboard prompt keeps this test focused on the new client-to-backend connection.

Switch back to the Convex dashboard from earlier.
Record the prompt from the successful function run here: your dashboard test prompt.
Return to the page component in your code editor.
Add one action button whose asynchronous click handler awaits the bound action using your dashboard test prompt before storing its returned text in local state.
Save the page component.
Open the local app by selecting the local URL shown in the running development terminal.

You should see the new action button on the page. This proves that the browser is rendering the component you edited.

Button missing from the page?

Confirm that you edited the component for the route shown in your browser. Check the development terminal for a compilation problem after your last save.

Help me find why my new action button is missing.

Render and verify the answer

The action resolves with the completion text returned by your backend. Binding an output area to the answer state gives that completion a visible destination.

Return to the page component in your code editor.
Add an output area whose content reads from the local answer state.
Save the page component.

The request crosses from the browser to the backend before reaching the model. Keep the page open while the completion is generated.

Before you click the action button, where do you expect the returned completion to appear?

Click the action button on your local page.

You should see the model completion appear in the output area on the page. The text confirms that the browser invoked your deployed backend action successfully.

You have the full path working now. A prompt travels from your page to the Convex backend before the returned model answer appears in the browser.

Answer not appearing?

Check the running development terminal for an action error. Confirm that the prompt argument name matches the argument accepted by your existing backend action.

Make sure the click handler awaits the action result before storing it in the answer state.

Help me debug why my model answer does not render.

Your model answer now appears where an app user can see it. Next, you will trace what repeated gateway calls consume.

Find Your Gateway Usage

That is the key path working. Your browser now displays a completion returned by the backend action.

The Convex AI Gateway removes provider-key setup. Each model request still creates measurable usage.

In this step, you will create a clear usage signal. Then you will trace that usage to your project and backend function.

In this step, get ready to:

Generate several successful calls with the existing backend action.
Locate the AI Gateway spend for your project.
Identify the backend function responsible for that spend.

Run the initial model several times

A short burst of calls gives the usage page more activity to attribute. Keeping the prompt unchanged also gives you a consistent baseline.

Return to the backend model action in the connected development deployment from earlier.
Keep the existing test prompt unchanged.
Run the backend model action three more times by repeating the dashboard invocation workflow from earlier.
Wait for each invocation to return before starting the next one.

You should see a returned completion in the output pane after every invocation.

Good progress. Those repeated calls now form a clear baseline for the initial model.

Find the project usage

Gateway usage is automatically attributed to your project. It is also attributed to the function behind each request.

Opening the usage page is read-only. It leaves your billing settings unchanged.

Open your team's Usage page using the official dashboard link.
Find the AI Gateway card in the usage summary.
Select AI Gateway from the card.

You should see daily spend grouped by project. You should also see model-level usage.

Locate the connected project that handled your repeated calls.
Confirm that the initial model is represented in the usage view.

Trace spend to the backend function

The project view identifies which app generated the usage. The function breakdown pinpoints the code path responsible.

Before you inspect the function-level details, which backend function do you expect to account for the AI Gateway spend?

Scroll to the breakdown by function section.
Select the AI tab.
Locate the backend model action you invoked earlier.

You should see AI Gateway spend attributed to that backend function. This confirms that your repeated initial-model calls reached the expected code path.

You have now connected the visible completions to their recorded gateway consumption.

Usage not showing yet?

Confirm that each dashboard invocation returned a completion before checking usage.
Refresh the Usage page after the latest call finishes.
Confirm that the Usage page belongs to the same team as the connected development deployment.

Ask for help with finding missing AI Gateway usage in Convex.

Your usage trail now connects each model call to its source. Next, you will swap models to see what changes.

Compare Two Gateway Models

Your initial model already answers prompts through the browser. The Convex AI Gateway usage view now shows what those calls consumed.

Now you will compare that result with a second model. A fixed prompt keeps the test focused on the model change.

You will also compare the usage each model consumed. This links answer quality to the cost signal behind each call.

In this step, get ready to:

Capture a baseline from the initial model.
Replace the backend action's model selection.
Compare the second run against the baseline.

Capture the first model baseline

A baseline preserves the original output. It also preserves the usage behind that output.

Switch back to the local web app page from earlier.
Record the prompt you used for the initial calls here: your comparison prompt.
Record the initial answer here: the initial model answer.
Return to the AI Gateway usage view from earlier.
Record the initial model name here: your initial model name.
Record the usage shown for that model here: the initial model usage.

Switch the backend action to a second model

Gateway model names use the provider/model form. The backend action changes providers through the identifier passed to the existing model call.

Return to the backend action file from earlier.
Find the model identifier passed to the existing gateway call.
Replace that identifier with anthropic/claude-sonnet-4.5.
Save the backend action file.
Watch the existing development terminal until the updated function finishes syncing.

The updated function should finish syncing in the existing development terminal. This confirms the second model is deployed to your development deployment.

Model Change Not Syncing?

Check that anthropic/claude-sonnet-4.5 replaced only the previous model identifier.
Confirm the development server from earlier is still running.

Help me diagnose why my Convex backend action is not syncing after I changed its AI Gateway model identifier.

Before you send the prompt, predict whether the wording will stay identical after changing only the model.

Switch back to the local web app.
Enter your comparison prompt as the prompt.
Submit the prompt with the same control you used earlier.

You should see a completed answer from the second model. The page still uses the same backend action.

Record the new answer here: the second model answer.

No Second Answer?

Refresh the local web app.
Confirm the development server from earlier is still running.
Check that the backend action contains anthropic/claude-sonnet-4.5 as its model identifier.

Help me troubleshoot why my web app does not show an answer after switching the Convex AI Gateway model.

Compare the answers and usage

A useful model comparison covers output and usage. The dashboard gives both models a shared accounting view.

Before you refresh the usage view, predict whether the original model remains visible beside the second model.

Return to the Convex dashboard usage view from earlier.
Refresh the usage view.
Locate the entry for your initial model name.
Locate the entry for anthropic/claude-sonnet-4.5.

You should now see usage attributed to the original model. You should also see usage attributed to anthropic/claude-sonnet-4.5.

Second Model Missing From Usage?

Return to the local web app from earlier.
Submit your comparison prompt one more time.
Refresh the usage view after the answer completes.

Help me find why my second Convex AI Gateway model call is missing from the usage view.

Record the usage shown for the second model here: the second model usage.
Compare the initial model answer with the second model answer for specificity.
Compare the two answers for clarity.
Compare the two answers for usefulness.
Compare the initial model usage with the second model usage.

You have closed the model-selection loop. Your backend action now runs a second model without a personally configured provider key.

Secret mission

Benchmark Model Consistency

Run one prompt three times through the current gateway model to test repeatability. Score the answers with a fixed rubric. Use the updated usage view to recommend whether the model deserves a place in the app.

Clean Up Your Resources

Choose whether to keep the project available, pause local development, or remove the resources you created. Additional model calls contribute to the metered usage you already inspected in the Convex AI Gateway dashboard.

Cost warning

Your existing calls have already consumed metered AI Gateway usage. Keeping the deployment available allows more model calls, so delete it if you have finished with the live backend.

Resources you used:

Convex development deployment containing the deployed backend model action.
Local Convex application project containing the web page and backend action source.
Running local development server process.

Keep everything running

No action is needed. Choose this option if you want to keep testing models or extend the app.

Keep the local development server running while you actively test the page.
Use the dashboard usage view from earlier to monitor new model calls.
Retain the local Convex application project folder as a working starting point.
Keep the Convex development deployment available for future backend calls.

Pause - I'll come back to this later

Stop the running development process to free local resources. Your files and cloud deployment stay available for your return.

Return to the terminal panel where the development server is running.
Stop the active process with the terminal's interrupt control.
Confirm that the terminal prompt is available again.
Leave the Convex development deployment in place.
Retain the local Convex application project folder.

Your local page should stop responding after the server closes. The deployed backend and usage information remain available in the dashboard.

Delete - I don't want to use this again

Remove the live deployment and local project when you are certain you no longer need this starting point.

Deletion Removes Your Working Project

Deleting these resources removes the live backend and local project files. Record any model answer or usage comparison you want to keep before continuing.

Stop the local development server:

Return to the terminal panel where the development server is running.
Stop the active process with the terminal's interrupt control.
Confirm that the terminal prompt is available again.

Your local web page should no longer respond. This confirms that the development process has stopped.

Delete the Convex development deployment:

Switch back to the Convex dashboard from earlier.
Return to the connected development deployment.
Go to the deployment settings area.
Locate the section for deleting the current deployment.
Choose the deployment deletion control.
Complete the confirmation shown by the dashboard.

The development deployment should no longer be available in the project. This confirms that the live backend has been removed.

Delete the local Convex application project:

macOS

Use Finder to locate the local Convex application project folder from earlier.
Move the entire project folder to the system trash.
Empty the system trash if you want to remove the files immediately.

The Convex application project folder should no longer appear in its previous location.

Windows

Use File Explorer to locate the local Convex application project folder from earlier.
Move the entire project folder to the Recycle Bin.
Empty the Recycle Bin if you want to remove the files immediately.

The Convex application project folder should no longer appear in its previous location.

That clears the running process, cloud deployment, and local project files from this project.

Nice Work!

That is a wrap! Your working Convex app now carries browser prompts through a deployed backend action to the Convex AI Gateway.

You've learned how to:

Connect a local Convex project to a development deployment.
Build a backend action that sends prompts to a gateway-supported model without your own provider API key. Display the returned model answer in the browser.
Run comparable prompts against two gateway-supported models. Compare their answers with the usage each call consumed in the Convex dashboard.
Use the optional Secret Mission to extend the same backend-to-browser pattern with an extra challenge.

Ready to quiz yourself?