image: Experimental_GeneratedImage requires uint8Array, but Image renders from base64 alone

Open Beginner friendly
#458 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start by locating the ImageProps definition and the Image element that consumes Experimental_GeneratedImage. Confirm that rendering reads only base64 and mediaType, then adjust the public prop type so uint8Array remains accepted but is optional. Verify that callers with only base64 and mediaType typecheck while existing callers with uint8Array remain valid.

Written by the indexing model from the issue text.

Description

Summary

ImageProps extends Experimental_GeneratedImage, which makes uint8Array required:

export type ImageProps = Experimental_GeneratedImage & {
  className?: string;
  alt?: string;
};

But the element only ever reads base64 and mediaType. Callers that have those two — an image-generation tool result, a stored image record, anything reconstructed from JSON — are forced to fabricate a uint8Array they don't need and the component never touches.

Suggestion

Make it optional while keeping it accepted:

export type ImageProps = Omit<Experimental_GeneratedImage, "uint8Array"> & {
  uint8Array?: Experimental_GeneratedImage["uint8Array"];
  className?: string;
  alt?: string;
};

Backwards compatible — existing callers passing the full object still typecheck.

Context

Raising as an issue rather than a PR since it changes a public prop type and you may prefer a different shape. Happy to send the patch if the direction is right. We currently carry this as a downstream override and would rather not.

Dominant language
TypeScript
Stars
2.4k
Forks
283
Avg merge
32m
Merged PRs (30d)
1

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vercel/ai-elements

All issues in vercel/ai-elements

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.