# Build a Frame with Dune API

Source: https://docs.dune.com/learning/how-tos/dune-frames

## Summary

This guide explains how to build a Farcaster Frame that recommends users, using TypeScript, the Frog framework and the Dune API. Setup involves forking the example repo, installing frog and dependencies with npm, running npm run dev to reach a localhost environment, and exporting a Dune API key from user settings. The getRecommendations(fid) function in /api/dune.ts calls the Dune API, and the guide says filter calls on an existing result set return in 20-30ms, compared with 10-20 seconds for rerunning the whole query.

## Article

How to build a Farcaster Frame using Frog and Dune API

This guide provides a step-by-step process on using typescript and Dune API to create a user recommendation frame for Farcaster. You can find a live example of the frame here.

Set up your environment with the example repo

Fork this repo and then run npm install -g frog and npm install to get all your packages. If you don’t have npm set up, then go download node js first. Once installations are finished, try running npm run dev and it should take you to a localhost environment at http://localhost:5173/api. Next, you’ll need to get a Dune API key from your user settings and export it. With that done, you’ll be able to run the frame - click “See From Your Followers” in your localhost environment.

Explaining the Dune API function

We call the Dune API in the /api/dune.ts file in the getRecommendations(fid) function defined here. Below is the main API call, which makes a FILTER call on an existing result set. Using filters, we get our results in 20-30ms instead of reruning the whole query (which may take 10-20 seconds).

You can write your own aggregation queries in the same format, and then use filters to make the API fast enough for app/frame development. Good luck!