🐸Frog

Learn how to integrate the Airstack Frog Recipes into your existing Frog project in less than 5 minutes.

Integrating the Airstack Frog Recipes into your existing Frog project is very simple and takes less than 5 minutes.

Step 1: Install Airstack Frog Recipes

First, install the Airstack Frog Recipes to your project:

npm

npm install @airstack/frog

yarn

yarn add @airstack/frog

pnpm

pnpm install @airstack/frog

bun

bun install @airstack/frog

Step 2: Change Imports

Then, simply by change all the frog imports to @airstack/frog.

TypeScript

// Initially: import { Frog } from "frog";
import { Frog } from "@airstack/frog";

JavaScript

// Initially: const { Frog } = require("frog");
const { Frog } = require("@airstack/frog");

The Airstack Frog Recipes is built on top of the Frog framework and contains all the functionality offered by the Frog framework, therefore any functions available in frog should also be available in @airstack/frog.

Step 3: Add Airstack API Key

Once all imports are converted, add an Airstack API key to your Frog instance's apiKey(required) field:

TypeScript

import { Frog } from "@airstack/frog";

export const app = new Frog({
  apiKey: process.env.AIRSTACK_API_KEY as string,
});

JavaScript

const { Frog } = require("@airstack/frog");

export const app = new Frog({
  apiKey: process.env.AIRSTACK_API_KEY,
});

Step 4: TypeScript JSX Configuration

Ensure that the jsxImportSource in your tsconfig.json is as follows:

tsconfig.json

{
  "compilerOptions": {
    // other options
    "jsxImportSource": "@airstack/frog/jsx",
  }
}

Step 5: Modify Scripts In package.json

Lastly, you can replace frog dev with npx @airstack/frog dev:

package.json

{
  "scripts": { 
    "dev": "npx @airstack/frog dev",
  },
}

🥳 Congratulations! You just integrated Airstack Frog Recipe to your Frog Framework!

Developer Support

If you have any questions or need help regarding integrating Airstack Frog Recipe to your existing Frog project, please join our Airstack's Telegram group.

More Resources

• Onchain Data

• Farcaster Hubs

• Allow List