XMTP Support – frames.js
Cross-protocol frames are supported by frames.js via familiar APIs. This guide will showcase how to write a simple stateless frame, which returns the identity of the user that interacted with the frame in Farcaster or an XMTP chat. First, you need to install frames.js and @xmtp/frames-validator. You can do this by running the following command: To write a frame using Next.js, we need to create a page which renders the frame and a route which handles frame action requests. We start by creating a new API route which will handle POST requests to our frame. In your Next.js project, create a new directory /frames and inside it, create a route.ts file which contains the following code: This will handle POST requests to our frame and redirect them to page we are about to create, which will handle the rendering logic. In your Next.js project, create a new page.tsx at the root of the project and write the following code: First import the necessary functions and components from frames.js: FrameB
Cross-protocol frames are supported by frames.js via familiar APIs. This guide will showcase how to write a simple stateless frame, which returns the identity of the user that interacted with the frame in Farcaster or an XMTP chat. This tutorial is out of date and uses a deprecated version of frames.js. Please check the XMTP Support guide for the latest version. Setup First, you need to install frames.js and @xmtp/frames-validator . You can do this by running the following command: npm pnpm yarn npm install frames.js @xmtp/frames-validator Writing a Frame To write a frame using Next.js, we nee
Explore this link on the map →saved by
related reading
- Navigating the future of frontendfrontendmastery.com
- Towards a Digital Pluriversepluriverse.world
- Farcasterwarpcast.com
- next.js/examples at canary · vercel/next.js · GitHubgithub.com
- Cursor Docs — Agent, Rules, MCP, Skills & CLIdocs.cursor.com
- Guides: Forms | Next.jsnextjs.org
- Why Next.js is the Full-Stack Framework for Modern Websitesfelixvemmer.com
- GitHub - a16z/awesome-farcaster: A collection of awesome Farcaster links including clients, tools, and more. · GitHubgithub.com
- Keeping Figma Fast | Figma Blogfigma.com
- Chris James - HTMX is the Futurequii.dev
- examples/with-tabs at main · PlasmoHQ/examples · GitHubgithub.com
- Figma on Figma: Our Latest Brand Refresh | Figma Blogfigma.com