API Error 500 on JSX Generated by AI

[srsgores]

Prompt:

Create a team member directory. The structure should be accessible, using an article in the main section (requires aria-labelledby corresponding to heading) and an ol ordered list. Within each team member "card" (each should be an article), each team member should have a role and team name, using a description list (dl). The image of each team member, should be a figure with a figcaption, only visible to screen readers.

Expected: generated markup

Actual: 500 error from JSX:

Error: Failed to parse the completion error="JSX to Webstudio Embed Template produced an empty result" completionText="

<ws:root className="flex flex-col items-center justify-center bg-white text-black p-[50px]">
  <Heading id="team-directory" className="text-4xl font-bold mb-[30px]">Our Amazing Team</Heading>
  <ws:element className="w-full">
    <ws:collection className="flex flex-wrap justify-center">
      <ws:descendant className="flex flex-col items-center m-[20px] p-[20px] bg-gray-100 rounded-lg shadow-lg">
        <Article aria-labelledby="team-member-name" className="flex flex-col items-center">
          <Image src="" alt="Team member image" width="200" height="200" className="rounded-full mb-[20px]" />
          <Heading id="team-member-name" className="text-2xl font-bold mb-[10px]">Alex Johnson</Heading>
          <dl className="text-lg mb-[10px]">
            <dt className="font-bold">Role:</dt>
            <dd>Software Engineer</dd>
            <dt className="font-bold">Team:</dt>
            <dd>Development</dd>
          </dl>
          <figcaption className="sr-only">Image of Alex Johnson</figcaption>
        </Article>
      </ws:descendant>
      <ws:descendant className="flex flex-col items-center m-[20px] p-[20px] bg-gray-100 rounded-lg shadow-lg">
        <Article aria-labelledby="team-member-name" className="flex flex-col items-center">
          <Image src="" alt="Team member image" width="200" height="200" className="rounded-full mb-[20px]" />
          <Heading id="team-member-name" className="text-2xl font-bold mb-[10px]">Emily Smith</Heading>
          <dl className="text-lg mb-[10px]">
            <dt className="font-bold">Role:</dt>
            <dd>Product Designer</dd>
            <dt className="font-bold">Team:</dt>
            <dd>Design</dd>
          </dl>
          <figcaption className="sr-only">Image of Emily Smith</figcaption>
        </Article>
      </ws:descendant>
      <!-- Add more team members as needed -->
    </ws:collection>
  </ws:element>
</ws:root>
```"

[TrySound]

Current AI solution is very alpha. We are building a better alternative called Inception.