[Tracker]
Update Summary: [One-line status update for stakeholders]
Short Description: Find a frontend library to setup structured content
Check-in Date: MM/DD/YYYY
Metadata is used by the AI Tracker. Docs and additional fields here.
[/Tracker]

Problem/Motivation

Currently we have an input in specific places like ECA, AI Agents or AI API Explorer where you can provide a structured content as a big json or yaml blob in a textarea.

Since there are very specific rules about how we can add these, and since its currently based on the documented way of doing it here: https://project.pages.drupalcode.org/ai/1.2.x/developers/testing_an_ai_p...

We can not be the only one solving this - there might be an actual frontend library for creating these, where you create the object step by step or at least in some easier way then writing JSON/YAML.

If not the OpenAI way, then standard JSON:schema way.

Proposed resolution

Take time to research possible solutions for this.

CommentFileSizeAuthor
#11 Screenshot from 2026-02-16 14-51-48.png18.54 KBmarcus_johansson
#11 Screenshot from 2026-02-16 14-51-36.png18.41 KBmarcus_johansson

Issue fork ai-3561969

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

marcus_johansson created an issue. See original summary.

marcus_johansson’s picture

marcus_johansson commented
Issue summary: View changes
marcus_johansson’s picture

marcus_johansson commented
Status: Active » Postponed
marcus_johansson’s picture

marcus_johansson commented
Issue tags: +AI Initiative Sprint
marcus_johansson’s picture

marcus_johansson commented
Issue summary: View changes
Status: Postponed » Active
marcus_johansson’s picture

marcus_johansson commented
Assigned: Unassigned » marcus_johansson
arianraeesi’s picture

arianraeesi commented
Issue tags: +AI Product Development
marcus_johansson’s picture

marcus_johansson commented
Assigned: marcus_johansson » Unassigned

Started on this but got prioccupied. Seems like the simplest to maintain is a json textarea with a AI helper on top - there are no graphical elements right now.

And get #3561971: Create validator for structured content in.

marcus_johansson’s picture

marcus_johansson commented
Version: 2.0.x-dev » 1.3.x-dev
Assigned: Unassigned » marcus_johansson

marcus_johansson opened merge request !1204

marcus_johansson’s picture

marcus_johansson commented
Status: Active » Needs review
StatusFileSize
new Screenshot from 2026-02-16 14-51-36.png18.41 KB
new Screenshot from 2026-02-16 14-51-48.png18.54 KB

Ok, so I have added a version using codemirror, since we have that as foundation for code blocks in mxeditor as well.

What is important with this library is:

  • It can validate the json via frontend, so you see when something is wrong and when it works.
  • It has graceful fallback - if the js is not built or if js is turned off, normal textarea is used instead.

What I have done is:

  • Create a build script for this.
  • Create so that there is fallback for textarea when js is missing.
  • Create a form element for this.
  • Make sure that form element works with ids for coupling to textarea.
  • Added it to the release script, so the rather larger dist file doesn't get written.
  • Fixed so it works in a child position
  • Added simple kernel test to check its existance
  • Added documentation - also moved around in the documentation.
  • Added so you can test it in /admin/config/ai/test-form-elements if you enable the test provider.

You can test it by:

  1. After fetching this, run cd ui/json-schema-editor && npm install && npm run build
  2. Set $settings['extension_discovery_scan_tests'] = TRUE; in sites/default/settings.php
  3. Enable the AI Test module
  4. Visit /admin/config/ai/test-form-elements
  5. Try submit it to check that your changed values are there
  6. Try turning off javascript and see that it has graceful fallback

or for a simpler test:

  1. Enable AI API Explorer
  2. Go to /admin/config/ai/explorers/chat_generator and open advanced/structure output and see that its a normal textarea
  3. Run cd ui/json-schema-editor && npm install && npm run build
  4. Its now a (json) schema textarea

Recommended follow up issues:

  • Move mdxeditor into ui, so all ui that should be built is there.
  • Create a dev build script, so you can have all the npm builds in one go.

Notes:
The writing of the documentation was completely AI Generated and skimmed through.
The writing of the test was AI Generated and verified by humans.
The writing of the code was AI autocompleted, but written by a human.
The modifying of the bash script and the changes to the form elements in the test module was completely human written.

marcus_johansson’s picture

marcus_johansson commented
Assigned: marcus_johansson » Unassigned

a.dmitriiev made their first commit to this issue’s fork.

a.dmitriiev’s picture

a.dmitriiev commented
Status: Needs review » Reviewed & tested by the community

The editor works as expected. I followed the instructions from the last comment and in both places the editor appears in the form.

a.dmitriiev’s picture

a.dmitriiev commented

Updated js_build job to build JSON Schema Editor, so it is available in the tests.

a.dmitriiev’s picture

a.dmitriiev commented
Status: Reviewed & tested by the community » Fixed

Merged, cherry-pick to 2.0.x is in progress

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • a.dmitriiev committed ef70da42 on 2.0.x 
    Resolve #3561969 "Research structured contentjsonschema"
arianraeesi’s picture

arianraeesi commented
Issue tags: -AI Product Development

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.