Agent skill
framer-deploy-integration
Deploy Framer integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Framer-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy framer", "framer Vercel", "framer production deploy", "framer Cloud Run", "framer Fly.io".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/framer-pack/skills/framer-deploy-integration
SKILL.md
Framer Deploy Integration
Overview
Deploy Framer Server API integrations (CMS sync services, webhook handlers) to cloud platforms. Framer sites themselves are hosted by Framer — this covers deploying your backend services that interact with Framer.
Instructions
Step 1: Vercel Serverless (CMS Sync API)
// api/sync-framer.ts — Vercel serverless function
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { framer } from 'framer-api';
export default async function handler(req: VercelRequest, res: VercelResponse) {
if (req.method !== 'POST') return res.status(405).end();
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
const { items, collectionName } = req.body;
const collections = await client.getCollections();
const col = collections.find(c => c.name === collectionName);
if (!col) return res.status(404).json({ error: 'Collection not found' });
await col.setItems(items);
await client.publish();
res.json({ synced: items.length, published: true });
}
vercel env add FRAMER_API_KEY production
vercel env add FRAMER_SITE_ID production
vercel --prod
Step 2: Fly.io (Long-Running Sync Service)
fly secrets set FRAMER_API_KEY=framer_sk_...
fly secrets set FRAMER_SITE_ID=abc123
fly deploy
Step 3: Webhook Receiver for Content Updates
// api/webhook-handler.ts — receive webhooks from your CMS, sync to Framer
export default async function handler(req, res) {
const { event, data } = req.body;
if (event === 'content.published') {
const client = await framer.connect({ apiKey: process.env.FRAMER_API_KEY!, siteId: process.env.FRAMER_SITE_ID! });
// Sync updated content to Framer CMS
const col = (await client.getCollections()).find(c => c.name === 'Blog Posts');
if (col) await col.setItems([{ fieldData: data }]);
await client.publish();
}
res.json({ ok: true });
}
Output
- Serverless CMS sync endpoint
- Webhook handler for content update automation
- Platform secrets configured
Resources
Next Steps
For webhook patterns, see framer-webhooks-events.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?