diff --git a/packages/elements/src/chain-of-thought/ChainOfThought.vue b/packages/elements/src/chain-of-thought/ChainOfThought.vue
index 2386370..ac12b63 100644
--- a/packages/elements/src/chain-of-thought/ChainOfThought.vue
+++ b/packages/elements/src/chain-of-thought/ChainOfThought.vue
@@ -2,8 +2,7 @@
 import type { HTMLAttributes, Ref } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { useVModel } from '@vueuse/core'
-import { provide } from 'vue'
-import { ChainOfThoughtContextKey } from './context'
+import { provideChainOfThought } from './context'
 
 interface ChainOfThoughtProps {
   modelValue?: boolean
@@ -28,7 +27,12 @@ const isOpen = useVModel(props, 'modelValue', emit, {
   passive: true,
 })
 
-provide(ChainOfThoughtContextKey, isOpen as Ref<boolean>)
+provideChainOfThought({
+  isOpen: isOpen as Ref<boolean>,
+  setIsOpen: (open: boolean) => {
+    isOpen.value = open
+  },
+})
 </script>
 
 <template>
diff --git a/packages/elements/src/chain-of-thought/ChainOfThoughtImage.vue b/packages/elements/src/chain-of-thought/ChainOfThoughtImage.vue
index 7d0a8f0..ccb2f4a 100644
--- a/packages/elements/src/chain-of-thought/ChainOfThoughtImage.vue
+++ b/packages/elements/src/chain-of-thought/ChainOfThoughtImage.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
     v-bind="$attrs"
   >
     <div
-      class="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3"
+      class="relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3"
     >
       <slot />
     </div>
diff --git a/packages/elements/src/chain-of-thought/context.ts b/packages/elements/src/chain-of-thought/context.ts
index 130d1c6..9a63548 100644
--- a/packages/elements/src/chain-of-thought/context.ts
+++ b/packages/elements/src/chain-of-thought/context.ts
@@ -1,22 +1,9 @@
-import type { InjectionKey, Ref } from 'vue'
-import { inject } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
-export const ChainOfThoughtContextKey: InjectionKey<Ref<boolean>> = Symbol(
-  'ChainOfThoughtContext',
-)
-
-export function useChainOfThought() {
-  const isOpen = inject(ChainOfThoughtContextKey)
-
-  if (!isOpen) {
-    throw new Error(
-      'useChainOfThought must be used within a <ChainOfThought> component',
-    )
-  }
-
-  const setIsOpen = (open: boolean) => {
-    isOpen.value = open
-  }
-
-  return { isOpen, setIsOpen }
+export interface ChainOfThoughtContextValue {
+  isOpen: Ref<boolean>
+  setIsOpen: (open: boolean) => void
 }
+
+export const [useChainOfThought, provideChainOfThought] = createContext<ChainOfThoughtContextValue>('ChainOfThought')
diff --git a/packages/elements/src/code-block/CodeBlock.vue b/packages/elements/src/code-block/CodeBlock.vue
index 534139d..71aa421 100644
--- a/packages/elements/src/code-block/CodeBlock.vue
+++ b/packages/elements/src/code-block/CodeBlock.vue
@@ -3,8 +3,8 @@ import type { BundledLanguage } from 'shiki'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { reactiveOmit, useDebounceFn } from '@vueuse/core'
-import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
-import { CodeBlockKey } from './context'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { provideCodeBlock } from './context'
 import { highlightCode } from './utils'
 
 const props = withDefaults(
@@ -24,10 +24,6 @@ const delegatedProps = reactiveOmit(props, 'code', 'language', 'showLineNumbers'
 const html = ref('')
 const darkHtml = ref('')
 
-provide(CodeBlockKey, {
-  code: computed(() => props.code),
-})
-
 let requestId = 0
 let isUnmounted = false
 
@@ -48,6 +44,10 @@ const updateHighlight = useDebounceFn(async (code: string, language: BundledLang
   }
 }, 100)
 
+provideCodeBlock({
+  code: computed(() => props.code),
+})
+
 watch(
   () => [props.code, props.language, props.showLineNumbers] as const,
   ([code, language, showLineNumbers]) => {
diff --git a/packages/elements/src/code-block/CodeBlockCopyButton.vue b/packages/elements/src/code-block/CodeBlockCopyButton.vue
index 0f68727..23f56dd 100644
--- a/packages/elements/src/code-block/CodeBlockCopyButton.vue
+++ b/packages/elements/src/code-block/CodeBlockCopyButton.vue
@@ -4,8 +4,8 @@ import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { reactiveOmit } from '@vueuse/core'
 import { CheckIcon, CopyIcon } from 'lucide-vue-next'
-import { computed, inject, onBeforeUnmount, ref } from 'vue'
-import { CodeBlockKey } from './context'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useCodeBlock } from './context'
 
 const props = withDefaults(
   defineProps<{
@@ -24,12 +24,7 @@ const emit = defineEmits<{
 
 const delegatedProps = reactiveOmit(props, 'timeout', 'class')
 
-const context = inject(CodeBlockKey)
-
-if (!context)
-  throw new Error('CodeBlockCopyButton must be used within a <CodeBlock />')
-
-const { code } = context
+const { code } = useCodeBlock()
 
 const isCopied = ref(false)
 let resetTimer: ReturnType<typeof setTimeout> | undefined
diff --git a/packages/elements/src/code-block/context.ts b/packages/elements/src/code-block/context.ts
index b9865ae..73405bf 100644
--- a/packages/elements/src/code-block/context.ts
+++ b/packages/elements/src/code-block/context.ts
@@ -1,7 +1,8 @@
-import type { ComputedRef, InjectionKey } from 'vue'
+import type { ComputedRef } from 'vue'
+import { createContext } from 'reka-ui'
 
-export interface CodeBlockContext {
+export interface CodeBlockContextValue {
   code: ComputedRef<string>
 }
 
-export const CodeBlockKey: InjectionKey<CodeBlockContext> = Symbol('CodeBlock')
+export const [useCodeBlock, provideCodeBlock] = createContext<CodeBlockContextValue>('CodeBlock')
diff --git a/packages/elements/src/confirmation/Confirmation.vue b/packages/elements/src/confirmation/Confirmation.vue
index 812ceeb..aef2d70 100644
--- a/packages/elements/src/confirmation/Confirmation.vue
+++ b/packages/elements/src/confirmation/Confirmation.vue
@@ -4,8 +4,8 @@ import type { HTMLAttributes } from 'vue'
 import type { ToolUIPartApproval } from './context'
 import { Alert } from '@repo/shadcn-vue/components/ui/alert'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { provide, toRef } from 'vue'
-import { ConfirmationKey } from './context'
+import { toRef } from 'vue'
+import { provideConfirmation } from './context'
 
 const props = defineProps<{
   approval?: ToolUIPartApproval
@@ -13,7 +13,7 @@ const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
-provide(ConfirmationKey, {
+provideConfirmation({
   approval: toRef(props, 'approval'),
   state: toRef(props, 'state'),
 })
diff --git a/packages/elements/src/confirmation/ConfirmationAccepted.vue b/packages/elements/src/confirmation/ConfirmationAccepted.vue
index 108bc4e..e5153cd 100644
--- a/packages/elements/src/confirmation/ConfirmationAccepted.vue
+++ b/packages/elements/src/confirmation/ConfirmationAccepted.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useConfirmationContext } from './context'
+import { useConfirmation } from './context'
 
-const { approval, state } = useConfirmationContext()
+const { approval, state } = useConfirmation()
 </script>
 
 <template>
diff --git a/packages/elements/src/confirmation/ConfirmationActions.vue b/packages/elements/src/confirmation/ConfirmationActions.vue
index ef19085..d3e9a7a 100644
--- a/packages/elements/src/confirmation/ConfirmationActions.vue
+++ b/packages/elements/src/confirmation/ConfirmationActions.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { useConfirmationContext } from './context'
+import { useConfirmation } from './context'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
-const { state } = useConfirmationContext()
+const { state } = useConfirmation()
 </script>
 
 <template>
diff --git a/packages/elements/src/confirmation/ConfirmationRejected.vue b/packages/elements/src/confirmation/ConfirmationRejected.vue
index 57b4683..e4489ef 100644
--- a/packages/elements/src/confirmation/ConfirmationRejected.vue
+++ b/packages/elements/src/confirmation/ConfirmationRejected.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useConfirmationContext } from './context'
+import { useConfirmation } from './context'
 
-const { approval, state } = useConfirmationContext()
+const { approval, state } = useConfirmation()
 </script>
 
 <template>
diff --git a/packages/elements/src/confirmation/ConfirmationRequest.vue b/packages/elements/src/confirmation/ConfirmationRequest.vue
index 757951c..00a27cd 100644
--- a/packages/elements/src/confirmation/ConfirmationRequest.vue
+++ b/packages/elements/src/confirmation/ConfirmationRequest.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useConfirmationContext } from './context'
+import { useConfirmation } from './context'
 
-const { state } = useConfirmationContext()
+const { state } = useConfirmation()
 </script>
 
 <template>
diff --git a/packages/elements/src/confirmation/context.ts b/packages/elements/src/confirmation/context.ts
index 0bb55d5..7511d8c 100644
--- a/packages/elements/src/confirmation/context.ts
+++ b/packages/elements/src/confirmation/context.ts
@@ -1,6 +1,6 @@
 import type { ToolUIPart } from 'ai'
-import type { InjectionKey, Ref } from 'vue'
-import { inject } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
 export type ToolUIPartApproval
   = | {
@@ -35,12 +35,4 @@ export interface ConfirmationContextValue {
   state: Ref<ToolUIPart['state']>
 }
 
-export const ConfirmationKey: InjectionKey<ConfirmationContextValue>
-  = Symbol('ConfirmationContext')
-
-export function useConfirmationContext() {
-  const context = inject<ConfirmationContextValue | null>(ConfirmationKey, null)
-  if (!context)
-    throw new Error('Confirmation components must be used within <Confirmation>')
-  return context
-}
+export const [useConfirmation, provideConfirmation] = createContext<ConfirmationContextValue>('Confirmation')
diff --git a/packages/elements/src/context/Context.vue b/packages/elements/src/context/Context.vue
index 93b84f6..b01305b 100644
--- a/packages/elements/src/context/Context.vue
+++ b/packages/elements/src/context/Context.vue
@@ -2,8 +2,8 @@
 import type { LanguageModelUsage } from 'ai'
 import type { ModelId } from './context'
 import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
-import { computed, provide } from 'vue'
-import { ContextKey } from './context'
+import { computed } from 'vue'
+import { provideContext } from './context'
 
 interface Props {
   usedTokens: number
@@ -14,7 +14,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-provide(ContextKey, {
+provideContext({
   usedTokens: computed(() => props.usedTokens),
   maxTokens: computed(() => props.maxTokens),
   usage: computed(() => props.usage),
diff --git a/packages/elements/src/context/context.ts b/packages/elements/src/context/context.ts
index 8491a0c..b86376e 100644
--- a/packages/elements/src/context/context.ts
+++ b/packages/elements/src/context/context.ts
@@ -1,6 +1,6 @@
 import type { LanguageModelUsage } from 'ai'
-import type { ComputedRef, InjectionKey } from 'vue'
-import { inject } from 'vue'
+import type { ComputedRef } from 'vue'
+import { createContext } from 'reka-ui'
 
 export type ModelId = string
 
@@ -11,13 +11,4 @@ export interface ContextContextValue {
   modelId: ComputedRef<ModelId | undefined>
 }
 
-export const ContextKey: InjectionKey<ContextContextValue>
-  = Symbol('ContextContext')
-
-export function useContextValue(): ContextContextValue {
-  const context = inject<ContextContextValue>(ContextKey)
-  if (!context) {
-    throw new Error('Context components must be used within Context')
-  }
-  return context
-}
+export const [useContextValue, provideContext] = createContext<ContextContextValue>('Context')
diff --git a/packages/elements/src/message/MessageBranch.vue b/packages/elements/src/message/MessageBranch.vue
index bf00694..bc7605e 100644
--- a/packages/elements/src/message/MessageBranch.vue
+++ b/packages/elements/src/message/MessageBranch.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes, VNode } from 'vue'
-import type { MessageBranchContextType } from './context'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { provide, readonly, ref } from 'vue'
-import { MessageBranchKey } from './context'
+import { readonly, ref } from 'vue'
+import { provideMessageBranch } from './context'
 
 interface Props {
   defaultBranch?: number
@@ -44,16 +43,14 @@ function setBranches(count: number) {
   totalBranches.value = count
 }
 
-const contextValue: MessageBranchContextType = {
+provideMessageBranch({
   currentBranch: readonly(currentBranch),
   totalBranches: readonly(totalBranches),
   goToPrevious,
   goToNext,
   branches,
   setBranches,
-}
-
-provide(MessageBranchKey, contextValue)
+})
 </script>
 
 <template>
diff --git a/packages/elements/src/message/MessageBranchContent.vue b/packages/elements/src/message/MessageBranchContent.vue
index 4120969..b1a1931 100644
--- a/packages/elements/src/message/MessageBranchContent.vue
+++ b/packages/elements/src/message/MessageBranchContent.vue
@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, Fragment, isVNode, onMounted, useSlots, watch } from 'vue'
-import { useMessageBranchContext } from './context'
+import { useMessageBranch } from './context'
 
 interface Props {
   class?: HTMLAttributes['class']
@@ -11,7 +11,7 @@ interface Props {
 const props = defineProps<Props>()
 const slots = useSlots()
 
-const { currentBranch, setBranches } = useMessageBranchContext()
+const { currentBranch, setBranches } = useMessageBranch()
 
 const branchVNodes = computed(() => {
   const nodes = slots.default?.() ?? []
diff --git a/packages/elements/src/message/MessageBranchNext.vue b/packages/elements/src/message/MessageBranchNext.vue
index ecb3e8a..cee97e6 100644
--- a/packages/elements/src/message/MessageBranchNext.vue
+++ b/packages/elements/src/message/MessageBranchNext.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { ChevronRightIcon } from 'lucide-vue-next'
-import { useMessageBranchContext } from './context'
+import { useMessageBranch } from './context'
 
-const { goToNext, totalBranches } = useMessageBranchContext()
+const { goToNext, totalBranches } = useMessageBranch()
 </script>
 
 <template>
diff --git a/packages/elements/src/message/MessageBranchPage.vue b/packages/elements/src/message/MessageBranchPage.vue
index dbc3cf9..49472bf 100644
--- a/packages/elements/src/message/MessageBranchPage.vue
+++ b/packages/elements/src/message/MessageBranchPage.vue
@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from 'vue'
 import { ButtonGroupText } from '@repo/shadcn-vue/components/ui/button-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { useMessageBranchContext } from './context'
+import { useMessageBranch } from './context'
 
 interface Props {
   class?: HTMLAttributes['class']
@@ -10,7 +10,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { currentBranch, totalBranches } = useMessageBranchContext()
+const { currentBranch, totalBranches } = useMessageBranch()
 </script>
 
 <template>
diff --git a/packages/elements/src/message/MessageBranchPrevious.vue b/packages/elements/src/message/MessageBranchPrevious.vue
index 6160c8e..f13adca 100644
--- a/packages/elements/src/message/MessageBranchPrevious.vue
+++ b/packages/elements/src/message/MessageBranchPrevious.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { ChevronLeftIcon } from 'lucide-vue-next'
-import { useMessageBranchContext } from './context'
+import { useMessageBranch } from './context'
 
-const { goToPrevious, totalBranches } = useMessageBranchContext()
+const { goToPrevious, totalBranches } = useMessageBranch()
 </script>
 
 <template>
diff --git a/packages/elements/src/message/MessageBranchSelector.vue b/packages/elements/src/message/MessageBranchSelector.vue
index 2fb6df2..313cdb5 100644
--- a/packages/elements/src/message/MessageBranchSelector.vue
+++ b/packages/elements/src/message/MessageBranchSelector.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { UIMessage } from 'ai'
 import { ButtonGroup } from '@repo/shadcn-vue/components/ui/button-group'
-import { useMessageBranchContext } from './context'
+import { useMessageBranch } from './context'
 
 interface Props {
   from: UIMessage['role']
 }
 defineProps<Props>()
 
-const { totalBranches } = useMessageBranchContext()
+const { totalBranches } = useMessageBranch()
 </script>
 
 <template>
diff --git a/packages/elements/src/message/context.ts b/packages/elements/src/message/context.ts
index 1890c9c..448a3b1 100644
--- a/packages/elements/src/message/context.ts
+++ b/packages/elements/src/message/context.ts
@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref, VNode } from 'vue'
-import { inject } from 'vue'
+import type { Ref, VNode } from 'vue'
+import { createContext } from 'reka-ui'
 
 export interface MessageBranchContextType<T = VNode[]> {
   currentBranch: Readonly<Ref<number>>
@@ -10,13 +10,4 @@ export interface MessageBranchContextType<T = VNode[]> {
   setBranches: (count: number) => void
 }
 
-export const MessageBranchKey: InjectionKey<MessageBranchContextType>
-  = Symbol('MessageBranch')
-
-export function useMessageBranchContext(): MessageBranchContextType {
-  const ctx = inject(MessageBranchKey)
-  if (!ctx) {
-    throw new Error('Message Branch components must be used within Message Branch')
-  }
-  return ctx
-}
+export const [useMessageBranch, provideMessageBranch] = createContext<MessageBranchContextType>('MessageBranch')
diff --git a/packages/elements/src/open-in-chat/context.ts b/packages/elements/src/open-in-chat/context.ts
index 234ef19..0eca878 100644
--- a/packages/elements/src/open-in-chat/context.ts
+++ b/packages/elements/src/open-in-chat/context.ts
@@ -1,20 +1,7 @@
-import type { InjectionKey } from 'vue'
-import { inject, provide } from 'vue'
+import { createContext } from 'reka-ui'
 
-export interface OpenInContext {
+export interface OpenInContextContextValue {
   query: string
 }
 
-export const OpenInContextKey: InjectionKey<OpenInContext> = Symbol('OpenInContext')
-
-export function provideOpenInContext(context: OpenInContext) {
-  provide(OpenInContextKey, context)
-}
-
-export function useOpenInContext() {
-  const context = inject(OpenInContextKey)
-  if (!context) {
-    throw new Error('OpenIn components must be used within an OpenIn provider')
-  }
-  return context
-}
+export const [useOpenInContext, provideOpenInContext] = createContext<OpenInContextContextValue>('OpenIn')
diff --git a/packages/elements/src/plan/context.ts b/packages/elements/src/plan/context.ts
index f276035..dd22bc1 100644
--- a/packages/elements/src/plan/context.ts
+++ b/packages/elements/src/plan/context.ts
@@ -1,20 +1,8 @@
-import type { ComputedRef, InjectionKey } from 'vue'
-import { inject, provide } from 'vue'
+import type { ComputedRef } from 'vue'
+import { createContext } from 'reka-ui'
 
 export interface PlanContextValue {
   isStreaming: ComputedRef<boolean>
 }
 
-export const PlanKey: InjectionKey<PlanContextValue> = Symbol('PlanContext')
-
-export function providePlan(value: PlanContextValue) {
-  provide(PlanKey, value)
-}
-
-export function usePlan() {
-  const context = inject(PlanKey)
-  if (!context) {
-    throw new Error('Plan components must be used within a Plan component')
-  }
-  return context
-}
+export const [usePlan, providePlan] = createContext<PlanContextValue>('Plan')
diff --git a/packages/elements/src/prompt-input/PromptInput.vue b/packages/elements/src/prompt-input/PromptInput.vue
index a63c55e..b6d0ba0 100644
--- a/packages/elements/src/prompt-input/PromptInput.vue
+++ b/packages/elements/src/prompt-input/PromptInput.vue
@@ -3,9 +3,8 @@ import type { HTMLAttributes } from 'vue'
 import type { PromptInputMessage } from './types'
 import { InputGroup } from '@repo/shadcn-vue/components/ui/input-group'
 import { cn } from '@repo/shadcn-vue/lib/utils'
-import { inject, onMounted, onUnmounted, ref } from 'vue'
-import { usePromptInputProvider } from './context'
-import { PROMPT_INPUT_KEY } from './types'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { usePromptInputLocal } from './context'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
@@ -24,26 +23,14 @@ const emit = defineEmits<{
 
 const formRef = ref<HTMLFormElement | null>(null)
 
-// --- Dual-mode context handling ---
-const inheritedContext = inject(PROMPT_INPUT_KEY, null)
-const localContext = inheritedContext
-  ? null
-  : usePromptInputProvider({
-      initialInput: props.initialInput,
-      maxFiles: props.maxFiles,
-      maxFileSize: props.maxFileSize,
-      accept: props.accept,
-      onSubmit: msg => emit('submit', msg as any),
-      onError: err => emit('error', err),
-    })
-
-const context = inheritedContext || localContext
-
-if (!context) {
-  throw new Error('PromptInput context is missing.')
-}
-
-const { fileInputRef, addFiles, submitForm } = context
+const { fileInputRef, addFiles, submitForm } = usePromptInputLocal({
+  initialInput: props.initialInput,
+  maxFiles: props.maxFiles,
+  maxFileSize: props.maxFileSize,
+  accept: props.accept,
+  onSubmit: msg => emit('submit', msg as PromptInputMessage),
+  onError: err => emit('error', err),
+})
 
 function handleDragOver(e: DragEvent) {
   if (e.dataTransfer?.types?.includes('Files')) {
diff --git a/packages/elements/src/prompt-input/PromptInputProvider.vue b/packages/elements/src/prompt-input/PromptInputProvider.vue
index 7edbe36..e9e4499 100644
--- a/packages/elements/src/prompt-input/PromptInputProvider.vue
+++ b/packages/elements/src/prompt-input/PromptInputProvider.vue
@@ -19,7 +19,7 @@ usePromptInputProvider({
   maxFiles: props.maxFiles,
   maxFileSize: props.maxFileSize,
   accept: props.accept,
-  onSubmit: msg => emit('submit', msg),
+  onSubmit: msg => emit('submit', msg as PromptInputMessage),
   onError: err => emit('error', err),
 })
 </script>
diff --git a/packages/elements/src/prompt-input/context.ts b/packages/elements/src/prompt-input/context.ts
index 9b4917a..b052cf2 100644
--- a/packages/elements/src/prompt-input/context.ts
+++ b/packages/elements/src/prompt-input/context.ts
@@ -1,16 +1,60 @@
 import type { AttachmentFile, PromptInputContext } from './types'
 import { nanoid } from 'nanoid'
-import { inject, onBeforeUnmount, provide, ref } from 'vue'
-import { PROMPT_INPUT_KEY } from './types'
+import { createContext } from 'reka-ui'
+import { onBeforeUnmount, ref } from 'vue'
 
-export function usePromptInputProvider(props: {
+const [injectProviderContext, provideProviderContext] = createContext<PromptInputContext | null>('PromptInputProvider')
+
+const [injectLocalContext, provideLocalContext] = createContext<PromptInputContext | null>('PromptInput')
+
+export function usePromptInput(): PromptInputContext {
+  const providerContext = injectProviderContext()
+  const localContext = injectLocalContext()
+
+  const context = providerContext ?? localContext
+
+  if (!context) {
+    throw new Error('usePromptInput must be used within a PromptInputProvider or PromptInput')
+  }
+
+  return context
+}
+
+export interface PromptInputProviderProps {
   initialInput?: string
   maxFiles?: number
   maxFileSize?: number
   accept?: string
   onSubmit?: (message: { text: string, files: any[] }) => void | Promise<void>
   onError?: (err: { code: string, message: string }) => void
-}) {
+}
+
+export function usePromptInputProvider(props: PromptInputProviderProps): PromptInputContext {
+  const context = createPromptInputContext(props)
+  provideProviderContext(context)
+  return context
+}
+
+export function usePromptInputLocal(props: PromptInputProviderProps): PromptInputContext {
+  const providerContext = injectProviderContext()
+
+  if (providerContext) {
+    return providerContext
+  }
+
+  const localContext = createPromptInputContext(props)
+  provideLocalContext(localContext)
+  return localContext
+}
+
+function createPromptInputContext(props: {
+  initialInput?: string
+  maxFiles?: number
+  maxFileSize?: number
+  accept?: string
+  onSubmit?: (message: { text: string, files: any[] }) => void | Promise<void>
+  onError?: (err: { code: string, message: string }) => void
+}): PromptInputContext {
   const textInput = ref(props.initialInput || '')
   const files = ref<AttachmentFile[]>([])
   const fileInputRef = ref<HTMLInputElement | null>(null)
@@ -164,7 +208,7 @@ export function usePromptInputProvider(props: {
     }
   }
 
-  const context: PromptInputContext = {
+  return {
     textInput,
     files,
     fileInputRef,
@@ -177,15 +221,4 @@ export function usePromptInputProvider(props: {
     openFileDialog,
     submitForm,
   }
-
-  provide(PROMPT_INPUT_KEY, context)
-  return context
-}
-
-export function usePromptInput() {
-  const context = inject<PromptInputContext>(PROMPT_INPUT_KEY)
-  if (!context) {
-    throw new Error('usePromptInput must be used within a PromptInput component')
-  }
-  return context
 }
diff --git a/packages/elements/src/prompt-input/types.ts b/packages/elements/src/prompt-input/types.ts
index 54b29a6..8999ee7 100644
--- a/packages/elements/src/prompt-input/types.ts
+++ b/packages/elements/src/prompt-input/types.ts
@@ -24,5 +24,3 @@ export interface PromptInputContext {
   openFileDialog: () => void
   submitForm: () => void
 }
-
-export const PROMPT_INPUT_KEY = Symbol('PromptInputContext')
diff --git a/packages/elements/src/reasoning/Reasoning.vue b/packages/elements/src/reasoning/Reasoning.vue
index 48e4f2b..c7ddeb1 100644
--- a/packages/elements/src/reasoning/Reasoning.vue
+++ b/packages/elements/src/reasoning/Reasoning.vue
@@ -3,8 +3,8 @@ import type { HTMLAttributes } from 'vue'
 import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { useVModel } from '@vueuse/core'
-import { computed, provide, ref, watch } from 'vue'
-import { ReasoningKey } from './context'
+import { computed, ref, watch } from 'vue'
+import { provideReasoning } from './context'
 
 interface Props {
   class?: HTMLAttributes['class']
@@ -76,7 +76,7 @@ watch([() => props.isStreaming, isOpen, () => props.defaultOpen, hasAutoClosed],
   }
 }, { immediate: true })
 
-provide(ReasoningKey, {
+provideReasoning({
   isStreaming: computed(() => props.isStreaming),
   isOpen,
   setIsOpen: (val: boolean) => { isOpen.value = val },
diff --git a/packages/elements/src/reasoning/ReasoningTrigger.vue b/packages/elements/src/reasoning/ReasoningTrigger.vue
index 0b14517..73178a6 100644
--- a/packages/elements/src/reasoning/ReasoningTrigger.vue
+++ b/packages/elements/src/reasoning/ReasoningTrigger.vue
@@ -5,7 +5,7 @@ import { cn } from '@repo/shadcn-vue/lib/utils'
 import { BrainIcon, ChevronDownIcon } from 'lucide-vue-next'
 import { computed } from 'vue'
 import { Shimmer } from '../shimmer'
-import { useReasoningContext } from './context'
+import { useReasoning } from './context'
 
 interface Props {
   class?: HTMLAttributes['class']
@@ -13,7 +13,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { isStreaming, isOpen, duration } = useReasoningContext()
+const { isStreaming, isOpen, duration } = useReasoning()
 
 const thinkingMessage = computed(() => {
   if (isStreaming.value || duration.value === 0) {
diff --git a/packages/elements/src/reasoning/context.ts b/packages/elements/src/reasoning/context.ts
index 619d86e..f236d40 100644
--- a/packages/elements/src/reasoning/context.ts
+++ b/packages/elements/src/reasoning/context.ts
@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref } from 'vue'
-import { inject } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
 export interface ReasoningContextValue {
   isStreaming: Ref<boolean>
@@ -8,12 +8,4 @@ export interface ReasoningContextValue {
   duration: Ref<number | undefined>
 }
 
-export const ReasoningKey: InjectionKey<ReasoningContextValue>
-  = Symbol('ReasoningContext')
-
-export function useReasoningContext() {
-  const ctx = inject<ReasoningContextValue>(ReasoningKey)
-  if (!ctx)
-    throw new Error('Reasoning components must be used within <Reasoning>')
-  return ctx
-}
+export const [useReasoning, provideReasoning] = createContext<ReasoningContextValue>('Reasoning')
diff --git a/packages/elements/src/web-preview/WebPreview.vue b/packages/elements/src/web-preview/WebPreview.vue
index d39bd78..700d77b 100644
--- a/packages/elements/src/web-preview/WebPreview.vue
+++ b/packages/elements/src/web-preview/WebPreview.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, ref } from 'vue'
 import {
-  provideWebPreviewContext,
+  provideWebPreview,
 } from './context'
 
 interface Props extends /* @vue-ignore */ HTMLAttributes {
@@ -37,7 +37,7 @@ function setConsoleOpen(value: boolean) {
   emit('consoleOpenChange', value)
 }
 
-provideWebPreviewContext({
+provideWebPreview({
   url,
   setUrl,
   consoleOpen,
diff --git a/packages/elements/src/web-preview/WebPreviewBody.vue b/packages/elements/src/web-preview/WebPreviewBody.vue
index ff729ba..c5f56d0 100644
--- a/packages/elements/src/web-preview/WebPreviewBody.vue
+++ b/packages/elements/src/web-preview/WebPreviewBody.vue
@@ -2,7 +2,7 @@
 import type { IframeHTMLAttributes, VNodeChild } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed } from 'vue'
-import { useWebPreviewContext } from './context'
+import { useWebPreview } from './context'
 
 interface Props extends /* @vue-ignore */ IframeHTMLAttributes {
   class?: IframeHTMLAttributes['class']
@@ -15,7 +15,7 @@ defineSlots<{
   loading: () => VNodeChild
 }>()
 
-const { url } = useWebPreviewContext()
+const { url } = useWebPreview()
 
 const frameSrc = computed(() => (props.src ?? url.value) || undefined)
 </script>
diff --git a/packages/elements/src/web-preview/WebPreviewConsole.vue b/packages/elements/src/web-preview/WebPreviewConsole.vue
index 50dc9ae..9270f44 100644
--- a/packages/elements/src/web-preview/WebPreviewConsole.vue
+++ b/packages/elements/src/web-preview/WebPreviewConsole.vue
@@ -9,7 +9,7 @@ import {
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { ChevronDownIcon } from 'lucide-vue-next'
 import { computed } from 'vue'
-import { useWebPreviewContext } from './context'
+import { useWebPreview } from './context'
 
 type LogLevel = 'log' | 'warn' | 'error'
 
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {
   logs: () => [],
 })
 
-const context = useWebPreviewContext()
+const context = useWebPreview()
 
 const isConsoleOpen = computed(() => context.consoleOpen.value)
 
diff --git a/packages/elements/src/web-preview/WebPreviewUrl.vue b/packages/elements/src/web-preview/WebPreviewUrl.vue
index d059559..11abfa0 100644
--- a/packages/elements/src/web-preview/WebPreviewUrl.vue
+++ b/packages/elements/src/web-preview/WebPreviewUrl.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { Input } from '@repo/shadcn-vue/components/ui/input'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { ref, watch } from 'vue'
-import { useWebPreviewContext } from './context'
+import { useWebPreview } from './context'
 
 interface Props {
   class?: HTMLAttributes['class']
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholder: 'Enter URL...',
 })
 
-const context = useWebPreviewContext()
+const context = useWebPreview()
 
 const inputValue = ref(context.url.value)
 
diff --git a/packages/elements/src/web-preview/context.ts b/packages/elements/src/web-preview/context.ts
index 4976fdd..12a6b9c 100644
--- a/packages/elements/src/web-preview/context.ts
+++ b/packages/elements/src/web-preview/context.ts
@@ -1,5 +1,5 @@
-import type { InjectionKey, Ref } from 'vue'
-import { inject, provide } from 'vue'
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
 
 export interface WebPreviewContextValue {
   url: Ref<string>
@@ -8,18 +8,4 @@ export interface WebPreviewContextValue {
   setConsoleOpen: (open: boolean) => void
 }
 
-const WebPreviewContextKey: InjectionKey<WebPreviewContextValue> = Symbol('WebPreviewContext')
-
-export function provideWebPreviewContext(value: WebPreviewContextValue) {
-  provide(WebPreviewContextKey, value)
-}
-
-export function useWebPreviewContext() {
-  const context = inject(WebPreviewContextKey, null)
-
-  if (!context) {
-    throw new Error('WebPreview components must be used within WebPreview')
-  }
-
-  return context
-}
+export const [useWebPreview, provideWebPreview] = createContext<WebPreviewContextValue>('WebPreview')