Convex

https://github.com/convex/convex-backend
Admin
Convex is an open-source reactive backend and database platform that lets developers build and scale...
Tokens:1,230,787
Snippets:8,784
Trust Score:10
Update:16 hours ago
Show doc for...
Tokens:
Raw
### Install dependencies and run the app

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/args-validation/README.md

Run these commands in the project root to install dependencies and start the development server.

```bash
npm install
```

```bash
npm run dev
```

--------------------------------

### Install Convex and React Query packages

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/tanstack-start.mdx

Installs the Convex client, React Query integration, and related packages required for the quickstart.

```sh
npm install convex @convex-dev/react-query @tanstack/react-router-ssr-query @tanstack/react-query
```

--------------------------------

### Start the development server with npm run dev

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/sveltekit/README.md

Run the development server after installing dependencies. Use the --open flag to automatically open the app in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install the Convex library

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/remix.mdx

Navigate into the project directory and install the 'convex' package.

```sh
cd my-remix-app && npm install convex
```

--------------------------------

### Run the RAG example

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/rag.mdx

Clone the RAG example repository and run the setup and example scripts to see the examples in action.

```sh
git clone https://github.com/convex/rag.git
cd rag
npm run setup
npm run example
```

--------------------------------

### Install the Convex client and server library

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nodejs.mdx

Installs the `convex` package for working with Convex from JavaScript and the `dotenv` library for loading `.env` files.

```sh
npm install convex dotenv
```

--------------------------------

### Install the Convex client and server library

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/bun.mdx

Installs the 'convex' package using Bun.

```sh
bun add convex
```

--------------------------------

### main.py

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/python.mdx

Creates a ConvexClient and fetches data from the 'tasks:get' API.

```py
from convex import ConvexClient

client = ConvexClient("DEPLOYMENT_URL")
print(client.query("tasks:get"))
```

--------------------------------

### Install Convex client and server library

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/android.mdx

Run npm commands to initialize a package and install the Convex client and server library.

```sh
npm init -y
npm install convex
```

--------------------------------

### Create a TanStack Start app with create-start-app

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/tanstack-start.mdx

Run this command to scaffold a new TanStack Start application.

```sh
npx create-start-app@latest
```

--------------------------------

### Clone and install the Convex tutorial project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/tutorial/overview.mdx

Clones the convex-tutorial repository from GitHub and installs its dependencies. Requires Node.js 20+ and Git. Run these commands in your terminal before starting the development server.

```shell
git clone https://github.com/convex/convex-tutorial.git
cd convex-tutorial
npm install
```

--------------------------------

### Start development server on http://localhost:3000

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/nuxt/README.md

Run the development server with your package manager. The server starts at http://localhost:3000.

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev
```

--------------------------------

### Install dependencies and run dev server

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/convex-tour-chat-tutorial/README.md

Commands to install dependencies and start the development server for the Convex Tour Chat sample app.

```bash
$ npm i
$ npm run dev
```

--------------------------------

### Start the app with npm start

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/react-native/README.md

Launches the React Native app using Expo after dependencies are installed and the Convex dev deployment is running.

```bash
npm start
```

--------------------------------

### Install AuthKit TanStack Start SDK

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/auth/authkit/add-to-app.mdx

Install the @workos/authkit-tanstack-react-start package in a new terminal window.

```sh
npm install @workos/authkit-tanstack-react-start
```

--------------------------------

### Install Convex client library

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/nextjs/pages-router/quickstart-nextjs-pages-router.mdx

Navigate to your app and install the `convex` package, which provides a convenient interface for working with Convex from a React app.

```sh
cd my-app && npm install convex
```

--------------------------------

### One-time setup: install dependencies and build

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/dashboard-self-hosted/README.md

Run these commands once to install JavaScript dependencies and build the project's dependencies for the dashboard-self-hosted package. Requires Just to be installed.

```bash
# Install dependencies
just install-js
```

```bash
# Build the project's dependencies
just turbo run build --filter=dashboard-self-hosted^...
```

--------------------------------

### Install Convex

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/nextjs-pages-router/README.md

Install the Convex package after creating the project.

```bash
npm install convex
```

--------------------------------

### Connect the app to your backend

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Creates a 'ConvexClient' in 'src/main.rs' and fetches from the 'tasks:get' API.

```rust
use convex::ConvexClient;
use dotenvy::dotenv;
use std::env;

#[tokio::main]
async fn main() -> anyhow::Result<()> {
    dotenv().ok();
    let deployment_url = env::var("CONVEX_URL")?;
    let client = ConvexClient::new(&deployment_url).await?;
    let tasks: Vec<serde_json::Value> = client
        .query("tasks:get", serde_json::json!({}))
        .await?;
    println!("{:#?}", tasks);
    Ok(())
}

```

--------------------------------

### Using the Agent Component with Convex AI Gateway

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/overview.mdx

Shows how to create an Agent with the Convex AI Gateway and use it in Convex actions. Requires installing the component and following the Getting Started guide. Demonstrates creating a thread and continuing a thread with message history.

```typescript
import { Agent } from "@convex-dev/agent";
import { convexGateway } from "@convex-dev/ai-sdk-provider";
import { v } from "convex/values";
import { components } from "./_generated/api";
import { action } from "./_generated/server";

