Vibe coding blocks
Create and edit custom code blocks in your Softr app through an AI assistant.
Vibe coding blocks are custom React components you add to a page when the built-in blocks don’t do what you need. These tools let an assistant write and maintain them from outside Softr Studio — so you can ask for a block in the same conversation where you explored the data it should show.
The framework reference is in the Vibe Coding Developer Guide. The assistant reads the current version of it with vibe_coding_block_get_docs before writing code.
Good to know
A broken block can’t be saved. Code is checked before it is stored, so if something is wrong the block keeps working as it did and nothing is lost.
A version is a snapshot of the whole block. One is saved each time the code changes, capturing the block as it stands at that moment — its code, but also its settings, visibility, and connected data sources. Changing only a setting doesn’t create a version of its own.
Creating and reading blocks
| Tool | What it does |
|---|---|
vibe_coding_block_get_docs | Fetches the current vibe coding framework documentation |
vibe_coding_block_create | Creates a block on an existing page |
vibe_coding_block_get_code | Gets a block’s source code and its current settings |
vibe_coding_block_get_settings | Gets a block’s settings, actions, and data sources without the code |
Deleting a block
| Tool | What it does |
|---|---|
vibe_coding_block_delete | Removes a vibe coding block from its page |
Only vibe coding blocks can be deleted this way. Every other block — headers, lists, forms, navigation — is removed in the builder; the assistant will tell you so rather than finding a way around it.
Deleting takes the block’s data source connections with it, so there is nothing to disconnect first. The workspace integration stays connected, and no other block on the page is touched.
The block disappears from the builder straight away, but the live app keeps showing it until the app is published.
Editing code
| Tool | What it does |
|---|---|
vibe_coding_block_update_code | Replaces a block’s source code |
vibe_coding_block_update_code_search_replace | Makes a targeted edit to part of the code |
Settings and visibility
| Tool | What it does |
|---|---|
vibe_coding_block_update_settings | Changes the block’s editable settings |
vibe_coding_block_set_visibility | Controls who can see the block and which devices it renders on |
vibe_coding_block_set_action_visibility | Controls which user groups can run the block’s actions |
Editable settings are the fields you would fill in on the block’s panel in the builder — a title, a label, a threshold. Changing one doesn’t touch the code.
Version history
| Tool | What it does |
|---|---|
vibe_coding_block_list_versions | Lists a block’s versions, newest first |
vibe_coding_block_restore_version | Rolls a block back to an earlier version |
vibe_coding_block_duplicate_from_version | Creates a new block on the same page from one of an existing block’s versions, leaving the original alone |
Duplicating from a version is the safe way to try an alternative: you keep the working block and get a second one to experiment on.
Connecting data
A block that shows data needs a data source connected to it. The source is an integration belonging to the workspace, so this starts by browsing the workspace’s integrations to find the table you want.
| Tool | What it does |
|---|---|
vibe_coding_block_connect_data_source | Connects a table or sheet to the block, making it available to the code |
vibe_coding_block_disconnect_data_source | Removes a connection |
vibe_coding_block_set_data_source_sort | Sets the default sort order for a connected source |
vibe_coding_block_set_data_source_record_filters | Sets which records are visible through a connected source |
Sort order and record filters are the same settings as the Source tab in the builder.