Getting Started

The quickstart shows you how to create your first integration with Mastra.

We’ll create a simple integration that syncs your Github contributions to a local Postgres database.

Start by creating a new Next.js App Router project in TypeScript. You can initialize one quickly with

npx create-next-app --ts --eslint --src-dir --tailwind --import-alias "@/*" --app

Once installed, follow the steps below:

Install

From the root of the directory, install the Mastra CLI:

npm install -g mastra

pnpm add -g mastra

yarn global add mastra

bun add --global mastra

Initialize your project:

npx mastra init

Run the Mastra CLI:

npx mastra admin

Ready to Go

Open your browser and navigate to your admin app at http://localhost:3456/

Choose “Github” from the list of integrations. Click the checkmark to install the Github integration.

Generate a personal access token for your Github account and enter it in the admin app.

💡

If you want to see the changes the admin app makes to your project, run git diff here.

Click the “Sync” button to sync your Github contributions.

Visualize your data

Now, it’s time to fetch and visualize your data.

First, install a heatmap library:

npm i @uiw/react-heat-map

Second, add the following to your index.ts file:

import HeatMap from '@uiw/react-heat-map';
 
const value = [
  { date: '2016/01/11', count: 2 },
  { date: '2016/01/12', count: 20 },
  { date: '2016/01/13', count: 10 },
  ...[...Array(17)].map((_, idx) => ({ date: `2016/02/${idx + 10}`, count: idx, content: '' })),
  { date: '2016/04/11', count: 2 },
  { date: '2016/05/01', count: 5 },
  { date: '2016/05/02', count: 5 },
  { date: '2016/05/04', count: 11 },
];
 
const Demo = () => {
  return (
    <div>
      <HeatMap value={value} weekLabels={['', 'Mon', '', 'Wed', '', 'Fri', '']} startDate={new Date('2016/01/01')} />
    </div>
  );
};

Adding Integrations