const supportAgent = new Agent(components.agent, {
  name: "Support Agent",
  languageModel: convexGateway("openai/gpt-5-mini"),
  instructions: "You are a helpful assistant.",
});

// Use the agent from within a normal action:
export const createThread = action({
  args: { prompt: v.string() },
  handler: async (ctx, { prompt }) => {
    const { threadId, thread } = await supportAgent.createThread(ctx);
    const result = await thread.generateText({ prompt });
    return { threadId, text: result.text };
  },
});

// Pick up where you left off, with the same or a different agent:
export const continueThread = action({
  args: { prompt: v.string(), threadId: v.string() },
  handler: async (ctx, { prompt, threadId }) => {
    // This includes previous message history from the thread automatically.
    const { thread } = await supportAgent.continueThread(ctx, { threadId });
    const result = await thread.generateText({ prompt });
    return result.text;
  },
});
```

--------------------------------

### Install dependencies with npm install

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/react-native/README.md

Run this command in the project root to install all required npm packages for the React Native example app.

```bash
npm install
```

--------------------------------

### Run the agent example project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/files.mdx

Clone the repository, set up dependencies, and start the development server.

```sh
git clone https://github.com/convex/agent.git
cd agent
npm run setup
npm run dev
```

--------------------------------

### Install dependencies and start development server

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/tanstack-start-clerk/README.md

Run these commands from your terminal to install dependencies and start the app in development mode, rebuilding assets on file changes.

```sh
pnpm install
pnpm dev
```

--------------------------------

### Install agent component and Gateway provider

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/getting-started.mdx

Install the required packages for the agent component and the Convex AI Gateway provider. Requires an existing Convex project and a paid plan or project-linked local deployment for the Gateway.

```sh
npm install @convex-dev/agent @convex-dev/ai-sdk-provider ai convex
```

--------------------------------

### Install Convex npm and Python client libraries

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/python.mdx

Installs the convex npm package, the convex Python client library, and python-dotenv for .env file handling.

```sh
cd my-app && npm init -y && npm install convex && venv/bin/pip install convex python-dotenv
```

--------------------------------

### Install dependencies and initialize Convex

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/dall-e-storage-action/README.md

Run these commands to install npm dependencies and initialize a Convex deployment.

```sh
npm install
npx convex init
```

--------------------------------

### Install Convex packages

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/vue.mdx

Install the `convex` and `convex-vue` packages in the Vue project directory.

```sh
cd my-vue-app && npm install convex convex-vue
```

--------------------------------

### Start the app with npx expo start

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/expo/README.md

Starts the Expo development server. The output provides options to open the app in a development build, Android emulator, iOS simulator, or Expo Go.

```bash
 npx expo start
```

--------------------------------

### Start development server

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/tour-chat/0-start/README.md

Run this command to start the development server.

```bash
$ npm run dev
```

--------------------------------

### Create sampleData.jsonl

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/tanstack-start.mdx

Sample data file to be imported into the tasks table.

```jsonl
{"text":"Buy groceries","isCompleted":false}
{"text":"Go for a run","isCompleted":false}
{"text":"Write a blog post","isCompleted":true}

```

--------------------------------

### Install Convex packages

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/svelte.mdx

Install the convex and convex-svelte packages in your SvelteKit app.

```sh
cd my-app && npm install convex convex-svelte
```

--------------------------------

### Install OpenAI SDK

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai-gateway/setup.mdx

Install the OpenAI SDK to use the AI Gateway from a Convex action.

```sh
npm install openai
```

--------------------------------

### Setup script for ChatGPT Codex with bun

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai/overview.mdx

Alternative setup script using bun instead of npm. It installs dependencies and runs `bun x convex dev --once`. This command requires full internet access to download the binary.

```sh
bun i
bun x convex dev --once
```

--------------------------------

### Install dependencies with npm, pnpm, yarn, or bun

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/nuxt/README.md

Install project dependencies using your preferred package manager. The commands are equivalent alternatives; choose one based on your environment.

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

--------------------------------

### Run the development server with npm, yarn, or pnpm

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/nextjs/README.md

Start the Next.js development server. The page auto-updates as you edit pages/index.js. Use one of the three package manager commands.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

--------------------------------

### Install Convex client and server libraries

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Installs the 'convex' npm package for the backend, and the 'convex' Rust client library, 'tokio' runtime, and 'dotenvy' for .env files.

```sh
npm init -y && npm install convex && cargo add convex tokio dotenvy

```

--------------------------------

### Install Convex CLI

Source: https://github.com/convex/convex-backend/blob/main/self-hosted/advanced/fly/README.md

Installs the convex package in your frontend app directory to enable deploying Convex functions.

```sh
cd <your-frontend-app-directory>
npm install convex@latest
```

--------------------------------

### Run the web UI with bun run dev

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/openauth-react/README.md

Starts the web UI server for the demo. Visit http://localhost:5173 in your browser after running this command.

```bash
bun run dev

