## 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.
## Deployment
You can deploy your frame using the [vercel CLI](https://vercel.com/docs/cli) like this:
Add the api key in a `.env` file with the name `NEYNAR_API_KEY`.
Head back to the `src/index.tsx` file and add the following in the followers route instead of the GM message:
You can now head over to the [cast action playground](https://warpcast.com/~/developers/cast-actions) and generate a new URL by adding in the info as such:
Copy the install URL and paste it into a new variable in the `index.tsx` like this:
Click on Add action and it'll prompt you to add a new action like this:
Once you have added the action, you can start using it on Warpcast to see the follower count of various people! 🥳
### Analytics
Since we are using the validateFrameAction function, 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.
### Conclusion
This guide taught us how to create a Farcaster cast action that shows the follower count of the cast's author! If you want to look at the completed code, check out the [GitHub repository](https://github.com/neynarxyz/farcaster-examples/tree/main/cast-action).
Lastly, make sure to share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar), and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Cast From Inside a Frame
Source: https://docs.neynar.com/docs/casting-from-a-frame
In this guide, we'll look at how to build a frame using which people can create casts and perform other actions on the Farcaster app.
For this guide, I will be using Next.js and frames.js but feel free to refer to this guide for any other framework with the necessary changes.
For this guide, we'll go over:
Once the app is created, install the packages that we are going to need for the command:
Now that our sign-in button is working let's add a call to add the users' signers to the database.
In `layout.tsx` add this to the `onAuthSuccess` function in `NeynarContextProvider`'s settings:
Cast from a frame!
Now, create a new file `start/route.tsx` in the `frame` folder and add the following:
User not found!
Cast from a frame!
## Conclusion
This guide taught us how to create a frame from which the users can create casts, check out the [GitHub repository](https://github.com/avneesh0612/frame-cast) if you want to look at the full code.
Lastly, make sure to share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar) and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Find User Subscriptions with Neynar Hypersub
Source: https://docs.neynar.com/docs/common-subscriptions-fabric
Finding Hypersub subscriptions on Social Token Protocol (STP) using Neynar
The two FIDs we used were subscribed to Terminally Onchain, so that shows up.
If you want to look at the complete script, you can look at this [GitHub Gist](https://gist.github.com/avneesh0612/f9fa2da025fa764c6dc65de5f3d5ecec). If you want to know more about the subscription APIs take a look at [Fetch Subscribers for FID](/reference/fetch-subscribers-for-fid).
Lastly, please share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar), and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Convert a Web App to a Farcaster Mini App
Source: https://docs.neynar.com/docs/convert-web-app-to-mini-app
Update any JavaScript web app to be a Farcaster mini app
For this guide, we'll go over:
The target URL should be the URL you got from the ngrok command, and you can select whichever event you want to listen to. I’ve chosen to listen to all the casts with “farcasterframesbot” in it. Once you have entered all the info, click Create to create a webhook.
## Creating the bot
Head over to the [app section](https://dev.neynar.com/app/list) in the [neynar dashboard](https://dev.neynar.com/) and copy the signer uuid for your account:
Create a new `.env` file in the root of your project and add the following:
Create a `neynarClient.ts` file and add the following:
## Share with us!
Lastly, make sure to share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar) and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Create in UI
Source: https://docs.neynar.com/docs/create-farcaster-bot-ui
Create a new Farcaster agent directly in Neynar dev portal
## Create new agent account easily in developer portal
If you haven't created a new agent account yet, you can make it directly in the [Neynar dev portal](https://dev.neynar.com) . You can click inside an app and directly spin up a new bot from there.
Tap on "Create Agent" to make the agent.
Agent creation requires paying for account creation on the Farcaster protocol which Neynar does on your behalf. However, this is why we restrict the number of agents you can create per developer account. Best to not create more than one test agent through the portal in case you hit the limit prematurely.
## Start casting with agent account
As soon as the agent account is created, you will see a `signer_uuid` for the agent. You can use that signer to cast from the agent account using Neynar's [Publist Cast](/reference/publish-cast) API. A simple cURL request like
.avif?fit=max&auto=format&n=V7Un5QUQSGJFAZfS&q=85&s=f810f75e333ffa23efa49b4815b490a4)
# Create Multi Step Cast Action
Source: https://docs.neynar.com/docs/create-multi-step-cast-action
In this guide, we’ll make a multi-step cast action, within a few minutes! The cast action will go ahead and return a frame which will show the cast hash.
Let's get started!
## Creating a new frames project
We will use [bun](https://bun.sh/) and [frog](https://frog.fm/) for building the cast action in this guide, but feel free to use [framejs](https://framesjs.org/), [onchainkit](https://onchainkit.xyz/), or anything else as well!
Enter this command in your terminal to create a new app:
Let's now build the actual cast action.
## Creating the cast action
The frog instance provides us with a `.castAction` which can be used to create new cast actions like this:
If you go ahead and try out your action you'll see a frame like this
## Conclusion
This guide taught us how to create a multi-step cast action, which returns a frame! If you want to look at the completed code, check out the [GitHub Gist](https://gist.github.com/avneesh0612/69a9f0dd373a1709d2435304959b02f5).
Lastly, make sure to sure what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar) and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Create Transaction Frames
Source: https://docs.neynar.com/docs/create-transaction-frames
Learn how to create transaction frames that enable users to interact with blockchain transactions directly from Farcaster
With experimental flag set to `true` (filtered data)
As you can see, the raw data shows **273,791 followers** while the filtered data shows **146,993 followers** - a significant difference due to spam filtering.
This is different from what another client might show due to their own filtering logic.
E.g. Merkle's Farcaster client shows it as 145k which is close to Neynar's 146k number but not exact. This is because each company uses their own spam filtering logic.
# Explore Event Propagation on Farcaster
Source: https://docs.neynar.com/docs/explore-event-propagation-on-farcaster
Search for specific messages and debug Farcaster network health
[Neynar Explorer](https://explorer.neynar.com) helps developers debug event propagation1 on the Farcaster network.
### Start exploring
You can use the search bar to explore the network
* Node and API tabs will show where an event has propagated after clicking on the “Network response” button. Nodes / APIs that are missing events will be highlighted in red ❗️ , partially missing data will be highlighted in yellow ⚠️ and fully synced will be green ✅
* Clicking on a tab opens more details, allowing you to compare objects across nodes and APIs.
### Things you can explore
* **Specific casts:** e.g. `0x1a37442d0bd166806b6bc3a780bdb51f94d96fad` (cast hash) or `https://warpcast.com/v/0xf809724b`
* **Specific users:** e.g. `194` (user's fid)
* **Cast search with keywords:** e.g. `$higher`
* this will also show metrics of how often that keyword has appeared on the network recently
* results can be filtered by `username` (cast author), `channel_id` (channel of cast)
* results can be sorted by `desc_chron` or `algorithmic`
* search mode can be changed between `literal`, `semantic` or `hybrid`
* *read more about our [cast search API](/reference/search-casts), tap "Network response" to see event propagation for any cast*
* **User search with usernames:** e.g. `rish`
* *read more about our [user search API](/reference/search-user), tap "Network response" to see event propagation for any user*
* **Follow relationships:** e.g. `194<>191` to see relationship between two FIDs
* **Feed API results:** e.g. `https://api.neynar.com/v2/farcaster/feed/trending?limit=10&time_window=24h&provider=neynar`
* put any Feed API url from Neynar docs and evaluate results in a feed like format before you build a feed client
* *see our [Feed APIs](/reference/fetch-feed-for-you)*
### What else do you want to explore?
Hit us up with feature requests, we want to make debugging as easy as possible for developers!
1 Read more on event propagation in [Understanding Message Propagation on Farcaster Mainnet](https://neynar.com/blog/understanding-message-propagation-on-farcaster-mainnet). The blog was written at the time of hubs but similar debugging for snapchain syncs apply.
# Farcaster Actions Spec
Source: https://docs.neynar.com/docs/farcaster-actions-spec
Complete specification for Farcaster Actions - enabling secure cross-app communication and actions using Farcaster signers
If you pick `mbd` as provider, you can further customize your feed by passing in additional filter values in an optional`filters` object inside the `provider_metadata` field in the request e.g.
## Analytics
Since we are using neynar middleware with framejs, 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.
## Conclusion
This guide taught us how to create a rock-paper-scissors game on Farcaster frames using frames.js!
Lastly, please share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar), and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Kafka Stream: Real-Time Farcaster Events via Neynar
Source: https://docs.neynar.com/docs/from-kafka-stream
Ingest hydrated events from a hosted Kafka stream (as compared to dehydrated events from gRPC hub)
With Kafka, you can subscribe to the same data that we use for sending webhook notifications
## How
* [Reach out](https://neynar.com/slack), we will create credentials for you and send them via 1Password.
* For authentication, the connection requires `SASL/SCRAM SHA512`.
* The connection requires TLS (sometimes called SSL for legacy reasons) for encryption.
* `farcaster-mainnet-events` is the aggregated topic that contains all events.
* `farcaster-mainnet-user-events` contains `user.created`, `user.updated` and `user.transferred`
* `farcaster-mainnet-cast-events` contains `cast.created` and `cast.deleted`
* `farcaster-mainnet-follow-events` contains `follow.created` and `follow.deleted`
* `farcaster-mainnet-reaction-events` contains `reaction.created` and `reaction.deleted`
* `farcaster-mainnet-signer-events` contains `signer.created` and `signer.deleted`
You can subcribe to any combination of the event-specific topics above, or to the `farcaster-mainnet-events` topic to get all events in one topic.
There are three brokers available over the Internet. Provide them all to your client:
* `b-1-public.tfmskneynar.5vlahy.c11.kafka.us-east-1.amazonaws.com:9196`
* `b-2-public.tfmskneynar.5vlahy.c11.kafka.us-east-1.amazonaws.com:9196`
* `b-3-public.tfmskneynar.5vlahy.c11.kafka.us-east-1.amazonaws.com:9196`
Most clients accept the brokers as a comma-separated list:
# Choose Among Data Products
Source: https://docs.neynar.com/docs/how-to-choose-the-right-data-product-for-you
Pick between pulling or pushing data in the format that works for you
## Why
Developers can focus on what they are building instead of running a hub and replicator which can be significant cost & effort over time
## How to pick the right product for your team
| Product | Pros | Cons |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| [Parquet exports](/docs/parquet) | Developer ingests [Apache Parquet](https://parquet.apache.org/) files and can read/write to their own db as needed | Need to set up parquet ingestion workflow, open source repo available. See [here](/docs/parquet). |
| | No need for developer to share access to database with Neynar | |
| [Hosted SQL](/docs/how-to-query-neynar-sql-playground-for-farcaster-data) | Directly write sql queries against a postgres hosted db, no need to set up anything additional | Developer has no write access to db creating new indexes, etc. requires reaching out to Neynar no changes to overall table schema |
| [Indexer service - pipe Farcaster data](/docs/indexer-service-pipe-farcaster-data) | Neynar writes to a db on the developer’s side, no need for developer to manage hubs or replicators Neynar handles all hub and replicator related upgrades and maintenance | Developer needs to have a db that they can share write access to |
| | Developer has flexibility to let Neynar pipe specific tables instead of all FC data | |
| | Developer can manage the db as they see fit — create new indexes, etc. | |
| [Kafka stream](/docs/from-kafka-stream) | Good real time complement to services like Parquet -- backfill with Parquet and ingest real time with Kafka stream | Need to set up Kafka ingestion. See open source code [here](/docs/from-kafka-stream). |
# How to Contribute to @neynar/nodejs-sdk
Source: https://docs.neynar.com/docs/how-to-contribute-to-neynarnodejs-sdk
Step-by-step guide for contributing to the Neynar Node.js SDK - from setup to submitting pull requests
Once the app is created, install the packages that we are going to need for the command:
Now that our sign-in button is working let's start working on showing the feed!
### Building the feed
In the `page.tsx` file add the following:
Now, let's also show the list of channels that the user is following.
### Building the channels list and channel feed
To get the list of channels that a user is following we'll use the neynar APIs. So, let's first initialise the client in a new `lib/neynarClient.ts` file like this:
Now, let's build out the channel page as well which will show the feed of a specific channel.
Create a new `channel/[channelId]/page.tsx` file in the `app` folder and add the following:
### Building user profiles
Let's also build a profile page for every user which shows their profile card and the casts they have created.
Create a new file `profile/[username]/page.tsx` in the `app` folder and add the following:
## Conclusion
In this tutorial, we successfully built a Farcaster client with Next.js and the Neynar React SDK. Along the way, we covered essential features such as user authentication, creating feeds, fetching channels, and building user profiles. These steps give you a solid foundation to further enhance your client by adding more advanced features or customizing it to meet your specific needs.
To explore the full implementation, visit the [GitHub repository](https://github.com/avneesh0612/neynar-client). If you have any questions or want to share your progress, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack).
# Create Farcaster Bots via Script Using Neynar SDK
Source: https://docs.neynar.com/docs/how-to-create-a-farcaster-bot
Complete guide to creating Farcaster bots on Neynar with automated scripts. Learn to set up bot accounts, manage dedicated signers, and deploy automated social interactions using Neynar SDK with ready-to-use examples and templates.
Click the Sign in With Neynar button
## Create a channel feed
In this example, we will try to create a feed for the Neynar channel. If you are looking for the `parent_url`s for the channels on Warpcast, you can find them in the [Farcaster Channels Repository](https://github.com/neynarxyz/farcaster-channels/blob/main/warpcast.json). You will need the right `parent_url` to fetch channel data.
#### Ensure you have the right environment setup
Make sure to have node.js, typescript (ts) and yarn installed on your machine
* Install [node.js and npm](https://nodejs.org/en/download/)
* Install [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
* Install [ts-node](https://www.npmjs.com/package/ts-node#installation) globally
#### Create a new typescript file with the right imports
```js
import { NeynarAPIClient, isApiErrorResponse } from "@neynar/nodejs-sdk";
import { AxiosError } from "axios";
import {
FeedType, FilterType,
} from "@neynar/nodejs-sdk/build/neynar-api/neynar-v2-api";
```
#### Initialize the client
```bash
const client = new NeynarAPIClient("API_KEY");
```
#### Call `fetchFeedPage` function to get feed
```js
(async () => {
try {
const cast =
await client.fetchFeedPage(FeedType.Filter, {
filterType: FilterType.ParentUrl,
parentUrl: "chain://eip155:1/erc721:0xd4498134211baad5846ce70ce04e7c4da78931cc",
limit: 1, // change to however many casts you want to fetch at once (max 100)
withRecasts: true,
});
console.log(JSON.stringify(cast));
} catch (error) {
// isApiErrorResponse can be used to check for Neynar API errors
// handle errors accordingly
if (isApiErrorResponse(error)) {
console.log("API Error", error.response.data);
} else {
console.log("Generic Error", error);
}
}
})();
```
#### Run your new .ts file
* Navigate to the right folder in your terminal e.g. `cd ./test-sdk`
* Run script by typing `yarn start` into the terminal
#### You should now see an output like this
```json
{
"casts": [
{
"hash": "0xfb5f785e80cab58bb3ca9f3087b812d320846043",
"thread_hash": "0xfb5f785e80cab58bb3ca9f3087b812d320846043",
"parent_hash": null,
"parent_url": "chain://eip155:1/erc721:0xd4498134211baad5846ce70ce04e7c4da78931cc",
"parent_author": {
"fid": null
},
"author": {
"object": "user",
"fid": 976,
"custody_address": "0xae6706fe1cb6887e5ed9b2e7e64ba78ba9c5e785",
"username": "ba",
"display_name": "Ben Adamsky",
"pfp_url": "https://i.seadn.io/gae/-pmvC99Hw8fLjFKEIT3GxNs7qBhivAAUlIuVNXAykd06pUWSiAsypeLL8Q28dkjRtgXtNp07dLECv2p9P5MiqTrcmCR9OyYnAmO27Q?w=500&auto=format",
"profile": {
"bio": {
"text": "surveyooor @survey x @ponder, eng @ freeport.app, benadamsky.com",
"mentioned_profiles": []
}
},
"follower_count": 472,
"following_count": 345,
"verifications": [
"0x64ff33b653b26edcb4644e27d3720f3c653f8371"
],
"active_status": "active"
},
"text": "Added the fid of each channel lead on the farcaster channels directory, I hope this is useful to other devs too!\n\nhttps://github.com/neynarxyz/farcaster-channels",
"timestamp": "2023-11-15T21:42:45.000Z",
"embeds": [
{
"url": "https://github.com/neynarxyz/farcaster-channels"
}
],
"reactions": {
"likes": [
{
"fid": 6546,
"fname": "artlu"
},
{
"fid": 10259,
"fname": "alexgrover"
},
{
"fid": 299,
"fname": "stout"
},
],
"recasts": [
{
"fid": 616,
"fname": "dylsteck"
},
{
"fid": 2455,
"fname": "notdevin.eth"
},
{
"fid": 194,
"fname": "rish"
}
]
},
"replies": {
"count": 2
},
"mentioned_profiles": []
}
],
"next": {
"cursor": "eyJ0aW1lc3RhbXAiOiIyMDIzLTExLTE1IDIxOjQyOjQ1LjAwMDAwMDAifQ=="
}
}
```
**You get all the data in one request, making it easy to display or use in your next operation.** If you want to try getting a live response, head over to our API page for [v2/feed](/reference/fetch-user-following-feed).
You can take the cursor from the output and pass it in the next request to the SDK to page to the next set of results.
It should return an object similar to this when you run your script, copy the link from here and enter it on the [Warpcast validator](https://warpcast.com/~/developers/frames). Enter your URL and you can inspect the properties of your frame here.
If everything looks good, you can create your cast and share your cast with the world!
Lastly, make sure to share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar), and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# How to create frames without code using Frames studio
Source: https://docs.neynar.com/docs/how-to-create-frames-without-code-using-frames-studio
In this guide, we’ll take a look at how to create Farcaster frames without writing a single line of code, using our Frames studio.
Head over to your [Neynar dashboard](https://dev.neynar.com/frames) and click on Frame studio
Here, you can either create a new frame from scratch or choose one of our existing templates
# Programmatic Webhooks
Source: https://docs.neynar.com/docs/how-to-create-webhooks-on-the-go-using-the-sdk
Neynar webhooks are a way to receive real-time updates about events on the Farcaster protocol. You can use webhooks to build integrations that respond to events on the protocol, such as when a user creates a cast or when a user updates their profile.
Add the api key in a `.env` file with the name `NEYNAR_API_KEY`.
Now, let's test our api but to do that we'll need an api which we can call. In the `index.ts` file add the following:
Once the webhook is created, you'll start seeing logs on your server, which means that our webhook is working successfully!
## Conclusion
Lastly, make sure to share what you built with us on Farcaster by tagging [@neynar](https://warpcast.com/neynar), and if you have any questions, reach out to us on [warpcast](https://warpcast.com/~/channel/neynar) or [Slack](https://neynar.com/slack)!
# Customize SIWN - Neynar API
Source: https://docs.neynar.com/docs/how-to-customize-sign-in-with-neynar-button-in-your-app
Comprehensive guide to customizing Sign In With Neynar (SIWN) for seamless Farcaster authentication. Learn to customize the sign-in experience, integrate write access permissions, and connect user accounts to your app in minutes with custom styling and branding.
Check [demo.neynar.com](https://demo.neynar.com) to try out live customizations. Below are some of the attributes you can change in the code when integrating:
**data-variant** :
* Values: `neynar`, `warpcast`, `farcaster`
* defaultValue: `neynar`
* dataType: *string*
**data-theme** : Theme of button
* Values: `light` (#ffffff) \[default] , `dark` (#000000)
* defaultValue: `light`
* Applicable for **data-variant. Not** for Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
* **data-background\_color** can override the colour **data-theme** color
* dataType: *string*
**data-logo\_size** : Logo size for **data-variant**
* defaultValue: `30px`
* dataType: string (Takes values similar to a css property eg. 40px or 40 or 4rem)
* Applicable for **data-variant. Not** for **data-custom\_logo\_url**
**data-height** :
* defaultValue: `48px`
* dataType: *string* (Takes values similar to a css property eg. 40px or 40 or 4rem)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-width** :
* defaultValue: `218px` (By default minWidth is set to `205px` but it can be modified using **data-styles**)
* dataType: *string* (Takes values similar to a css property eg. 40px or 40 or 4rem)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-border\_radius** :
* defaultValue: `10px`
* dataType: *string* (Takes values similar to a css property eg. 40px or 40 or 4rem or ‘10px 20px 30px 40px’)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-font\_size** :
* defaultValue: `16px`
* dataType: *string* (Takes values similar to a css property eg. 40px or 40 or 4rem)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-font\_weight** :
* defaultValue: `300`
* dataType: *string* (Takes values similar to a css property eg. 100 or normal)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-padding** :
* defaultValue: ‘`8px` `15px`’
* dataType: *string* (Takes values similar to a css property eg. 40px or 40 or 4rem or ‘10px 20px 30px 40px’)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-margin** :
* defaultValue: `0px`
* dataType: *string* (Takes values similar to a css property eg. 40px or 40 or 4rem or ‘10px 20px 30px 40px’)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-text** :
* defaultValue: `“”`
* dataType: *string*
* Applicable for Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
* For this **data-variant** should **not** be present
**data-color** :
* defaultValue: `#000000`
* dataType: *string* (Takes values similar to a css property eg. red or #e2e2e2)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-background\_color** :
* defaultValue: `#ffffff`
* dataType: *string* (Takes values similar to a css property eg. red or #e2e2e2)
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
**data-styles** :
* defaultValue: `“”`
* dataType: string
* Applicable for **data-variant** and Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
* **overrides all the above styles**
* example: data-styles='\{ "backgroundColor": "red" }'
**data-custom\_logo\_url** : Hosted logo (**preferably** svg)
* defaultValue: `“”`
* dataType: *string*
* Applicable for Custom Text + Logo (**data-text** and **data-custom\_logo\_url**)
* **Note:** size of the logo should be adjusted within svg itself
# Overview
Source: https://docs.neynar.com/docs/how-to-embed-farcaster-frames-in-your-app-with-neynar
Host Frames on your product and let users interact with them directly
If you are hosting a Frame on your product (you can, they are not Warpcast specific!), you can
1. Fetch a feed of all Frames using our [/feed/frames API](/reference/fetch-frames-only-feed)
2. Let users connect Farcaster to your product with [Sign In with Neynar](/docs/how-to-let-users-connect-farcaster-accounts-with-write-access-for-free-using-sign-in-with-neynar-siwn) or use [dedicated signers](/docs/write-to-farcaster-with-neynar-managed-signers) on our Enterprise plan
3. Let users create Frame actions on your product directly using [Neynar Frame Action POST API](/reference/post-frame-action)
4. To test Frames on your local machine, set up [ngrok](https://ngrok.com/downloads/mac-os) and use ngrok as your Frame's POST URL.
# How to Create a Feed Based on an Array of Farcaster Users
Source: https://docs.neynar.com/docs/how-to-fetch-farcaster-feed-for-a-given-user-copy
Create a feed based on a given input of Farcaster users
## Create a feed given a list of users
In this example, we will try to feed for fids 1, 2 and 3. If you know someone's username, you can find their fid from our [user endpoint](/reference/search-user).
#### Ensure you have the right environment setup
Make sure to have node.js, typescript (ts) and yarn installed on your machine
* Install [node.js and npm](https://nodejs.org/en/download/)
* Install [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
* Install [ts-node](https://www.npmjs.com/package/ts-node#installation) globally
#### Create a new typescript file with the right imports
```js
import { NeynarAPIClient, isApiErrorResponse } from "@neynar/nodejs-sdk";
import { AxiosError } from "axios";
import {
FeedType, FilterType,
} from "@neynar/nodejs-sdk/build/neynar-api/neynar-v2-api";
```
#### Initialize the client
```js
const client = new NeynarAPIClient("API_KEY");
```
#### Call `fetchFeedPage` function to get feed
```js
(async () => {
try {
const cast =
await client.fetchFeedPage(FeedType.Filter, {
filterType: FilterType.Fids,
fids: "1,2,3",
limit: 1, // change to however many casts you want to fetch at once (max 100)
withRecasts: true,
});
console.log(JSON.stringify(cast));
} catch (error) {
// isApiErrorResponse can be used to check for Neynar API errors
// handle errors accordingly
if (isApiErrorResponse(error)) {
console.log("API Error", error.response.data);
} else {
console.log("Generic Error", error);
}
}
})();
```
#### Run your new .ts file
* Navigate to the right folder in your terminal e.g. `cd ./test-sdk`
* Run script by typing `yarn start` into the terminal
#### You should now see an output like this
```json
{
"casts": [
{
"hash": "0x46db48a011698758bfb9b1f77c07596249e277ef",
"thread_hash": "0x46db48a011698758bfb9b1f77c07596249e277ef",
"parent_hash": null,
"parent_url": "chain://eip155:7777777/erc721:0xe96c21b136a477a6a97332694f0caae9fbb05634",
"parent_author": {
"fid": null
},
"author": {
"object": "user",
"fid": 3647,
"custody_address": "0x54faa8c0c270093fcd0f0c4b29ace4d5426113b7",
"username": "iamnick.eth",
"display_name": "Nick Smith",
"pfp_url": "https://i.seadn.io/gcs/files/8583feea8a3465788d84367a92d80512.png?w=500&auto=format",
"profile": {
"bio": {
"text": "Building withfam.xyz Prev. Co-founder @ talisman.xyz ✴︎ Member @ FWB, Builder DAO, The Park ✷",
"mentioned_profiles": []
}
},
"follower_count": 482,
"following_count": 149,
"verifications": [
"0x0f9b1b68f848cb65f532bc12825357201726d3d2"
],
"active_status": "active"
},
"text": "https://x.com/iamnickdoteth/status/1724238126884024629?s=20\n\nBoiler Room, but make it onchain\n\nwe're forming a squad. HMU if you're interested",
"timestamp": "2023-11-17T01:22:25.000Z",
"embeds": [
{
"url": "https://x.com/iamnickdoteth/status/1724238126884024629?s=20"
}
],
"reactions": {
"likes": [
{
"fid": 191213,
"fname": "stringtheory69"
},
{
"fid": 13870,
"fname": "0xsatori.eth"
},
{
"fid": 8,
"fname": "jacob"
},
{
"fid": 195091,
"fname": "greyseymour"
},
{
"fid": 7715,
"fname": "royalaid"
},
{
"fid": 1407,
"fname": "zinger"
},
{
"fid": 3115,
"fname": "ghostlinkz"
},
{
"fid": 2,
"fname": "varunsrin.eth"
}
],
"recasts": [
{
"fid": 191213,
"fname": "stringtheory69"
},
{
"fid": 7715,
"fname": "royalaid"
},
{
"fid": 2,
"fname": "varunsrin.eth"
}
]
},
"replies": {
"count": 3
},
"mentioned_profiles": []
}
],
"next": {
"cursor": "eyJ0aW1lc3RhbXAiOiIyMDIzLTExLTE3IDAxOjIyOjI1LjAwMDAwMDAifQ=="
}
}
```
**You get all the data in one request, making it easy to display or use in your next operation.** If you want to try getting a live response, head over to our API page for [v2/feed](/reference/fetch-user-following-feed).
You can take the cursor from the output and pass it in the next request to the SDK to page to the next set of results.
## Get notifications for a given user `fid`
In this example, we will try to create a notifications page for the given user.
### Prerequisites
* Install [Node.js](https://nodejs.org/en/download/package-manager)
* Optional: Install [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) (Alternatively, npm can be used)
### Project Setup
**Initialize Project Directory**
## Fetch cast information easily with Neynar SDK
#### Ensure you have the right environment setup
Make sure to have node.js, typescript (ts) and yarn installed on your machine
* Install [node.js and npm](https://nodejs.org/en/download/)
* Install [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
* Install [ts-node](https://www.npmjs.com/package/ts-node#installation) globally
#### Create a new typescript file with the right imports
## Fetch feed for a user easily with Neynar SDK
In this example, we will try to get rish's feed who's fid is 194. If you know someone's username, you can find their fid from our [user endpoint](/reference/search-user).
#### Ensure you have the right environment setup
Make sure to have node.js, typescript (ts) and yarn installed on your machine
* Install [node.js and npm](https://nodejs.org/en/download/)
* Install [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable)
* Install [ts-node](https://www.npmjs.com/package/ts-node#installation) globally
#### Create a new typescript file with the right imports
```js
import { NeynarAPIClient, isApiErrorResponse } from "@neynar/nodejs-sdk";
import { AxiosError } from "axios";
import {
FeedType,
} from "@neynar/nodejs-sdk/build/neynar-api/neynar-v2-api";
```
#### Initialize the client
```js
const client = new NeynarAPIClient("API_KEY");
```
#### Call `fetchFeedPage` function to get feed
```js
(async () => {
try {
const cast =
await client.fetchFeedPage(FeedType.Following, {
fid: 194,
limit: 2, // change to however many casts you want to fetch at once (max 100)
withRecasts: true,
});
console.log(JSON.stringify(cast));
} catch (error) {
// isApiErrorResponse can be used to check for Neynar API errors
// handle errors accordingly
if (isApiErrorResponse(error)) {
console.log("API Error", error.response.data);
} else {
console.log("Generic Error", error);
}
}
})();
```
#### Run your new .ts file
* Navigate to the right folder in your terminal e.g. `cd ./test-sdk`
* Run script by typing `yarn start` into the terminal
#### You should now see an output like this
```json
{
"casts": [
{
"hash": "0x0d46810395803ff75221c5deac1d872db22aac99",
"thread_hash": "0x0d46810395803ff75221c5deac1d872db22aac99",
"parent_hash": null,
"parent_url": null,
"parent_author": {
"fid": null
},
"author": {
"object": "user",
"fid": 1287,
"custody_address": "0x19c29a3cea8733314e501d42f1a0d6dcb23e1b3d",
"username": "july",
"display_name": "July",
"pfp_url": "https://i.seadn.io/gcs/files/ed56e6b9a1b22720ce7490524db333e0.jpg?w=500&auto=format",
"profile": {
"bio": {
"text": "mostly creating and destroying; used to build flying cars & autonomous vehicles, now working on @faust",
"mentioned_profiles": []
}
},
"follower_count": 12787,
"following_count": 879,
"verifications": [
"0xdd3bf199e65bba74144a9a1c0dfaeda32b911121"
],
"active_status": "active"
},
"app": {
"object": "user_dehydrated",
"fid": 9152,
"username": "warpcast",
"display_name": "Warpcast",
"pfp_url": "https://i.imgur.com/3d6fFAI.png"
},
"text": "Constantly reminded that doing anything, is really difficult. Whether it is building a product, launching a service, hosting a party, parenting, supporting parents, finding like minded friends, thinking deeply about problems - and solving them",
"timestamp": "2023-11-16T23:26:03.000Z",
"embeds": [],
"reactions": {
"likes": [
{
"fid": 557,
"fname": "pugson"
},
{
"fid": 2745,
"fname": "sdv"
},
{
"fid": 4215,
"fname": "sa"
},
],
"recasts": [
{
"fid": 557,
"fname": "pugson"
},
{
"fid": 193173,
"fname": "winnykim"
},
]
},
"replies": {
"count": 3
},
"mentioned_profiles": []
},
],
"next": {
"cursor": "eyJ0aW1lc3RhbXAiOiIyMDIzLTExLTE3IDAxOjIyOjI1LjAwMDAwMDAifQ=="
}
}
```
**You get all the data in one request, making it easy to display or use in your next operation.** If you want to try getting a live response, head over to our API page for [v2/feed](/reference/fetch-user-following-feed).
You can take the cursor from the output and pass it in the next request to the SDK to page to the next set of results.
## SQL over API
* Documentation on how to use SQL over API is [**here**](https://redash.io/help/user-guide/integrations-and-api/api)
## Notes on the database
Data is more raw compared to our APIs, please let us know if any particular views would be useful; we encourage API use instead of SQL if you’re building clients. You will likely need to join different tables when using SQL.
### 1. **Follows**
`links` table has follower \<> follow data:
* `fid` → `target_fid` row means `fid` follows `target_fid`
### 2. Reactions
* `reaction_type` 1 is “like” and 2 is “recast” in the `reactions` table
* `hash` in the reactions table is the “reaction hash” and `target_hash` is the hash of the cast that received the reaction
### 3. hex \<> bytea
Redash UI automatically converts *bytea* data to hex format. However, when writing sql queries, you have to do the conversion yourself e.g.
* bytea to hex
The webhook will fire to the specified `target_url`. To test it out, we can use a service like [ngrok](https://ngrok.com/) to create a public URL that will forward requests to your local server.
Let's create a simple server that logs out the event. We will be using Bun JavaScript.
Here, we setup a webhook that fires to that ngrok endpoint (which is hooked to our localhost:3000), and the webhook will fire when a cast is made in the Memes channel.
Now the server will log out the event when it is fired. It will look something like this:
* Add the fid of the user whose feed you want to get
* Press the **Try it** button to see the response
## Get feed by `fids`
You can get the feed for multiple users by passing an array of their fids in the `fids` field of your request. To do this, you'll need to set `filter_type=fids` in you request body.
To try this request in the API Explorer to get an actual response from the API, follow these steps:
* In the *Request* tab, change the request type to **Get feed using fids**
* Set the query parameters to the following
* Press the **Try it** button to view the response
## Get feed by `parent_url`
You can get the feed for multiple users by passing the parent URL in the `parent_url` field in your request. To do this, you'll need to set `feed_type=filter` and `filter_type=parent_url` in you request body.
To try this request in the API Explorer to get an actual response from the API, follow these steps:
* In the *Request* tab, change the request type to **Get feed using parent\_url**
* Set the query parameters in the explorer
Fetch channel feed:
# Verify Webhooks with HMAC Signatures
Source: https://docs.neynar.com/docs/how-to-verify-the-incoming-webhooks-using-signatures
This guide highlights the steps to verify incoming webhooks using signatures
Webhook signatures are strings used to verify the validity of an incoming webhook event. This signature is passed as header values in the format: `X-Neynar-Signature`.
The validation is an important process to prevent exploitation and malicious webhook requests.
If you try scanning the QR code it will take you to Warpcast to sign into your app! But signing in won't do anything right now, so let's also handle that.
In the `api/signer/route.ts` file let's add a GET function as well to fetch the signer using the signer uuid like this: