Introduction

ChatKitty is the first complete chat platform; bringing together everything that's required to build real-time chat into Web and mobile apps. ChatKitty provides all the features you need to add real-time, in-app chat to your web or mobile app without building and operating chat infrastructure yourself.

What you get with ChatKitty

• Production-ready real-time messaging — Typing indicators, read receipts, presence (online/offline), reactions, threads, edits/deletes.

• Group and 1:1 conversations — Channels, invites, roles/moderators, membership APIs.

• Inbox hygiene — Unread counts, last-read tracking, mute, hide, clear history.

• Mobile-friendly — Push notifications hooks for iOS/Android/Web.

• Moderation & Safety — Message reporting, user/channel blocking, moderator controls.

• Hosted/embedded Chat UI — A server-side UI framework + prebuilt components that you can live-tune without pulling templates into your repo.

• SDK-first, event-driven APIs — Web and mobile native, with rich event streams for reactive apps.

5-minute quick start

1. Get your API key

Sign up for a free ChatKitty account at console.chatkitty.com, and create a new application widget. Copy the widget ID for use in the next steps.

2. Install the ChatKitty SDK

ChatKitty provides SDKs for JavaScript, iOS, Android, and various web frameworks:

JavaScript

npm install @chatkitty/core

React

npm install @chatkitty/react

Vue

npm install @chatkitty/vue

Angular

npm install @chatkitty/angular

Android

implementation 'com.chatkitty:chatkitty:1.0.1'

iOS

1. Open your .xcodeproj file and go to File -> Add Package Dependencies
2. In the top right search bar, paste https://github.com/ChatKitty/chatkitty-ios.git
3. Set the "Add to Project" field to your project
4. Click "Add Package"

3. Loading the Chat UI

The ChatKitty SDKs provide prebuilt UI components that you can drop into your app to get started quickly.

JavaScript

import { loadChatUi } from '@chatkitty/core';

await loadChatUi({
 widgetId: 'your-widget-id',
 username: 'user-username',
 container: {
   id: 'chat-ui',
   height: '100%',
 }
});

// Define the container in your HTML
// <div id="chat-ui"></div>

React

import { ChatUi } from '@chatkitty/react';

return (<> <ChatUi widgetId="your-widget-id" username="user-username"/> </>);

Vue

<script setup lang="ts">
  import { ChatUi } from '@chatkitty/vue'
</script>

<template>
  <ChatUi widgetId="your-widget-id" username="user-username"/>
</template>

Angular

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ChatUi } from '@chatkitty/angular';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, ChatUi],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  title = 'angular-example';
}

app.component.html

<chat-ui widgetId="your-widget-id" username="user-username"></chat-ui>

Android

@Composable
fun ChatUIViewCompose() {
  AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { ctx ->
  // Initialize your ChatUIView
  ChatUIView(ctx)
  .apply {
    setChatUIConfig(
      ChatUIConfiguration(
        widgetId = "your-widget-id",
        username = "user-username",
        theme = Theme.LIGHT)
   )
  }
},
update = { view ->
  // Update your view if needed
  })
}

iOS

import UIKit
import ChatKitty

class ViewController: UIViewController {
  private lazy var chatUi: ChatUIView = {
    let configuration = ChatUIConfiguration(widgetId: "your-widget-id",
                                            username: "user-username",
                                            theme: .light)

    let view = ChatUIView(configuration: configuration)
    view.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(view)
    return view
  }()

  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    NSLayoutConstraint.activate([
      chatUi.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
      chatUi.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
      chatUi.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
      chatUi.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
    ])
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
  }
}

4. Connecting to ChatKitty manually

If you want to build your own custom chat UI, or need more control over the chat experience, you can connect to ChatKitty manually:

JavaScript

import { connectApi, loadChatUi } from '@chatkitty/core';

const connection = await connectApi({
  apiKey: 'your-application-api-key',
  username: 'user-username'
});

const { user } = connection; // Reactive object

console.log('Connected as user:', user.value);

// Set event listeners if needed
user.watch((user) => console.log('User updated:', user));

loadChatUi({ widgetId: 'your-widget-id' }, { connection })

React

const connection = useApiConnection(
  (connection: ApiConnection) => {
  const { user } = connection;

  console.log('Connected as user:', user.value);

  user.watch((user: CurrentUser) => console.log('User:', user));
},
  {
    apiKey: 'your-application-api-key',
    username: 'user-username',
  },
);

return (
  <>
    <ChatUi widgetId="your-widget-id" connection={connection} />
  </>
);

Vue

<script setup lang="ts">
  import {useApiConnection, ChatUi, type ApiConnection} from '@chatkitty/vue'

  const connection = useApiConnection(
    (connection: ApiConnection) => {
      const { user } = connection;

      console.log('Connected as user:', user.value);

      user.watch((u) => {
        console.log('User:', u);
      });
    },
    {
      apiKey: 'your-application-api-key',
      username: 'user-username',
    }
  );
</script>

<template>
  <ChatUi widget-id="your-widget-id" :connection="connection" />
</template>

5. Customizing the Chat UI

ChatKitty allows for extensive customization of the chat UI and behavior through themes, localization, audio notifications, and much more.

Customizing the Chat UI using the Console

You can customize the look and feel of the Chat UI using the ChatKitty Console. Navigate to your application widget, and select the "Customize" tab to explore the various options available.

Customizing the Chat UI programmatically

JavaScript

await loadChatUi({
  widgetId: 'YOUR_WIDGET_ID',
  theme: 'dark',
  profile: {
  displayName: 'John Doe',
  displayPicture: 'https://example.com/user-avatar.jpg',
},
  // Other options...
});

tip

Check out the ChatKitty UI documentation for a full list of customization options.

📄️ Platform API

Learn how to navigate the resources provided by the ChatKitty Platform API.

📄️ Client SDKs

Learn about the ChatKitty client-side SDKs