{"id":26471095,"url":"https://github.com/netlify-templates/tanstack-template","last_synced_at":"2026-03-05T00:36:48.384Z","repository":{"id":283135392,"uuid":"943330628","full_name":"netlify-templates/tanstack-template","owner":"netlify-templates","description":"A modern chat template built with TanStack Router, Claude AI, Sentry, and Convex integrations, featuring a clean and responsive interface.","archived":false,"fork":false,"pushed_at":"2025-03-18T17:58:38.000Z","size":384,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T18:51:01.643Z","etag":null,"topics":["ai-chat","claude-ai","convex","tailwindcss","tailwindcss-v4","tanstack"],"latest_commit_sha":null,"homepage":"https://tanstack-starter.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netlify-templates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-05T14:35:57.000Z","updated_at":"2025-03-18T18:48:02.000Z","dependencies_parsed_at":"2025-03-18T18:51:05.021Z","dependency_job_id":"1762de98-43fc-45e6-9398-08e51de2a48c","html_url":"https://github.com/netlify-templates/tanstack-template","commit_stats":null,"previous_names":["netlify-templates/tanstack-template"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify-templates%2Ftanstack-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify-templates%2Ftanstack-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify-templates%2Ftanstack-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netlify-templates%2Ftanstack-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netlify-templates","download_url":"https://codeload.github.com/netlify-templates/tanstack-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244498515,"owners_count":20462344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-chat","claude-ai","convex","tailwindcss","tailwindcss-v4","tanstack"],"created_at":"2025-03-19T20:12:09.574Z","updated_at":"2026-03-05T00:36:48.315Z","avatar_url":"https://github.com/netlify-templates.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TanStack Chat Template\n\n![TanStack Starter Preview](tanstack-starter-preview.jpg)\n\nA modern chat template built with TanStack Router and Claude AI integration features a clean and responsive interface.\n\n**⚡ View demo:** [https://tanstack-starter.netlify.app/](https://tanstack-starter.netlify.app/)\n\n## Table of Contents\n- [Deploy to Netlify](#deploy-to-netlify)\n- [Features](#-features)\n  - [AI Capabilities](#ai-capabilities)\n  - [User Experience](#user-experience)\n- [Project Structure](#project-structure)\n  - [Key Directories](#key-directories)\n- [Architecture](#architecture)\n  - [Tech Stack](#tech-stack)\n  - [Prerequisites](#prerequisites)\n- [Getting Started](#getting-started)\n  - [Local Setup](#local-setup)\n  - [Troubleshooting](#troubleshooting)\n  - [Building For Production](#building-for-production)\n- [Styling](#styling)\n- [Error Monitoring](#error-monitoring)\n- [Environment Configuration](#environment-configuration)\n  - [Anthropic API Key](#anthropic-api-key)\n  - [Convex Configuration](#convex-configuration-optional)\n- [Routing](#routing)\n  - [Adding A Route](#adding-a-route)\n  - [Adding Links](#adding-links)\n  - [Using A Layout](#using-a-layout)\n- [Data Fetching](#data-fetching)\n- [State Management](#state-management)\n- [Learn More](#learn-more)\n\n## Deploy to Netlify\n\nWant to deploy immediately? Click this button\n\n[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/tanstack-template)\n\nClicking 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.\n\n## Features\n\n### AI Capabilities\n- 🤖 Powered by Claude 3.5 Sonnet \n- 📝 Rich markdown formatting with syntax highlighting\n- 🎯 Customizable system prompts for tailored AI behavior\n- 🔄 Real-time message updates and streaming responses\n\n### User Experience\n- 🎨 Modern UI with Tailwind CSS and Lucide icons\n- 🔍 Conversation management\n- 🔐 API key management\n- 📋 Markdown rendering with code highlighting\n\n## Architecture\n\n### Tech Stack\n- **Frontend Framework**: React 19 with TanStack Start\n- **Routing**: TanStack Router\n- **State Management**: TanStack Store\n- **Database**: Convex (optional)\n- **Styling**: Tailwind CSS 4\n- **AI Integration**: Anthropic's Claude API\n- **Build Tool**: Vite 6 with Vinxi\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) v20.9+\n- (optional) [nvm](https://github.com/nvm-sh/nvm) for Node version management\n- [Anthropic Claude API](https://www.anthropic.com/api)\n- (optional) [Convex Account](https://dashboard.convex.dev/signup) for database storage\n\n## Project Structure\n\nThe project follows a modular structure for better organization and maintainability:\n\n```\ntanstack-template/\n├── convex/              # Convex database schema and functions (optional)\n├── public/              # Static assets\n├── src/\n│   ├── components/      # Reusable UI components\n│   ├── routes/          # TanStack Router route definitions\n│   ├── store/           # TanStack Store state management\n│   ├── utils/           # Utility functions and helpers\n│   ├── api.ts           # API client configuration\n│   ├── client.tsx       # Client-side entry point\n│   ├── convex.tsx       # Convex client configuration\n│   ├── router.tsx       # Router configuration\n│   ├── sentry.ts        # Sentry error monitoring setup\n│   ├── ssr.tsx          # Server-side rendering setup\n│   └── styles.css       # Global styles\n├── .env.example         # Example environment variables\n├── app.config.ts        # Application configuration\n├── package.json         # Project dependencies and scripts\n├── postcss.config.ts    # PostCSS configuration for Tailwind\n├── tsconfig.json        # TypeScript configuration\n└── vite.config.js       # Vite bundler configuration\n```\n\n### Key Directories\n\n- **src/components/**: Contains all reusable UI components used throughout the application\n- **src/routes/**: Contains route definitions using TanStack Router's file-based routing\n- **src/store/**: Contains state management logic using TanStack Store\n- **convex/**: Contains Convex database schema and functions (if using Convex for persistence)\n\n## Getting Started\n\n### Local Setup\n\nFollow these steps to set up and run the project locally:\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/netlify-templates/tanstack-template.git\n   cd tanstack-template\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Set up environment variables**\n   ```bash\n   cp .env.example .env\n   ```\n   \n   Then edit the `.env` file with your credentials:\n   - Required: Add your Anthropic API key (`VITE_ANTHROPIC_API_KEY`)\n   - Optional: Add Convex URL if using database features (`VITE_CONVEX_URL`)\n   - Optional: Add Sentry credentials for error monitoring (`VITE_SENTRY_DSN`, `SENTRY_AUTH_TOKEN`)\n\n4. **Start the development server**\n   ```bash\n   npm run dev\n   ```\n   \n   The application should now be running at [http://localhost:3000](http://localhost:3000)\n\n### Troubleshooting\n\n- **Node.js version**: Ensure you're using Node.js v20.9 or higher. You can check your version with `node -v`.\n  ```bash\n  # Using nvm to install and use the correct Node version\n  nvm install 20.9\n  nvm use 20.9\n  ```\n\n- **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.\n\n- **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.\n\n- **Convex Setup (Optional)**: If you're using Convex for database functionality:\n  ```bash\n  npx convex dev\n  ```\n  This will start the Convex development server alongside your application.\n\n### Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\nTo preview the production build:\n\n```bash\nnpm run serve\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) v4 for styling.\n\n## Error Monitoring\n\nThis project uses [Sentry](https://sentry.io) for error monitoring and performance tracking. Sentry integration is optional and the project will run normally without Sentry configuration.\n\nTo set up Sentry:\n\n1. Add your Sentry DSN and Auth Token to your `.env` file (created during the Getting Started steps)\n\n```\n# .env file\nVITE_SENTRY_DSN=your-sentry-dsn-here\nSENTRY_AUTH_TOKEN=your-sentry-auth-token-here\n```\n\nIf the Sentry environment variables are not defined, the application will run without error monitoring.\n\n## Environment Configuration\n\n### Anthropic API Key\n\nYou can generate and manage your Anthropic API keys through the [Anthropic Console](https://console.anthropic.com/login).\n\n```\n# .env file\nVITE_ANTHROPIC_API_KEY=your_anthropic_api_key\n```\n\n### Convex Configuration (Optional)\n\nFor persistent storage of conversations:\n\n1. Create a Convex account at [dashboard.convex.dev](https://dashboard.convex.dev/signup)\n2. Create a new project in the Convex dashboard\n3. Run `npx convex dev` in your project directory to set up Convex\n4. Add your Convex deployment URL to the `.env` file\n\n```\n# .env file\nVITE_CONVEX_URL=your_convex_deployment_url\n```\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.\n\n```tsx\nimport { Link } from \"@tanstack/react-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n\u003cLink to=\"/about\"\u003eAbout\u003c/Link\u003e\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).\n\n### Using A Layout\n\nIn 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 `\u003cOutlet /\u003e` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { createRootRoute, Outlet } from '@tanstack/react-router'\nimport { TanStackRouterDevtools } from '@tanstack/router-devtools'\n\nimport { Link } from \"@tanstack/react-router\";\n\nexport const Route = createRootRoute({\n  component: () =\u003e (\n    \u003c\u003e\n      \u003cheader\u003e\n        \u003cnav\u003e\n          \u003cLink to=\"/\"\u003eHome\u003c/Link\u003e\n          \u003cLink to=\"/about\"\u003eAbout\u003c/Link\u003e\n        \u003c/nav\u003e\n      \u003c/header\u003e\n      \u003cOutlet /\u003e\n      \u003cTanStackRouterDevtools /\u003e\n    \u003c/\u003e\n  ),\n})\n```\n\nThe `\u003cTanStackRouterDevtools /\u003e` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere 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.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () =\u003e rootRoute,\n  path: \"/people\",\n  loader: async () =\u003e {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json() as Promise\u003c{\n      results: {\n        name: string;\n      }[];\n    }\u003e;\n  },\n  component: () =\u003e {\n    const data = peopleRoute.useLoaderData();\n    return (\n      \u003cul\u003e\n        {data.results.map((person) =\u003e (\n          \u003cli key={person.name}\u003e{person.name}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).\n\n## State Management\n\nThis 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.\n\nHere's a simple example of how to use TanStack Store:\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store } from \"@tanstack/store\";\n\nconst countStore = new Store(0);\n\nfunction Counter() {\n  const count = useStore(countStore);\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e countStore.setState((n) =\u003e n + 1)}\u003e\n        Increment - {count}\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nOne 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.\n\n```tsx\nimport { useStore } from \"@tanstack/react-store\";\nimport { Store, Derived } from \"@tanstack/store\";\n\nconst countStore = new Store(0);\n\nconst doubledStore = new Derived({\n  fn: () =\u003e countStore.state * 2,\n  deps: [countStore],\n});\ndoubledStore.mount();\n\nfunction Counter() {\n  const count = useStore(countStore);\n  const doubledCount = useStore(doubledStore);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e countStore.setState((n) =\u003e n + 1)}\u003e\n        Increment - {count}\n      \u003c/button\u003e\n      \u003cdiv\u003eDoubled - {doubledCount}\u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nYou can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).\n\n## Learn More\n\n- Explore more about deploying with Netlify in the [Netlify documentation](https://docs.netlify.com/).\n- You can learn more about TanStack in the [TanStack documentation](https://tanstack.com).\n- Learn more about integrating AI with Anthropic's Claude API in the [Anthropic API documentation](https://console.anthropic.com/docs).\n- Learn about using Convex for database storage in the [Convex documentation](https://docs.convex.dev/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetlify-templates%2Ftanstack-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetlify-templates%2Ftanstack-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetlify-templates%2Ftanstack-template/lists"}