Notion AI to Framer
Learn how to connect Notion AI to your Framer blog CMS. I’ll show you how to generate articles with an AI agent in Notion and sync them directly into Framer, with no manual copy-paste needed.
Notion AI to Framer — Automate your blog
What if your blog content could write itself and land in Framer automatically? That’s exactly what’s possible when you connect Notion AI to Framer’s CMS plugin. In this tutorial, I’ll show you how to set up the full pipeline, from an AI-generated database to live blog posts on your Framer site.
By the end of this tutorial, you'll know how to:
Install and configure the Notion plugin inside Framer
Use Notion AI to generate a full blog database with structured content
Create a custom AI writing agent with your own style and instructions
Map your Notion data to Framer CMS pages and publish live
What you'll need:
A Framer account (search for a Blog template in the Framer Marketplace)
The Notion plugin for Framer (free)
A Notion Business plan (required for Notion AI agents)
Install the Notion plugin in Framer
Start inside Framer. Open the Plugins panel from the top bar, search for "notion", and select it from the Marketplace results. This installs the official Notion integration directly into your project no third-party tools needed.
Name your CMS collection
Once the plugin launches, Framer will ask you to create a new collection. Give it a clear name that matches your blog something like Flonocode Blog CMS. This name will appear in your CMS panel as a synced collection going forward.
Select your Notion database as the source
Framer will prompt you to connect a Notion database. Open the database in Notion, click the three-dot menu, go to Connections, and connect Framer. Back in Framer, select your database from the dropdown and click Next.
Sync the plugin with your Notion workspace
Authorize the connection between Framer and Notion. In Notion's sidebar, verify your database is connected, you should see both the Framer Server API and Framer listed as active connections.
Create your blog database with Notion AI
Head over to Notion. Instead of building the database manually, use Notion AI to generate it for you. Trigger the Notion AI and give it this prompt:
"Create a database with the necessary properties for writing blog articles on Notion, which I will use to import them into the Framer CMS using the Notion plugin"
Build your AI writing agent
In Notion, create a custom AI agent, name it something memorable like “El Profesor,” and configure it with an Agent Blog instruction set that defines your writing style, tone, and article structure. Once set up, a single prompt generates all six articles directly inside your database.
Connect the plugin to your database in Framer
Back in Framer's CMS panel, find your synced collection under Synced. It will show your collection name with 6 items, your Notion articles are now visible to Framer and ready to import.
Import your data into the Framer CMS
Click on your synced collection to open the import modal. Map each Notion property to the correct Framer CMS field type, Title as Plain Text, Cover as Image, and Content as Formatted Text. Then click Import from Blog, NOTION X FRAMER.
Important: the Slug field must be unique for each post. Framer uses it as the URL path, so duplicate slugs break routing and hurt SEO.
Create the CMS Index page
Add a new page to your Framer project, your blog listing page. Bind your CMS items to the page and make sure each article card links to its Detail Page via the correct slug.
Build the Detail Pages for your articles
Create a new CMS Detail Page, bind each element (title, body, image, date) to its corresponding Notion field, and preview it with a live entry to confirm everything is mapped correctly.
Sync your Notion collection in Framer
Whenever you update or add articles in Notion, trigger a sync in Framer to reflect the changes. Go to your synced CMS collection in Framer and click the Sync icon at the top to keep your site always up to date.
Your blog writes itself. 🎉
You've built a complete pipeline: Notion AI generates your articles, the plugin syncs them to Framer's CMS, and your readers see a polished blog all without copy-pasting a single word.
