Build & Deploy An AI-Powered Chat App | Vue, Node, TypeScript, Open AI, Stream & Neon Database

Traversy Media · Intermediate ·🔧 Backend Engineering ·1y ago

Skills: LLM Engineering90%Prompt Systems Engineering80%Tool Use & Function Calling70%

Key Takeaways

Build and deploy a full stack AI-powered chat app using Vue, Node, TypeScript, Open AI, Stream, and Neon Database, with features like user registration, chat history, and context-based conversation.

Original Description

In this project, we will build a full stack app that works similar to ChatGPT and answers prompts and keeps the context throughout the conversation. We will use Vue.js with Pinia for state management, Node and Express on the backend with TypeScript. Stream for the chat featrues and a Neon PostgreSQL database to store users and chat logs. Stream Chat: https://getstream.io/chat/sdk/react/?utm_source=youtube&utm_medium=referral&utm_content=&utm_campaign=traversymedia Neon Database: https://fyi.neon.tech/1traversy Code (Node/Express Backend): https://github.com/bradtraversy/chat-ai-api Code (Vue.js Frontend): https://github.com/bradtraversy/chat-ai-ui Timestamps: 0:00 - Intro 2:43 - Documentation URLs 4:13 - Backend Init & Install Dependencies 7:56 - Backend TypeScript Config 10:03 - Express Server Setup 13:35 - /register-user Endpoint Setup 17:37 - Initialize Stream With API Keys 21:17 - Register User With Stream Chat 27:41 - /chat Endpoint & Open AI Init 42:49 - Neon PostgreSQL Database Setup 46:00 - Database Config & Neon Adapter 48:46 - Drizzle Schema 54:26 - Drizzle Config 57:31 - Database Migration 59:11 - Save Users In Neon PostgreSQL 1:04:58 - Save Chats In Neon PostgreSQL 1:09:38 - Get User Chat History 1:15:22 - Frontend Init & Install Dependencies 1:19:21 - TailwindCSS Setup & Clean Up 1:22:02 - Router & Page Setup 1:27:54 - Home Form Display 1:31:52 - Reactive Variables & Input Bind 1:37:24 - Pinia Initialization 1:39:19 - Pinia User Store 1:42:57 - Hook Up Home Form 1:50:02 - Header & Leave Chat/Logout 1:57:20 - Pinia Chat Store 2:01:45 - Load Chat History Function/Request 2:08:42 - Load Chat Into UI 2:17:50 - Send Message Function/Request 2:22:21 - Send Message Form 2:29:32 - Get Context Of Chat 2:37:37 - Format Output Text 2:40:52 - Backend API Deploy To Render 2:43:55 - Frontend Deploy To Vercel

Watch on YouTube ↗ (saves to browser)

Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Traversy Media · Traversy Media · 0 of 60

← Previous Next →

Changing Your DNS/Nameservers

Changing Your DNS/Nameservers

Create a MySQL database in cPanel

Create a MySQL database in cPanel

Install & Uninstall Joomla Extensions

Install & Uninstall Joomla Extensions

Adding and linking an article in Joomla

Adding and linking an article in Joomla

Create a Joomla Blog

Create a Joomla Blog

Import & Export A MySQL Database

Import & Export A MySQL Database

Use A Custom Font On Your Website Using CSS

Use A Custom Font On Your Website Using CSS

Connect Joomla Site With Dreamweaver

Connect Joomla Site With Dreamweaver

Remove Phoca Gallery 3.2.3 Footer Text

Remove Phoca Gallery 3.2.3 Footer Text

Drupal 7 Security Update 7.19 to 7.20

Drupal 7 Security Update 7.19 to 7.20

Add An Addon Domain In Cpanel

Add An Addon Domain In Cpanel

Pull A Heroku Rails App and Database

Pull A Heroku Rails App and Database

Create a Custom Joomla 2.5 Module - Part 1

Create a Custom Joomla 2.5 Module - Part 1

Create a Custom Joomla 2.5 Module - Part 2

Create a Custom Joomla 2.5 Module - Part 2

Create a Custom Joomla 2.5 Module - Part 3

Create a Custom Joomla 2.5 Module - Part 3

Joomla SEO Tutorial - sh404sef Configuration

Joomla SEO Tutorial - sh404sef Configuration

Convert an HTML Template to Joomla 2.5/3.0 - Part One

Convert an HTML Template to Joomla 2.5/3.0 - Part One

Convert an HTML Template to Joomla 2.5/3.0 - Part Two

Convert an HTML Template to Joomla 2.5/3.0 - Part Two

Rockettheme Rocketlauncher Joomla Site in Under 10 Minutes

Rockettheme Rocketlauncher Joomla Site in Under 10 Minutes

JQuery FAQ Slider Tutorial

JQuery FAQ Slider Tutorial

301 Redirect With htaccess File

301 Redirect With htaccess File

Convert HTML to Wordpress Theme - Part 1

Convert HTML to Wordpress Theme - Part 1

Convert HTML to Wordpress Theme - Part 2

Convert HTML to Wordpress Theme - Part 2

Easy JQuery Widgets

Easy JQuery Widgets

Codeigniter App Part 1 - Creating the Database

Codeigniter App Part 1 - Creating the Database

Codeigniter App Part 2 - Installation and Configuration

Codeigniter App Part 2 - Installation and Configuration

Codeigniter App Part 6 - Login/Register System

Codeigniter App Part 6 - Login/Register System

Codeigniter App Part 7 - Models List CRUD

Codeigniter App Part 7 - Models List CRUD

Codeigniter App Part 8 - Models Task CRUD

Codeigniter App Part 8 - Models Task CRUD

Node.js Part 1 - Install NodeJS on Windows

Node.js Part 1 - Install NodeJS on Windows

Node.js Part 3 - Building a Static Page Server

Node.js Part 3 - Building a Static Page Server

Node.js Part 4 - NPM

Node.js Part 4 - NPM

Node.js Part 2 - Install MongoDB in Windows

Node.js Part 2 - Install MongoDB in Windows

Create a Joomla Quickstart with Custom Sample Data

Create a Joomla Quickstart with Custom Sample Data

Install MongoDB in Ubuntu

Install MongoDB in Ubuntu

HTML5 Web Storage

HTML5 Web Storage

Create a Joomla Bootstrap Template From Scratch

Create a Joomla Bootstrap Template From Scratch

Ubuntu Server 14.04 Setup Part 1 - Installation

Ubuntu Server 14.04 Setup Part 1 - Installation

Ubuntu Server 14.04 Setup Part 3 - Set Static IP

Ubuntu Server 14.04 Setup Part 3 - Set Static IP

Create A Wordpress Widget - Part 1

Create A Wordpress Widget - Part 1

Create A Wordpress Widget - Part 2

Create A Wordpress Widget - Part 2

Create A Wordpress Widget - Part 3

Create A Wordpress Widget - Part 3

Create A Wordpress Widget - Part 4

Create A Wordpress Widget - Part 4

Get Started With Sass on Windows

Get Started With Sass on Windows

Build An HTML5 Template With Bootstrap and SASS - Part 1

Build An HTML5 Template With Bootstrap and SASS - Part 1

Build An HTML5 Template With Bootstrap and SASS - Part 6

Build An HTML5 Template With Bootstrap and SASS - Part 6

Build An HTML5 Template With Bootstrap and SASS - Part 4

Build An HTML5 Template With Bootstrap and SASS - Part 4

Build An HTML5 Template With Bootstrap and SASS - Part 5

Build An HTML5 Template With Bootstrap and SASS - Part 5

Build An HTML5 Template With Bootstrap and SASS - Part 3

Build An HTML5 Template With Bootstrap and SASS - Part 3

Build An HTML5 Template With Bootstrap and SASS - Part 2

Build An HTML5 Template With Bootstrap and SASS - Part 2

Build An HTML5 Template With Bootstrap and SASS - Part 7

Build An HTML5 Template With Bootstrap and SASS - Part 7

Build An HTML5 Template With Bootstrap and SASS - Part 10

Build An HTML5 Template With Bootstrap and SASS - Part 10

Build An HTML5 Template With Bootstrap and SASS - Part 8

Build An HTML5 Template With Bootstrap and SASS - Part 8

Build An HTML5 Template With Bootstrap and SASS - Part 11

Build An HTML5 Template With Bootstrap and SASS - Part 11

Build An HTML5 Template With Bootstrap and SASS - Part 9

Build An HTML5 Template With Bootstrap and SASS - Part 9

Build An Audio Player Using HTML5 & jQuery - Part 1

Build An Audio Player Using HTML5 & jQuery - Part 1

Build An Audio Player Using HTML5 & jQuery - Part 2

