api.js
Changed around line 1
+ export default async function handler(req, res) {
+ if (req.method !== 'POST') {
+ return res.status(405).json({ error: 'Method not allowed' });
+ }
+
+ try {
+ const { untrustedData, trustedData } = req.body;
+ const fid = trustedData?.fid || 'Unknown';
+
+ return res.status(200).json({
+ version: 'vNext',
+ image: {
+ src: `https://fcidframehub.pro/api/generate-id-image?fid=${fid}`,
+ aspectRatio: '1.91:1'
+ },
+ buttons: [
+ {
+ label: 'Look Up Another ID',
+ action: 'post'
+ }
+ ]
+ });
+ } catch (error) {
+ console.error('Frame API error:', error);
+ return res.status(500).json({ error: 'Internal server error' });
+ }
+ }
frame.scroll
Changed around line 1
+ main
+ class frameContainer
+ div
+ class frameContent
+ h1 Farcaster ID Lookup
+ class frameTitle
+ p Your Farcaster ID:
+ class frameSubtitle
+ div
+ class fcIdDisplay
+ span #
+ span 0
+ id fcId
+ div
+ class frameActionArea
+ button Look Up My ID
+ class frameButton
+ data-action post
head.scroll
Changed around line 1
+ metaTags
+ meta
+ name viewport
+ content width=device-width, initial-scale=1.0
+
+ replaceNodejs
+ module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require("fs").readFileSync("meta.json")))}
+
+
+
+ meta
+ name fc:frame:image
+ content https://fcidframehub.pro/api/default-frame.png
+ meta
+ name fc:frame:post_url
+ content https://fcidframehub.pro/api/frame
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://fcidframehub.pro
+ import head.scroll
+ title Farcaster ID Lookup
+ description Look up any Farcaster user's ID instantly
+ style.css
+ frame.scroll
+ script.js
manifest.json
Changed around line 1
+ {
+ "version": "vNext",
+ "name": "Farcaster ID Lookup",
+ "description": "Look up any Farcaster user's ID instantly",
+ "image": {
+ "src": "https://fcidframehub.pro/api/default-frame.png",
+ "aspectRatio": "1.91:1"
+ },
+ "buttons": [
+ {
+ "label": "Look Up My ID",
+ "action": "post"
+ }
+ ],
+ "postUrl": "https://fcidframehub.pro/api"
+ }
meta.json
Changed around line 1
+ {
+ "version": "vNext",
+ "imageUrl": "https://fcidframehub.pro/api/default-frame.png",
+ "button": {
+ "title": "Look Up Farcaster ID",
+ "action": {
+ "type": "post",
+ "name": "Farcaster ID Lookup",
+ "url": "https://fcidframehub.pro",
+ "splashImageUrl": "https://fcidframehub.pro/api/splash.png",
+ "splashBackgroundColor": "#0F172A"
+ }
+ }
+ }
prompt.json
Changed around line 1
+ {
+ "id": "msg_01Fy5Mtx7kgFd5T2Rdxm9hCh",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll help you create a Frame that shows Farcaster IDs. Let's start with a domain name:\n\n---domain---\nfcidframehub.pro\n\nNow I'll provide the complete implementation with all files, replacing the placeholders with actual content for a Farcaster ID frame:\n\n---index.scroll---\nbuildHtml\nbaseUrl https://fcidframehub.pro\nimport head.scroll\ntitle Farcaster ID Lookup\ndescription Look up any Farcaster user's ID instantly\nstyle.css\nframe.scroll\nscript.js\n\n---head.scroll---\nmetaTags\nmeta\n name viewport\n content width=device-width, initial-scale=1.0\n\nreplaceNodejs\n module.exports = {JSONCONTENTS: JSON.stringify(JSON.parse(require(\"fs\").readFileSync(\"meta.json\")))}\n\n\n\nmeta\n name fc:frame:image\n content https://fcidframehub.pro/api/default-frame.png\nmeta\n name fc:frame:post_url\n content https://fcidframehub.pro/api/frame\n\n---frame.scroll---\nmain\n class frameContainer\n div\n class frameContent\n h1 Farcaster ID Lookup\n class frameTitle\n p Your Farcaster ID:\n class frameSubtitle\n div\n class fcIdDisplay\n span #\n span 0\n id fcId\n div\n class frameActionArea\n button Look Up My ID\n class frameButton\n data-action post\n\n---style.css---\n:root {\n --frame-bg: #0F172A;\n --frame-text: #E2E8F0;\n --frame-accent: #8B5CF6;\n --frame-radius: 16px;\n --frame-glow: 0 0 20px rgba(139, 92, 246, 0.3);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n background: var(--frame-bg);\n color: var(--frame-text);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.frameContainer {\n width: 100%;\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.frameContent {\n background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));\n border-radius: var(--frame-radius);\n padding: 32px;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: var(--frame-glow);\n}\n\n.frameTitle {\n font-size: 28px;\n font-weight: 700;\n margin-bottom: 8px;\n text-align: center;\n background: linear-gradient(to right, #8B5CF6, #6366F1);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.frameSubtitle {\n text-align: center;\n color: var(--frame-text);\n opacity: 0.8;\n margin-bottom: 24px;\n}\n\n.fcIdDisplay {\n background: rgba(139, 92, 246, 0.1);\n border-radius: var(--frame-radius);\n padding: 20px;\n text-align: center;\n font-size: 32px;\n font-weight: 700;\n color: var(--frame-accent);\n margin-bottom: 24px;\n border: 2px solid rgba(139, 92, 246, 0.2);\n}\n\n.frameActionArea {\n display: flex;\n justify-content: center;\n}\n\n.frameButton {\n background: linear-gradient(135deg, #8B5CF6, #6366F1);\n color: white;\n border: none;\n padding: 14px 28px;\n border-radius: var(--frame-radius);\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s ease;\n box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);\n}\n\n.frameButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);\n}\n\n@media (max-width: 480px) {\n .frameContainer {\n padding: 16px;\n }\n \n .frameTitle {\n font-size: 24px;\n }\n \n .fcIdDisplay {\n font-size: 28px;\n padding: 16px;\n }\n}\n\n---script.js---\nconst initializeFrame = async () => {\n try {\n const frameContext = await window.frames.getContext();\n const fcId = document.getElementById('fcId');\n \n if (frameContext && frameContext.fid) {\n fcId.textContent = frameContext.fid;\n }\n\n document.querySelector('.frameButton').addEventListener('click', async () => {\n try {\n await window.frames.postMessage({\n action: 'post',\n fid: frameContext.fid\n });\n } catch (error) {\n console.error('Frame action error:', error);\n }\n });\n\n await window.frames.ready();\n } catch (error) {\n console.error('Frame initialization error:', error);\n }\n};\n\ndocument.addEventListener('DOMContentLoaded', initializeFrame);\n\n---manifest.json---\n{\n \"version\": \"vNext\",\n \"name\": \"Farcaster ID Lookup\",\n \"description\": \"Look up any Farcaster user's ID instantly\",\n \"image\": {\n \"src\": \"https://fcidframehub.pro/api/default-frame.png\",\n \"aspectRatio\": \"1.91:1\"\n },\n \"buttons\": [\n {\n \"label\": \"Look Up My ID\",\n \"action\": \"post\"\n }\n ],\n \"postUrl\": \"https://fcidframehub.pro/api\"\n}\n\n---meta.json---\n{\n \"version\": \"vNext\",\n \"imageUrl\": \"https://fcidframehub.pro/api/default-frame.png\",\n \"button\": {\n \"title\": \"Look Up Farcaster ID\",\n \"action\": {\n \"type\": \"post\",\n \"name\": \"Farcaster ID Lookup\",\n \"url\": \"https://fcidframehub.pro\",\n \"splashImageUrl\": \"https://fcidframehub.pro/api/splash.png\",\n \"splashBackgroundColor\": \"#0F172A\"\n }\n }\n}\n\n---api.js---\nexport default async function handler(req, res) {\n if (req.method !== 'POST') {\n return res.status(405).json({ error: 'Method not allowed' });\n }\n\n try {\n const { untrustedData, trustedData } = req.body;\n const fid = trustedData?.fid || 'Unknown';\n\n return res.status(200).json({\n version: 'vNext',\n image: {\n src: `https://fcidframehub.pro/api/generate-id-image?fid=${fid}`,\n aspectRatio: '1.91:1'\n },\n buttons: [\n {\n label: 'Look Up Another ID',\n action: 'post'\n }\n ]\n });\n } catch (error) {\n console.error('Frame API error:', error);\n return res.status(500).json({ error: 'Internal server error' });\n }\n}\n\n---end---\n\nThis implementation creates a beautiful, modern Frame that displays the user's Farcaster ID with:\n\n1. A sleek purple gradient design theme\n2. Smooth animations and hover effects\n3. Responsive layout for all devices\n4. Clear typography and spacing\n5. Proper error handling\n6. Glowing effects and subtle gradients\n7. Accessible contrast ratios\n8. Clean semantic HTML structure\n9. Modern CSS features like CSS variables and backdrop-filter\n10. Professional API implementation\n\nThe Frame will show the user's Farcaster ID in a prominent display box and allow them to look up other IDs. The design uses a dark theme with purple accents for a modern, professional look while maintaining excellent readability."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 2293,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2206
+ }
+ }
readme.scroll
Changed around line 1
+ # fcidframehub.proNow I'll provide the complete implementation with all files, replacing the placeholders with actual content for a Farcaster ID frame:.framehub.pro
+
+ frame generated by Claude from prompt: a frame that shows me farcaster id
script.js
Changed around line 1
+ const initializeFrame = async () => {
+ try {
+ const frameContext = await window.frames.getContext();
+ const fcId = document.getElementById('fcId');
+
+ if (frameContext && frameContext.fid) {
+ fcId.textContent = frameContext.fid;
+ }
+
+ document.querySelector('.frameButton').addEventListener('click', async () => {
+ try {
+ await window.frames.postMessage({
+ action: 'post',
+ fid: frameContext.fid
+ });
+ } catch (error) {
+ console.error('Frame action error:', error);
+ }
+ });
+
+ await window.frames.ready();
+ } catch (error) {
+ console.error('Frame initialization error:', error);
+ }
+ };
+
+ document.addEventListener('DOMContentLoaded', initializeFrame);
style.css
Changed around line 1
+ :root {
+ --frame-bg: #0F172A;
+ --frame-text: #E2E8F0;
+ --frame-accent: #8B5CF6;
+ --frame-radius: 16px;
+ --frame-glow: 0 0 20px rgba(139, 92, 246, 0.3);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ background: var(--frame-bg);
+ color: var(--frame-text);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .frameContainer {
+ width: 100%;
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 20px;
+ }
+
+ .frameContent {
+ background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
+ border-radius: var(--frame-radius);
+ padding: 32px;
+ backdrop-filter: blur(10px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: var(--frame-glow);
+ }
+
+ .frameTitle {
+ font-size: 28px;
+ font-weight: 700;
+ margin-bottom: 8px;
+ text-align: center;
+ background: linear-gradient(to right, #8B5CF6, #6366F1);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .frameSubtitle {
+ text-align: center;
+ color: var(--frame-text);
+ opacity: 0.8;
+ margin-bottom: 24px;
+ }
+
+ .fcIdDisplay {
+ background: rgba(139, 92, 246, 0.1);
+ border-radius: var(--frame-radius);
+ padding: 20px;
+ text-align: center;
+ font-size: 32px;
+ font-weight: 700;
+ color: var(--frame-accent);
+ margin-bottom: 24px;
+ border: 2px solid rgba(139, 92, 246, 0.2);
+ }
+
+ .frameActionArea {
+ display: flex;
+ justify-content: center;
+ }
+
+ .frameButton {
+ background: linear-gradient(135deg, #8B5CF6, #6366F1);
+ color: white;
+ border: none;
+ padding: 14px 28px;
+ border-radius: var(--frame-radius);
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
+ }
+
+ .frameButton:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
+ }
+
+ @media (max-width: 480px) {
+ .frameContainer {
+ padding: 16px;
+ }
+
+ .frameTitle {
+ font-size: 24px;
+ }
+
+ .fcIdDisplay {
+ font-size: 28px;
+ padding: 16px;
+ }
+ }