The Vibe Coding Block lets you go beyond Softr’s standard blocks to build fully custom interfaces — all from a prompt. It’s the most flexible way to customize your Softr app beyond what standard blocks offer. Connect it to your live data, add CRUD actions, and create personalized experiences. Build and iterate confidently with version history built in, and make simple text and image edits directly without re-prompting.
Client dashboards, booking tools, progress trackers, calculators, notification feeds, partner portals, and more. Check out the videos below for examples.
1. Add the Vibe Coding Block and enter your prompt
Open your Softr app, click Add block, then select AI → Vibe Coding Block.In the chat, describe what you want to build in plain English. The Vibe Coding Block supports both static and data-connected blocks. For example:
A static layout like a page header, pricing table, or content section
A dynamic, data-connected block like a dashboard, booking tool, or admin view that pulls from live data
You can also attach an image to your prompt (click the image icon in the bottom left of the chat box), which is useful for sharing a design reference or screenshot of what you’re going for.Once you submit your prompt, Softr’s AI generates the interface inside the block. To connect a live data source, see Step 2.
If you want your block to dynamically display live data, go to the Source tab and connect a data source (Database + Table). You can also add conditional filters here.The Vibe Coding Block supports Softr Databases and 15+ external data sources, including Airtable, Google Sheets, Notion, HubSpot, SQL, and more.
You can prompt the AI to add action buttons, such as:
Create/add records
Edit/update records
Delete records
After generating these actions in the UI, you can:
Go to the Actions tab in the vibe coding block
Review each action and configure permissions, conditions, or connected workflows as needed
For example, you could prompt: “Add a button that lets users submit a new booking request” — the AI will generate the UI and create a corresponding action you can configure in the Actions tab.
From the Content tab, go to Settings to edit text fields directly — for example, hero text, testimonials, or images. This option appears when the AI has generated editable text fields in your block.
If you want to make manual changes beyond what the AI generates, you can edit the underlying code yourself. Go to the Content tab → Code to see the full generated code. Make your changes and click Save to apply them.You can use the AI chat for bigger structural changes and drop into the code for fine-tuned adjustments — both approaches work together.
To reuse a vibe-coded block in a different Softr project, hover over the block until the action icons appear on the right side. Click the Copy to icon and select the destination project. This is useful for replicating tools or UI patterns across client portals or apps.
The Vibe Coding Block is currently in beta and free to use. Once the beta period ends, the block will use AI credits. A certain number of monthly credits is available on each plan (including Free). Learn more about AI credits here.
