> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ably/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting started: Chat in JavaScript / TypeScript

This guide will get you started with Ably Chat using TypeScript.

You'll learn how to create chat rooms, send and edit messages, and implement realtime features like typing indicators and presence. You'll also cover message history, reactions, and proper connection management.

## Prerequisites

1. Sign up for an Ably account.

2. Create a [new app](https://ably.com/accounts/any/apps/new), and get your first API key. You can use the root API key that is provided by default, within the **API Keys** tab to get started.

3. Install any current LTS version of [Node.js](https://nodejs.org/en) and create a new project:

<Code>
  ```shell theme={null}
  npm init -y && npm pkg set type=module
  ```
</Code>

4. Install [@ably/chat](https://github.com/ably/ably-chat-js), [typescript](https://www.npmjs.com/package/typescript) to compile TypeScript files and make Ably Chat connections.

<Code>
  ```shell theme={null}
  npm install @ably/chat typescript -D @types/node
  ```
</Code>

5. Create a default TypeScript configuration in your project

<Code>
  ```shell theme={null}
  npx tsc --init
  ```
</Code>

6. Update `tsconfig.json` to have `types` containing `node`:

<Code>
  ```json theme={null}
     "types": ["node"],
  ```
</Code>

7. Create a `.env` file in your project root and add your API key:

<Code>
  ```shell theme={null}
  echo "ABLY_API_KEY={{API_KEY}}" > .env
  ```
</Code>

## Step 1: Connect to Ably

Clients establish a connection with Ably when they instantiate an SDK. This enables them to send and receive messages in realtime across channels.

Create an `index.ts` file in your project and add the following function to instantiate a realtime client with the Pub/Sub SDK and then pass that client into the Chat SDK constructor. Provide an API key and a [`clientId`](/docs/auth/identified-clients) to identify the client. In production, use [token authentication](/docs/auth/token) so that your API keys are not exposed publicly.

<Code>
  ```javascript theme={null}
  import * as Ably from 'ably';
  import { ChatClient } from '@ably/chat';
  import type { ChatMessageEvent  } from '@ably/chat';

  async function getStarted() {
    const apiKey = process.env.ABLY_API_KEY;
    if (!apiKey) {
      throw new Error('ABLY_API_KEY environment variable is required');
    }

    const realtimeClient = new Ably.Realtime({ key: apiKey, clientId: 'my-first-client' });

    const chatClient = new ChatClient(realtimeClient);

    chatClient.connection.onStatusChange((change) => console.log(`Connection status is currently ${change.current}!`));

  };

  getStarted();
  ```
</Code>

You can monitor the lifecycle of clients' connections by registering a listener that will emit an event every time the connection state changes. For now, run the function with `npx tsx --env-file=.env index.ts` to log a message to the console to know that the connection attempt was successful. You'll see a message saying `Connection status is currently connected!` printed to your console.

## Step 2: Create a Room and Send a Message

Messages are how your clients interact with one another. Use rooms to separate and organize clients and messages into different topics, or 'chat rooms'. Rooms are the entry object into Chat, providing access to all of its features, such as messages, presence and reactions.

Add the following lines to your `getStarted()` function to create an instance of a room, attach to the room instance, and then register a listener to subscribe to messages sent to the room. You then also send your first message. Afterwards, run it with `npx tsx --env-file=.env index.ts`:

<Code>
  ```javascript theme={null}
  const room = await chatClient.rooms.get('my-first-room');

  await room.attach();

  room.messages.subscribe((messageEvent: ChatMessageEvent) => {
    console.log(`Received message: ${ messageEvent.message.text }`);
  });

  const myFirstMessage = await room.messages.send({ text: 'My first message!' });
  ```
</Code>

## Next Steps

Continue to explore the documentation with JavaScript as the selected language:

* Understand [token authentication](/docs/auth/token?lang=javascript) before going to production
* Read more about using [rooms](/docs/chat/rooms?lang=javascript) and sending [messages](/docs/chat/rooms/messages?lang=javascript)
* Find out more regarding [presence](/docs/chat/rooms/presence?lang=javascript)
* Read into pulling messages from [history](/docs/chat/rooms/history?lang=javascript) and providing context to new joiners

Explore the [Ably CLI](https://www.npmjs.com/package/@ably/cli) further, or visit the Chat [API references](/docs/chat/api/javascript/chat-client).