You've seen them in your feed, now let's build one. A Farcaster Frame is just a standard HTML page with a few specific tags. Your server generates this HTML, and the Farcaster client renders it as an interactive post.
Let's build a simple "Click Me" Frame using Node.js and Express.
Step 1: Set Up Your Server
bash
npm init -y
npm install express
touch index.js
Step 2: Write the Basic HTML with Frame Tags
Your server's job is to return HTML. A simple Frame needs 4 key tags:
fc:frame: The version of the Frames protocol.
fc:frame:image: The image to display in the Frame.
fc:frame:button:1: The label for the first button.
fc:frame:post_url: The URL to send the button click action to.
Step 3: Create the Express App
JavaScript
// index.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
// The initial Frame a user sees
app.get('/', (req, res) => {
const html =
<!DOCTYPE html>
<html>
<head>
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content="https://i.imgur.com/M65sI8f.png" />
<meta property="fc:frame:button:1" content="Click me!" />
<meta property="fc:frame:post_url" content="YOUR_SERVER_URL/clicked" />
</head>
<body>
<h1>My First Farcaster Frame</h1>
</body>
</html>
res.send(html);
});
// The Frame returned after a button click
app.post('/clicked', (req, res) => {
const html =
<!DOCTYPE html>
<html>
<head>
<meta property="fc:frame" content="vNext" />
<meta property="fc:frame:image" content="https://i.imgur.com/8xL1n1b.png" />
<meta property="fc:frame:button:1" content="Go back" />
<meta property="fc:frame:post_url" content="YOUR_SERVER_URL/" />
</head>
</html>
res.send(html);
});
app.listen(PORT, () => {
console.log(Server is running on port ${PORT});
});
Replace YOUR_SERVER_URL with your server's public URL (e.g., using a service like ngrok for testing).
You've just built a stateful application that lives inside a social post. This is the power of the Farcaster Protocol. For more advanced features like text inputs and multiple buttons, the official community documentation is the most comprehensive Guide.
Top comments (0)