Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.neynar.com/llms.txt

Use this file to discover all available pages before exploring further.

Before we begin, you can access the complete source code for this guide on GitHub. Let’s get started!

​
Creating a new frames project

We will use vercel and frog for building the frame in this guide, but feel free to use anything else as well! Enter this command in your terminal to create a new app: 
bunx create-frog -t vercel
Enter a name for your project and it will spin up a new project for you. Once the project is created install the dependencies: 
cd <project_name>
bun install

​
Creating the frame home page

Head over to the api/index.ts file. Here, you’ll see a starter frame on the / route. But first, let’s change the Frog configuration to use /api as the base path and use neynar for hubs like this: 
export const app = new Frog({
  assetsPath: "/",
  basePath: "/api",
  hub: neynar({ apiKey: 'NEYNAR_FROG_FM' })
});

​
Make sure to update the API key to your API key to get analytics

You also need to import neynar from “frog/hubs”: 
import { neynar } from "frog/hubs";
Now, change the frame on the / route to match this: 

app.frame("/", (c) => {
  return c.res({
    action: "/result",
    image: (
      <div
        style={{
          alignItems: "center",
          background: "black",
          backgroundSize: "100% 100%",
          display: "flex",
          flexDirection: "column",
          flexWrap: "nowrap",
          height: "100%",
          justifyContent: "center",
          textAlign: "center",
          width: "100%",
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 60,
            fontStyle: "normal",
            letterSpacing: "-0.025em",
            lineHeight: 1.4,
            marginTop: 30,
            padding: "0 120px",
            whiteSpace: "pre-wrap",
          }}
        >
          Choose your weapon
        </div>
      </div>
    ),
    intents: [
      <Button value="rock">Rock</Button>,
      <Button value="paper">Paper</Button>,
      <Button value="scissors">Scissors</Button>,
    ],
  });
});
This will render an image saying choose your weapon and three buttons saying rock paper and scissors. When any of these buttons are clicked a request to the /result route is made which we define in the action parameter.
Frame home page

​
Make sure that you sign in using your warpcast account, so that the requests can be validated

Now, let’s build the /result route like this: 
app.frame("/result", (c) => {
  const rand = Math.floor(Math.random() * 3);
  const choices = ["rock", "paper", "scissors"];
  const userChoice = choices[(c.buttonIndex || 1) - 1];
  const computerChoice = choices[rand];
  let msg = "";

  if (userChoice === computerChoice) {
    msg = "draw";
  }

  if (
    (userChoice === "rock" && computerChoice === "scissors") ||
    (userChoice === "paper" && computerChoice === "rock") ||
    (userChoice === "scissors" && computerChoice === "paper")
  ) {
    msg = "You win";
  }

  if (
    (userChoice === "rock" && computerChoice === "paper") ||
    (userChoice === "paper" && computerChoice === "scissors") ||
    (userChoice === "scissors" && computerChoice === "rock")
  ) {
    msg = "You lose";
  }

  return c.res({
    image: (
      <div
        style={{
          alignItems: "center",
          background: "black",
          backgroundSize: "100% 100%",
          display: "flex",
          flexDirection: "column",
          flexWrap: "nowrap",
          height: "100%",
          justifyContent: "center",
          textAlign: "center",
          width: "100%",
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 60,
            fontStyle: "normal",
            letterSpacing: "-0.025em",
            lineHeight: 1.4,
            marginTop: 30,
            padding: "0 120px",
            whiteSpace: "pre-wrap",
            display: "flex",
          }}
        >
          {userChoice} vs {computerChoice}
        </div>

        <div
          style={{
            color: "white",
            fontSize: 60,
            fontStyle: "normal",
            letterSpacing: "-0.025em",
            lineHeight: 1.4,
            marginTop: 30,
            padding: "0 120px",
            whiteSpace: "pre-wrap",
          }}
        >
          {msg}
        </div>
      </div>
    ),
    intents: [<Button action="/">Play again</Button>],
  });
});
Here, we first get the button index from the request and use it to get the user’s choice. We have then added some logic for generating a random choice for the game. Then, in the image we display the two choices and the result of the game. We have also added a play again game which simply pushes the user to the / route.
Frame result page

​
Analytics

Since we are using neynar hub with Frog, we also get analytics out of the box. Head over to the usage tab and click on the frame that you are currently using. It will provide you with various analytics like total interactors, interactions per cast, etc.
Frame analytics

​
Deployment

You can deploy your frame using the vercel CLI like this: 
bun run deploy
Alternatively, you can also create a new GitHub repository and sync your vercel deployments.

​
Conclusion

This guide taught us how to create a rock-paper-scissors game on Farcaster frames! If you want to look at the completed code, check out the GitHub repository. Lastly, make sure to sure what you built with us on Farcaster by tagging @neynar and if you have any questions, reach out to us on warpcast or Slack!