```

--------------------------------

### Basic Agent definition with Convex AI Gateway

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/agent-usage.mdx

Defines a global Agent using the Convex AI Gateway provider. Requires installation and setup from the Getting Started guide. The name can be overridden at the call site, and many features can be used without an Agent.

```ts
import { components } from "./_generated/api";
import { Agent } from "@convex-dev/agent";
import { convexGateway } from "@convex-dev/ai-sdk-provider";

const agent = new Agent(components.agent, {
  name: "Basic Agent",
  languageModel: convexGateway("openai/gpt-5-mini"),
});
```

--------------------------------

### Run the app with npm run dev

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/clerk/README.md

Starts the development server for the example app. Run this command from the project root to launch the chat app with Clerk authentication.

```sh
npm run dev
```

--------------------------------

### Start Storybook

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/dashboard/README.md

Use this command to start Storybook, the component library for documenting the dashboard design system.

```bash
just run-storybook
```

--------------------------------

### Configure a deployment

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/vector-search/README.md

Install JavaScript dependencies and initialize Convex.

```sh
just install-js
npx convex init
```

--------------------------------

### List installed skills

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/convex/src/cli/lib/aiFiles/MANUAL_TESTING.md

List installed skills to verify the removal result.

```bash
npx skills ls --json
```

--------------------------------

### Create sample data for your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nodejs.mdx

Creates a `sampleData.jsonl` file with sample data for the database.

```jsonl
{"text":"Buy milk","isCompleted":false}
{"text":"Walk the dog","isCompleted":false}
{"text":"Do the laundry","isCompleted":true}
```

--------------------------------

### Install dependencies

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/tour-chat/0-start/README.md

Run this command to install the project dependencies.

```bash
$ npm i
```

--------------------------------

### Install Convex and convex-nuxt module

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nuxt.mdx

Installs the convex package and adds the convex-nuxt module to the Nuxt application.

```sh
cd my-nuxt-app && npm install convex && npx nuxi module add convex-nuxt
```

--------------------------------

### Connect the app to the backend

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/android.mdx

Get the deployment URL and add a ConvexClient val to connect the app to the backend.

```kotlin
// highlight-next-line
val client: ConvexClient by lazy { ConvexClient($YOUR_CONVEX_URL) }
```

--------------------------------

### Update src/routes/__root.tsx

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/tanstack-start.mdx

Adds a QueryClient to the router context to make React Query usable anywhere in the TanStack Start site.

```tsx
import { createRootRouteWithContext } from '@tanstack/react-router';
import { QueryClient } from '@tanstack/react-query';

export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
  component: () => <Outlet />,
});

```

--------------------------------

### Update src/router.tsx

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/tanstack-start.mdx

Creates a ConvexClient and ConvexQueryClient and wires in a ConvexProvider.

```tsx
import { createRouter } from '@tanstack/react-router';
import { ConvexProvider, ConvexReactClient } from 'convex/react';
import { ConvexQueryClient } from '@convex-dev/react-query';
import { routeTree } from './routeTree.gen';

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);
const convexQueryClient = new ConvexQueryClient(convex);

export const router = createRouter({
  routeTree,
  context: {
    queryClient: convexQueryClient,
  },
});

```

--------------------------------

### Create a new npm project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/script-tag.mdx

Initializes a new directory and npm project for the Convex quickstart.

```sh
mkdir my-project && cd my-project && npm init -y
```

--------------------------------

### Run the local Convex backend with just run-local-backend

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/openauth-react/README.md

Starts the Convex backend in the monorepo. Required for the demo to work.

```bash
just run-local-backend

```

--------------------------------

### Run the Convex Ents demo

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/uses-ents/README.md

Build the JavaScript project and start the development server. Run these commands in the project root.

```bash
just build-js
npm run dev
```

--------------------------------

### Create a Vue site with npm create vue@latest

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/vue.mdx

Run this command to scaffold a new Vue project. Choose 'Yes' for TypeScript and 'No' for all other options to follow the quickstart closely.

```sh
npm create vue@latest my-vue-app
```

--------------------------------

### Start the JWT API with bun run --hot jwt-api.ts

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/openauth-react/README.md

Starts a JWT API running to get the user subject on http://localhost:3001.

```bash
bun run --hot jwt-api.ts

