# Sending RCS Messages

> Sending your first RCS message with Pinnacle's TypeScript SDK

## Prerequisites

Before proceeding, ensure you have obtained a phone number and API key as described in the [prerequisites](/quickstart/rcs).

## Installation

Install the Pinnacle TypeScript SDK, dotenv, and TypeScript type definitions:

```bash
npm init -y
npm pkg set type=module
npm i rcs-js@2.0.25 dotenv
npm i --save-dev @types/node
```

**Info:**
  This guide uses version `rcs-js 2.0.25`. It's compatible with the following
  runtimes: Node.js 18+, Vercel, Cloudflare Workers, Deno v1.25+, Bun 1.0+, and
  React Native.

## Configuration

Create an `.env` file in your project root and add your Pinnacle API key and RCS agent ID:

```bash
PINNACLE_API_KEY="your_api_key" # pnclk_
RECIPIENT_NUMBER="+14155550123" # Replace with your whitelisted test number
AGENT_ID="your_agent_id" # agent_
```

## Sending Your First RCS Message

Create a new TypeScript file (e.g., `index.ts`) and use the [complete example](#complete-example).

Quick replies are optional. For sending media urls, you can also use storage on the dashboard under **System > Storage** or [via our API](/api-reference/tools/upload-file)

Run the script:

```bash
npx tsx index.ts
```

If successful, you should receive 2 texts to your device (a basic text with quick replies and a card with quick replies). You can see more properties for RCS messages in the [API reference](/api-reference/messages/send-rcs).

## Complete example

```typescript
import { config } from "dotenv";
import { PinnacleClient } from "rcs-js";

// Load environment variables from .env file
config();

const client = new PinnacleClient({ apiKey: process.env.PINNACLE_API_KEY! });

async function send_basic_text(text: string) {
  const res = await client.messages.rcs.send({
    quickReplies: [
      {
        type: "openUrl",
        payload: "https://docs.pinnacle.sh/",
        title: "View docs",
      },
    ],
    options: {
      validate: true,
    },
    text: text,
    from: process.env.AGENT_ID || "",
    to: process.env.RECIPIENT_NUMBER!,
  });

  return res;
}

async function send_rich_card(
  title: string,
  media_url: string,
  subtitle?: string
) {
  const res = await client.messages.rcs.send({
    quickReplies: [
      {
        type: "openUrl",
        payload: "https://docs.pinnacle.sh/",
        title: "View docs",
      },
    ],
    cards: [
      {
        media: media_url,
        title: title,
        subtitle: subtitle,
        buttons: [
          {
            type: "openUrl",
            metadata: "",
            payload: "https://docs.pinnacle.sh/quickstart/rcs",
            title: "RCS Quickstart Guide",
          },
          {
            type: "openUrl",
            metadata: "",
            payload: "https://docs.pinnacle.sh/api-reference/messages/send-rcs",
            title: "RCS API Reference",
          },
        ],
      },
    ],
    options: {
      validate: true,
    },
    from: process.env.AGENT_ID || "",
    to: process.env.RECIPIENT_NUMBER!,
  });

  return res;
}

const basic = await send_basic_text("This is a basic RCS text message");
const rich = await send_rich_card(
  "Hello, world!",
  "https://server.trypinnacle.app/storage/v1/object/sign/vault/3/67330f56-8fc4-4d9e-882d-161b84fc8e31/Your_image_here.png?token=eyJraWQiOiJzdG9yYWdlLXVybC1zaWduaW5nLWtleV9hOGI0YTI0NC00NzY4LTRhOTktYWI4MS1iNmZhNTZhNGQyZWYiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJ2YXVsdC8zLzY3MzMwZjU2LThmYzQtNGQ5ZS04ODJkLTE2MWI4NGZjOGUzMS9Zb3VyX2ltYWdlX2hlcmUucG5nIiwiaWF0IjoxNzYwOTg0OTEwLCJleHAiOjMxNzEyMDk4NDkxMH0.bcIMtiBAvV8C7Gw7uYaR5TMGsCep7w1TvRMjoRlP_-g",
  "This is an example RCS card message."
);

console.log(
  "Basic RCS with quick replies:",
  basic,
  "Rich card with quick replies",
  rich
);
```