---
title: "Building Blocks AI — Free Framer plugin · Best of Framer"
description: "Free Framer plugin · by DevDuo 935 · AI. Building Blocks AI - generate custom Framer components from simple text prompts."
canonical: "https://framer.elliotli.dev/plugin/building-blocks-ai"
---

[Home](/)/[Plugins](/plugins)/[AI](/plugins/category/ai)/Building Blocks AI

# Building Blocks AI

Generate custom Framer components

[View on Framer](https://framer.com/marketplace/plugins/building-blocks-ai/?via=elliot-li)

![Building Blocks AI preview image 1](https://framer.elliotli.dev/og/plugin/building-blocks-ai/314a7abb5053eb9f/1600x1067.jpg)

## Summary

Building Blocks AI - generate custom Framer components from simple text prompts.

## Description

Building Blocks AI - generate custom Framer components from simple text prompts.

1\. Open the plugin from the Framer canvas.

2\. Go to the settings (gear icon, top right). Enter your OpenRouter API key. You can generate one from: [https://openrouter.ai/keys.](https://openrouter.ai/keys) Once connected, you'll see the green "API Connected" status at the top.

3\. Click the "Select Prompt" card and choose a ready-made prompt from the list, or explore the suggested ideas if you're not sure what to build.

4\. Click the "Select Theme" card and pick a style (e.g. "Midnight Blue") to guide the visual direction of the component. If you change your mind, click the small × badge on the corner of the card to clear the selected theme.

5\. In the text box at the bottom ("Describe a component…"), type what you want to build — e.g. "a pricing card with a headline, subheading, and tags."

6\. Click the up-arrow/send button. The plugin will generate a working Framer component (TSX) based on your prompt, theme, and description.

7\. Take an action on the result

• Copy Code — copies the generated component code to your clipboard.

• Add to Canvas — drops the component directly onto your Framer canvas.

• Generate another — discards this result and generates a fresh variation.

8\. Use the "Ask for changes…" input at the bottom of the result screen to request edits in plain language — e.g. "make it red" or "add a hover effect" — and the plugin will update the component accordingly without starting over.

9\. You can find the generated TSX component in Assets → Code.

## Rank history [How rankings work →](/terms#rankings)

-   All · #494

## Details

- **Author**: DevDuo 935
- **Published**: 2026-07-29
- **Updated**: 2026-07-29
- **Added**: 2026-07-29
- **Categories**: AI

## More across types

-   [Chatassist Chatbot](/template/chatassist-chatbot) — Gr8r Studio · Free — ChatAssist is an AI chatbot Framer template for customer service automation platforms, conversational AI products, and support tool SaaS…
-   [Skyroket](/template/skyroket) — Gr8r Studio · Free — SAAS, AI, Startup & Tech Website
-   [Solveo Black](/template/solveo-black) — Damir Cosic · Free — Solveo Black is a free Framer landing page and website template built for SaaS products, AI tools, and product-driven startups that need…

## More like this

-   [LayerRelay — AI Design to Framer](/plugin/layerrelay-ai-design-to-framer) — NOTHING · Free — AI Design to Framer
-   [Live Chat & AI — AskDolphin](/plugin/askdolphin) — AskDolphin · Free — Shopify Sync & QR Code Support
-   [FrameShift](/plugin/frameshift) — Pixels · Free — Export Framer layers as AI prompts
-   [AI Search](/plugin/ai-search) — Samuel Silva · Free — AI Semantic Search