Skip to main content

​
Overview

The Attio SDK has evolved from automatic entry point discovery across your codebase to a centralized app.ts definition file. This change provides better developer experience, clearer project structure, and improved maintainability. This guide is for you if you created your app before this change was applied and are upgrading to a newer version of the SDK.

​
What changed

Before: Automatic discovery The CLI automatically scanned all files in your src directory to find entry point exports by name (e.g. recordAction, callRecordingInsightTextSelectionAction) After: App definition in app.ts Entry points are explicitly organized under an App definition object exported from an app.ts file at the root of your project

​
Migration steps

If you don’t have an app.ts, we will prompt you to generate it when you run npm run dev. The CLI will:
  1. Scan your src directory for entry point exports
  2. Generate appropriate imports based on discovered entry points
  3. Create src/app.ts with all entry points organized correctly
In most cases, this should be sufficient to get your app up and running on the new version of the CLI. If you want to do it manually however, here are the steps to follow:
1

Create src/app.ts

Create a new file src/app.ts in your project:
import type {App} from "attio"

export const app: App = {}
2

Import your entry points

Import all your existing entry points into the app.ts file and add them to the appropriate arrays:
  • record.actions - for record actions
  • record.bulkActions - for bulk actions
  • record.widgets - for record widgets
  • callRecording.insight.textActions - for call recording insight text actions
  • callRecording.summary.textActions - for call recording summary text actions
  • callRecording.transcript.textActions - for call recording transcript text actions
import type {App} from "attio"

import {myRecordAction} from "./my-record-action"
import {myBulkRecordAction} from "./my-bulk-record-action"
import {myWidget} from "./my-widget"
import {myCallRecordingInsightSelectionAction} from "./my-call-recording-insight-selection-action"
import {myCallRecordingSummarySelectionAction} from "./my-call-recording-summary-selection-action"
import {myCallRecordingTranscriptSelectionAction} from "./my-call-recording-transcript-selection-action"

export const app: App = {
  record: {
    actions: [myRecordAction],
    bulkActions: [bulkExportAction],
    widgets: [customerWidget],
  },
  callRecording: {
    insight: {
      textActions: [myCallRecordingInsightSelectionAction],
    },
    summary: {
      textActions: [myCallRecordingSummarySelectionAction],
    },
    transcript: {
      textActions: [myCallRecordingTranscriptSelectionAction],
    },
  },
}
3

Test the Migration

Run npm run dev to verify your app loads correctly with the new entry point.

​
Best Practices

​
Use descriptive import names

Since we don’t need specifically named exports anymore, you can use descriptive names. The automatic migration won’t touch your existing files and only rename them in the app.ts imports, so you may want to rename each of your entry points manually. 
// Good: Clear, descriptive names
import {sendInvoiceAction} from "./actions/send-invoice"
import {customerSummaryWidget} from "./widgets/customer-summary"

// Instead of generic names
import {recordAction} from "./actions/send-invoice"
import {recordWidget} from "./widgets/customer-summary"

​
Organize your project structure

Although you can define entry points in any file under src, we recommend organizing your entry points into folders that follow the app object structure. For example: 
src/
  app.ts
  record/
    actions/
      send-invoice.ts
    widgets/
      customer-summary.ts
  callRecording/
    summary/
      capture-call-summary-feedback.ts
    transcript/
      capture-call-transcript-feedback.ts
⌘I