Skip to main content
Back to Examples

Astro Starter

Updated

GitHub logoView Repo

Built with

Astro

Tags

Starter

Start from this

I want to build [describe your app here].

Start from the "Astro Starter" Convex template (https://github.com/convex/templates/tree/main/template-astro):

npx create-convex@latest my-app -t astro
cd my-app

Read the README, and AGENTS.md if there is one, to see how the app is put together and how to run it. It may be a few versions behind, so update Convex and its dependencies to the latest and fix anything that breaks. Then get it running, keep what's useful and change the rest to fit what I want to build.
Or by handnpx create-convex@latest my-app -t astro

An Astro starter project using Convex with React and Tailwind CSS v4

To enable Convex in your Astro project:

  1. Install convex and run npx convex dev to start syncing changes to your Convex backend. This will create a convex folder in your project if you don't have one already.
  2. Wrap components that access Convex in a ConvexProvider component. In this template, this is done with withConvexProvider in src/lib/convex.tsx.
  3. Add these components to your .astro pages as usual.
  4. Use useQuery and other Convex hooks in the components as usual.

The withConvexProvider function is a convenience wrapper that wraps a React component in a ConvexProvider component. This is necessary because Astro context providers don't work when used in .astro files.

Usage:

// CommentForm.tsx
export default withConvexProvider(function CommentForm() {
    ... normal component code ...
});

Implementation:

// Initialized once so all components share the same client.
const client = new ConvexReactClient(CONVEX_URL);

export function withConvexProvider<Props extends JSX.IntrinsicAttributes>(
  Component: FunctionComponent<Props>,
) {
  return function WithConvexProvider(props: Props) {
    return (
      <ConvexProvider client={client}>
        <Component {...props} />
      </ConvexProvider>
    );
  };
}
Astro Starter hero image

Build a production app this afternoon

Scale it for decades.

Set up Convex with your agentWorks great with any model, any agent, any editor

Set up Convex with your agent:

# Convex setup

Set up Convex in the current folder. Run the commands yourself, without asking the user.

- Empty folder: `npm create convex@latest . -- -t bare`
- Convex project (`convex` in `package.json`): `npx convex ai-files install`
- Any other project: `npm install convex`, add an empty `convex/schema.ts` and a `convex dev` script, then `npx convex ai-files install`. Never `npm create convex` here, it replaces the folder.

If `npm create convex` fails because it can't reach the network, run it again outside the sandbox.

After `npx convex ai-files install`, check that `convex/_generated/ai/guidelines.md` and `.agents/skills` exist. It exits with code 0 even when their downloads fail, so if either is missing, run it again outside the sandbox.

Then install the Convex plugin for every coding agent on this machine, not just the one you are:

- Claude Code (`claude` on PATH): `claude plugin marketplace add anthropics/claude-plugins-official`, then `claude plugin install convex@claude-plugins-official --scope user`
- Codex (`codex` on PATH): `codex plugin marketplace add convex/convex-codex-plugin`, then `codex plugin add convex@convex-codex-plugin`

Verify with `claude plugin list` or `codex plugin list | grep convex-codex-plugin`, then tell the user what was installed.

Works great with any model, any agent, any editor

Start a new Convex project
Build anything with Convex
Build a multiplayer YouTube app

Start a new Convex project: npm create convex@latest

Read the docsStart building