Vibe Coding

Create custom app UI and tools with AI prompts

The Vibe Coding Block lets you go beyond Softr’s standard blocks to build fully custom interfaces — all from a prompt. By isolating AI code generation to individual UI blocks, Vibe Coding acts as the ultimate extension layer and safety net. You get the limitless flexibility of “vibe coding” without the risk of breaking your app’s global security or core infrastructure. Connect it to your live data, add CRUD actions, and create personalized experiences to move beyond generated prototypes into bespoke production apps. Build and iterate confidently with version history built in, and make simple text and image edits directly without re-prompting.

What can you build?

Client dashboards, booking tools, progress trackers, calculators, notification feeds, partner portals, and more. Check out the videos below for examples.

Step-by-step: Using the Vibe Coding Block

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.

2. Connect a data source (optional)

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.

3. Add and configure CRUD and other actions (optional)

You can prompt the AI to add action buttons, such as:

• Create/add records
• Edit/update records
• Delete records
• Ask AI

After generating these functionalities in the UI, you can:

1. Go to the Actions tab in the vibe coding block
2. 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.

4. Control visibility and access

Use the Visibility tab to control which user groups can see the block. You can also set conditional filters in the Source tab.

Managing version history

Each time you re-prompt the block, Softr saves a new version. This lets you experiment without losing earlier work.

Using Undo

For quick corrections, you can use the Undo button located directly in the AI chat on the last message. Clicking Undo instantly reverts the block to its immediate previous state.

Reverting and duplicating versions

To view or revert to any previous version:

1. Open the Content tab
2. Use the version dropdown at the top of the tab
3. Select a previous version and click Restore to revert (or Duplicate as new to duplicate the block)

Editing text in the vibe-coded block

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.

Editing the generated code

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.

Copying the block to another project

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.

Pricing and AI credits

The Vibe Coding Block uses AI credits. A certain number of monthly credits is available on each plan (including Free). Learn more about AI credits here.