Skip to content

Implement tabbed form generator and interactive key-value editors#1791

Merged
fderuiter merged 1 commit into
mainfrom
jules/feat/tabbed-form-kv-editor-js1-cd491aa1-bf77-4e6d-9aa3-b5fd4b5bbec5
Jul 23, 2026
Merged

Implement tabbed form generator and interactive key-value editors#1791
fderuiter merged 1 commit into
mainfrom
jules/feat/tabbed-form-kv-editor-js1-cd491aa1-bf77-4e6d-9aa3-b5fd4b5bbec5

Conversation

@google-labs-jules

Copy link
Copy Markdown
Contributor

Description

This PR addresses usability and validation challenges in the current form generator by introducing declarative tabbed layouts and visual, interactive editors.

Previously, configuring complex fields—such as tools and output schemas—forced users to write raw JSON schemas or scroll through a cluttered, single-page vertical form. This led to frequent validation errors and manual UI bypasses.

By transitioning to structured editors and a dynamic layout engine, we eliminate raw JSON editing, restrict user inputs to valid configurations, and organize settings into logical visual tabs.


Why these changes were made

  • Reduced Cognitive Load: Instead of overloading users with a single long-form layout, fields are now grouped into clean Streamlit tabs/collapsible expanders.
  • Error Prevention: Manual JSON configuration for complex objects like MCP tools and Output Schemas is highly error-prone. By using visual key-value/type editors, inputs are structured at the source, preventing schema validation failures.
  • Improved Context & Debugging: While editing visually, read-only live JSON previews allow advanced users to inspect the generated schema dynamically without needing to write it themselves.
  • Dynamic Error Mapping: When Pydantic validation fails upon saving, error messages are matched directly to their corresponding tabs. This guides the user directly to the input causing the issue, rather than leaving them searching across sections.

What was accomplished

1. Dynamic Layouts & Tabbed Sections

  • Helper Optimization: Enhanced render_schema_form in studio/helpers.py to accept a layout_config dictionary and a layout_type parameter.
  • Component Restructuring: Updated the Prompt Editor and Workflow Editor pages to structure forms dynamically into tabs or collapsible sections, ensuring smoother visual navigation.

2. MCP-Compliant Tools Editor

  • Added a dedicated visual tool form mapping directly to the Model Context Protocol (MCP) specification.
  • Users can now add, edit, or remove tools visually—including customizing names, descriptions, input parameters, and requirements.
  • Embedded a read-only live preview of the final tools schema.

3. Output Schema Key-Value Editor

  • Built an interactive key-value and type compiler within the Prompt Editor's Output Schema tab.
  • The editor compiles the defined properties down to a standardized type: object JSON Schema, with a read-only live output preview block.

4. Workflow Test Data Editor

  • Created an interactive test case editor in the Workflow Editor under a new "Test Data" tab, facilitating global test variable configuration.

5. State Reconciliation & Dynamic Validation

  • Implemented automatic state reconciliation, ensuring values from the new visual editors map cleanly back into the target PromptSchema and WorkflowSchema models.
  • Configured dynamic error mapping that associates Pydantic validation errors back to the specific tab containing the faulty inputs.

6. Testing & Coverage

  • Verified that all baseline test suites pass successfully.
  • Added new test coverage in tests/test_studio.py targeting MCP tools compilation, output schema generation, and workflow test cases to prevent future regressions.

@google-labs-jules
google-labs-jules Bot requested a review from fderuiter as a code owner July 23, 2026 14:41
@fderuiter
fderuiter merged commit 7a1f832 into main Jul 23, 2026
1 check failed
@fderuiter
fderuiter deleted the jules/feat/tabbed-form-kv-editor-js1-cd491aa1-bf77-4e6d-9aa3-b5fd4b5bbec5 branch July 23, 2026 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant