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

package/src/components/AgentCard.tsx

@@ -7,6 +7,7 @@
 
 import { Show, For } from 'solid-js'
 import type { AgentCardContent } from '../types/chat-bus'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface AgentCardProps {
   content: AgentCardContent
@@ -23,15 +24,31 @@ const AVATAR_MAP: Record<string, string> = {
   robot: '\uD83E\uDD16',
 }
 
-const STATUS_CONFIG: Record<string, { label: string; color: string; pulse: boolean }> = {
-  idle: { label: 'Idle', color: 'bg-gray-400', pulse: false },
-  running: { label: 'Running', color: 'bg-blue-500', pulse: true },
-  waiting: { label: 'Waiting', color: 'bg-amber-500', pulse: true },
-  done: { label: 'Done', color: 'bg-green-500', pulse: false },
-  error: { label: 'Error', color: 'bg-red-500', pulse: false },
+/**
+ * Status styling. The record stays module-level, but it carries a
+ * `labelKey` rather than English: the label is resolved from
+ * `useMCPUIStrings()` at render time so a host provider can localize it.
+ */
+type AgentStatusLabelKey =
+  | 'agentStatusIdle'
+  | 'agentStatusRunning'
+  | 'agentStatusWaiting'
+  | 'agentStatusDone'
+  | 'agentStatusError'
+
+const STATUS_CONFIG: Record<
+  string,
+  { labelKey: AgentStatusLabelKey; color: string; pulse: boolean }
+> = {
+  idle: { labelKey: 'agentStatusIdle', color: 'bg-gray-400', pulse: false },
+  running: { labelKey: 'agentStatusRunning', color: 'bg-blue-500', pulse: true },
+  waiting: { labelKey: 'agentStatusWaiting', color: 'bg-amber-500', pulse: true },
+  done: { labelKey: 'agentStatusDone', color: 'bg-green-500', pulse: false },
+  error: { labelKey: 'agentStatusError', color: 'bg-red-500', pulse: false },
 }
 
 export function AgentCard(props: AgentCardProps) {
+  const strings = useMCPUIStrings()
   const c = () => props.content
   const status = () => STATUS_CONFIG[c().status] || STATUS_CONFIG.idle
   const avatar = () => AVATAR_MAP[c().avatar || ''] || c().avatar || '\uD83E\uDD16'
@@ -54,8 +71,8 @@ export function AgentCard(props: AgentCardProps) {
         <div class="flex items-center gap-2">
           <span class="font-medium text-sm text-gray-900 dark:text-white truncate">{c().name}</span>
           {/* Status dot */}
-          <span class={`inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} title={status().label} />
-          <span class="text-xs text-gray-500 dark:text-gray-400">{status().label}</span>
+          <span class={`inline-block w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} title={strings[status().labelKey]} />
+          <span class="text-xs text-gray-500 dark:text-gray-400">{strings[status().labelKey]}</span>
         </div>
 
         {/* Model */}
@@ -97,13 +114,14 @@ export interface AgentStatusBadgeProps {
 }
 
 export function AgentStatusBadge(props: AgentStatusBadgeProps) {
+  const strings = useMCPUIStrings()
   const status = () => STATUS_CONFIG[props.status] || STATUS_CONFIG.idle
 
   return (
     <span class="inline-flex items-center gap-1.5 text-xs">
       <span class={`w-2 h-2 rounded-full ${status().color} ${status().pulse ? 'animate-pulse' : ''}`} />
       <span class="text-gray-600 dark:text-gray-300">{props.agentName}</span>
-      <span class="text-gray-400 dark:text-gray-500">{status().label}</span>
+      <span class="text-gray-400 dark:text-gray-500">{strings[status().labelKey]}</span>
     </span>
   )
 }

package/src/components/AgentHandoff.tsx

@@ -7,6 +7,7 @@
 
 import { Show } from 'solid-js'
 import type { AgentHandoffContent } from '../types/chat-bus'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface AgentHandoffProps {
   content: AgentHandoffContent
@@ -24,6 +25,7 @@ function getAvatar(key?: string): string {
 }
 
 export function AgentHandoff(props: AgentHandoffProps) {
+  const strings = useMCPUIStrings()
   const c = () => props.content
 
   if (typeof console !== 'undefined') {
@@ -49,7 +51,8 @@ export function AgentHandoff(props: AgentHandoffProps) {
         </div>
         <Show when={c().summary || c().itemCount}>
           <span class="text-[10px] text-gray-500 dark:text-gray-400 text-center">
-            {c().summary || `${c().itemCount} items`}
+            {c().summary ||
+              formatMCPUIString(strings.handoffItems, { count: c().itemCount ?? 0 })}
           </span>
         </Show>
       </div>

package/src/components/ArtifactRenderer.tsx

@@ -1,5 +1,6 @@
 import { Component } from 'solid-js'
 import { safeUrl } from '../utils/safe-url'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface ArtifactComponentParams {
     url: string
@@ -10,6 +11,7 @@ export interface ArtifactComponentParams {
 }
 
 export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> = (props) => {
+    const strings = useMCPUIStrings()
     const getIcon = () => {
         if (props.params.mimeType?.includes('csv')) return '📊'
         if (props.params.mimeType?.includes('json')) return '{}'
@@ -19,9 +21,19 @@ export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> =
 
     const formatSize = (bytes?: number) => {
         if (!bytes) return ''
-        if (bytes < 1024) return `${bytes} B`
-        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+        const oneDecimal = (n: number) =>
+            new Intl.NumberFormat(strings.locale, {
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+                useGrouping: false,
+            }).format(n)
+        if (bytes < 1024) {
+            return formatMCPUIString(strings.sizeBytes, {
+                size: new Intl.NumberFormat(strings.locale, { maximumFractionDigits: 0 }).format(bytes),
+            })
+        }
+        if (bytes < 1024 * 1024) return formatMCPUIString(strings.sizeKilobytes, { size: oneDecimal(bytes / 1024) })
+        return formatMCPUIString(strings.sizeMegabytes, { size: oneDecimal(bytes / (1024 * 1024)) })
     }
 
     return (
@@ -35,7 +47,7 @@ export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> =
                         {props.params.filename}
                     </h4>
                     <p class="text-xs text-gray-500 dark:text-gray-400">
-                        {formatSize(props.params.size)} • {props.params.description || 'Generated artifact'}
+                        {formatSize(props.params.size)} • {props.params.description || strings.artifactDescription}
                     </p>
                 </div>
             </div>
@@ -48,7 +60,7 @@ export const ArtifactRenderer: Component<{ params: ArtifactComponentParams }> =
                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                 </svg>
-                Download
+                {strings.download}
             </a>
         </div>
     )

package/src/components/AutocompleteDropdown.tsx

@@ -7,6 +7,7 @@
 
 import { Component, For, Show, createMemo, JSX } from 'solid-js'
 import type { AutocompleteOption } from '../types'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 /**
  * Props for AutocompleteDropdown
@@ -142,6 +143,7 @@ const DefaultOptionRenderer: Component<{
  * AutocompleteDropdown Component
  */
 export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props) => {
+  const strings = useMCPUIStrings()
   const positionStyles = createMemo((): JSX.CSSProperties => {
     if (props.position === 'top') {
       return {
@@ -175,7 +177,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
         class={`mcp-autocomplete-dropdown ${props.class || ''}`}
         style={containerStyles()}
         role="listbox"
-        aria-label="Suggestions"
+        aria-label={strings.autocompleteSuggestions}
       >
         {/* Loading state */}
         <Show when={props.isLoading}>
@@ -201,7 +203,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
                 animation: 'mcp-spin 0.6s linear infinite'
               }}
             />
-            {props.loadingMessage || 'Loading...'}
+            {props.loadingMessage || strings.autocompleteLoading}
           </div>
         </Show>
 
@@ -216,7 +218,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'text-align': 'center'
             }}
           >
-            {props.emptyMessage || 'No suggestions found'}
+            {props.emptyMessage || strings.autocompleteEmpty}
           </div>
         </Show>
 
@@ -302,7 +304,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'font-family': 'inherit',
               'font-size': '0.7rem'
             }}>↓</kbd>
-            {' to navigate, '}
+            {strings.autocompleteHintNavigate}
             <kbd style={{
               'background-color': '#e5e7eb',
               padding: '1px 4px',
@@ -310,7 +312,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'font-family': 'inherit',
               'font-size': '0.7rem'
             }}>Enter</kbd>
-            {' to select, '}
+            {strings.autocompleteHintSelect}
             <kbd style={{
               'background-color': '#e5e7eb',
               padding: '1px 4px',
@@ -318,7 +320,7 @@ export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props
               'font-family': 'inherit',
               'font-size': '0.7rem'
             }}>Esc</kbd>
-            {' to dismiss'}
+            {strings.autocompleteHintDismiss}
           </div>
         </Show>
       </div>

package/src/components/AutocompleteFormField.tsx

@@ -10,6 +10,7 @@ import type { FormFieldParams, FieldAutocompleteConfig, AutocompleteContext } fr
 import { useConditionalField } from '../hooks/useConditionalField'
 import { useAutocomplete } from '../hooks/useAutocomplete'
 import { useAutocompleteContextSafe } from '../context/AutocompleteContext'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 import { GhostText } from './GhostText'
 import { AutocompleteDropdown } from './AutocompleteDropdown'
 
@@ -62,6 +63,7 @@ export interface AutocompleteFormFieldProps {
  * AutocompleteFormField Component
  */
 export const AutocompleteFormField: Component<AutocompleteFormFieldProps> = (props) => {
+  const strings = useMCPUIStrings()
   // Check if autocomplete context is available
   const autocompleteCtx = useAutocompleteContextSafe()
 
@@ -205,7 +207,9 @@ export const AutocompleteFormField: Component<AutocompleteFormFieldProps> = (pro
                   inputValue={localValue()}
                   ghostText={autocomplete.ghostText()}
                   visible={autocomplete.isOpen()}
-                  hintText={autocomplete.ghostText() ? 'Tab to accept' : undefined}
+                  hintText={
+                    autocomplete.ghostText() ? strings.autocompleteTabToAccept : undefined
+                  }
                   isLoading={autocomplete.isLoading()}
                 />
               </Show>

package/src/components/BriefingDiff.tsx

@@ -7,6 +7,7 @@
 
 import { For, Show } from 'solid-js'
 import type { BriefingDiffContent } from '../types/chat-bus'
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface BriefingDiffProps {
   content: BriefingDiffContent
@@ -19,6 +20,7 @@ const CHANGE_CONFIG: Record<string, { icon: string; color: string; bg: string }>
 }
 
 export function BriefingDiff(props: BriefingDiffProps) {
+  const strings = useMCPUIStrings()
   const c = () => props.content
 
   if (typeof console !== 'undefined') {
@@ -45,13 +47,19 @@ export function BriefingDiff(props: BriefingDiffProps) {
         {(stats) => (
           <div class="flex items-center gap-3 text-xs">
             <Show when={stats().added > 0}>
-              <span class="text-green-600 dark:text-green-400">+{stats().added} added</span>
+              <span class="text-green-600 dark:text-green-400">
+                {formatMCPUIString(strings.briefingAdded, { count: stats().added })}
+              </span>
             </Show>
             <Show when={stats().removed > 0}>
-              <span class="text-red-600 dark:text-red-400">{stats().removed} removed</span>
+              <span class="text-red-600 dark:text-red-400">
+                {formatMCPUIString(strings.briefingRemoved, { count: stats().removed })}
+              </span>
             </Show>
             <Show when={stats().changed > 0}>
-              <span class="text-amber-600 dark:text-amber-400">{stats().changed} changed</span>
+              <span class="text-amber-600 dark:text-amber-400">
+                {formatMCPUIString(strings.briefingChanged, { count: stats().changed })}
+              </span>
             </Show>
           </div>
         )}

package/src/components/CarouselRenderer.tsx

@@ -3,6 +3,7 @@ import { isServer } from 'solid-js/web'
 import { useRenderContext } from './RenderContext'
 import type { UIComponent } from '../types'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 export interface CarouselRendererProps {
     items: UIComponent[]
@@ -15,6 +16,7 @@ export interface CarouselRendererProps {
 }
 
 export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
+    const strings = useMCPUIStrings()
     let scrollContainer: HTMLDivElement | undefined
     const [canScrollLeft, setCanScrollLeft] = createSignal(false)
     const [canScrollRight, setCanScrollRight] = createSignal(true)
@@ -42,9 +44,9 @@ export const CarouselRenderer: Component<CarouselRendererProps> = (props) => {
 
     return (
         <ExpandableWrapper
-            title={'Carousel'}
+            title={strings.carouselTitle}
             copyData={JSON.stringify(props.items, null, 2)}
-            copyLabel="Copy items (JSON)"
+            copyLabel={strings.carouselCopy}
             toolbarVariant={props.toolbarVariant}
         >
         <div class={`relative group ${isExpanded() ? 'flex-1 min-h-0 flex flex-col' : ''}`}>

package/src/components/ChartJSRenderer.tsx

@@ -24,7 +24,7 @@ import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { DegradedFallback } from './DegradedFallback';
 import { chartToDataTable } from './chart-data-table';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
-import { useMCPUIStrings } from '../context/MCPUIStringsContext';
+import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
 
 // Lazy load Chart.js to avoid bundling if not used
 let ChartJS: any = null;
@@ -113,9 +113,18 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
   let renderVersion = 0;
 
   const params = () => props.component.params as ChartComponentParams;
-  const tableData = createMemo(() => chartToDataTable(params()));
   const telemetry = useTelemetry();
   const strings = useMCPUIStrings();
+  // The accessible data table is a pure projection: its column headers come
+  // from the chrome strings, injected rather than hardcoded in the helper.
+  const tableData = createMemo(() =>
+    chartToDataTable(params(), {
+      series: strings.chartTableSeries,
+      point: strings.chartTablePoint,
+      label: strings.degradedColLabel,
+      seriesName: strings.degradedSeries,
+    })
+  );
   const descriptionId = createUniqueId();
   const title = () => params().title || strings.chartView;
 
@@ -205,7 +214,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
       setIsLoading(false);
     } catch (err) {
       if (version !== renderVersion) return;
-      const error = err instanceof Error ? err : new Error('Chart rendering failed');
+      const error = err instanceof Error ? err : new Error(strings.chartRenderError);
       setError(error.message);
       setIsLoading(false);
       // Fallback ladder (P2.5): record the failure so it's observable, then
@@ -241,7 +250,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
     <ExpandableWrapper
       title={title()}
       copyData={copyDataJSON()}
-      copyLabel="Copy chart data (JSON)"
+      copyLabel={strings.chartCopy}
       toolbarVariant={props.toolbarVariant}
     >
       <ContextAwareChartLayout
@@ -294,8 +303,8 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
                 onClick={handleExportPNG}
                 disabled={activeView() !== 'chart' || isLoading() || Boolean(error())}
                 class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"
-                title="Download PNG"
-                aria-label="Download chart as PNG"
+                title={strings.chartDownloadPng}
+                aria-label={strings.chartDownloadPngAria}
               >
                 <svg
                   class="w-3 h-3 text-gray-500 dark:text-gray-400"
@@ -323,8 +332,8 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             instead of a bare "Chart Error" message. */}
         <Show when={error() && activeView() === 'chart'}>
           <DegradedFallback
-            message={`Chart rendering failed: ${error()}`}
-            caption="Showing the chart data as a table — the interactive chart is unavailable."
+            message={formatMCPUIString(strings.chartRenderFailed, { error: String(error()) })}
+            caption={strings.chartDegradedCaption}
             {...tableData()}
           />
         </Show>
@@ -405,7 +414,7 @@ export const ChartJSRenderer: Component<ChartJSRendererProps> = (props) => {
             <div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80">
               <div class="flex flex-col items-center gap-2">
                 <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
-                <span class="text-sm text-gray-500 dark:text-gray-400">Loading chart...</span>
+                <span class="text-sm text-gray-500 dark:text-gray-400">{strings.chartLoading}</span>
               </div>
             </div>
           </Show>

package/src/components/ChatPrompt.tsx

@@ -52,6 +52,7 @@ import type {
   FormPromptConfig,
 } from '../types/chat-bus'
 import { FormFieldRenderer } from './FormFieldRenderer'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 import type { FormFieldParams } from '../types'
 
 export interface ChatPromptProps {
@@ -78,6 +79,8 @@ export interface ChatPromptProps {
  * />
  */
 export const ChatPrompt: Component<ChatPromptProps> = (props) => {
+  const strings = useMCPUIStrings()
+
   // F1: Guard against null/undefined config (e.g. after dismiss clears state)
   if (!props.config) return null
 
@@ -100,7 +103,7 @@ export const ChatPrompt: Component<ChatPromptProps> = (props) => {
             ? 'px-3 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'
             : 'p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors'
           }
-          aria-label={props.dismissLabel || 'Dismiss'}
+          aria-label={props.dismissLabel || strings.dismiss}
         >
           <Show when={props.dismissLabel} fallback={
             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -124,10 +127,10 @@ export const ChatPrompt: Component<ChatPromptProps> = (props) => {
           <Match when={props.config.type === 'confirm'}>
             <ConfirmBody
               config={props.config.config as ConfirmPromptConfig}
-              onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || 'Confirmed' })}
+              onConfirm={() => props.onSubmit({ type: 'confirm', value: 'confirmed', label: (props.config.config as ConfirmPromptConfig).confirmLabel || strings.promptConfirmed })}
               onCancel={() => {
                 props.onDismiss?.()
-                props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || 'Cancelled', dismissed: true })
+                props.onSubmit({ type: 'confirm', value: 'cancelled', label: (props.config.config as ConfirmPromptConfig).cancelLabel || strings.promptCancelled, dismissed: true })
               }}
             />
           </Match>
@@ -213,6 +216,7 @@ const ConfirmBody: Component<{
   onConfirm: () => void
   onCancel: () => void
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const isDanger = () => props.config.variant === 'danger'
 
   return (
@@ -225,7 +229,7 @@ const ConfirmBody: Component<{
           onClick={props.onCancel}
           class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
         >
-          {props.config.cancelLabel || 'Cancel'}
+          {props.config.cancelLabel || strings.cancel}
         </button>
         <button
           onClick={props.onConfirm}
@@ -235,7 +239,7 @@ const ConfirmBody: Component<{
               : 'bg-blue-600 hover:bg-blue-700'
           }`}
         >
-          {props.config.confirmLabel || 'Confirm'}
+          {props.config.confirmLabel || strings.confirm}
         </button>
       </div>
     </div>
@@ -248,6 +252,7 @@ const FormBody: Component<{
   config: FormPromptConfig
   onSubmit: (data: Record<string, unknown>, label: string) => void
 }> = (props) => {
+  const strings = useMCPUIStrings()
   const [formData, setFormData] = createSignal<Record<string, any>>({})
   const [dynamicOptions, setDynamicOptions] = createSignal<Record<string, Array<{ label: string; value: string }>>>({})
   const [previewText, setPreviewText] = createSignal<string>('')
@@ -336,7 +341,7 @@ const FormBody: Component<{
       .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))
       .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(', ') : v}`)
       .join(', ')
-    props.onSubmit(data, label || 'Form submitted')
+    props.onSubmit(data, label || strings.promptFormSubmitted)
   }
 
   const isValid = () => {
@@ -379,7 +384,7 @@ const FormBody: Component<{
           <Show when={previewLoading()} fallback={
             <p class="text-blue-700 dark:text-blue-300">{previewText()}</p>
           }>
-            <p class="text-blue-400 animate-pulse">Loading preview...</p>
+            <p class="text-blue-400 animate-pulse">{strings.promptLoadingPreview}</p>
           </Show>
         </div>
       </Show>
@@ -390,7 +395,7 @@ const FormBody: Component<{
           disabled={!isValid()}
           class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
         >
-          {props.config.submitLabel || 'Submit'}
+          {props.config.submitLabel || strings.submit}
         </button>
       </div>
     </form>

package/src/components/CodeBlockRenderer.tsx

@@ -10,6 +10,7 @@ import type { UIComponent, CodeComponentParams } from '../types'
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper'
 import { highlightQuery } from './UIResourceRenderer'
 import { escapeHtml } from '../utils/escape-html'
+import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
 /** Map of `params.language` → file extension for the v6.2.0 download button. */
 const LANGUAGE_EXTENSIONS: Record<string, string> = {
@@ -45,6 +46,7 @@ export interface CodeBlockRendererProps {
 }
 
 export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
+    const strings = useMCPUIStrings()
     const [highlightedCode, setHighlightedCode] = createSignal<string>('')
     const [isCopied, setIsCopied] = createSignal(false)
     const [isHljsLoaded, setIsHljsLoaded] = createSignal(false)
@@ -201,12 +203,12 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
     }
 
     return (
-        <ExpandableWrapper title={params()?.filename || params()?.language || 'Code'} copyData={params()?.code} copyLabel="Copy code" toolbarVariant={props.toolbarVariant}>
+        <ExpandableWrapper title={params()?.filename || params()?.language || strings.codeTitle} copyData={params()?.code} copyLabel={strings.codeCopy} toolbarVariant={props.toolbarVariant}>
         <div class={`w-full bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden text-sm flex flex-col ${isExpanded() ? 'flex-1 min-h-0' : ''}`}>
             {/* Header */}
             <div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0">
                 <div class="font-mono text-xs text-gray-600 dark:text-gray-400">
-                    {params()?.filename || params()?.language || 'Code'}
+                    {params()?.filename || params()?.language || strings.codeTitle}
                 </div>
                 <div class="flex items-center gap-2">
                     {/* Search input (v6.2.0) */}
@@ -214,16 +216,16 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                         type="text"
                         value={searchQuery()}
                         onInput={(e) => setSearchQuery(e.currentTarget.value)}
-                        placeholder="Search…"
+                        placeholder={strings.codeSearchPlaceholder}
                         class="px-2 py-0.5 text-xs border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:border-blue-400 focus:ring-1 focus:ring-blue-400 outline-none w-32"
-                        aria-label="Search in code"
+                        aria-label={strings.codeSearchAria}
                     />
                     {/* Download button (v6.2.0) */}
                     <button
                         onClick={handleDownload}
                         class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"
-                        aria-label="Download code as file"
-                        title="Download code"
+                        aria-label={strings.codeDownloadAria}
+                        title={strings.codeDownload}
                     >
                         <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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" />
@@ -233,8 +235,8 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                     <button
                         onClick={() => setWordWrap(!wordWrap())}
                         class={`focus:outline-none transition-colors ${wordWrap() ? 'text-blue-500 dark:text-blue-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
-                        aria-label="Toggle word wrap"
-                        title={wordWrap() ? 'Disable word wrap' : 'Enable word wrap'}
+                        aria-label={strings.codeToggleWordWrap}
+                        title={wordWrap() ? strings.codeWordWrapDisable : strings.codeWordWrapEnable}
                     >
                         <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4" />
@@ -244,8 +246,8 @@ export const CodeBlockRenderer: Component<CodeBlockRendererProps> = (props) => {
                     <button
                         onClick={handleCopy}
                         class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none transition-colors"
-                        aria-label="Copy code"
-                        title="Copy code"
+                        aria-label={strings.codeCopy}
+                        title={strings.codeCopy}
                     >
                         <Show when={isCopied()} fallback={
                             <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">