```

--------------------------------

### Create sample data for your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nextjs.mdx

Create a `sampleData.jsonl` file with sample data in a new terminal window.

```jsonl
{"text":"Buy groceries","isCompleted":false}
{"text":"Go for a swim","isCompleted":false}
{"text":"Write a blog post","isCompleted":true}
```

--------------------------------

### Install JS dependencies and run demo with convex dev

Source: https://github.com/convex/convex-backend/blob/main/BUILD.md

Installs JavaScript dependencies, navigates to the tutorial demo, and starts the Convex CLI in dev mode. The `convex` script in the Justfile automatically adds the appropriate `--url` and `--admin-key` flags to point to the local backend.

```bash
just install-js
cd npm-packages/demos/tutorial
just convex dev
```

--------------------------------

### Install Convex and convex-svelte with bun

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/svelte/overview.mdx

Installs the Convex client and server library using bun. Run this in your Svelte project root.

```sh
bun add convex convex-svelte
```

--------------------------------

### Set up a Convex dev deployment

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/bun.mdx

Runs 'bunx convex dev' to log in with GitHub, create a project, save URLs, and create a 'convex/' folder. The command continues running to sync functions with the dev deployment.

```sh
bunx convex dev
```

--------------------------------

### Create a SvelteKit app

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/svelte.mdx

Run this command to create a new SvelteKit app. Choose 'SvelteKit minimal', 'npm', and 'Yes, using TypeScript syntax' for this quickstart.

```sh
npx sv@latest create my-app
```

--------------------------------

### Install @convex-dev/ai-sdk-provider and ai

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai-gateway/setup.mdx

Install the AI SDK provider package and the AI SDK. Requires @convex-dev/ai-sdk-provider 0.2.1 or later, convex 1.45 or later, and AI SDK 7.0.105 or later.

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

--------------------------------

### Set up Convex client

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/svelte.mdx

Create src/routes/+layout.svelte to set up the Convex client and make it available on every page.

```svelte
<script lang="ts">
  import { ConvexProvider } from "convex-svelte";
  import { ConvexClient } from "convex/browser";

  const convex = new ConvexClient(import.meta.env.VITE_CONVEX_URL);
</script>

<ConvexProvider client={convex}>
  <slot />
</ConvexProvider>
```

--------------------------------

### Create a Remix site

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/remix.mdx

Run this command to create a new Remix project named 'my-remix-app'.

```sh
npx create-remix@latest my-remix-app
```

--------------------------------

### Setup script for ChatGPT Codex with npm

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai/overview.mdx

A setup script for remote coding agents like ChatGPT Codex. It installs dependencies, optionally initializes Convex and sets environment variables, then runs `npx convex dev --once`. This command requires full internet access to download the binary.

```sh
npm i
# npx convex init # allows setting environment variables before pushing
# npx convex env set --from-file ./path/to/.env.agent (optional)
npx convex dev --once
```

--------------------------------

### Configure convex.config.ts to use agent component

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/getting-started.mdx

Create a convex.config.ts file in the convex/ folder and install the agent component by calling use. Run npx convex dev once to generate code for the component before defining Agents.

```ts
// convex/convex.config.ts
import { defineApp } from "convex/server";
import agent from "@convex-dev/agent/convex.config";

const app = defineApp();
app.use(agent);

export default app;
```

--------------------------------

### Start the backend with docker compose

Source: https://github.com/convex/convex-backend/blob/main/self-hosted/advanced/hosting_on_own_infra.md

Starts the Convex backend using Docker Compose.

```sh
docker compose up
```

--------------------------------

### Display data in src/routes/index.tsx

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/tanstack-start.mdx

Uses useSuspenseQuery to render the api.tasks.get query result on the server initially, then updates live in the browser.

```tsx
import { useSuspenseQuery } from '@tanstack/react-query';
import { api } from '../../convex/_generated/api';

export default function Home() {
  const tasks = useSuspenseQuery(api.tasks.get);
  return (
    <div>
      <h1>Tasks</h1>
      <ul>
        {tasks.data.map((task) => (
          <li key={task._id}>{task.text}</li>
        ))}
      </ul>
    </div>
  );
}

```

--------------------------------

### Set up a Convex dev deployment

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Runs 'npx convex dev' to log in with GitHub, create a project, save URLs, and create a 'convex/' folder for backend functions. The command continues running to sync functions.

```sh
npx convex dev

```

--------------------------------

### Create a Composable UI to display tasks

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/android.mdx

Replace the template Composable functions with a Tasks composable that subscribes to the tasks:get query and displays the results in a LazyColumn.

```kotlin
@Composable
fun Tasks(modifier: Modifier = Modifier) {
    val tasks: Result<List<Task>> by client.subscribe<List<Task>>("tasks:get")
        .collectAsState(Result.success(listOf()))
    LazyColumn(
        modifier = modifier
    ) {
        items(tasks.getOrElse { emptyList() }) { task ->
            Text(text = "Text: ${task.text}, Completed?: ${task.isCompleted}")
        }
    }
}
```

--------------------------------

### Reset the Expo project with npm run reset-project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/react-native.mdx

Reset the Expo project to get a fresh `app` directory.

```sh
npm run reset-project
```

--------------------------------

### Set up Convex dev deployment with npx convex dev

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/demos/react-native/README.md

Starts a local Convex development deployment. Requires the Convex CLI to be available via npx.

```bash
npx convex dev
```

--------------------------------

### Run AI gateway examples with convex-usher

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/ai-gateway/README.md

Deploy and run the AI gateway examples against a local gateway. Requires Funrun, Conductor, Usher, and the AI gateway to be started as described in ops/services/ai-gateway/release.md. The commands exercise getServiceToken("ai-gateway") from regular and Node actions, including OpenAI SDK, Anthropic SDK, and the published-style @convex-dev/ai-sdk-provider path targeting ai-gateway.convex.dev.

```shell
just convex-usher dev --once
just convex-usher run fetch:listModels '{}'
just convex-usher run openai:listModels '{}'
just convex-usher run node/fetch:listModels '{}'
just convex-usher run node/openai:listModels '{}'
just convex-usher run node/anthropic:listModels '{}'
just convex-usher run openai:chatCompletion \
  '{"prompt":"Reply with one short sentence."}'
just convex-usher run node/openai:chatCompletion \
  '{"prompt":"Reply with one short sentence."}'
just convex-usher run node/openai:responses \
  '{"prompt":"Reply with one short sentence."}'
just convex-usher run node/anthropic:messages \
  '{"prompt":"Reply with one short sentence."}'

```

--------------------------------

### Create sample data for your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/script-tag.mdx

Creates a `sampleData.jsonl` file with sample data for the Convex database.

```jsonl
{"text":"Buy milk","isCompleted":false,"assignee":"Amrit"}
{"text":"Walk the dog","isCompleted":false,"assignee":"Amrit"}
{"text":"Buy milk","isCompleted":false,"assignee":"Amrit"}
{"text":"Walk the dog","isCompleted":false,"assignee":"Amrit"}
```

--------------------------------

### Run the dashboard with deployment URL

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/dashboard-self-hosted/README.md

Starts the self-hosted dashboard, pointing it at your Convex deployment URL. The URL can be local, remote, or on Convex Cloud.

```bash
just run-dashboard "YOUR_DEPLOYMENT_URL"
```

--------------------------------

### app/ConvexClientProvider.tsx with Auth0

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/nextjs/app-router/index.mdx

Example of a ConvexClientProvider file for Auth0 authentication in a Next.js App Router app. This is the client-side only authentication setup, placed inside the app/ConvexClientProvider.tsx file. The snippet is sourced from the quickstart demo and shows how to wrap the app with Convex and Auth0 providers.

```tsx
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { Auth0Provider } from "@auth0/auth0-react";
import { ReactNode } from "react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export default function ConvexClientProvider({ children }: { children: ReactNode }) {
  return (
    <Auth0Provider
      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN!}
      clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID!}
      authorizationParams={{
        redirect_uri: typeof window !== "undefined" ? window.location.origin : undefined,
      }}
    >
      <ConvexProvider client={convex}>{children}</ConvexProvider>
    </Auth0Provider>
  );
}
```

--------------------------------

### Run the app

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Runs the app and displays the serialized list of tasks.

```sh
cargo run

```

--------------------------------

### Sample schema.ts for Fivetran destination with email.cars table

Source: https://github.com/convex/convex-backend/blob/main/crates/fivetran_destination/docs/setup-guide.md

Example schema.ts for a Convex deployment used as a Fivetran destination. It defines a table `email_cars` with Fivetran-specific metadata columns and indexes. Use this as a reference when updating your schema.ts after an initial sync failure.

```typescript
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

const fivetranTables = {
  email_cars: defineTable({
    description: v.union(v.string(), v.null()),
    fivetran: v.object({
      columns: v.object({
        directory: v.union(v.string(), v.null()),
        file: v.union(v.string(), v.null()),
        line: v.union(v.int64(), v.null()),
        modified: v.union(v.float64(), v.null()),
      }),
      synced: v.float64(),
    }),
    make: v.union(v.string(), v.null()),
    model: v.union(v.string(), v.null()),
    price: v.union(v.float64(), v.null()),
    year: v.union(v.int64(), v.null()),
  })
    .index("by_fivetran_synced", ["fivetran.synced"])
    .index("by_primary_key", [
      "fivetran.columns.directory",
      "fivetran.columns.file",
      "fivetran.columns.line",
      "fivetran.columns.modified",
    ]),
};

export default defineSchema({
  ...fivetranTables,
});
```

--------------------------------

### Install AuthKit Next.js SDK

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/auth/authkit/add-to-app.mdx

Install the AuthKit Next.js SDK and the Convex WorkOS package using npm.

```sh
npm install @workos-inc/authkit-nextjs @convex-dev/workos
```

--------------------------------

### Run the Python script

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/python.mdx

Executes the main.py script to see the serialized list of tasks.

```sh
venv/bin/python -m main
```

--------------------------------

### Install non-Convex skill

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/convex/src/cli/lib/aiFiles/MANUAL_TESTING.md

Installs a non-Convex skill before running ai-files install to test that remove preserves it.

```bash
npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent codex --yes
```

--------------------------------

### MainActivity with Tasks composable

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/android.mdx

Sets up the main activity for the Android quickstart, using edge-to-edge display and a Scaffold that wraps the Tasks composable with inner padding.

```kotlin
class MainActivity : ComponentActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          enableEdgeToEdge()
          setContent {
              ConvexQuickstartTheme {
                  Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                      // highlight-next-line
                      Tasks(
                          // highlight-next-line
                          modifier = Modifier.padding(innerPadding)
                      // highlight-next-line
                      )
                  }
              }
          }
      }
    }
