FrameHub-Template

Host Farcaster Frames on decentralized serverless cloud.
Explore the docs »

View Demo · Report Bug · Telegram Discussion

About The Project

FrameHub is a decentralized Farcaster Frame hosting protocol. Unlike Vercel or other FaaS, it allows you to publish your Frame to IPFS and hosts it on a fully decentralized FaaS cloud with the following benefits:

• 💨 Ship Fast: Build and ship with familiar toolchain in minutes
• ⛑️ Secure: Execution guarded by rock solid TEE / Intel SGX
• 🔒 Private: Host API keys and user privacy at ease
• 💎 Unstoppable: Powered by IPFS and Phala's 35k+ decentralized TEE workers

Getting Started

Prepare

npm install

Test Locally

npx ts-node src/test.ts

Compile

Build your frame and output at dist/index.js.

npm run build
# yarn build

Publish to IPFS

Build your frame and upload to IPFS

npm run publish
# yarn publish

Upon a successful upload, the command should show the URL to access your frame.

Frame deployed at: https://frames.phatfn.xyz/ipfs/Qma4ejJPfuB9ag63TrWWd379QA1rKf1HyXJmLE5k16dAYk

New to thirdweb?

We use thirdweb Storage to host IPFS contents. If you are new to thirdweb, the command will guide you to create your account or login to your existing account from the browser. (You may need to forward port 8976 if you are accessing a remote console via SSH.)

Access the Published Frame

Once published, your frame is availabe at the URL: https://frames.phatfn.xyz/ipfs/<your-cid>. You can get it from the "Publish to IPFS" step.

You can test it with curl.

curl https://frames.phatfn.xyz/ipfs/<your-cid>

You can test the frame with the Warpcast frame simulator with the URL.

Advanced Usage

Add Secrets

By default, all of the compiled JS code is visible for anyone to view if they look at IPFS CID. This makes private info like API keys, signer keys, etc. vulnerable to be stolen. To protect devs from leaking keys, we have added a field called secret in the Request object. It allows you to store secrets in a vault for your Frame to access.

How to Add Secrets

The steps to add a secret is simple. We will add the Neynar API Key in this example by creating a secret JSON object with the apiKey:

{"apiKey": "<NEYNAR_API_KEY>"}

Then in your frame code, you will be able to access the secret key via req.secret object:

async function POST(req: Request): Promise<Response> {
    const apiKey = req.secret?.apiKey
}

Note: Before continuing, make sure to publish your compiled JS code, so you can add secrets to the CID.

Open terminal Use curl to POST your secrets to https://frames.phatfn.xyz/vaults. Replace IPFS_CID with the CID to the compile JS code in IPFS, and replace <NEYNAR_API_KEY> with your Neynar API key.

The command will look like this:

curl https://frames.phatfn.xyz/vaults -H 'Content-Type: application/json' -d '{"cid": "IPFS_CID", "data": {"apiKey": "<NEYNAR_API_KEY>"}}'
# Output:
# {"token":"e85ae53d2ba4ca8d","key":"e781ef31210e0362","succeed":true}

The API returns a token and a key. The key is the id of your secret. It can be used to specify which secret you are going to pass to your frame. The token can be used by the developer to access the raw secret. You should never leak the token.

To verify the secret, run the following command where key and token are replaced with the values from adding your secret to the vault.

curl https://frames.phatfn.xyz/vaults/<key>/<token>

Expected output:

{"data":{"apiKey":"<NEYNAR_API_KEY>"},"succeed":true}

To see where the code is used in this template, check out index.ts line 36.

If you are using secrets, make sure that your Cast URL is set in the following syntax where cid is the IPFS CID of your compiled JS file and key is the key from adding secrets to your vault.

https://frames.phatfn.xyz/ipfs/<cid>?key=<key>

Screen.Recording.2024-02-04.at.10.52.27.mov

(TBD: instantiate, ...)

Roadmap

• Publish to IPFS command
• Support secrets
• Free "Publish to IPFS" command
• SVG generation
• Database

FAQ

What packages can I use in the frame server?

• Most of the npm packages are supported: viem, onchainkit, ….
• Some packages with some advanced features are not supported:
• Large code size. Compiled bundle should be less than 500kb.
• Large memory usage, like image generation
• Web Assembly
• Browser only features: local storage, service workers, etc

What’s the spec of the Javascript runtime?

• The code runs inside a tailored QuickJS engine
• Available features: ES2023, async, fetch, setTimeout, setInterval, bigint
• Resource limits
• Max execution time 10s
• Max memory usage: 16 mb
• Max code size: 500 kb
• Limited CPU burst: CPU time between async calls is limited. e.g. Too complex for-loop may hit the burst limit.

Why is the serverless platform secure?

• Your code on FrameHub is fully secure, private, and permissionless. Nobody can manipulate your program, steal any data from it, or censor it.
• Security: The code is executed in the decentralized TEE network running on Phala Network. It runs code inside a secure blackbox (called enclave) created by the CPU. It generates cryptographic proofs verifiable on Phala blockchain. It proves that the hosted code is exactly the one you deployed.
• Privacy: You can safely put secrets like API keys or user privacy on FrameHub. The code runs inside TEE hardware blackboxs. The memory of the program is fully encrypted by the TEE. It blocks any unauthorized access to your data.
• Learn more at Phala Network Homepage

What's TEE / Intel SGX?

• TEE/SGX wiki
• Debunking TEE FUD: A Brief Defense of The Use of TEEs in Crypto