Skip to main content

Building a Vue 3 Chat App with vue-advanced-chat

· 11 min read

Building a Vue 3 Chat App with vue-advanced-chat

In this tutorial, we will learn how to build a Vue.js chat app using the ChatKitty API and vue-advanced-chat.

vue-advanced-chat is a feature-rich and highly customizable Vue chat component library designed to simplify the process of building modern, real-time chat applications. It provides a wide range of out-of-the-box features, including:

  • Direct messaging and group chats
  • Images, videos, files, voice messages, emojis and link previews
  • Tag users & emojis shortcut suggestions
  • Typing indicators
  • Reactions with emojis and GIFs
  • Markdown text formatting - bold, italic, strikethrough, underline, code, multiline, etc.
  • Online presence indicators for online/offline users' status
  • Delivery and read receipts
  • Theming and customization options including light and dark theme modes
  • Responsive design perfect for mobile

In addition, vue-advanced-chat is compatible with all Javascript frameworks (Vue, Angular, React, etc.) or no framework at all as a web component.

By using vue-advanced-chat alongside a chat API service like ChatKitty, developers can quickly create chat applications with minimal boilerplate code, while also benefiting from a user-friendly and customizable UI.

This library helps reduce the time and effort required to implement chat functionalities, allowing developers to focus on other aspects of their application. Moreover, its responsive design ensures the chat interface adapts to different screen sizes, making it suitable for web and mobile applications alike.

Introducing our new product for seamless chat integration and customization

· 12 min read

Geometric pattern

In today's fast-changing world, businesses need to stay on top of their game when it comes to customer engagement. With the rise of AI and large language models, chatbots have become an indispensable tool for businesses looking to improve their customer engagement strategies. However, building and managing chat code can be time-consuming and complicated, which is why we are thrilled to announce our new product that allows businesses to integrate and customize complex chat experiences without any hassle.

ChatKitty, the easiest way to build deploy chat

When we founded ChatKitty in 2020, our goal was to create the easiest way to build chat for all types of businesses. We launched our REST API and JS SDKs to empower developers to build chat for online communication problems facing their users. However, as with all Chat API solutions currently in the market, it takes developers significant work and effort to integrate APIs and SDK function calls into their apps. Developers still need to read and understand deeply technical documentation, write a significant amount of code, and handle complex chat interactions. It also requires a lot of additional effort to integrate third-party functionality like emails, push notifications, SMS, and, yes, conversational AI chat -features that businesses building customer engagement platforms need.

We've begun building a comprehensive plug-and-play product that utilizes new technology to solve this problem in a unique and exciting way. We're building a server-side UI rendering engine that allows us to build UI and push it to user devices as HTML or native device views. Meaning we can build UI once, and our customers can use that UI in their apps without writing a single line of code. The "server-side frontend" product will produce UI for not only web apps but for native iOS and Android apps as well.

Building a Chat App with React Native and Gifted Chat (Part 4)

· 19 min read

Building a Chat App with React Native and Gifted Chat (Part 4)

In this tutorial series, I'll be showing you how to build a functional and secure chat app using the latest React Native libraries, including Gifted Chat and the Expo framework, powered by the ChatKitty platform.


So far you learned how to use the Gifted Chat React Native library with ChatKitty's JavaScript SDK to build a full-featured chat screen with real-time messaging functionality into your app, adding screens for users to create public channels, discover new channels, and view their channels. In the third article of this series, you enhanced that chat experience by implementing in-app and push notifications to notify your users when chat events occur.

In this tutorial, you'll be building on the group chat experience you created adding direct messaging to allow users to communicate privately. You'll also be adding a few enhancements to the chat experience including typing indicators, and chat room presence notifications.

After reading this article, you will be able to:

  1. Create direct channels for users to chat privately

  2. Integrate Gifted Chat's in-built typing indicator and implement a custom more detailed indicator

  3. Notify chat users when a user enters or leaves the chat from a chat screen

  4. Allow users to leave chat channels they are no longer interested in

If you followed along the previous articles, you should already have the ChatKitty JavaScript SDK NPM package added to your Expo React Native project.

Building a Chat App with React Native and Expo (Part 3)

· 11 min read

Building a Chat App with React Native and Expo (Part 3)

In this tutorial series, I'll be showing you how to build a functional and secure chat app using the latest React Native libraries, including Gifted Chat and the Expo framework powered by the ChatKitty platform.


