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

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message`, the default import of the v7 Node SDK. Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# Send your first in-app message

> Add the Courier Inbox to your app, then send a message to the inbox channel.

export const Tags = ({items}) => {
  const routes = {
    Email: "/integrations/email/overview",
    SMS: "/integrations/sms/overview",
    Push: "/integrations/push/overview",
    Inbox: "/in-app/overview",
    Chat: "/integrations/direct-message/overview",
    Templates: "/design/templates/overview",
    Variables: "/design/templates/variables",
    Elemental: "/design/elemental/overview",
    Brands: "/design/brands",
    Translations: "/design/elemental/locales",
    Routing: "/send/routing",
    Preferences: "/recipients/preferences/overview",
    Journeys: "/journeys/overview",
    Broadcasts: "/broadcasts/overview",
    Tenants: "/tenants/overview",
    Logs: "/monitor/overview",
    Webhooks: "/monitor/webhooks/outbound",
    Lists: "/recipients/lists-and-audiences/overview",
    Users: "/recipients/overview",
    Digests: "/journeys/nodes/digest",
    Environments: "/workspaces/overview",
    MCP: "/resources/mcp"
  };
  const icons = {
    Email: "envelope",
    SMS: "comment",
    Push: "mobile",
    Inbox: "inbox",
    Chat: "comments",
    Templates: "pen-ruler",
    Variables: "pen-ruler",
    Elemental: "pen-ruler",
    Brands: "pen-ruler",
    Translations: "pen-ruler",
    Routing: "paper-plane",
    Preferences: "users",
    Journeys: "route",
    Broadcasts: "bullhorn",
    Tenants: "building",
    Logs: "chart-simple",
    Webhooks: "chart-simple",
    Lists: "users",
    Users: "users",
    Digests: "route",
    Environments: "briefcase",
    MCP: "toolbox"
  };
  const base = "https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/";
  const names = String(items || "").split(",").map(entry => entry.trim()).filter(Boolean);
  return <div className="cx-tags">
      {names.map(name => {
    const href = routes[name];
    const icon = icons[name];
    const url = icon ? "url(" + base + icon + ".svg)" : null;
    const style = url ? {
      "--cx-tag-icon": url
    } : null;
    if (!href) {
      return <span className="cx-tag" data-icon={icon} style={style} key={name}>
              {name}
            </span>;
    }
    return <a className="cx-tag" data-icon={icon} style={style} href={href} key={name}>
            {name}
          </a>;
  })}
    </div>;
};

export const AppLink = ({href, children, name, bare}) => {
  const label = children || name || "Open in Courier";
  if (bare) {
    return <a href={href} target="_blank" rel="noreferrer">{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="app" href={href} target="_blank" rel="noreferrer">
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method" aria-hidden="true">↗</span>
    </a>;
};

export const Doc = ({href, children, name, bare}) => {
  const label = children || name || href;
  if (bare) {
    return <a href={href}>{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="doc" href={href}>
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method">DOC</span>
    </a>;
};

<Tags items="Inbox" />

In-app is a channel like email or SMS. The difference is that the message shows up inside your app, so you build the UI first.

That UI runs on eight platforms, so it has a tab of its own. Everything below lives in <Doc href="/docs/in-app/overview">In-App</Doc>.

## Add it to your app

<CardGroup cols={2}>
  <Card title="Add an inbox" icon="inbox" href="/docs/in-app/add-an-inbox">
    Put the notification center in your app.
  </Card>

  <Card title="Sign users in" icon="key" href="/docs/in-app/authenticate-users">
    Your backend gives the SDK a token. Start here.
  </Card>

  <Card title="Add an inbox to Next.js" icon="react" href="/docs/guides/add-an-inbox-to-nextjs">
    Every step, written for the App Router.
  </Card>

  <Card title="Pick your platform" icon="cubes" href="/docs/in-app/overview">
    React, Vue, Angular, iOS, Android, Flutter, and more.
  </Card>
</CardGroup>

## Then send a message

<CardGroup cols={2}>
  <Card title="Send to the inbox" icon="paper-plane" href="/docs/in-app/send-to-the-inbox">
    The send call, in every language.
  </Card>

  <Card title="How the inbox behaves" icon="bolt" href="/docs/in-app/how-the-inbox-behaves">
    Live updates, and how long a message stays.
  </Card>
</CardGroup>

## Add more to your app

<CardGroup cols={2}>
  <Card title="Add toasts" icon="bell" href="/docs/in-app/add-toasts">
    Pop a message up the moment it arrives.
  </Card>

  <Card title="Add a preference center" icon="toggle-on" href="/docs/in-app/add-a-preference-center">
    Let users choose what they get.
  </Card>
</CardGroup>

<AppLink href="https://app.courier.com/~/test/platform/api-keys">A Test key</AppLink> is enough for all of it. The inbox works in Test with no provider connected. Email is the only other channel that does.