```

--------------------------------

### Create a new Android app in Android Studio

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/android.mdx

Choose the 'Empty Activity' template, name it 'Convex Quickstart', set min SDK to 26, and select Kotlin as the Gradle DSL.

```text
1. Choose the "Empty Activity" template
2. Name it "Convex Quickstart"
3. Choose min SDK as 26
4. Choose Kotlin as the Gradle DSL
```

--------------------------------

### Install libraries for .eslintrc.js

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/linting/eslint.mdx

Install the required libraries when using the deprecated .eslintrc.js format.

```sh
npm i @typescript-eslint/eslint-plugin @convex-dev/eslint-plugin --save-dev
```

--------------------------------

### Run the script

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nodejs.mdx

Runs the script from the same directory and logs the list of tasks to the terminal.

```sh
node script.js
```

--------------------------------

### Log in to Convex

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/understanding/workflow.mdx

Required if you have not created a Convex account yet. This automatically links any projects you've started with your new account and enables using your production deployment.

```bash
npx convex login
```

--------------------------------

### Install AuthKit React SDK

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/auth/authkit/add-to-app.mdx

Install the required packages for integrating AuthKit with Convex.

```sh
npm install @workos-inc/authkit-react @convex-dev/workos
```

--------------------------------

### Stream deltas asynchronously with DeltaStreamer and streamText

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/streaming.mdx

Use the AI SDK's streamText directly with the DeltaStreamer class to save deltas to the database. Requires a threadId from the Agent component and a distinct order for each stream. Uses the Convex AI Gateway; see Getting Started for installation.

```ts
import { components } from "./_generated/api";
import { type ActionCtx } from "./_generated/server";
import { DeltaStreamer, compressUIMessageChunks } from "@convex-dev/agent";
import { streamText } from "ai";
import { convexGateway } from "@convex-dev/ai-sdk-provider";

async function stream(ctx: ActionCtx, threadId: string, order: number) {
  const streamer = new DeltaStreamer(
    components.agent,
    ctx,
    {
      throttleMs: 100,
      onAsyncAbort: async () => console.error("Aborted asynchronously"),
      // This will collapse multiple tiny deltas into one if they're being sent
      // in quick succession.
      compress: compressUIMessageChunks,
      abortSignal: undefined,
    },
    {
      threadId,
      format: "UIMessageChunk",
      order,
      stepOrder: 0,
      userId: undefined,
    },
  );
  // Do the normal streaming with the AI SDK
  const response = streamText({
    model: convexGateway("openai/gpt-5-mini"),
    prompt: "Tell me a joke",
    abortSignal: streamer.abortController.signal,
    onError: (error) => {
      console.error(error);
      streamer.fail(errorToString(error.error));
    },
  });

  // We could await here if we wanted to wait for the stream to finish,
  // but instead we have it process asynchronously so we can return a streaming
  // http Response.
  void streamer.consumeStream(response.toUIMessageStream());

  return {
    // e.g. to do `response.toTextStreamResponse()` for HTTP streaming.
    response,
    // We don't need this on the client, but with it we can have some clients
    // selectively not stream down deltas when they're using HTTP streaming
    // already.
    streamId: await streamer.getStreamId(),
  };
}
```

--------------------------------

### Create a new Bun project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/bun.mdx

Initializes a new Bun project in a new directory named 'my-project'.

```sh
mkdir my-project && cd my-project && bun init -y
```

--------------------------------

### Create sample data for your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/remix.mdx

Create a 'sampleData.jsonl' file at the root of your app and fill it with the sample data given.

```jsonl
{"text":"Buy groceries","isCompleted":true}
{"text":"Go for a swim","isCompleted":true}
{"text":"Call mom","isCompleted":false}
{"text":"Write a blog post","isCompleted":false}
{"text":"Read a book","isCompleted":false}
```

--------------------------------

### Run dashboard locally with Docker

Source: https://github.com/convex/convex-backend/blob/main/self-hosted/advanced/fly/README.md

Starts the Convex dashboard container, mapping port 6791 and passing the Fly-hosted backend URL via the NEXT_PUBLIC_DEPLOYMENT_URL environment variable. Replace <fly-backend-url> with your backend's URL.

```sh
docker run -e 'NEXT_PUBLIC_DEPLOYMENT_URL=<fly-backend-url>' -p '6791:6791' 'ghcr.io/convex/convex-dashboard:latest'
```

--------------------------------

### Install dependencies and build monorepo with turbo

Source: https://github.com/convex/convex-backend/blob/main/BUILD.md

Installs required dependencies and builds the entire monorepo. Use `just turbo run build --filter=docs...` to build individual packages and their dependencies.

```sh
npm clean-install --prefix scripts
just install-js

# Builds the entire monorepo
just turbo run build
# You can also build individual packages and their dependencies, for example: just turbo run build --filter=docs...
```

--------------------------------

### Add the sample data to your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Imports the sample data into a 'tasks' table using the 'import' command.

```sh
npx convex import --table tasks sampleData.jsonl

```

--------------------------------

### Manual fetch with getServiceToken

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai-gateway/setup.mdx

Use fetch to call the AI Gateway HTTP API without an SDK. Mint a token with getServiceToken("ai-gateway") and send it as Authorization: Bearer <token>. The example posts to the chat completions endpoint.

```ts
import { action } from "./_generated/server";
import { v } from "convex/values";
import { getServiceToken } from "convex/server";

