Skip to main content
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 the root of your src directory (src/app.ts or src/app.tsx). It should be generated when you initialize your app. If it was not, check the migration guide.

​
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.