frog.md

description	layout
Learn how to integrate the Airstack Frog Recipes into your existing Frog project in less than 5 minutes.	title description tableOfContents outline pagination visible true visible true visible true visible true visible true

🐸 Frog

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:

{% tabs %} {% tab title="npm" %}

npm install @airstack/frog

{% endtab %}

{% tab title="yarn" %}

yarn add @airstack/frog

{% endtab %}

{% tab title="pnpm" %}

pnpm install @airstack/frog

{% endtab %}

{% tab title="bun" %}

bun install @airstack/frog

{% endtab %} {% endtabs %}

Step 2: Change Imports

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

{% tabs %} {% tab title="TypeScript" %}

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

{% endtab %}

{% tab title="JavaScript" %}

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

{% endtab %} {% endtabs %}

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:

{% tabs %} {% tab title="TypeScript" %}

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

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

{% endtab %}

{% tab title="JavaScript" %}

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

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

{% endtab %} {% endtabs %}

Step 4: TypeScript JSX Configuration

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

{
  "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:

{
  "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