---
title: "AI Chat template | Netlify"
description: "A starting point for your own AI chat app. It talks to Claude through Netlify AI Gateway, so there’s no API key to set up."
source: "https://www.netlify.com/templates/ai-chat/"
last_updated: "2026-10-19T11:51:47.000Z"
---
# AI Chat

A starting point for your own AI chat app. It talks to Claude through Netlify AI Gateway, so there’s no API key to set up.

[](https://github.com/netlify-templates/tanstack-template "View source on GitHub")[Use template](https://app.netlify.com/start/deploy?repository=https%3A%2F%2Fgithub.com%2Fnetlify-templates%2Ftanstack-template) [View demo](https://tanstack-starter.netlify.app/)

## Tags

-   AI
-   TanStack Start

![Preview of AI Chat](/cms-assets/templates/ai-chat.webp)

## Built on Netlify

-   Functions
    
    Server-side code that runs on request, without managing servers.
    
    [Read the docs
    
    ](https://docs.netlify.com/build/functions/overview/)
-   AI Gateway
    
    Calls AI model providers through Netlify, without managing API keys.
    
    [Read the docs
    
    ](https://docs.netlify.com/build/ai-gateway/overview/)

### Also uses

-   React 19
-   TanStack Start
-   TanStack Router
-   TanStack Store
-   Tailwind CSS 4
-   Vite 7

## Security and data

### Environment variables

Variable

Default

Description

`ANTHROPIC_API_KEY`

Not set

Only needed if you want to use your own Anthropic key instead of AI Gateway.

## Make it yours

1.  Step 1
    
    Deploy
    
    Create a copy of the repository in your Git account and build it on Netlify.
    
2.  Step 2
    
    Configure
    
    Set the environment variables listed above in your project configuration.
    
3.  Step 3
    
    Extend
    
    Change the code in your repository, or start an agent run to make changes for you.
    

## Related templates

-   [
    
    React Router Starter
    
    ](/templates/react-router-starter)
    
    A full-stack React Router app with server-side rendering, TypeScript, and Tailwind, configured to run on Netlify.
    
-   [
    
    Next.js Starter
    
    ](/templates/nextjs-starter)
    
    A Next.js App Router starter that uses Netlify Edge Functions, Image CDN, and Blobs directly from your own code.
    
-   [
    
    Astro Starter
    
    ](/templates/astro-starter)
    
    An Astro starter that uses Netlify Edge Functions, Image CDN, and Blobs, with Tailwind for styling.
    

AI Chat

[Use template](https://app.netlify.com/start/deploy?repository=https%3A%2F%2Fgithub.com%2Fnetlify-templates%2Ftanstack-template)