https://github.com/nuxt-ui-pro/chat
Nuxt AI Chatbot Template made with Nuxt UI Pro on NuxtHub.
https://github.com/nuxt-ui-pro/chat
ai chat chatbot nuxt nuxt-ui nuxt-ui-pro nuxthub vue
Last synced: 5 months ago
JSON representation
Nuxt AI Chatbot Template made with Nuxt UI Pro on NuxtHub.
- Host: GitHub
- URL: https://github.com/nuxt-ui-pro/chat
- Owner: nuxt-ui-pro
- Created: 2025-03-20T10:21:04.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-05-13T12:03:24.000Z (5 months ago)
- Last Synced: 2025-05-13T12:47:48.637Z (5 months ago)
- Topics: ai, chat, chatbot, nuxt, nuxt-ui, nuxt-ui-pro, nuxthub, vue
- Language: Vue
- Homepage: https://chat-template.nuxt.dev
- Size: 409 KB
- Stars: 62
- Watchers: 3
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-nuxt - Nuxt AI Chatbot Template
README
# Nuxt AI Chatbot Template
[](https://ui.nuxt.com/pro)
[](https://hub.nuxt.com/new?repo=nuxt-ui-pro/chat)Full-featured AI Chatbot Nuxt application with authentication, chat history, multiple pages, collapsible sidebar, keyboard shortcuts, light & dark mode, command palette and more. Built using [Nuxt UI Pro](https://ui.nuxt.com/pro) components and integrated with [Workers AI](https://ai.cloudflare.com) for a complete chat experience.
- [Live demo](https://chat-template.nuxt.dev/)
- [Documentation](https://ui.nuxt.com/getting-started/installation/pro/nuxt)## Features
- ⚡️ **Streaming AI messages** powered by the [Vercel AI SDK ](https://sdk.vercel.ai)
- 🤖 **Multiple model support** via [Workers AI](https://ai.cloudflare.com) with support for [AI Gateway](https://developers.cloudflare.com/ai-gateway/)
- 🔐 **Authentication** via [nuxt-auth-utils](https://github.com/atinux/nuxt-auth-utils)
- 💾 **Chat history persistence** using [NuxtHub database](https://hub.nuxt.com/docs/features/database) and [Drizzle ORM](https://orm.drizzle.team)
- 🚀 **One-click deploy** to your Cloudflare account with NuxtHub: [deploy now](https://hub.nuxt.com/new?repo=nuxt-ui-pro/chat)## Quick Start
```bash
npx nuxi@latest init -t github:nuxt-ui-pro/chat
```## Setup
Make sure to install the dependencies:
```bash
pnpm install
```Next, link a NuxtHub project (even if not deployed) to access AI models in development:
```bash
npx nuxthub link
```> [!TIP]
> It works with free Cloudflare and NuxtHub accounts.To add authentication with GitHub, you need to [create a GitHub OAuth application](https://github.com/settings/applications/new) and then fill the credentials in your `.env`:
```env
NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=
```## Development
Start the development server on `http://localhost:3000`:
```bash
pnpm dev
```## Production
Build the application for production:
```bash
pnpm build
```> [!IMPORTANT]
> Make sure to add your [Nuxt UI Pro License](https://ui.nuxt.com/getting-started/license) in order to build for productionLocally preview production build:
```bash
pnpm preview
```Deploy to your Cloudflare account with zero configuration:
```bash
npx nuxthub deploy
```> [!NOTE]
> NuxtHub will automatically spawn a D1 database and apply the database migrations when deploying your project.Optionally, you can create a [Cloudflare AI Gateway](https://developers.cloudflare.com/ai-gateway/) to have usage analytics and the ability to cache response to reduce costs. Once created, you can add the `NUXT_CLOUDFLARE_GATEWAY_ID` environment variable with the named of your gateway.
## Renovate integration
Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.