# Build a React Router website with AI

URL: https://xodia.ai/guides/build-react-router-website-ai
Description: Build a React Router website with AI: start from Xodia's React + Vite starter, plan every page with your AI, build them and edit each one visually.
Last updated: 2026-11-08

To build a React Router website with AI, start a project from Xodia's React + Vite starter, which routes its pages with React Router, let your AI plan every page in the Plan tab and build them, then edit the result visually before you deploy to your host.

Updated October 28, 2026

[Start free](https://app.xodia.ai/auth/sign-up?ref=guides-build-react-router-website-ai) [Vite and React in Xodia](https://xodia.ai/frameworks/vite-react)

Free plan. No card needed.

Step by step

## How to build a React Router website with AI

Six steps from an empty project to a multi-page React Router site in your own repository.

1. 1 Pick the React + Vite starter Press New project, choose Start a new site and pick React + Vite: the Xodia template, with React Router, its routes in src/routes.tsx, its pages in src/pages and Tailwind v4. Name the project and tick Plan the site with AI next.
2. 2 Write the brief The Plan tab opens. Say what the business does, who the site is for and the main thing visitors should do, and add two or three sites you like with what you like about each.
3. 3 Connect your AI Connect Claude Code, the Claude app, Cursor, Codex or any [MCP](https://xodia.ai/glossary/mcp) app to Xodia. It drafts the plan from your brief: a [sitemap](https://xodia.ai/glossary/sitemap), the sections on every page, the navigation and footer, and the style.
4. 4 Review the sitemap and wireframes Move sections, pick layouts from the section library, and switch to [Wireframe](https://xodia.ai/glossary/wireframe) to see every page drawn full height. Change anything before a page is built.
5. 5 Build all pages Press Build, check the options line (motion, copy, visuals and icon set) and send it. Your AI builds each page as a component in src/pages, adds its route, and checks its design, copy and links.
6. 6 Edit, push and deploy Click through the built pages in Design and fix the details yourself. Every change saves as you go. Move the project to GitHub, push, connect your host and deploy.

The starter

## A React Router project from the first click

The starter is the Xodia template: Vite, React and React Router, with Home and About pages in a shared layout, its routes listed in src/routes.tsx and Tailwind v4.

- What's inside: [the React + Vite starter](https://xodia.ai/start/react-vite)
- Your AI follows Xodia's Vite and React pack: routes, pages, titles and meta

Plan

## The whole site planned before a route is written

Your AI picks from 40 section types with 138 layouts and 23 page templates, and sets the colours, fonts and motion in the Style view.

- Everything about planning: [Plan with AI](https://xodia.ai/product/plan)

Build

## One request per page, checked as it goes

Pages move to Built as your AI finishes them, and every change stays in Xodia for you to review before you push it.

Questions

## Questions about React Router sites

**Does Xodia support React Router framework mode or Remix?**

No. Xodia uses React Router in library mode, as the starter does; sites in framework mode or on Remix are refused at import. See [Vite and React](https://xodia.ai/frameworks/vite-react).

**Where does the code live?**

A project started from a starter keeps its code in Xodia's own storage until you move it to a GitHub repository. Deploying to a host starts from there.

**Can I plan without connecting an AI?**

Drafting, wireframing and building the pages need an AI connected to Xodia. Without one, you can still build the pages by hand in the [visual editor](https://xodia.ai/glossary/visual-editor).

**Which plans include the Plan tab?**

Free, Starter, Pro and Agency. See [pricing](https://xodia.ai/pricing).

Keep exploring

## Related guides and pages

- [Connect an MCP server to build and edit your website Add Xodia to Claude Code, Cursor or any MCP app](https://xodia.ai/guides/connect-mcp-server-website)
- [Edit an AI-built site exported to GitHub Import the repo an AI tool made and keep editing](https://xodia.ai/guides/edit-ai-built-site-github)
- [Edit a site built with Claude Code, visually Open the code your AI wrote and change it by clicking](https://xodia.ai/guides/edit-claude-code-site-visually)
- [Vite and React Build and edit React sites with AI](https://xodia.ai/frameworks/vite-react)
- [Plan with AI Sitemap, wireframes and style](https://xodia.ai/product/plan)
- [Build a new site From a brief to a live site](https://xodia.ai/solutions/new-site)

[See every guide](https://xodia.ai/guides)

Primary sources

## Official docs

Updated October 28, 2026

- [React Router docs](https://reactrouter.com/home)
- [Getting started, Vite docs](https://vite.dev/guide/)

## Start a React Router site with your AI.

[Start free](https://app.xodia.ai/auth/sign-up?ref=guides-build-react-router-website-ai-cta) [See pricing](https://xodia.ai/pricing)