App configuration file

This page documents the deprecated legacy registration file, app.ts. It keeps working for existing apps, but every new app is scaffolded with the folder-based convention under src/app/ and has no app.ts manifest (see App structure). To convert an existing app, use the folder structure migration guide. The two conventions can coexist while you migrate: once src/app/ exists, app.ts is optional, and if the same extension id is registered in both places, the folder-based definition wins.

The app.ts file provides a centralized way to register all of your app’s entry points - the various features and UI components that integrate with Attio’s interface. This file should be located directly in the root of your src directory (src/app.ts or src/app.tsx).

Basic structure

Every app.ts file follows this structure:

import type {App} from "attio"

// Import your entry points
import {myRecordAction} from "./my-record-action"
import {myWidget} from "./my-widget"

// Export the app configuration
export const app: App = {
  record: {
    actions: [myRecordAction],
    bulkActions: [],
    widgets: [myWidget],
  },
  callRecording: {
    insight: {
      textActions: [],
    },
    summary: {
      textActions: [],
    },
    transcript: {
      textActions: [],
    },
  },
}

Entry point types

The app.ts file organizes entry points into logical categories:

Record entry points

These appear on record pages (companies, people, deals, etc.): record.actions: Array<App.Record.Action> record.bulkActions: Array<App.Record.BulkAction> record.widgets: Array<App.Record.Widget>

Call recording entry points

These appear in call recording contexts: callRecording.insight.textActions: Array<App.CallRecording.Insight.TextSelectionAction> callRecording.summary.textActions: Array<App.CallRecording.Summary.TextSelectionAction> callRecording.transcript.textActions: Array<App.CallRecording.Transcript.TextSelectionAction>

Best practices

1. Use descriptive names

Use clear, descriptive names for your entry points:

// Good: Clear and specific
import {sendInvoiceAction} from "./actions/send-invoice"
import {customerSummaryWidget} from "./widgets/customer-summary"

// Avoid: Generic names
import {recordAction} from "./actions/send-invoice"
import {recordWidget} from "./widgets/customer-summary"

2. Organize your file structure

Match your file structure to the app object organization:

src/
  app.ts
  record/
    actions/
      send-invoice.ts
      export-to-crm.ts
    widgets/
      customer-summary.ts
      arr-display.ts
    bulk-actions/
      bulk-export.ts
  callRecording/
    summary/
      capture-feedback.ts
    transcript/
      highlight-action.ts

3. Keep app.ts simple

The app.ts file should primarily contain imports and the configuration object. Keep business logic in the individual entry point files.

4. One entry point per file

Each entry point should be defined in its own file and exported. This makes them easier to test and maintain.

platform Workspace settings schema

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

App configuration file

Basic structure

Entry point types

Record entry points

Call recording entry points

Best practices

1. Use descriptive names

2. Organize your file structure

3. Keep app.ts simple

4. One entry point per file

​Basic structure

​Entry point types

​Record entry points

​Call recording entry points

​Best practices

​1. Use descriptive names

​2. Organize your file structure

​3. Keep app.ts simple

​4. One entry point per file

Basic structure

Entry point types

Record entry points

Call recording entry points

Best practices

1. Use descriptive names

2. Organize your file structure

3. Keep app.ts simple

4. One entry point per file