Chat Vue
Vue AI Chatbot Template made with Nuxt UI, Vercel AI SDK, Vite and Nitro.
Overview
The Vue AI Chatbot Template is an impressive and full-featured application designed for creating robust chat experiences. Built with Nuxt UI components, this template offers authentication features, persistent chat history, and a seamless user interface that can adapt to light and dark modes. The integration with the latest AI SDK v5 ensures that users have access to a powerful backend, making it an ideal choice for developers looking to streamline their chatbot development.
This application embodies modern development practices with features like a collapsible sidebar and command palette, making navigation intuitive. Whether you are building a customer service bot or a general inquiry assistant, this template has all the necessary tools to create a dynamic chatbot experience, all while being easy to deploy.
Features
- Streaming AI Messages: Enjoy real-time communication with Chat messages powered by the AI SDK v5 for an interactive experience.
- Multiple Model Support: Access various AI providers seamlessly with built-in AI Gateway support, enhancing flexibility.
- Secure Authentication: Utilize GitHub OAuth for secure user authentication, ensuring a trustworthy sign-in process.
- Chat History Persistence: Keep conversations alive with chat history stored using PostgreSQL and Drizzle ORM.
- Markdown Rendering: Elevate user interaction by rendering messages with markdown via vue-markdown-render.
- Effortless Deployment: Deploy to Vercel easily without complex configurations, making rollout a breeze.
- Unified API for AI Access: Benefit from a single endpoint that connects multiple AI models, ensuring smooth functionality with automatic load balancing and monitoring.
- Enhanced Development Integration: Features like Renovate integration streamline dependency management, simplifying updates and maintenance.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- Drizzle ORM
Drizzle ORM is a TypeScript ORM for SQL databases designed with maximum type safety in mind. It comes with a drizzle-kit CLI companion for automatic SQL migrations generation. Drizzle ORM is meant to be a library, not a framework. It stays as an opt-in solution all the time at any levels.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Zod
Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.