Build a React Router website with AI
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
Free plan. No card needed.
Xodia's Plan tab on Sitemap: Home and the pages under it as cards on a canvas, each with its sections drawn as small layouts and the shared navigation and footer, with Wireframe 5 pages and Build 5 pages in the toolbar.
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
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
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
Connect your AI
Connect Claude Code, the Claude app, Cursor, Codex or any MCP app to Xodia. It drafts the plan from your brief: a sitemap, the sections on every page, the navigation and footer, and the style.
- 4
Review the sitemap and wireframes
Move sections, pick layouts from the section library, and switch to Wireframe to see every page drawn full height. Change anything before a page is built.
- 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
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
- Your AI follows Xodia's Vite and React pack: routes, pages, titles and meta
Xodia's New project dialog on Pick a template or a starter: React + Vite and HTML + Vite, each with what it suits and its tags, with React + Vite chosen, then the project name, Create project and Plan the site with AI next.
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
Xodia's Plan tab on Style: Brand, Colours, Type, Motion, Copy and SEO, Visuals, Icons and Inspiration down the side with Apply to theme, the palette strip and six colour rows with role, name and value, the heading and body fonts, and a preview of the home page.
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.
Xodia's Build all pages dialog: skip pages already built, the five pages to build with their paths, Home skipped as built, the options line (soft motion, draft copy, matching SVGs, Lucide icons) with Change, and the note that your own AI does the work.
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.
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.
Which plans include the Plan tab?
Free, Starter, Pro and Agency. See pricing.
Keep exploring
Related guides and pages
- Connect an MCP server to build and edit your websiteAdd Xodia to Claude Code, Cursor or any MCP app
- Edit an AI-built site exported to GitHubImport the repo an AI tool made and keep editing
- Edit a site built with Claude Code, visuallyOpen the code your AI wrote and change it by clicking
- Vite and ReactBuild and edit React sites with AI
- Plan with AISitemap, wireframes and style
- Build a new siteFrom a brief to a live site
Primary sources
Official docs
Updated