# Using Vanilla Javascript
## Installation
To get started, you will need to install MinChat Javascript SDK in your Javascript front-end project.
{% tabs %}
{% tab title="npm" %}
```bash
npm install @minchat/js
```
{% endtab %}
{% tab title="yarn" %}
```bash
yarn add @minchat/js
```
{% endtab %}
{% tab title="pnpm" %}
```bash
pnpm install @minchat/js
```
{% endtab %}
{% endtabs %}
## Initialize SDK
Next, initialize the MinChat SDK passing the `MINCHAT_API_KEY` as a parameter as well as a user. The API Key can be found on the [Minchat dashboard.](https://minchat.io/sdk)
{% code title="add to imports section" %}
```javascript
import MinChat from '@minchat/js'
```
{% endcode %}
const currentUser = {
username: "micheal",
name: "Micheal Saunders",
}
const minchat = await MinChat.getInstance(MINCHAT_API_KEY).connectUser(currentUser)
*You can view more details about the user parameters* [*here*](https://docs.minchat.io/reference/user)*.*
Each connection to MinChat has to specify the current [User](https://docs.minchat.io/reference/user) to send messages as, this is achieved with `connectUser(...)`
**note:** `connectUser(...)` automatically creates a new user in the system, if a user with the same username already exists then it will reuse that user.
## Creating a user
In MinChat, a [User](https://docs.minchat.io/reference/user) is a person that uses your app. Typically, you will have one MinChat [User](https://docs.minchat.io/reference/user) for each user in your own database.
Usually, you would create users based on the data from your database. A [User](https://docs.minchat.io/reference/user) is represented by a JSON object.
before you can start a conversation with another user, the user would first need to be created.
```typescript
const otherUser = await minchat.createUser({
username: "example-username",
name: "Example Name",
})
```
*You can view more details about the user parameters* [*here*](https://docs.minchat.io/reference/user)*.*
**note:** `createUser(...)` automatically creates a new user in the system, if a user with the same username already exists then it will reuse that user.
## Fetching a user
You can fetch an already existing user using either their username or their id.
const otherUser = await minchat.fetchUser("example-username")
const otherUser = await minchat.fetchUserById("example-id")
## Starting a conversation
There's not much point in a chat app with only one person using it, with a [User](https://docs.minchat.io/reference/user) created we can start a new conversation with them.
A Conversation(Chat) is a place for two or more users to chat. That could mean a simple direct message between users, or it might be something fancier. MinChat works with all kinds of conversations, from group chats to one-on-one conversations.
#### One-on-One Conversation
```typescript
const chat = await minchat.chat(otherUser.username)
```
*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/javascript-sdk/overview#start-one-to-one-conversation)*.*
#### Group Chat
```typescript
const chat = await minchat.groupChat({
title: "Epic Group Chat",
memberUsernames: [ otherUser.username , thirdUser.username ]
})
```
*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/javascript-sdk/overview#start-group-chat)*.*
## Send Message
To send a message, call a function on the chat object.
```javascript
chat.sendMessage({ text: "Hello World!" })
```
*You can view additional optional parameters* [*here*](https://docs.minchat.io/javascript-sdk/conversation-chat#send-message)*.*
## Get Messages
Messages retrieved in a conversation are paginated to 25 messages at a time.
{% tabs %}
{% tab title="async/await" %}
const { messages , page , totalMessages , totalPages } = await chat.getMessages(1 /** page to query **/ )
{% endtab %}
{% tab title="callback" %}
chat.getMessages(1 /** page to query **/)
.then(({ messages , page , totalMessages , totalPages }) => {
//do something with the messages
})
{% endtab %}
{% endtabs %}
*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/javascript-sdk/conversation-chat#get-messages)*.*
## Listen for new messages
add a listener to listen for new messages received in the chat.
```javascript
chat.onMessage((message) => {
//do something with message
})
```
*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/javascript-sdk/conversation-chat#listen-for-messages)*.*
## Get list of conversations of current user
You can get a list of the conversations of the current user. conversations retrieved are paginated to 25 chats at a time.
{% tabs %}
{% tab title="async/await" %}
```javascript
const { chats , page , totalChats , totalPages } = await minchat.getChats(1 /** page to query **/ )
```
{% endtab %}
{% tab title="callback" %}
```javascript
minchat.getChats(1 /** page to query **/)
.then(({ chats , page , totalChats , totalPages }) => {
//do something with the list of chats
})
```
{% endtab %}
{% endtabs %}
*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/javascript-sdk/overview#get-conversations)*.*
## Listen for new conversations
Add a listener to listen for conversations that receive a new message.
```javascript
minchat.onChat((chat) => {
//do something with the chat
})
```
*You can view more details about the response and parameters* [*here*](https://docs.minchat.io/javascript-sdk/overview#listen-for-messages)*.*
This concludes our setup instructions for our most basic form of integration. In this short guide, you've taken your javascript application to the next level with powerful user-to-user chat. You also learned more about the fundamentals of MinChat, and how it all fits together. Most importantly, you've built a starting point to try out all the features MinChat offers.
For more additional features, view the [Reference Docs](https://docs.minchat.io/javascript-sdk).