A community-driven registry for Claude, Cursor, Windsurf, Cline & more. Not affiliated with Anthropic.
Are you the author? Sign in to claim
A modern chat template built with TanStack Router, Claude AI, Sentry, and Convex integrations, featuring a clean and res
A modern chat template built with TanStack Router and Claude AI integration features a clean and responsive interface.
⚡ View demo: https://tanstack-starter.netlify.app/
Breaking Changes from Previous Versions:
.validator() → .inputValidator())getRouter instead of createRouter)@tanstack/react-router-devtools)Want to deploy immediately? Click this button
Clicking this button will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify.
Note: TanStack Start v1.157+ is optimized for Node.js v22.12.0+. While it works on v20.9+, upgrading to v22.12.0+ is recommended for the best experience.
The project follows a modular structure for better organization and maintainability:
tanstack-template/
├── convex/ # Convex database schema and functions (optional)
├── public/ # Static assets
├── src/
│ ├── components/ # Reusable UI components
│ ├── routes/ # TanStack Router route definitions
│ ├── store/ # TanStack Store state management
│ ├── utils/ # Utility functions and helpers
│ ├── api.ts # API client configuration
│ ├── client.tsx # Client-side entry point
│ ├── convex.tsx # Convex client configuration
│ ├── router.tsx # Router configuration (exports getRouter)
│ ├── sentry.ts # Sentry error monitoring setup
│ ├── ssr.tsx # Server-side rendering setup
│ └── styles.css # Global styles
├── .env.example # Example environment variables
├── package.json # Project dependencies and scripts
├── postcss.config.ts # PostCSS configuration for Tailwind
├── tsconfig.json # TypeScript configuration
└── vite.config.js # Vite configuration with TanStack Start plugin
Follow these steps to set up and run the project locally:
Clone the repository
git clone https://github.com/netlify-templates/tanstack-template.git
cd tanstack-template
Install dependencies
npm install
Set up environment variables
cp .env.example .env
Then edit the .env file with your credentials:
ANTHROPIC_API_KEY)VITE_CONVEX_URL)VITE_SENTRY_DSN, SENTRY_AUTH_TOKEN)Start the development server
npm run dev
The application should now be running at http://localhost:3000
You can also use Netlify Dev to run your application locally with Netlify's full functionality:
Install Netlify CLI globally (if you haven't already)
npm install -g netlify-cli
Link your Netlify site (optional)
netlify link
This will connect your local project to a Netlify site. If you haven't created a Netlify site yet, you can skip this step.
Start the development server with Netlify Dev
netlify dev
This will:
npm run dev)Access your site The application will be available at http://localhost:8888 by default.
Node.js version: TanStack Start v1.157+ recommends Node.js v22.12.0+. You can check your version with node -v.
# Using nvm to install and use the recommended Node version
nvm install 22
nvm use 22
The project works with Node.js v20.9+, but upgrading to v22.12.0+ is recommended for optimal performance and compatibility.
API Key Issues: If you encounter errors related to the Anthropic API, verify that your API key is correctly set in the .env file and that you have sufficient credits in your Anthropic account.
Port Conflicts: If port 3000 is already in use, the development server will automatically try to use the next available port. Check your terminal output for the correct URL.
Convex Setup (Optional): If you're using Convex for database functionality:
npx convex dev
This will start the Convex development server alongside your application.
To build this application for production:
npm run build
To preview the production build:
npm run serve
This project uses Tailwind CSS v4 for styling.
This project uses Sentry for error monitoring and performance tracking. Sentry integration is optional and the project will run normally without Sentry configuration.
To set up Sentry:
.env file (created during the Getting Started steps)# .env file
VITE_SENTRY_DSN=your-sentry-dsn-here
SENTRY_AUTH_TOKEN=your-sentry-auth-token-here
If the Sentry environment variables are not defined, the application will run without error monitoring.
Important: Never commit your .env file to version control as it contains sensitive information. The .env file is already included in the project's .gitignore file to prevent accidental commits.
You can generate and manage your Anthropic API keys through the Anthropic Console.
# .env file
ANTHROPIC_API_KEY=your_anthropic_api_key
Important: Use ANTHROPIC_API_KEY (without the VITE_ prefix) to ensure the API key remains server-side only and is not exposed in the client-side bundle.
This template works seamlessly with Netlify AI Gateway, which automatically proxies your Anthropic API requests with built-in security, usage analytics, and rate limiting.
How it works:
api.anthropic.comThe template works out-of-the-box with Netlify AI Gateway when deployed.
Learn more: Netlify AI Gateway Documentation
If you prefer to use your own Anthropic API key instead of Netlify AI Gateway:
ANTHROPIC_API_KEY=your_anthropic_api_key
The application will use your API key directly instead of routing through AI Gateway. Note that you'll lose the built-in analytics and rate limiting features that AI Gateway provides.
For persistent storage of conversations:
npx convex dev in your project directory to set up Convex.env file# .env file
VITE_CONVEX_URL=your_convex_deployment_url
This project uses TanStack Router. The initial setup is a file based router. Which means that the routes are managed as files in src/routes.
To add a new route to your application just add another a new file in the ./src/routes directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a Link component to navigate between them.
To use SPA (Single Page Application) navigation you will need to import the Link component from @tanstack/react-router.
import { Link } from "@tanstack/react-router";
Then anywhere in your JSX you can use it like so:
<Link to="/about">About</Link>
This will create a link that will navigate to the /about route.
More information on the Link component can be found in the Link documentation.
In the File Based Routing setup the layout is located in src/routes/__root.tsx. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the <Outlet /> component.
Here is an example layout that includes a header:
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Link } from "@tanstack/react-router";
export const Route = createRootRoute({
component: () => (
<>
<header>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
</header>
<Outlet />
<TanStackRouterDevtools />
</>
),
})
The <TanStackRouterDevtools /> component is not required so you can remove it if you don't want it in your layout.
More information on layouts can be found in the Layouts documentation.
There are multiple ways to fetch data in your application. You can use the loader functionality built into TanStack Router to load the data for a route before it's rendered.
For example:
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/people",
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
return response.json() as Promise<{
results: {
name: string;
}[];
}>;
},
component: () => {
const data = peopleRoute.useLoaderData();
return (
<ul>
{data.results.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
);
},
});
Loaders simplify your data fetching logic dramatically. Check out more information in the Loader documentation.
This project uses TanStack Store for local state management. The store files are located in the src/store directory. For persistent storage, the project can optionally use Convex as a backend database.
Here's a simple example of how to use TanStack Store:
import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
const countStore = new Store(0);
function Counter() {
const count = useStore(countStore);
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
</div>
);
}
One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
const countStore = new Store(0);
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
});
doubledStore.mount();
function Counter() {
const count = useStore(countStore);
const doubledCount = useStore(doubledStore);
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
<div>Doubled - {doubledCount}</div>
</div>
);
}
You can find out everything you need to know on how to use TanStack Store in the TanStack Store documentation.
An AI-powered custom node for ComfyUI designed to enhance workflow automation and provide intelligent assistance
Deterministic multi-agent pipeline for end-to-end software development, orchestrating CLI-based AI tools (e.g. Gemini, C
💻 A curated list of papers and resources for multi-modal Graphical User Interface (GUI) agents.
npx CLI installing 100+ agents, commands, hooks, and integrations in one command