Skip to main content
The starter project is a small, working application you can clone and run. Use it when you would rather see a live integration first and read the details afterwards. It contains two things:

A React app

A minimal React and Vite app that embeds the InstallIntegration component, so you can watch a customer connect their account.

An integration

A HubSpot integration defined in integrations/amp.yaml, reading contacts and companies and writing back to both.

​
Before you start

Setting up the accounts and credentials takes longer than running the app itself. Budget around twenty minutes for these steps the first time.
1

Create an Ampersand project

Sign up for a free Ampersand account and follow the prompts to create a project.
2

Create an API key

In the dashboard, open API keys and create one. You will paste it into the app later.
3

Create a destination named defaultWebhook

In Destinations, create a webhook destination called defaultWebhook. If you do not have an endpoint to point it at, play.svix.com gives you a disposable one that shows incoming payloads in the browser, which is ideal for a first run.
4

Set up the provider

The included integration uses HubSpot, so you need a HubSpot account and a HubSpot app. Follow the HubSpot provider guide. To use a different provider instead, pick its provider guide and swap the manifest in the next section.
5

Install the CLI

Install the Ampersand CLI and run amp login to authenticate.

​
Run it

1

Clone and install

2

Deploy the integration

This creates a revision of the integration from integrations/amp.yaml. Nothing syncs yet, because no customer has installed it.
3

Point the app at your project

In src/App.tsx, replace the placeholders with your project name and API key:
4

Start the app

Open the app and use the embedded component to connect a HubSpot account. Once installed, reads run on the schedule in the manifest and results arrive at your defaultWebhook destination.

​
What the code does

The whole integration surface is one component. AmpersandProvider holds your project credentials, and InstallIntegration renders the connect and configure flow your customers see:
src/App.tsx
The consumerRef and groupRef values identify which of your customers is installing. In your own application these come from your user and account records, not hardcoded strings. See Prebuilt UI components for the full set of props.

​
Make it yours

1

Swap the integration

Replace integrations/amp.yaml with your own manifest, or with one from the samples repository. See the manifest schema for every available field.
2

Keep the names aligned

Three names have to match up: the integration name in amp.yaml and the integration variable in App.tsx, and the destination name in amp.yaml and the destination you created in the dashboard.
3

Redeploy after changes

Run amp deploy again whenever you edit the manifest. Each deploy creates a new revision. Settings a customer has already overridden in their config stay as they set them.

​
Where to go next

How Ampersand works

Integrations, installations, revisions, and configs.

Read actions

Schedules, backfills, field filters, and delivery.

Prebuilt UI components

Props, theming, and the other components in the library.