FrameGPT

Screenshots

Problem Statement

By writing out what you want in each frame, FrameGPT lets you build highly-custom frames in seconds. Describe the frame name, page title, image URL/ratio, & buttons, then hit generate to see the link! Example frame generated by FrameGPT: https://frames.neynar.com/f/694862b4/3fa85f64Some example prompts:️💰 One Page Mint ️💰Frame Name: Sample MintTitle: Page OneImage URL: https://cloudflare-ipfs.com/ipfs/QmajRLF79ZG3P1iq2WfY5H2SxbACqVZU6LxqLiQBEaWAP9Image ratio: 1:1Buttons:Mint, uses this contract: 0xb0d94258bcee18c3fcfbd6b0ac336cdf4e2b67a9🖼️ Multi-frame, multi-options 🖼️Frame Name: Frame Name--Frame One--Title: Page OneImage URL: https://cloudflare-ipfs.com/ipfs/QmajRLF79ZG3P1iq2WfY5H2SxbACqVZU6LxqLiQBEaWAP9Image ratio: 1:1Buttons:Learn more, redirect to https://www.coinbase.com/Next page, goes to Page 2--Frame Two--Title: Page 2Image URL: https://cloudflare-ipfs.com/ipfs/QmUYMKFHqwxyX6LpZyGT7LMcDmo7SdoKmrQVXvPa8zkk9kAspect ratio: 1:1Buttons:Mint, use this contract: 0xb0d94258bcee18c3fcfbd6b0ac336cdf4e2b67a9Learn more, link to https://www.coinbase.com/Back, goes to Page OneNext, goes to Third Page--Frame Three--Name: Third PageImage: https://cloudflare-ipfs.com/ipfs/QmeCYyYFBbRLeHtpQrAc7yrDoJL6QGnJ18ZQwENBCdwiJBAspect ratio: 1.91:1Input text placeholder: Enter something...Buttons:Back, goes to Page 2Home, goes to Page One

Solution

After the user writes out their frame specs, the string data is passed into GPT-3.5 through the OpenAI API. This enables the data to be parsed into the right JSON format, to be sent to the Neynar Frames API. The Neynar Frames API receives the JSON and returns a link to the frame.Tech stack: Next.js, React, TypeScript, Tailwind, Neynar Frames API, OpenAI API