## Summary
This improves how agents discover, author, inspect, and verify Webstudio
projects while reducing unnecessary MCP context usage.
## What changed
- Adds an **Agents** section to Project Settings with ready-to-run setup
commands and client configuration for Claude Code, Codex, Cursor, and VS
Code.
- Makes large list and schema responses compact and paginated by
default, with **verbose** available when complete records or diagnostics
are needed.
- Applies consistent compact output to assets, instances, styles, design
tokens, CLI schemas, and project-session metadata.
- Returns actionable expression warnings for props, resources, and
Collection bindings, including unknown variables and risky render-time
mutation resources.
- Improves Collection expression guidance so agents can bind array items
with the correct scoped variables.
- Reports rendered audit outcomes explicitly as complete, partial,
confirmation-required, or failed.
- Expands runtime output schemas so MCP clients can validate responses
reliably.
- Strengthens the packaged CLI smoke workflow with a realistic
seven-page stdio MCP scenario.
## Architecture
- Consolidates `project-build` from 65 file-oriented entrypoints to 11
architecture-owned surfaces.
- Separates the core model, contracts, runtime authoring, transfer,
state, project sessions, MCP, visual tooling, persistence codecs, and
authenticated server services.
- Isolates Node-only JSX evaluation from browser-safe transfer utilities
and authenticated server modules.
- Keeps persistence codecs independent from authenticated database
services, preventing unrelated module initialization.
- Defines shared instance-path types once and reuses them across runtime
modules.
- Preserves Immer initialization through explicit package side-effect
metadata.
- Adds package tests that prevent a return to source-file entrypoints or
generic exposure of Node-only surfaces.
## Validation
- Full repository checks, tests, typechecks, generated-file checks, and
fixtures
- All 163 Builder test files and 2,141 tests
- All 71 project-build test files and 1,794 tests
- Lint and package-boundary validation
- Full packed CLI release smoke test, including install, preview, agent
setup, seven-page stdio MCP workflow, rendered audit, and structured
commands
This PR expands Webstudio MCP and CLI into a more complete agent
authoring interface. Agents can discover project capabilities, edit real
Webstudio content, use data/resources, verify visual output, and report
useful issues when workflows fail.
## MCP User Capabilities
- Create, update, duplicate, reorder, and delete pages.
- Create pages from templates and manage reusable page templates.
- Inspect project pages, instances, props, styles, assets, variables,
resources, and metadata.
- Insert Webstudio components and authored JSX fragments into pages.
- Edit text, props, styles, breakpoints, design tokens, and CSS
variables.
- Update page metadata, SEO fields, redirects, marketplace metadata, and
project settings.
- Create and use static data variables.
- Create and use dynamic resources fetched over HTTP.
- Use REST, GraphQL, and built-in system resources in authored pages.
- Bind data variables and resources to visible page content.
- Create resource-backed pages such as sitemap XML, structured SEO data,
and API-driven content sections.
- Preview current project state without requiring a publish step.
- Capture screenshots for visual verification.
- Verify responsive designs across desktop, tablet, and mobile
breakpoints.
- Use screenshot diff and OCR-style checks to inspect rendered output.
- Reset and refresh local MCP project state when needed.
- Discover available CLI/MCP commands from generated manuals.
- Use clearer examples for resources, data variables, JSX authoring,
previewing, and visual checks.
- Read marketplace product metadata without requiring a full project
snapshot.
- Get safer guidance when using low-level patch tools.
- Get a ready-to-copy Discord report template when MCP/CLI behavior is
confusing or broken.
Closes https://github.com/webstudio-is/webstudio/issues/4586
Closes https://github.com/webstudio-is/webstudio/issues/4619
## Summary
Fixes shared Slot editing so linked Slot occurrences stay consistent
across structural edits and labels.
## Changes
- Fixed moving a direct Slot child out of a Slot so the child is removed
from all linked Slot occurrences.
- Fixed unwrapping a direct Slot child so the child is removed from all
linked Slot occurrences.
- Added linked Slot label sync when renaming from Navigator or Settings
panel.
- Added/updated tests for canonical Slots, legacy Slots, nested Slot
children, keyboard moves, unwrap, reparent, and label sync.
- Simplified stale Slot detach logic that was incorrectly cloning only
the selected Slot occurrence.
## Testing
- `pnpm --filter @webstudio-is/builder test --
app/shared/instance-utils/...`
- `pnpm --filter @webstudio-is/builder test --
app/builder/shared/commands.test.ts`
- `pnpm --filter @webstudio-is/builder typecheck`
- `pnpm lint`
- `git diff --check`
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Show a warning banner when a redirect path matches the current page
path, indicating the redirect will override access to the page.
Changes:
- Add PanelBanner component with warning variant to page settings
- Implement findMatchingRedirect utility to detect redirect conflicts
- Show contextual warning with link to Redirects settings section
- Add comprehensive tests for redirect conflict detection
Code quality:
- Replace 'return undefined' with 'return' per style guide
- Use 'return null' for React components returning nothing
## Description
Now user can pass to collection an array like this (this worked before):
[{a: 1}] and also object like this {key: {a: 1}}.
What this means is that now you can just iterate over objects returned
from some api, you don't need arrays-only any more.
As an item, the value of each object key will be provied.
## Description
When user is using asset resource and binding it on canvas, for example
video file bound to video tag to the src attribute and then deletes the
asset, it is expected that canvas reflects the deleted asset as well as
the variable.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Ref https://github.com/webstudio-is/webstudio/issues/3632
This is big one. So I switched to html elements whole forms section in
components. Though here I introduced some deviation from specification
**Textarea**
Initial value is represented as text content
```html
<textarea>content</textarea>
````
Though it is trickier to manage text content as state and all frameworks
rely on value property of textarea dom interface.
**Select**
Similar story. There is no value attribute and state is represented by
selected boolean attribute on options
```html
<select>
<option value="value1" selected></option>
<option value="value2"></option>
</select>
```
We replace selected attribute on option with value attribute on selected
when paste.
So basically all form elements are using "value" and "checked"
attributes which can be easily mapped to html and all frameworks.
Proper fix for https://github.com/webstudio-is/webstudio/pull/5211
Now props meta are available in component generator and can be used to
figure if prop is defined by component or comes from html attributes.
Added same logic in canvas and component generator.
Also got rid from no longer necessary registeredComponentPropsMetas
store since all props are described by component meta.
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here enabled converting class -> className for all components with tags.
Now it does not affect anything though later will unlock using html
attributes instead of component props.
Also got rid from huge map with react properties and replaced it with a
set of proper aliases.
Ref https://github.com/webstudio-is/webstudio/issues/3632
Here I finally got rid from "rich-text-child" necessity. With html
elements in the tree it will no longer work so we need a new way to work
with rich text.
Added a few new utilities to content model which detect rich text by
text inside or any textual tags. Span and links can still be detected as
containers rather than children when not surrounded by text and other
textual elements.
- removed non-unit values from browser styles
- merged browser styles and unit sizes into single store; both objects
used in cize conversion
- use typed cssom to parse units instead of custom parser (sorry
firefox)
Regenerated keyword values data with hyphenated properties. Since the
new object is strictly typed we can use it directly without
styleConfigByName utility which I removed.
properties data are now more type safe and can accept any CssProperty
name though in case of custom properties (--string) will return
undefined.
This also removes a lot of `keyof typeof properties` castings.
User reported in discord.
Radix components like accordion does not open first item by default when
use with content block. The reason was in our default detection.
We used indexes within ancestor and when put item inside of content
block template it gets 0 but not rendered.
Here improved the logic to reset index when render inside of block
template.
<img width="837" alt="Screenshot 2025-03-01 at 21 14 09"
src="https://github.com/user-attachments/assets/788df39a-b7c5-466b-a80e-09cc40de9e3f"
/>
Closes https://github.com/webstudio-is/webstudio/issues/4897
Added "placeholder" field to component meta to signal the instance
accepts should not be insertion target. This reverts us to previous
behavior even with empty instances.
Also slightly refactored placeholder rendering to use attr() instead of
extra css variable.
## Description
closes#4879
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Every time somebody is facing invalid constraint issue whole tree is
blocked from deleting instances except the problematic one with actual
issue.
Here rewrote detachability check to validate only ancestors and avoid
traversing potentially problematic siblings.
## Description
ref #4595
### TODO:
- [x] - Found bug that deleting last LI does not delete UL
- [x] - Consider removing default texts for paragraph link blockquote
and headings i.e. `Heading text you can edit`
https://p-cfc5b051-3b7a-4a59-a994-44d8d2f8b836-dot-styles.development.webstudio.is/
The following components are considered non-collapsible in **Edit** and
**Content** modes:
*Paragraph*, *Heading*, *ListItem*, *Blockquote*, *Link*.
We are adding placeholders for these components when they are empty,
using the following logic (partially inspired by Notion):
1. **If a component is empty and not being edited**, we display the same
label as shown in the components tree.
2. **If a component is empty and being edited**, the behavior depends on
its location:
- **Inside a content block:**
- For *Paragraph*, we display: `Write something or press '/' for
commands...`.
- For all other components, we display the label.
- **Outside a content block:**
- Always display the label.
<img width="435" alt="image"
src="https://github.com/user-attachments/assets/96e0c79c-92dc-40c3-a768-db8322a38c3b"
/>
### Update: Default Content Block Component Changed
The default content block component has been updated. Add the new
component
### PS
On Publish and Preview previous behaviour.
## Steps for reproduction
1. click button
4. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
ref #3994
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
ref #3994
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
We need to remove reliance on instance selector iteration as much as
possible. In most cases we need only instance key which is a
JSON.stringify or instance selector to access computed props and
variables.
Here got rid of instance selector in component hooks and instead made
api to accept "instance data" with instance id, key and component
inside.
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
ref #3994
Outline for content mode Editable Childs
https://p-64ece825-f290-4de0-8dac-223c8e88c258-dot-editable-block.development.webstudio.is/?mode=content
Like in notion if eny keyboard event is occured inside outlined block,
we hide it
Also + hovers are only on canvas
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---------
Co-authored-by: Oleg Isonen <oleg008@gmail.com>
Ref https://github.com/webstudio-is/webstudio/issues/4364
We need to implement universal linking of current user view. For this I
added "awareness" state which reflects terminology from collaboration
libraries.
First migrated selected page id and fixed usages.
## Description
- Double click now sets cursor to the click position
- Up/Down arrows on a first/last line trying to preserve cursor x
position (visible in case of block above block)
- Right/Left arrows switch blocks if cursor is at block begin/end.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
rename of #3609
## New
- Native Select
## Changes
- Improved detection algorithm to include invisible elements (like
`option` or `display:none`).
- Added interceptor to handle pointer down events, preventing select
from opening.
- Enhanced element selection on canvas to support `display:none` and
option selection.
- Fixed prop types generation (previously, the value property was
broken).
- Memory props has effect on canvas only
- Recreate component on Canvas in case of defaultValue has changed
## Steps for reproduction
Add `Select` see it works
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
AI sometimes adds components we don't have
here is just a hint for user that some component is missing.
<img width="686" alt="Screenshot 2024-05-19 at 14 25 16"
src="https://github.com/webstudio-is/webstudio/assets/5635476/7ca3faee-7703-4d02-9786-5f5f0a6193d0">
Here's json to paste
```json
{
"@webstudio/template": [
{
"type": "instance",
"component": "ContentEmbed",
"children": []
}
]
}
```
Most rules protect from legacy and class component apis.
Many rules are checked by typescript.
A few rules just do not bring much value.
The package brings too many dependencies.
Ref https://github.com/webstudio-is/webstudio/issues/2903
Here added support for new `<ws:descendent />` component. It allows to
style any children or descendents of components. Primary usage is for
embed content which renders html and need to style tags.
Descendent component accepts "selector" prop which can be suffix like `
img`, ` .image` or `::first-child` pseudo-element.
Potentially it could be used as tag styling for any element.
Can be tested in any element by dropping "Descendent" component from
"internal" category.
Here refactored canvas styles with nesting rules which allow to update
each declaration incrementally and closer to our data format.
Things to test
- initial rendering
- updating values
- ephemeral values
- selecting state, rendered as separate stylesheet
Added shim.ts to contain simplified polyfills for future methods like
Set.prototype.difference which I use here to find added and deleted
styles.
Removed warning from parseCssValue which pollutes log with outdated
messages.
Additionally fixed old bugs
- support ephemeral styles with selector state, for example hover was
not updated on on canvas while updating ephemeral styles
- remove ephemeral custom property from body (bug appeared when added
support ephemeral styles in tokens)
Fixes https://github.com/webstudio-is/webstudio/issues/3127
Here fixed the issue with deleting remix link while editing rich text
with lexical. Some quirky remix logic broke react rendering. Fixed by
rendering plain link while in builder.
Oleg Isonen