feat: add image component

Author: cwandev

README.md

@@ -89,7 +89,7 @@ AI Elements Vue includes the following components:
 | `actions` | ✅ 已完成 | Interactive action buttons for AI responses |
 | `branch` | ✅ 已完成 | Branch visualization for conversation flows |
 | `code-block` | ✅ 已完成 | Syntax-highlighted code display with copy functionality |
-| `image` | ❌ 未完成 | AI-generated image display component |
+| `image` | ✅ 已完成 | AI-generated image display component |
 | `inline-citation` | ❌ 未完成 | Inline source citations |
 | `loader` | ❌ 未完成 | Loading states for AI operations |
 | `reasoning` | ❌ 未完成 | Display AI reasoning and thought processes |

apps/test/app/examples/image.vue

@@ -0,0 +1,10 @@
+export { default as ActionsHover } from './actions-hover.vue'
+export { default as Actions } from './actions.vue'
+export { default as Branch } from './branch.vue'
+export { default as CodeBlock } from './code-block.vue'
+export { default as Conversation } from './conversation.vue'
+export { default as Image } from './image.vue'
+export { default as MessageMarkdown } from './message-markdown.vue'
+export { default as Message } from './message.vue'
+export { default as PromptInput } from './prompt-input.vue'
+export { default as Response } from './response.vue'

apps/test/app/examples/index.ts

@@ -5,6 +5,7 @@ import Actions from '~/examples/actions.vue'
 import Branch from '~/examples/branch.vue'
 import CodeBlock from '~/examples/code-block.vue'
 import Conversation from '~/examples/conversation.vue'
+import Image from '~/examples/image.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
 import PromptInput from '~/examples/prompt-input.vue'
@@ -20,6 +21,7 @@ const components = [
   { name: 'Response', Component: Response },
   { name: 'MessageMarkdown', Component: MessageMarkdown },
   { name: 'CodeBlock', Component: CodeBlock },
+  { name: 'Image', Component: Image },
 ]
 </script>
 

apps/test/app/pages/index.vue

@@ -30,4 +30,7 @@ You can install it with:
 :::ComponentLoader{label="Branch" componentName="Branch"}
 :::
 
+:::ComponentLoader{label="Image" componentName="Image"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.

apps/www/content/1.overview/1.Introduction.md

@@ -0,0 +1,117 @@
+---
+title: Image
+description:
+icon: lucide:image
+---
+
+The `Image` component displays AI-generated images from the AI SDK. It accepts a [`Experimental_GeneratedImage`](https://ai-sdk.dev/docs/reference/ai-sdk-core/generate-image#generateimage) object from the AI SDK's `generateImage` function and automatically renders it as an image.
+
+:::ComponentLoader{label="Image" componentName="Image"}
+:::
+
+## Install using CLI
+
+:::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add image
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/image.json
+  ```
+  ::
+:::
+
+## Install Manually
+
+Copy and paste the following files into the same folder.
+
+:::code-group
+  ```vue [Image.vue]
+  <script setup lang="ts">
+  import type { Experimental_GeneratedImage } from 'ai'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  interface Props extends Experimental_GeneratedImage {
+    class?: string
+    alt?: string
+  }
+
+  const props = defineProps<Props>()
+  const attrs = useAttrs()
+
+  const classes = computed(() => cn(
+    'h-auto max-w-full overflow-hidden rounded-md',
+    props.class,
+  ))
+
+  const src = computed(() => `data:${props.mediaType};base64,${props.base64}`)
+  </script>
+
+  <template>
+    <img
+      :alt="props.alt"
+      :class="classes"
+      :src="src"
+      v-bind="attrs"
+    >
+  </template>
+  ```
+
+  ```ts [index.ts]
+  export { default as Image } from './Image.vue'
+  ```
+:::
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Image } from '@/components/ai-elements/image'
+
+const exampleImage = {
+  base64: 'valid-base64-string',
+  mediaType: 'image/jpeg',
+  uint8Array: new Uint8Array([]),
+}
+</script>
+
+<template>
+  <Image
+    v-bind="exampleImage"
+    alt="Example generated image"
+    class="h-[150px] aspect-square border"
+  />
+</template>
+```
+
+## Features
+
+- Accepts `Experimental_GeneratedImage` objects directly from the AI SDK
+- Automatically creates proper data URLs from base64-encoded image data
+- Supports all standard HTML image attributes
+- Responsive by default with `max-w-full h-auto` styling
+- Customizable with additional CSS classes
+- Includes proper TypeScript types for AI SDK compatibility
+
+## Props
+
+### `<Image />`
+
+:::field-group
+  ::field{name="alt" type="string" optional}
+  Alternative text for the image.
+  ::
+
+  ::field{name="class" type="string" optional}
+  Additional CSS classes applied to the `<img>` element.
+  ::
+
+  ::field{name="[...props]" type="Experimental_GeneratedImage" optional}
+  The image data to display, as returned by the AI SDK.
+  ::
+:::

apps/www/content/2.components/8.image.md

@@ -3,6 +3,7 @@ import {
   ActionsHover,
   Branch,
   Conversation,
+  Image,
   Message,
   MessageMarkdown,
   PromptInput,
@@ -26,4 +27,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('PromptInput', PromptInput)
   vueApp.component('Conversation', Conversation)
   vueApp.component('Response', Response)
+  vueApp.component('Image', Image)
 })

apps/www/plugins/ai-elements.ts

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { Experimental_GeneratedImage } from 'ai'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+interface Props extends Experimental_GeneratedImage {
+  class?: string
+  alt?: string
+}
+
+const props = defineProps<Props>()
+const attrs = useAttrs()
+
+const classes = computed(() => cn(
+  'h-auto max-w-full overflow-hidden rounded-md',
+  props.class,
+))
+
+const src = computed(() => `data:${props.mediaType};base64,${props.base64}`)
+</script>
+
+<template>
+  <img
+    :alt="props.alt"
+    :class="classes"
+    :src="src"
+    v-bind="attrs"
+  >
+</template>

packages/elements/src/image/Image.vue

@@ -0,0 +1 @@
+export { default as Image } from './Image.vue'

packages/elements/src/image/index.ts

@@ -2,6 +2,7 @@ export * from './actions'
 export * from './branch'
 export * from './code-block'
 export * from './conversation'
+export * from './image'
 export * from './message'
 export * from './prompt-input'
 export * from './response'