export const chat = action({
  args: { prompt: v.string() },
  handler: async (ctx, { prompt }) => {
    const token = await getServiceToken("ai-gateway");
    const response = await fetch(
      "https://ai-gateway.convex.dev/v1/chat/completions",
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: "openai/gpt-4o-mini",
          messages: [{ role: "user", content: prompt }],
        }),
      },
    );
    return await response.json();
  },
});
```

--------------------------------

### Install typescript-eslint for type-aware linting

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/linting/eslint.mdx

Install typescript-eslint to enable type-aware linting for rules like explicit-table-ids and no-collect-in-query.

```sh
npm i typescript-eslint --save-dev
```

--------------------------------

### Create sample data for your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Creates a 'sampleData.jsonl' file with sample data for the database.

```jsonl
{"text":"Buy groceries","isCompleted":true}
{"text":"Go for a run","isCompleted":false}
{"text":"Write a blog post","isCompleted":false}

```

--------------------------------

### Install non-Convex and Convex skills

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/convex/src/cli/lib/aiFiles/MANUAL_TESTING.md

Install a non-Convex skill and a couple of Convex skills in a fresh temp project. The first command installs a non-Convex skill, the second installs a Convex skill.

```bash
npx skills add vercel-labs/agent-skills --skill web-design-guidelines --agent codex --yes
```

```bash
npx skills add convex/agent-skills --skill convex-quickstart --agent codex --yes
```

--------------------------------

### Set up ConvexProvider in pages/_app.js

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/nextjs/pages-router/quickstart-nextjs-pages-router.mdx

Creates a `ConvexReactClient` and passes it to a `ConvexProvider` wrapping the app in `pages/_app.js`.

```js
import { ConvexProvider, ConvexReactClient } from "convex/react";
import convexConfig from "../convex/_generated/convexConfig";

const convex = new ConvexReactClient(convexConfig);

export default function App({ Component, pageProps }) {
  return (
    <ConvexProvider client={convex}>
      <Component {...pageProps} />
    </ConvexProvider>
  );
}
```

--------------------------------

### Connect the script to your backend

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nodejs.mdx

Creates a `ConvexHttpClient` in `script.js` using the URL of the development environment.

```js
import "dotenv/config";
import { ConvexHttpClient } from "convex/browser";

const client = new ConvexHttpClient(process.env.CONVEX_URL);

const tasks = await client.query("tasks:get");
console.log(tasks);
```

--------------------------------

### Connect the app to your backend

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/react.mdx

In src/main.tsx, create a ConvexReactClient and pass it to a ConvexProvider wrapping your app.

```tsx
import { ConvexProvider, ConvexReactClient } from "convex/react";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ConvexProvider client={convex}>
      <App />
    </ConvexProvider>
  </React.StrictMode>
);
```

--------------------------------

### Create a new npm project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nodejs.mdx

Initializes a new Node.js project with npm and sets the module type to ESM.

```sh
mkdir my-project && cd my-project && npm init -y && npm pkg set type="module"
```

--------------------------------

### Run generateImage example

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/files.mdx

Use this command to run the generateImage example, which takes a prompt, generates an image with OpenAI's dall-e 2, and saves it to a thread.

```sh
npx convex run files:generateImage:replyWithImage '{prompt: "make a picture of a cat" }'
```

--------------------------------

### Manual invocation example for auth setup

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai/agent-skills.mdx

Example of manually invoking a skill in Cursor or Claude Code using the /convex-auth command.

```text
/convex-auth
```

--------------------------------

### Install dependencies with npm i

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/chef/migration-guide.mdx

Run after unzipping and renaming your downloaded Chef project folder. Installs all project dependencies from the app folder.

```sh
cd ~/<app folder>
npm i
```

--------------------------------

### Add the sample data to your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/bun.mdx

Imports the sample data into a 'tasks' table in the Convex database using the 'import' command.

```sh
bunx convex import --table tasks sampleData.jsonl
```

--------------------------------

### setupConvex(url, options?)

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/svelte/reactivity.mdx

Initializes the Convex client and stores it in Svelte context. Call once in a root layout. Returns a ConvexClient instance.

```APIDOC
## setupConvex(url, options?)

### Description
Initializes the Convex client and stores it in Svelte context. Call once in a root layout. Returns a ConvexClient instance.

### Parameters
- **url** (string) - Required - The Convex deployment URL.
- **options** (object) - Optional - Additional client options.

### Returns
- **ConvexClient** - The initialized Convex client.
```

--------------------------------

### Create a Python virtual environment

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/python.mdx

Creates a virtual environment for the Python script in the my-app folder.

```sh
python3 -m venv my-app/venv
```

--------------------------------

### Install Convex and convex-svelte with yarn

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/svelte/overview.mdx

Installs the Convex client and server library using yarn. Run this in your Svelte project root.

```sh
yarn add convex convex-svelte
```

--------------------------------

### Install Convex and convex-svelte with pnpm

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/svelte/overview.mdx

Installs the Convex client and server library using pnpm. Run this in your Svelte project root.

```sh
pnpm add convex convex-svelte
```

--------------------------------

### Install Convex and convex-svelte with npm

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/svelte/overview.mdx

Installs the Convex client and server library using npm. Run this in your Svelte project root.

```sh
npm install convex convex-svelte
```

--------------------------------

### Connect the app to your backend (app/_layout.tsx)

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/react-native.mdx

In `_layout.tsx`, create a `ConvexReactClient` and pass it to a `ConvexProvider` wrapping your component tree.

```tsx
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { Stack } from "expo-router";
import { useEffect, useState } from "react";
import { ActivityIndicator, View } from "react-native";

