An open API service indexing awesome lists of open source software.

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.

Awesome Lists containing this project

README

          

# Nuxt AI Chatbot Template

[![Nuxt UI Pro](https://img.shields.io/badge/Made%20with-Nuxt%20UI%20Pro-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com/pro)
[![Deploy to NuxtHub](https://img.shields.io/badge/Deploy%20to-NuxtHub-00DC82?logo=nuxt&labelColor=020420)](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)





Nuxt AI Chatbot Template

## 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 production

Locally 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.