@seed-ship/mcp-ui-solid 6.19.0 → 6.20.0

package/src/components/DataPreviewSection.tsx

@@ -5,8 +5,13 @@
  * @experimental
  */
 
-import { createSignal, createMemo, createEffect, For, Show } from 'solid-js'
+import { createSignal, createMemo, createEffect, For, Show, onMount } from 'solid-js'
 import type { DataPreviewContent, DataPreviewColumn } from '../types/chat-bus'
+import {
+  DEFAULT_MCPUI_STRINGS,
+  formatMCPUIString,
+  useMCPUIStrings,
+} from '../context/MCPUIStringsContext'
 
 export interface DataPreviewSectionProps {
   content: DataPreviewContent
@@ -16,24 +21,62 @@ type SortDir = 'asc' | 'desc' | null
 
 // ─── Formatting helpers ─────────────────────────────────────
 
-function formatNumber(value: unknown, format?: string): string {
+/**
+ * `locale` — BCP-47 tag (`MCPUIStrings.locale`, default `'en-US'`). Before
+ * 6.20.0 these helpers hardcoded `'fr-FR'` / `'fr'`.
+ */
+function formatNumber(
+  value: unknown,
+  format?: string,
+  locale: string = DEFAULT_MCPUI_STRINGS.locale
+): string {
   if (typeof value !== 'number' || !isFinite(value)) return String(value ?? '')
-  if (format === 'percent') return `${(value * 100).toFixed(1)}%`
-  if (format === 'currency') return `${value.toLocaleString('fr-FR')} EUR`
-  if (Number.isInteger(value)) return value.toLocaleString('fr-FR')
-  return value.toLocaleString('fr-FR', { maximumFractionDigits: 2 })
+  if (format === 'percent') {
+    return new Intl.NumberFormat(locale, {
+      style: 'percent',
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+      useGrouping: false,
+    }).format(value)
+  }
+  if (format === 'currency') return `${value.toLocaleString(locale)} EUR`
+  if (Number.isInteger(value)) return value.toLocaleString(locale)
+  return value.toLocaleString(locale, { maximumFractionDigits: 2 })
 }
 
-function formatCell(value: unknown, col: DataPreviewColumn): string {
+function formatCell(
+  value: unknown,
+  col: DataPreviewColumn,
+  locale: string = DEFAULT_MCPUI_STRINGS.locale,
+  /** False before mount: date-time values stay raw so SSR and hydration match. */
+  zoneAware = true
+): string {
   if (value == null) return '\u2014'
-  if (col.type === 'number') return formatNumber(value, col.format)
+  if (col.type === 'number') return formatNumber(value, col.format, locale)
   if (col.type === 'date' && typeof value === 'string') {
-    try { return new Date(value).toLocaleDateString('fr-FR') } catch { return value }
+    const date = new Date(value)
+    if (Number.isNaN(date.getTime())) return value
+    // A date-only value (`2026-09-17`) has no time zone: format it in UTC so
+    // every viewer, and the server, shows the same calendar date.
+    const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(value)
+    // A date-time's calendar date depends on the viewer's time zone, which the
+    // server cannot know: keep the raw value until the component has mounted.
+    if (!dateOnly && !zoneAware) return value
+    try {
+      return date.toLocaleDateString(locale, dateOnly ? { timeZone: 'UTC' } : undefined)
+    } catch {
+      return value
+    }
   }
   return String(value)
 }
 
-function compareValues(a: unknown, b: unknown, type?: string): number {
+function compareValues(
+  a: unknown,
+  b: unknown,
+  type?: string,
+  locale: string = DEFAULT_MCPUI_STRINGS.locale
+): number {
   if (a == null && b == null) return 0
   if (a == null) return 1
   if (b == null) return -1
@@ -53,7 +96,7 @@ function compareValues(a: unknown, b: unknown, type?: string): number {
     if (isNaN(db)) return -1
     return da - db
   }
-  return String(a).localeCompare(String(b), 'fr', { sensitivity: 'base' })
+  return String(a).localeCompare(String(b), locale, { sensitivity: 'base' })
 }
 
 // ─── Export helpers ─────────────────────────────────────────
@@ -101,6 +144,7 @@ function resolveContent(raw: unknown): DataPreviewContent | null {
 // ─── Component ──────────────────────────────────────────────
 
 export function DataPreviewSection(props: DataPreviewSectionProps) {
+  const strings = useMCPUIStrings()
   const content = createMemo(() => {
     const resolved = resolveContent(props.content)
     if (!resolved) {
@@ -115,6 +159,8 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
   const showPageInfo = () => content()?.showPageInfo !== false
 
   const [page, setPage] = createSignal(content()?.initialPage ?? 0)
+  const [mounted, setMounted] = createSignal(false)
+  onMount(() => setMounted(true))
   const [sortKey, setSortKey] = createSignal<string | null>(null)
   const [sortDir, setSortDir] = createSignal<SortDir>(null)
 
@@ -142,7 +188,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
     if (!key || !dir) return r
     const col = columns().find(c => c.key === key)
     return [...r].sort((a, b) => {
-      const cmp = compareValues(a[key], b[key], col?.type)
+      const cmp = compareValues(a[key], b[key], col?.type, strings.locale)
       return dir === 'desc' ? -cmp : cmp
     })
   })
@@ -186,7 +232,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
   return (
     <Show when={content()} fallback={
       <div class="text-xs text-amber-600 dark:text-amber-400 p-2">
-        [DataPreviewSection] Invalid content format
+        {strings.previewInvalidContent}
       </div>
     }>
       {(c) => (
@@ -208,14 +254,14 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
                 <button
                   class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                   onClick={handleExportCSV}
-                  title={`Export CSV (${sortedRows().length} rows)`}
+                  title={formatMCPUIString(strings.exportCsvRows, { count: sortedRows().length })}
                 >
                   CSV
                 </button>
                 <button
                   class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                   onClick={handleExportJSON}
-                  title={`Export JSON (${sortedRows().length} rows)`}
+                  title={formatMCPUIString(strings.exportJsonRows, { count: sortedRows().length })}
                 >
                   JSON
                 </button>
@@ -234,7 +280,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
                         class="px-3 py-2 font-medium text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wider border-b border-gray-200 dark:border-gray-700 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"
                         style={{ "text-align": columnAlign(col) }}
                         onClick={() => handleSort(col.key)}
-                        title={`Sort by ${col.label}`}
+                        title={formatMCPUIString(strings.sortBy, { column: col.label })}
                       >
                         <span class="inline-flex items-center gap-1">
                           {col.label}
@@ -266,7 +312,7 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
                             class="px-3 py-2 text-gray-800 dark:text-gray-200"
                             style={{ "text-align": columnAlign(col) }}
                           >
-                            {formatCell(row[col.key], col)}
+                            {formatCell(row[col.key], col, strings.locale, mounted())}
                           </td>
                         )}
                       </For>
@@ -282,13 +328,22 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
             <Show when={showPageInfo()}>
               <span>
                 {isPaginated()
-                  ? `Showing ${rangeStart()}\u2013${rangeEnd()} of ${sortedRows().length.toLocaleString('fr-FR')}`
-                  : `${sortedRows().length} row${sortedRows().length !== 1 ? 's' : ''}`
-                }
+                  ? formatMCPUIString(strings.previewShowingRange, {
+                      start: rangeStart().toLocaleString(strings.locale),
+                      end: rangeEnd().toLocaleString(strings.locale),
+                      // `strings.locale` formats the count, so the chrome
+                      // string and the digits agree (and SSR matches the client).
+                      total: sortedRows().length.toLocaleString(strings.locale),
+                    })
+                  : formatMCPUIString(
+                      sortedRows().length === 1 ? strings.previewRowsOne : strings.previewRowsMany,
+                      { count: sortedRows().length.toLocaleString(strings.locale) }
+                    )}
                 {c().totalRows && c().totalRows! > sortedRows().length
-                  ? ` (${c().totalRows!.toLocaleString('fr-FR')} total)`
-                  : ''
-                }
+                  ? formatMCPUIString(strings.previewTotalSuffix, {
+                      total: c().totalRows!.toLocaleString(strings.locale),
+                    })
+                  : ''}
               </span>
             </Show>
             <Show when={!showPageInfo()}><span /></Show>
@@ -296,19 +351,30 @@ export function DataPreviewSection(props: DataPreviewSectionProps) {
             <Show when={isPaginated()}>
               <div class="flex items-center gap-1">
                 <button
+                  type="button"
                   class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   disabled={page() === 0}
                   onClick={() => setPage(p => p - 1)}
+                  aria-label={strings.paginationPrevious}
+                  data-mcp-ui-action="page-prev"
                 >
-                  &#x25C0; Prev
+                  <span aria-hidden="true">&#x25C0;</span> {strings.previewPrev}
                 </button>
-                <span class="px-2">Page {page() + 1} / {totalPages()}</span>
+                <span class="px-2" aria-live="polite">
+                  {formatMCPUIString(strings.previewPageIndicator, {
+                    page: page() + 1,
+                    total: totalPages(),
+                  })}
+                </span>
                 <button
+                  type="button"
                   class="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   disabled={page() >= totalPages() - 1}
                   onClick={() => setPage(p => p + 1)}
+                  aria-label={strings.paginationNext}
+                  data-mcp-ui-action="page-next"
                 >
-                  Next &#x25B6;
+                  {strings.previewNext} <span aria-hidden="true">&#x25B6;</span>
                 </button>
               </div>
             </Show>

package/src/components/DegradedFallback.tsx

@@ -16,6 +16,7 @@
  */
 
 import { Component, For, Show } from 'solid-js';
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
 
 export interface DegradedFallbackProps {
   /** Short, human-readable reason the native render was skipped/failed. */
@@ -37,6 +38,7 @@ export interface DegradedFallbackProps {
 }
 
 export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
+  const strings = useMCPUIStrings();
   const maxRows = () => props.maxRows ?? 50;
   const allRows = () => props.rows ?? [];
   const shownRows = () => allRows().slice(0, maxRows());
@@ -50,7 +52,7 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
     >
       <p class="text-sm font-medium text-amber-900 dark:text-amber-100">{props.message}</p>
       <p class="mt-0.5 text-xs text-amber-700 dark:text-amber-300">
-        {props.caption ?? 'Showing the underlying data — the interactive view is unavailable.'}
+        {props.caption ?? strings.degradedCaption}
       </p>
 
       <Show when={hasTable()}>
@@ -84,7 +86,7 @@ export const DegradedFallback: Component<DegradedFallbackProps> = (props) => {
         </div>
         <Show when={hiddenCount() > 0}>
           <p class="mt-1 text-[10px] text-amber-600 dark:text-amber-400">
-            +{hiddenCount()} more rows not shown.
+            {formatMCPUIString(strings.degradedMoreRows, { count: hiddenCount() })}
           </p>
         </Show>
       </Show>

package/src/components/FeedbackInline.tsx

@@ -110,7 +110,7 @@ export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
           onClick={() => handle('positive')}
           class="p-1 rounded hover:bg-green-500/10 text-deposium-slate-500 hover:text-green-500 transition-colors"
           title={strings.feedbackUseful}
-          aria-label="Mark response as useful"
+          aria-label={strings.feedbackUseful}
           data-feedback-inline-rating="positive"
         >
           <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -127,7 +127,7 @@ export const FeedbackInline: Component<FeedbackInlineProps> = (props) => {
           onClick={() => handle('negative')}
           class="p-1 rounded hover:bg-red-500/10 text-deposium-slate-500 hover:text-red-500 transition-colors"
           title={strings.feedbackNotUseful}
-          aria-label="Mark response as not useful"
+          aria-label={strings.feedbackNotUseful}
           data-feedback-inline-rating="negative"
         >
           <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/src/components/FooterRenderer.tsx

@@ -1,5 +1,6 @@
 import { Component, Show, For } from 'solid-js'
 import { safeUrl } from '../utils/safe-url'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface FooterComponentParams {
     poweredBy?: string
@@ -11,6 +12,7 @@ export interface FooterComponentParams {
 }
 
 export const FooterRenderer: Component<{ params: FooterComponentParams }> = (props) => {
+    const strings = useMCPUIStrings()
     return (
         <div class="mt-4 pt-3 border-t border-gray-200 dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-4">
             <Show when={props.params.poweredBy}>
@@ -40,7 +42,7 @@ export const FooterRenderer: Component<{ params: FooterComponentParams }> = (pro
                     <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                     </svg>
-                    {props.params.sourceCount} sources
+                    {formatMCPUIString(strings.footerSources, { count: props.params.sourceCount! })}
                 </span>
             </Show>
 

package/src/components/FormFieldRenderer.tsx

@@ -7,6 +7,7 @@
 import { Component, Show, For, Switch, Match, Accessor, createSignal, createEffect, onCleanup } from 'solid-js'
 import type { FormFieldParams, PrefillSource } from '../types'
 import { useConditionalField } from '../hooks/useConditionalField'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface FormFieldRendererProps {
   field: FormFieldParams
@@ -20,15 +21,24 @@ export interface FormFieldRendererProps {
   formData?: Accessor<Record<string, any>>
 }
 
-/** Badge config by prefill source */
-const SOURCE_BADGES: Record<PrefillSource, { icon: string; title: string } | null> = {
-  detected: { icon: '\u2705', title: 'Detected from message' },
-  inferred: { icon: '\uD83D\uDD17', title: 'Inferred from context' },
-  user:     { icon: '\u270F\uFE0F', title: 'Previously provided' },
+/**
+ * Badge config by prefill source. Module-level, so the title cannot be read
+ * from the context here — each badge carries the `MCPUIStrings` key instead
+ * and the rendering component resolves it at render time.
+ */
+const SOURCE_BADGES: Record<
+  PrefillSource,
+  { icon: string; titleKey: 'sourceDetected' | 'sourceInferred' | 'sourcePrevious' } | null
+> = {
+  detected: { icon: '\u2705', titleKey: 'sourceDetected' },
+  inferred: { icon: '\uD83D\uDD17', titleKey: 'sourceInferred' },
+  user:     { icon: '\u270F\uFE0F', titleKey: 'sourcePrevious' },
   default:  null,
 }
 
 export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
+
   // Conditional visibility based on showWhen
   const { isVisible } = useConditionalField({
     condition: props.field.showWhen,
@@ -76,14 +86,14 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
           class={`block text-sm font-medium ${isUnsupported() ? 'text-gray-400 dark:text-gray-500' : isMuted() ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}
         >
           <Show when={sourceBadge()}>
-            <span class="mr-1" title={sourceBadge()!.title}>{sourceBadge()!.icon}</span>
+            <span class="mr-1" title={strings[sourceBadge()!.titleKey]}>{sourceBadge()!.icon}</span>
           </Show>
           {props.field.label}
           <Show when={props.field.required || status() === 'required'}>
             <span class="text-red-500 ml-1" aria-hidden="true">*</span>
           </Show>
           <Show when={isUnsupported()}>
-            <span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported</span>
+            <span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">{strings.fieldNotSupported}</span>
           </Show>
           <Show when={status() === 'unknown'}>
             <span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?</span>
@@ -316,7 +326,7 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
         <Match when={props.field.type === 'fieldset'}>
           <fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3">
             <legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1">{props.field.label}</legend>
-            <p class="text-xs text-gray-400">{props.field.helpText || 'Group container'}</p>
+            <p class="text-xs text-gray-400">{props.field.helpText || strings.fieldGroupContainer}</p>
           </fieldset>
         </Match>
 
@@ -332,7 +342,9 @@ export const FormFieldRenderer: Component<FormFieldRendererProps> = (props) => {
             disabled={props.disabled}
             class={baseInputClass()}
           />
-          <p class="text-xs text-amber-500 mt-0.5">Unknown field type: {props.field.type}</p>
+          <p class="text-xs text-amber-500 mt-0.5">
+            {formatMCPUIString(strings.fieldUnknownType, { type: props.field.type })}
+          </p>
         </Match>
       </Switch>
 
@@ -376,6 +388,7 @@ const MultiSelectField: Component<{
   disabled?: boolean
   baseClass: string
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [open, setOpen] = createSignal(false)
   const [filter, setFilter] = createSignal('')
 
@@ -416,7 +429,7 @@ const MultiSelectField: Component<{
                   type="button"
                   onClick={() => removeChip(val)}
                   class="hover:text-blue-900 dark:hover:text-blue-100"
-                  aria-label={`Remove ${getLabel(val)}`}
+                  aria-label={formatMCPUIString(strings.removeItem, { name: getLabel(val) })}
                 >
                   &times;
                 </button>
@@ -435,8 +448,8 @@ const MultiSelectField: Component<{
       >
         <span class={props.value.length ? 'text-gray-900 dark:text-white' : 'text-gray-400'}>
           {props.value.length
-            ? `${props.value.length} selected`
-            : props.field.placeholder || 'Select...'}
+            ? formatMCPUIString(strings.fieldSelectedCount, { count: props.value.length })
+            : props.field.placeholder || strings.fieldSelectPlaceholder}
         </span>
         <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
@@ -456,7 +469,7 @@ const MultiSelectField: Component<{
                 type="text"
                 value={filter()}
                 onInput={(e) => setFilter(e.currentTarget.value)}
-                placeholder="Filter..."
+                placeholder={strings.filterPlaceholder}
                 class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"
                 autofocus
               />
@@ -478,7 +491,7 @@ const MultiSelectField: Component<{
               )}
             </For>
             <Show when={filteredOptions().length === 0}>
-              <p class="px-3 py-2 text-sm text-gray-400">No matches</p>
+              <p class="px-3 py-2 text-sm text-gray-400">{strings.fieldNoMatches}</p>
             </Show>
           </div>
         </div>
@@ -496,6 +509,7 @@ const AutocompleteField: Component<{
   disabled?: boolean
   baseClass: string
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [query, setQuery] = createSignal('')
   const [suggestions, setSuggestions] = createSignal<Array<{ label: string; value: string }>>([])
   const [isOpen, setIsOpen] = createSignal(false)
@@ -669,7 +683,7 @@ const AutocompleteField: Component<{
       <Show when={resolving()}>
         <div class="flex items-center gap-1 mb-1 text-xs text-gray-400">
           <span class="animate-spin h-3 w-3 border border-gray-400 border-t-transparent rounded-full" />
-          Resolving...
+          {strings.fieldResolving}
         </div>
       </Show>
 
@@ -684,7 +698,7 @@ const AutocompleteField: Component<{
                   type="button"
                   onClick={() => removeChip(val)}
                   class="hover:text-blue-900 dark:hover:text-blue-100"
-                  aria-label={`Remove ${getLabel(val)}`}
+                  aria-label={formatMCPUIString(strings.removeItem, { name: getLabel(val) })}
                 >
                   &times;
                 </button>
@@ -701,7 +715,7 @@ const AutocompleteField: Component<{
         onFocus={() => { if (suggestions().length) setIsOpen(true) }}
         onBlur={handleBlur}
         placeholder={isMultiple() && selectedValues().length
-          ? 'Add more...'
+          ? strings.fieldAddMorePlaceholder
           : props.field.placeholder}
         disabled={props.disabled || resolving()}
         class={props.baseClass}
@@ -746,6 +760,7 @@ const TagsField: Component<{
   disabled?: boolean
   baseClass: string
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [input, setInput] = createSignal('')
 
   const addTag = () => {
@@ -778,7 +793,7 @@ const TagsField: Component<{
             {(tag) => (
               <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full">
                 {tag}
-                <button type="button" onClick={() => removeTag(tag)} class="hover:text-blue-900 dark:hover:text-blue-100" aria-label={`Remove ${tag}`}>&times;</button>
+                <button type="button" onClick={() => removeTag(tag)} class="hover:text-blue-900 dark:hover:text-blue-100" aria-label={formatMCPUIString(strings.removeItem, { name: tag })}>&times;</button>
               </span>
             )}
           </For>
@@ -790,7 +805,7 @@ const TagsField: Component<{
         onInput={(e) => setInput(e.currentTarget.value)}
         onKeyDown={handleKeyDown}
         onBlur={addTag}
-        placeholder={props.placeholder || 'Type and press Enter...'}
+        placeholder={props.placeholder || strings.fieldTagsPlaceholder}
         disabled={props.disabled}
         class={props.baseClass}
       />

package/src/components/FormRenderer.tsx

@@ -13,6 +13,7 @@ import { validateFormData } from '../services/validation'
 import { evaluateCondition } from '../hooks/useConditionalField'
 import { useFormPersistence } from '../hooks/useFormPersistence'
 import { useTelemetry } from '../context/MCPUITelemetryContext'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface FormRendererProps {
   component: UIComponent
@@ -38,6 +39,26 @@ function getFieldDefault(type: FormFieldParams['type']): any {
 }
 
 export const FormRenderer: Component<FormRendererProps> = (props) => {
+  const strings = useMCPUIStrings()
+  /**
+   * The end-user validation wording, read from the chrome strings and
+   * injected into the pure validators (which cannot reach the context).
+   */
+  const validationMessages = () => ({
+    required: strings.fieldRequired,
+    mustBeChecked: strings.fieldMustBeChecked,
+    minLength: strings.fieldMinLength,
+    maxLength: strings.fieldMaxLength,
+    invalidPattern: strings.fieldInvalidPattern,
+    invalidEmail: strings.fieldInvalidEmail,
+    invalidNumber: strings.fieldInvalidNumber,
+    minValue: strings.fieldMinValue,
+    maxValue: strings.fieldMaxValue,
+    minDate: strings.fieldMinDate,
+    maxDate: strings.fieldMaxDate,
+    invalidOption: strings.fieldInvalidOption,
+    invalidFormat: strings.fieldInvalidFormat,
+  })
   const params = () => props.component.params as FormComponentParams
   const [formData, setFormData] = createSignal<Record<string, any>>({})
   const [errors, setErrors] = createSignal<Record<string, string>>({})
@@ -177,7 +198,7 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
     }
 
     // Validate only visible fields
-    const validationResult = validateFormData(visibleFormData, visibleFields)
+    const validationResult = validateFormData(visibleFormData, visibleFields, validationMessages())
     if (!validationResult.valid) {
       setErrors(validationResult.errors)
       setIsSubmitting(false)
@@ -193,13 +214,14 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
           formData: visibleFormData,
         })
         if (!result.success) {
-          setErrors({ _form: result.error || 'Submission failed' })
+          setErrors({ _form: result.error || strings.formSubmissionFailed })
           setIsSubmitting(false)
-          props.onError?.({ _form: result.error || 'Submission failed' })
+          props.onError?.({ _form: result.error || strings.formSubmissionFailed })
           return
         }
       } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Submission failed'
+        const errorMessage =
+          error instanceof Error ? error.message : strings.formSubmissionFailed
         setErrors({ _form: errorMessage })
         setIsSubmitting(false)
         props.onError?.({ _form: errorMessage })
@@ -255,7 +277,10 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
             const total = params().fields.length
             return (
               <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
-                {prefilled} champ{prefilled > 1 ? 's' : ''} pré-rempli{prefilled > 1 ? 's' : ''} sur {total}
+                {formatMCPUIString(
+                  prefilled === 1 ? strings.formPrefilledOne : strings.formPrefilledMany,
+                  { count: prefilled, total }
+                )}
               </p>
             )
           })()}
@@ -287,14 +312,17 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
         <Show when={countdown() != null}>
           <div class="mt-4 flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
             <span class="text-sm text-blue-700 dark:text-blue-300">
-              {params().submitLabel || 'Submit'} in {countdown()}s...
+              {formatMCPUIString(strings.formSubmitCountdown, {
+                label: params().submitLabel || strings.submit,
+                seconds: countdown()!,
+              })}
             </span>
             <button
               type="button"
               onClick={() => { cancelCountdown(); setUserInteracted(true) }}
               class="text-sm text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200"
             >
-              Cancel
+              {strings.cancel}
             </button>
           </div>
         </Show>
@@ -308,10 +336,10 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
             {isSubmitting() ? (
               <span class="flex items-center gap-2">
                 <span class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
-                Submitting...
+                {strings.formSubmitting}
               </span>
             ) : (
-              params().submitLabel || 'Submit'
+              params().submitLabel || strings.submit
             )}
           </button>
           <Show when={params().showReset}>
@@ -321,7 +349,7 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
               disabled={isSubmitting()}
               class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
-              Reset
+              {strings.formReset}
             </button>
           </Show>
         </div>

package/src/components/GenerativeUIErrorBoundary.tsx

@@ -15,6 +15,7 @@ import { isServer } from 'solid-js/web'
 import { createLogger } from '../utils/logger'
 import type { RendererError, ComponentType } from '../types'
 import { useTelemetry } from '../context/MCPUITelemetryContext'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 const logger = createLogger('generative-ui')
 
@@ -63,6 +64,7 @@ function DefaultErrorFallback(props: {
   allowRetry?: boolean
   onRetry?: () => void
 }) {
+  const strings = useMCPUIStrings()
   return (
     <div class="w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
       <div class="flex items-start gap-3">
@@ -83,10 +85,13 @@ function DefaultErrorFallback(props: {
         </div>
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">
-            Component Failed to Render
+            {strings.errorBoundaryTitle}
           </p>
           <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
-            Type: {props.componentType || 'unknown'} | ID: {props.componentId?.slice(0, 8) || 'unknown'}...
+            {formatMCPUIString(strings.errorBoundaryMeta, {
+              type: props.componentType || strings.unknown,
+              id: props.componentId?.slice(0, 8) || strings.unknown,
+            })}
           </p>
           <Show when={import.meta.env.DEV}>
             <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono">
@@ -98,7 +103,7 @@ function DefaultErrorFallback(props: {
               onClick={props.onRetry}
               class="mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline"
             >
-              Retry Rendering
+              {strings.errorBoundaryRetry}
             </button>
           </Show>
         </div>