export default function RootLayout() {
  const [convexClient] = useState(() => new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!));

  if (!convexClient) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator />
      </View>
    );
  }

  return (
    <ConvexProvider client={convexClient}>
      <Stack screenOptions={{ headerShown: false }} />
    </ConvexProvider>
  );
}
```

--------------------------------

### Install Agent and AI SDK provider

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/ai-gateway/setup.mdx

Install the Agent component and the AI SDK provider package. Requires convex 1.46 or later.

```sh
npm install @convex-dev/agent @convex-dev/ai-sdk-provider
```

--------------------------------

### Install Convex skill manually

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/convex/src/cli/lib/aiFiles/MANUAL_TESTING.md

Installs a Convex skill manually to verify the CLI does not claim it based on local provenance.

```bash
npx skills add convex/agent-skills --skill convex-quickstart --agent codex --yes
```

--------------------------------

### Create sample data for your database

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/react.mdx

Create a sampleData.jsonl file with sample data to use for your tasks table. The file is created in a new terminal window.

```jsonl
{"text": "Buy groceries", "isCompleted": false}
{"text": "Go for a run", "isCompleted": false}
{"text": "Read a book", "isCompleted": true}
```

--------------------------------

### Import sample data into Convex

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/nextjs/pages-router/quickstart-nextjs-pages-router.mdx

Adds a `tasks` table with the sample data from `sampleData.jsonl` into your Convex database.

```sh
npx convex import --table tasks sampleData.jsonl
```

--------------------------------

### Create a Cargo project

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/rust.mdx

Initializes a new Cargo project named 'my_app' and navigates into it.

```sh
cargo new my_app
cd my_app

```

--------------------------------

### Run convex dev against local backend

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/components-poc/README.md

Runs convex dev against the local backend. Ensure `just turbo run build` is executed first if needed.

```bash
just convex dev
```

--------------------------------

### Create sampleData.jsonl

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/nextjs/pages-router/quickstart-nextjs-pages-router.mdx

Create a `sampleData.jsonl` file with sample data for the tasks table.

```jsonl
{"text":"Buy groceries","isCompleted":true}
{"text":"Go for a swim","isCompleted":true}
{"text":"Call mom","isCompleted":false}
```

--------------------------------

### Create a component with npx

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/components-poc/README.md

Command to scaffold a new component in the specified location.

```bash
npx component create somewhere/myComponent
```

--------------------------------

### Build application for production

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/nuxt/README.md

Build the application for production using your package manager. This prepares the app for deployment.

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build
```

--------------------------------

### Create a Nuxt application with npm create nuxt@latest

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/nuxt.mdx

Run this command to scaffold a new Nuxt application. Convex works with any official Nuxt module, but skip installing them for this quickstart.

```sh
npm create nuxt@latest my-nuxt-app
```

--------------------------------

### Fetch tasks with useQuery in pages/index.js

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/client/nextjs/pages-router/quickstart-nextjs-pages-router.mdx

Uses the `useQuery` hook to fetch from the `api.tasks.get` API function and displays the list of tasks.

```js
import { useQuery } from "convex/react";
import { api } from "../convex/_generated/api";

export default function Home() {
  const tasks = useQuery(api.tasks.get);
  return (
    <main>
      <h1>Tasks</h1>
      <ul>
        {tasks?.map((task) => (
          <li key={task._id}>{task.text}</li>
        ))}
      </ul>
    </main>
  );
}
```

--------------------------------

### Create sample data for your database (sampleData.jsonl)

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/quickstart/react-native.mdx

Create a `sampleData.jsonl` file with some sample data to be used with the Convex database.

```jsonl
{"text": "Buy groceries", "isCompleted": true}
{"text": "Go for a walk", "isCompleted": false}
{"text": "Learn Convex", "isCompleted": false}
```

--------------------------------

### Start the OpenAuth server with bun run --hot issuer.ts

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/openauth-react/README.md

Starts the OpenAuth server at http://localhost:3000, which hosts the .well-known/jwks.json endpoint that the Convex deployment must hit.

```bash
bun run --hot issuer.ts

```

--------------------------------

### Run Playground Locally

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/agents/playground.mdx

Starts the playground locally. Uses the VITE_CONVEX_URL environment variable, usually pulled from .env.local.

```Shell
npx @convex-dev/agent-playground
```

--------------------------------

### Preview production build locally

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/nuxt/README.md

Locally preview the production build with your package manager. Use this to verify the built application before deployment.

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview
```

--------------------------------

### Install Convex npm package

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/docs/docs/understanding/workflow.mdx

Run this command in your app's root directory to add the Convex npm dependency. This is the first step before creating a Convex project or starting the backend dev loop.

```sh
npm i convex
```

--------------------------------

### Create a new Svelte project with npm create svelte

Source: https://github.com/convex/convex-backend/blob/main/npm-packages/private-demos/quickstarts/sveltekit/README.md

Use these commands to scaffold a new Svelte project. The first creates a project in the current directory, the second in a folder named my-app.

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```
Tokens:
Raw