chat-vue - GitLite

KO | EN

gitlite — search

#javascript #react #typescript #go #machine-learning #nodejs #java #awesome #cli #awesome-list #vue #mcp #ios #open-source

chat-vue

(★ 96)

Vue AI Chatbot Template made with Nuxt UI, Vercel AI SDK, Vite and Nitro.

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- logo.svg
- - schema.ts
- - csrf.ts
- - migrations.ts
- - drizzle.ts
  - session.ts
- - models.ts
- - ModalConfirm.vue
  - ModalRename.vue
  - ModelSelect.vue
  - Navbar.vue
  - UserMenu.vue
- - useChatActions.ts
  - useChats.ts
  - useCsrf.ts
  - useModels.ts
  - useUserSession.ts
- - default.vue
- - index.vue
- - ai.ts
  - tool.ts
  - url.ts
- App.vue
- main.ts
- route-map.d.ts
- vite-env.d.ts
.editorconfig
.env.example
.gitignore
drizzle.config.ts
eslint.config.ts
index.html
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
renovate.json
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/nuxt-ui-templates/chat-vue

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd chat-vue

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm create nuxt@latest -- --no-modules -t ui-vue/chat

이 명령어를 터미널에 그대로 입력해 실행하세요.

pnpm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

pnpm db:migrate

이 명령어를 터미널에 그대로 입력해 실행하세요.

pnpm dev

개발/실행 서버를 켭니다.

pnpm build

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue AI Chatbot Template

[![Nuxt UI](https://img.shields.io/badge/Made%20with-Nuxt%20UI-00DC82?logo=nuxt&labelColor=020420)](https://ui.nuxt.com)
[![Nitro](https://img.shields.io/badge/Built%20with-Nitro-ff637e?logo=nitro&labelColor=18181B)](https://nitro.build)

Full-featured AI Chatbot Vue application with authentication, chat history, collapsible sidebar, keyboard shortcuts, light & dark mode, command palette and more. Built using [Nuxt UI](https://ui.nuxt.com) components and integrated with [AI SDK](https://ai-sdk.dev) for a complete chat experience.

- [Live demo](https://chat-vue-template.nuxt.dev/)
- [Documentation](https://ui.nuxt.com/docs/getting-started/installation/vue)

<a href="https://chat-vue-template.nuxt.dev/" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="https://ui.nuxt.com/assets/templates/vue/chat-dark.png">
    <source media="(prefers-color-scheme: light)" srcset="https://ui.nuxt.com/assets/templates/vue/chat-light.png">
    <img alt="Vue AI Chatbot Template" src="https://ui.nuxt.com/assets/templates/vue/chat-light.png">
  </picture>
</a>

> The chat template for Nuxt is on https://github.com/nuxt-ui-templates/chat.

## Features

- ⚡️ **Streaming AI messages** powered by the [AI SDK](https://ai-sdk.dev) with thinking/reasoning support
- 🤖 **Multiple model support** — Claude Haiku 4.5, Gemini 3 Flash and GPT-5 Nano via [Vercel AI Gateway](https://vercel.com/docs/ai-gateway)
- 🔍 **Web search** with built-in provider tools (Anthropic, OpenAI)
- 📊 **Charts and weather** tool calling with rich UI rendering
- 🔐 **Authentication** via GitHub OAuth using [Nitro](https://nitro.build) server routes and httpOnly cookies
- 💾 **Chat history persistence** using SQLite database ([Turso](https://turso.tech) in production) and [Drizzle ORM](https://orm.drizzle.team)
- ✨ **Markdown rendering** with streaming code highlighting via [Comark](https://comark.dev)

## Quick Start

```bash
npm create nuxt@latest -- --no-modules -t ui-vue/chat
```

## Deploy your own

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fnuxt-ui-templates%2Fchat-vue&repository-name=chat-vue&env=GITHUB_OAUTH_CLIENT_ID%2CGITHUB_OAUTH_CLIENT_SECRET%2CSESSION_SECRET&stores=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22tursocloud%22%2C%22productSlug%22%3A%22database%22%2C%22protocol%22%3A%22storage%22%7D%5D&demo-title=Vue+Chat+Template&demo-description=An+AI+chatbot+template+with+GitHub+authentication+and+persistent+chat+history+powered+by+Vercel+AI+SDK.&demo-url=https%3A%2F%2Fchat-vue-template.nuxt.dev&demo-image=https%3A%2F%2Fui.nuxt.com%2Fassets%2Ftemplates%2Fvue%2Fchat-dark.png)

## Setup

Make sure to install the dependencies:

```bash
pnpm install
```

Run database migrations:

```bash
pnpm db:migrate
```

> [!NOTE]
> In production, configure your database connection. On Vercel, add the [Turso integration](https://vercel.com/integrations/turso) to automatically provision `TURSO_DATABASE_URL` and `TURSO_AUTH_TOKEN`.

### AI Integration

This template uses the [Vercel AI SDK](https://ai-sdk.dev/) for streaming AI responses with support for multiple providers through [Vercel AI Gateway](https://vercel.com/docs/ai-gateway). When deployed on Vercel, the AI Gateway is configured automatically.

For local development, set your API key in `.env`:

```bash
AI_GATEWAY_API_KEY=<your-vercel-ai-gateway-api-key>
```

> [!TIP]
> With [Vercel AI Gateway](https://vercel.com/docs/ai-gateway), you don't need individual API keys for OpenAI, Anthropic, etc. It provides a unified API to access hundreds of models through a single endpoint with automatic load balancing, fallbacks, and spend monitoring.

### Authentication (Optional)

This template uses [Nitro](https://nitro.build) server routes with httpOnly cookies for authentication with GitHub OAuth.

To enable authentication, [create a GitHub OAuth application](https://github.com/settings/applications/new) and set:

```bash
GITHUB_OAUTH_CLIENT_ID=<your-github-oauth-app-client-id>
GITHUB_OAUTH_CLIENT_SECRET=<your-github-oauth-app-client-secret>
SESSION_SECRET=<your-secret-minimum-32-characters>
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
pnpm dev
```

## Production

Build the application for production:

```bash
pnpm build
```

Locally preview production build:

```bash
pnpm preview
```

Check out the [deployment documentation](https://nitro.build/deploy) for more information.

## Renovate integration

Install [Renovate GitHub app](https://github.com/apps/renovate/installations/select_target) on your repository and you are good to go.