diff --git a/docs/content/docs/2.components/chat-messages.md b/docs/content/docs/2.components/chat-messages.md
index d7786337bd..b9c165644a 100644
--- a/docs/content/docs/2.components/chat-messages.md
+++ b/docs/content/docs/2.components/chat-messages.md
@@ -435,6 +435,14 @@ import { isTextUIPart } from 'ai'
 ```
 ::
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `registerMessageRef(id: string, element: ComponentPublicInstance \| null)`{lang="ts-type"} | `void`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index b5c812195c..40b58773e8 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -70,7 +70,7 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
 }
 
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-  default?(props?: {}): VNode[]
+  default?(props: { registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void }): VNode[]
   indicator?(props: { ui: ChatMessages['ui'] }): VNode[]
   viewport?(props: { ui: ChatMessages['ui'], onClick: () => void }): VNode[]
 } & {
@@ -308,6 +308,10 @@ onMounted(() => {
     }, { childList: true, subtree: true })
   }
 })
+
+defineExpose({
+  registerMessageRef
+})
 </script>
 
 <template>
@@ -318,7 +322,7 @@ onMounted(() => {
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
-    <slot>
+    <slot :register-message-ref="registerMessageRef">
       <template v-for="message in props.messages" :key="message.id">
         <UChatMessage
           v-if="message.parts?.length"