Build An Audio Player Using HTML5 & jQuery - Part 2

Youtube Data API v3 & jQuery To List Channel Videos

Youtube Data API v3 & jQuery To List Channel Videos

Using Bootstrap With Ruby on Rails

Using Bootstrap With Ruby on Rails

In this project, we build a full stack AI-powered chat app using Vue, Node, TypeScript, Open AI, Stream, and Neon Database. We cover features like user registration, chat history, and context-based conversation, and deploy the app to Render and Vercel.

Key Takeaways

Initialize backend with Node and Express
Set up TypeScript configuration
Create Express server and register user endpoint
Initialize Stream Chat with API keys
Register user with Stream Chat
Set up Open AI and chat endpoint
Configure Neon PostgreSQL database
Save users and chats in database
Get user chat history
Initialize frontend with Vue.js and Pinia

💡 To build a full stack AI-powered chat app, it's essential to integrate multiple tools and technologies, including Open AI, Stream Chat, and Neon Database, and to manage state and chat history effectively.

🔒 Pro feature: Ask AI to explain this lesson →

More on: LLM Engineering

View skill →

Build an LLM and RAG-based Chat Application using AlloyDB and LangChain

FULLY LOCAL Mistral AI PDF Processing [Hands-on Tutorial]

FULLY LOCAL Mistral AI PDF Processing [Hands-on Tutorial]

Coding a Multimodal (Vision) Language Model from scratch in PyTorch with full explanation

Coding a Multimodal (Vision) Language Model from scratch in PyTorch with full explanation

Ultimate Guide: Deploy Google ADK Agents to Vertex AI & Cloud Run (Step-by-Step Tutorial)

Ultimate Guide: Deploy Google ADK Agents to Vertex AI & Cloud Run (Step-by-Step Tutorial)

Shane | LLM Implementation

How to Make an Asteroids Game Bot (LIVE)

How to Make an Asteroids Game Bot (LIVE)

Using Claude Code + Nano Banana Pro To Create a Dataset of Engineering Drawings

Using Claude Code + Nano Banana Pro To Create a Dataset of Engineering Drawings

Automata Learning Lab

Related Reads

# Picking What to Read Next: The Trade-offs of Ranked-Choice Voting in a Django App

Learn how to implement ranked-choice voting in a Django app, weighing the trade-offs and complexities involved

Medium · Python

The Ultimate Rust ORM Comparison 2026: Diesel vs SQLx vs SeaORM vs Rusqlite — Pick Your Powerhouse!

Compare top Rust ORMs Diesel, SQLx, SeaORM, and Rusqlite to choose the best fit for your project

Medium · Programming

BASIC ARRAY METHODS IN JAVASCRIPT

Learn basic array methods in JavaScript to manipulate and interact with arrays effectively

Dev.to · G Gokul

Beginner projects

Boost your programming skills with beginner-friendly projects to enhance your future career prospects

Reddit r/learnprogramming

Chapters (35)

Intro

2:43 Documentation URLs

4:13 Backend Init & Install Dependencies

7:56 Backend TypeScript Config

10:03 Express Server Setup

13:35 /register-user Endpoint Setup

17:37 Initialize Stream With API Keys

21:17 Register User With Stream Chat

27:41 /chat Endpoint & Open AI Init

42:49 Neon PostgreSQL Database Setup

46:00 Database Config & Neon Adapter

48:46 Drizzle Schema

54:26 Drizzle Config

57:31 Database Migration

59:11 Save Users In Neon PostgreSQL

1:04:58 Save Chats In Neon PostgreSQL

1:09:38 Get User Chat History

1:15:22 Frontend Init & Install Dependencies

1:19:21 TailwindCSS Setup & Clean Up

1:22:02 Router & Page Setup

1:27:54 Home Form Display

1:31:52 Reactive Variables & Input Bind

1:37:24 Pinia Initialization

1:39:19 Pinia User Store

1:42:57 Hook Up Home Form

1:50:02 Header & Leave Chat/Logout

1:57:20 Pinia Chat Store

2:01:45 Load Chat History Function/Request

2:08:42 Load Chat Into UI

2:17:50 Send Message Function/Request

2:22:21 Send Message Form

2:29:32 Get Context Of Chat

2:37:37 Format Output Text

2:40:52 Backend API Deploy To Render

2:43:55 Frontend Deploy To Vercel

Beginners Guide to GPT4 API & ChatGPT 3.5 Turbo API Tutorial