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

# Build apps for Reintersect

> What a Reintersect app can do, how it reaches a workspace, and where to start.

> Reintersect apps are in developer preview. Names and limits can still change before general
> release.

A Reintersect app is TypeScript code that brings your tools into the places your team talks:
conversations and chat, decisions, calls and the Reintersect agent. You write it with
`@reintersect/sdk`, and Reintersect draws everything it produces with its own components, so your app
looks like the rest of the product in light and dark mode, on share pages and to agents.

<Card title="Quickstart" href="/quickstart" horizontal arrow>
  Scaffold an app with `npm create reintersect`, run it locally and see your first block in the
  playground.
</Card>

## Start with what you're building

<Columns cols={3}>
  <Card title="Blocks" href="/blocks/overview" arrow>
    Interactive cards in conversations, such as a go/no-go vote or a deployment with a promote
    button. Reintersect stores their state.
  </Card>

  <Card title="Commands and message actions" href="/commands" arrow>
    Slash commands in the composer and items in a message's menu. Your app answers in the chat.
  </Card>

  <Card title="References" href="/references/overview" arrow>
    Teach Reintersect your links, so a pasted URL becomes a chip or a live card.
  </Card>

  <Card title="Events" href="/events/overview" arrow>
    Signed deliveries when a decision is published, a call recap is ready or someone mentions your
    app.
  </Card>

  <Card title="Effect" href="/effect" arrow>
    The same app model with Effect Schema, services, layers and typed errors.
  </Card>

  <Card title="HTTP API" href="/api-reference/overview" arrow>
    The endpoints behind the SDK, for apps written in any language.
  </Card>
</Columns>

The guides also cover [search and memories](/search-and-memories), [how agents use your
app](/agents), [MCP servers](/mcp/overview), [hosting](/hosting/reintersect-hosted) and
[testing](/testing). The [component catalog](/components/overview) lists everything a block can
contain, and [recipes](/recipes/overview) are ready-made blocks you can add as they are.

## How an app reaches a workspace

1. You create the app in **Settings → Developer → Apps**, let `reintersect dev` create a personal one
   for you, or ask a coding agent in Reintersect to [build one](/agent-builder). Any member can
   build apps, and a development install is visible only to you.
2. A workspace owner or admin installs it from its install link. The consent screen lists the scopes,
   outbound hosts, claimed link domains, events and actions the app uses. See
   [Install and consent](/concepts/install-and-consent).
3. Members use its blocks, references, commands and message actions. Reintersect calls your app over
   signed HTTPS when something needs your code, and stores the results.
4. You ship new versions with `reintersect deploy` or the GitHub Action. A version that asks for no
   new access rolls out to every install on its own. A version that widens access waits for an admin
   to approve it.

## A first look

This block asks a circle for a go/no-go call and shows the tally as people vote:

```tsx src/app.tsx theme={null}
import { choice, createReintersectApp, defineBlock } from "@reintersect/sdk/app";
import { Block, ChoiceGroup, Header, Icon } from "@reintersect/sdk/components";
import { z } from "zod";

export const GoNoGo = defineBlock({
  type: "go-no-go",
  title: "Go / no-go",
  insertable: true,
  props: z.object({ title: z.string() }),
  state: z.object({}),
  initialState: {},
  inputs: { verdict: choice(["go", "nogo"]) },
}).render((props, { inputs }) => (
  <Block summary={`Go / no-go: ${props.title}`}>
    <Header leading={<Icon name="rocket" />}>{props.title}</Header>
    <ChoiceGroup
      input={inputs.verdict}
      label="Your call"
      labels={{ go: "Go", nogo: "No go" }}
      appearance="segmented"
    />
  </Block>
));

export const app = createReintersectApp({ name: "Launchpad", slug: "launchpad" }).addBlock(GoNoGo);
```

Reintersect stores each member's vote and counts them, so the block shows live results without a
round trip to your code. Notifications, search and Slack peers read the `summary`.

Using Effect? [Build with Effect](/effect#a-complete-app) shows a complete app on the Effect API.

## Principles

* You describe what something means, and Reintersect decides how it looks. Components take
  semantic props such as `tone="warning"` and plain numbers, and Reintersect picks the spacing, the
  primary button and the layout at each width. Blocks have no CSS, colours or raw HTML.
* Reintersect stores block state. Your app keeps no database for blocks: actions return the next
  state, and Reintersect validates and saves it.
* Types catch mistakes before you deploy. A destructive action without a confirm dialog, a misspelled
  choice label, or a block a message action inserts that the app never added are all compile errors.
* Agents can read every block. Each one has a plain-text projection and a required summary, so the
  agent can read it, quote it and act on it with a member's approval.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.