# 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 %}

<pre class="language-javascript"><code class="lang-javascript">const currentUser = {
        username: "micheal",
        name: "Micheal Saunders",
}
<strong>
</strong><strong>const minchat = await MinChat.getInstance(MINCHAT_API_KEY).connectUser(currentUser)
</strong><strong>
</strong></code></pre>

*You can view more details about the user parameters* [*here*](/reference/user.md)*.*

Each connection to MinChat has to specify the current [User](/reference/user.md) 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](/reference/user.md) is a person that uses your app. Typically, you will have one MinChat [User](/reference/user.md) for each user in your own database.&#x20;

Usually, you would create users based on the data from your database. A [User](/reference/user.md) 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*](/reference/user.md)*.*

**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.

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong><strong>const otherUser = await minchat.fetchUser("example-username")
</strong>                            
</code></pre>

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong>const otherUser = await minchat.fetchUserById("example-id")
<strong>
</strong></code></pre>

## Starting a conversation <a href="#start-a-conversation" id="start-a-conversation"></a>

There's not much point in a chat app with only one person using it, with a [User](/reference/user.md) 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*](/javascript-sdk/overview.md#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*](/javascript-sdk/overview.md#start-group-chat)*.*

## Send Message

To send a message, call a function on the chat object.&#x20;

```javascript

chat.sendMessage({ text: "Hello World!" })
  
```

*You can view additional optional parameters* [*here*](/javascript-sdk/conversation-chat.md#send-message)*.*

## Get Messages

Messages retrieved in a conversation are paginated to 25 messages at a time.&#x20;

{% tabs %}
{% tab title="async/await" %}

<pre class="language-javascript"><code class="lang-javascript"><strong>
</strong><strong>const { messages , page , totalMessages , totalPages } = await chat.getMessages(1 /** page to query **/ )
</strong><strong>
</strong></code></pre>

{% endtab %}

{% tab title="callback" %}

<pre class="language-javascript"><code class="lang-javascript"><strong>chat.getMessages(1 /** page to query **/)
</strong>  .then(({  messages , page , totalMessages , totalPages }) => {
       
         //do something with the messages  
         
  })
</code></pre>

{% endtab %}
{% endtabs %}

*You can view more details about the response and parameters* [*here*](/javascript-sdk/conversation-chat.md#get-messages)*.*

## Listen for new messages <a href="#listen-for-messages" id="listen-for-messages"></a>

add a listener to listen for new messages received in the chat.&#x20;

```javascript
chat.onMessage((message) => {

        //do something with message
        
})
```

*You can view more details about the response and parameters* [*here*](/javascript-sdk/conversation-chat.md#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*](/javascript-sdk/overview.md#get-conversations)*.*

## Listen for new conversations <a href="#listen-for-conversations" id="listen-for-conversations"></a>

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*](/javascript-sdk/overview.md#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](/javascript-sdk.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.minchat.io/getting-started/using-vanilla-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.