In the second article of this series, you learned how to use the Gifted Chat React Native library with ChatKitty's JavaScript SDK to build a full featured chat screen with real-time messaging functionality into your app. You also added screens for users to create public channels, discover new channels, and view their channels.

In this tutorial, you'll be using Expo push notifications and ChatKitty Chat Functions to set up local notifications and push notifications to inform users when new messages are received or relevant actions happen inside a channel and across your app.

You can checkout our Expo React Native sample code any time on GitHub.

After reading this article, you will be able to:

  1. Implement local notifications for users to see what's happening from another screen

  2. Use ChatKitty user properties to store arbitrary data related to your users like expo push tokens

  3. Use Expo push notifications and ChatKitty Chat Functions to implement push notifications

If you followed along the last article, you should already have the ChatKitty JavaScript SDK NPM package added to your Expo React Native project.

Building a Chat App with React Native and Gifted Chat (Part 2)

· 18 min read

Building a Chat App with React Native and Gifted Chat (Part 2)

In this tutorial series , I'll be showing you how to build a functional and secure chat app using the latest React Native libraries, including Gifted Chat and the Expo framework powered by the ChatKitty platform.


In the first article of this series, you learned how to use Firebase along with ChatKitty Chat Functions to implement a secure yet simple user login flow by proxying Firebase Authentication through ChatKitty. Along with that, you built a couple of screens with the react-native-paper UI library to allow users to register for your chat app and login into the app.

In this tutorial, you'll be using the Gifted Chat React Native library to create a full-featured chat screen with its out of the box features. You'll also use ChatKitty's JavaScript Chat SDK to add real-time messaging to your chat app.

After reading this article, you will be able to:

  1. Create public channels for users to join

  2. View all channels a user can join and discover channels created by other users

  3. Integrate the react-native-gifted-chat library to implement a group chat screen

You can check out our Expo React Native sample code any time on GitHub.

If you followed along the last article, you should already have the ChatKitty JavaScript SDK NPM package added to your Expo React Native project.

Building a Chat App with React Native and Firebase (Part 1)

· 27 min read

Building a Chat App with React Native and Firebase

In this tutorial series, I'll be showing you how to build a functional and secure chat app using the latest React Native libraries, the Expo framework, and Firebase, powered by the ChatKitty platform. Part 1 covers using Firebase Authentication and ChatKitty Chat Functions to securely implement user registration and login.


This is the first article of this series. After reading this article, you will be able to:

  1. Create an Expo React Native application

  2. Create a Firebase project for user authentication

  3. Create a ChatKitty project and connect to ChatKitty to provide real-time chat functionality

  4. Use Firebase Authentication and ChatKitty Chat Functions to securely implement user login

Welcoming a new year

· 2 min read

Happy New Year to all of our valued customers and supporters!

As we enter into this new year, I wanted to take a moment to reflect on the past year and share some of our plans for the future.

Looking back, it's been an incredible journey for ChatKitty. When we first launched, we had a vision to make it easier for businesses to integrate messaging and chat functionality into their products and services. And through your support and feedback, we've been able to achieve that and so much more.

Considering building a Slack like experience?

· 2 min read

Are you considering creating a Slack-like chat experience on your platform? Yes, ChatKitty can help with that. With the recent pricing changes, Slack may not be the best place to grow your user base or create your community.

Instead of using Slack or another similar service, more and more companies decided to develop their own collaboration chat experience on their platform.

With ChatKitty, you can develop and release a premium chat experience in less than a day. It’s completely white label, fully customizable, and 100% concurrency guaranteed.

Starting with the features, here are the top 10 popular Slack features you can develop via our chat API on day one.

  • Authentication
  • Creating channels
  • One-to-one chat
  • Group chat
  • Threads reply
  • Emoji reaction
  • Multimedia attachment
  • In-App Notification
  • Typing indicator
  • Presence indicator

What are in Our Modern Chat Essentials?

· 3 min read

When designing our pricing plans, our goal is to provide our customers modern chat features their customers expect no matter what plan they choose.

We believe in letting customers pick and choose their features without limits on their user experience and creativity.

To help you better understand all the chat features we offer, we created the following table to list our features and descriptions. Our Modern Chat Essentials include the majority of features you see on all the popular social or chat apps on the market.

Are you looking for a new chat API provider?

· 3 min read

Man searching the internet

No matter, if you are not happy with your chat API provider or your chat API provider is shutting down, we understand finding a new chat API provider is a frustrating and stressful experience. Especially, if you want to find a chat API company that handles the technology and data with care. However, your search is over now because ChatKitty is here to help!