+
+ );
+}
+
+interface ComponentRendererProps {
+ node: Types.AnyComponentNode;
+ surfaceId: string;
+}
+
+function ComponentRenderer({ node, surfaceId }: ComponentRendererProps) {
+ const renderChild = useMemo(
+ () => (childNode: Types.AnyComponentNode) => (
+ -
+ {children}
+
{children}
;
+}
diff --git a/renderers/react/src/components/SurfaceRenderer.tsx b/renderers/react/src/components/SurfaceRenderer.tsx
new file mode 100644
index 00000000..8cca0dbb
--- /dev/null
+++ b/renderers/react/src/components/SurfaceRenderer.tsx
@@ -0,0 +1,208 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, type ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { cn } from "../lib/utils.js";
+import { Text, Image, Icon, Video, AudioPlayer, Divider } from "./content/index.js";
+import { Row, Column, List, Card, Tabs, Modal } from "./layout/index.js";
+import { Button, CheckBox, TextField, DateTimeInput, MultipleChoice, Slider } from "./interactive/index.js";
+
+export interface SurfaceRendererProps {
+ surfaceId: string;
+ surface: Types.Surface;
+ className?: string;
+}
+
+export function SurfaceRenderer({
+ surfaceId,
+ surface,
+ className,
+}: SurfaceRendererProps) {
+ const componentTree = surface?.componentTree;
+
+ if (!componentTree) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
+
+interface ComponentRendererProps {
+ node: Types.AnyComponentNode;
+ surfaceId: string;
+}
+
+function ComponentRenderer({ node, surfaceId }: ComponentRendererProps) {
+ const renderChild = useMemo(
+ () => (childNode: Types.AnyComponentNode) => (
+ -
+ {children}
+
{children}
;
+}
diff --git a/renderers/react/src/components/content/AudioPlayer.tsx b/renderers/react/src/components/content/AudioPlayer.tsx
new file mode 100644
index 00000000..778868f2
--- /dev/null
+++ b/renderers/react/src/components/content/AudioPlayer.tsx
@@ -0,0 +1,56 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useDataBinding } from "../../hooks/useDataBinding.js";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface AudioPlayerProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "AudioPlayer" };
+}
+
+export function AudioPlayer({ node, surfaceId }: AudioPlayerProps) {
+ const theme = useTheme();
+ const { resolveString } = useDataBinding(node, surfaceId);
+
+ const properties = node.properties as {
+ url?: { literalString?: string; path?: string };
+ description?: { literalString?: string; path?: string };
+ };
+
+ const url = resolveString(properties.url ?? null) ?? "";
+ const description = resolveString(properties.description ?? null);
+
+ const themeClasses = useMemo(() => {
+ return classMapToString(theme.components.AudioPlayer);
+ }, [theme]);
+
+ if (!url) {
+ return null;
+ }
+
+ return (
+
+ {description && (
+
+ );
+}
diff --git a/renderers/react/src/components/content/Divider.tsx b/renderers/react/src/components/content/Divider.tsx
new file mode 100644
index 00000000..addd2c19
--- /dev/null
+++ b/renderers/react/src/components/content/Divider.tsx
@@ -0,0 +1,53 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+type DividerAxis = "horizontal" | "vertical";
+
+interface DividerProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Divider" };
+}
+
+export function Divider({ node }: DividerProps) {
+ const theme = useTheme();
+
+ const properties = node.properties as {
+ axis?: DividerAxis;
+ };
+
+ const axis = properties.axis ?? "horizontal";
+
+ const themeClasses = useMemo(() => {
+ return classMapToString(theme.components.Divider);
+ }, [theme]);
+
+ const orientationClasses = useMemo(() => {
+ return axis === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]";
+ }, [axis]);
+
+ return (
+
+ );
+}
diff --git a/renderers/react/src/components/content/Icon.tsx b/renderers/react/src/components/content/Icon.tsx
new file mode 100644
index 00000000..876d1241
--- /dev/null
+++ b/renderers/react/src/components/content/Icon.tsx
@@ -0,0 +1,125 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import * as LucideIcons from "lucide-react";
+import { useDataBinding } from "../../hooks/useDataBinding.js";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+const iconMap: Record{description}
+ )} + +
+
+ );
+ }
+
+ return
+
+ {label && (
+
+ )}
+
+ );
+}
diff --git a/renderers/react/src/components/interactive/DateTimeInput.tsx b/renderers/react/src/components/interactive/DateTimeInput.tsx
new file mode 100644
index 00000000..6279dd7f
--- /dev/null
+++ b/renderers/react/src/components/interactive/DateTimeInput.tsx
@@ -0,0 +1,99 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, useCallback, useId, useState } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useDataBinding } from "../../hooks/useDataBinding.js";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface DateTimeInputProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "DateTimeInput" };
+}
+
+export function DateTimeInput({ node, surfaceId }: DateTimeInputProps) {
+ const theme = useTheme();
+ const id = useId();
+ const { resolveString, setValue } = useDataBinding(node, surfaceId);
+
+ const properties = node.properties as {
+ label?: { literalString?: string; path?: string };
+ value?: { literalString?: string; path?: string };
+ enableDate?: boolean;
+ enableTime?: boolean;
+ outputFormat?: string;
+ };
+
+ const label = resolveString(properties.label ?? null);
+ const initialValue = resolveString(properties.value ?? null) ?? "";
+ const enableDate = properties.enableDate ?? true;
+ const enableTime = properties.enableTime ?? false;
+ const valuePath = properties.value?.path;
+
+ const [value, setLocalValue] = useState(initialValue);
+
+ const containerClasses = useMemo(() => {
+ return classMapToString(theme.components.DateTimeInput.container);
+ }, [theme]);
+
+ const elementClasses = useMemo(() => {
+ return classMapToString(theme.components.DateTimeInput.element);
+ }, [theme]);
+
+ const labelClasses = useMemo(() => {
+ return classMapToString(theme.components.DateTimeInput.label);
+ }, [theme]);
+
+ const inputType = useMemo(() => {
+ if (enableDate && enableTime) {
+ return "datetime-local";
+ }
+ if (enableTime) {
+ return "time";
+ }
+ return "date";
+ }, [enableDate, enableTime]);
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent
+ {label && (
+
+ )}
+
+
+ );
+}
diff --git a/renderers/react/src/components/interactive/MultipleChoice.tsx b/renderers/react/src/components/interactive/MultipleChoice.tsx
new file mode 100644
index 00000000..eaa9ed99
--- /dev/null
+++ b/renderers/react/src/components/interactive/MultipleChoice.tsx
@@ -0,0 +1,133 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, useCallback, useId, useState } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useDataBinding } from "../../hooks/useDataBinding.js";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface StringValue {
+ literalString?: string;
+ path?: string;
+}
+
+interface Option {
+ value?: string;
+ label?: StringValue;
+}
+
+interface MultipleChoiceProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "MultipleChoice" };
+}
+
+export function MultipleChoice({ node, surfaceId }: MultipleChoiceProps) {
+ const theme = useTheme();
+ const id = useId();
+ const { resolveString, setValue, getValue } = useDataBinding(
+ node,
+ surfaceId
+ );
+
+ const properties = node.properties as {
+ label?: { literalString?: string; path?: string };
+ options?: Option[];
+ selections?: { path?: string };
+ maxAllowedSelections?: number;
+ };
+
+ const label = resolveString(properties.label ?? null);
+ const options = properties.options ?? [];
+ const selectionsPath = properties.selections?.path;
+ const maxAllowedSelections = properties.maxAllowedSelections ?? 1;
+
+ const currentSelections = useMemo(() => {
+ if (!selectionsPath) return [];
+ const data = getValue(selectionsPath);
+ if (Array.isArray(data)) return data as string[];
+ if (typeof data === "string") return [data];
+ return [];
+ }, [selectionsPath, getValue]);
+
+ const [selections, setSelections] = useState
+ {label && (
+
+ )}
+
+
+ );
+}
diff --git a/renderers/react/src/components/interactive/Slider.tsx b/renderers/react/src/components/interactive/Slider.tsx
new file mode 100644
index 00000000..8a1b9039
--- /dev/null
+++ b/renderers/react/src/components/interactive/Slider.tsx
@@ -0,0 +1,96 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, useCallback, useId, useState } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useDataBinding } from "../../hooks/useDataBinding.js";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface SliderProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Slider" };
+}
+
+export function Slider({ node, surfaceId }: SliderProps) {
+ const theme = useTheme();
+ const id = useId();
+ const { resolveString, resolveNumber, setValue } = useDataBinding(
+ node,
+ surfaceId
+ );
+
+ const properties = node.properties as {
+ label?: { literalString?: string; path?: string };
+ value?: { literalNumber?: number; path?: string };
+ minValue?: number;
+ maxValue?: number;
+ };
+
+ const label = resolveString(properties.label ?? null);
+ const initialValue = resolveNumber(properties.value ?? null) ?? 0;
+ const minValue = properties.minValue ?? 0;
+ const maxValue = properties.maxValue ?? 100;
+ const valuePath = properties.value?.path;
+
+ const [value, setLocalValue] = useState(initialValue);
+
+ const containerClasses = useMemo(() => {
+ return classMapToString(theme.components.Slider.container);
+ }, [theme]);
+
+ const elementClasses = useMemo(() => {
+ return classMapToString(theme.components.Slider.element);
+ }, [theme]);
+
+ const labelClasses = useMemo(() => {
+ return classMapToString(theme.components.Slider.label);
+ }, [theme]);
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent
+ {label && (
+
+ );
+}
diff --git a/renderers/react/src/components/interactive/TextField.tsx b/renderers/react/src/components/interactive/TextField.tsx
new file mode 100644
index 00000000..69a09473
--- /dev/null
+++ b/renderers/react/src/components/interactive/TextField.tsx
@@ -0,0 +1,128 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, useCallback, useId, useState } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useDataBinding } from "../../hooks/useDataBinding.js";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+type TextFieldType = "shortText" | "longText" | "number" | "obscured" | "date";
+
+interface TextFieldProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "TextField" };
+}
+
+export function TextField({ node, surfaceId }: TextFieldProps) {
+ const theme = useTheme();
+ const id = useId();
+ const { resolveString, setValue } = useDataBinding(node, surfaceId);
+
+ const properties = node.properties as {
+ label?: { literalString?: string; path?: string };
+ text?: { literalString?: string; path?: string };
+ placeholder?: { literalString?: string; path?: string };
+ textFieldType?: TextFieldType;
+ validationRegexp?: string;
+ };
+
+ const label = resolveString(properties.label ?? null);
+ const initialValue = resolveString(properties.text ?? null) ?? "";
+ const placeholder = resolveString(properties.placeholder ?? null) ?? undefined;
+ const textFieldType = properties.textFieldType ?? "shortText";
+ const validationRegexp = properties.validationRegexp;
+ const textPath = properties.text?.path;
+
+ const [value, setLocalValue] = useState(initialValue);
+ const [isValid, setIsValid] = useState(true);
+
+ const containerClasses = useMemo(() => {
+ return classMapToString(theme.components.TextField.container);
+ }, [theme]);
+
+ const elementClasses = useMemo(() => {
+ return classMapToString(theme.components.TextField.element);
+ }, [theme]);
+
+ const labelClasses = useMemo(() => {
+ return classMapToString(theme.components.TextField.label);
+ }, [theme]);
+
+ const inputType = useMemo(() => {
+ switch (textFieldType) {
+ case "number":
+ return "number";
+ case "obscured":
+ return "password";
+ case "date":
+ return "date";
+ default:
+ return "text";
+ }
+ }, [textFieldType]);
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent
+
+ {value}
+
+ )}
+
+
+ {label && (
+
+ )}
+ {isTextArea ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/renderers/react/src/components/interactive/index.ts b/renderers/react/src/components/interactive/index.ts
new file mode 100644
index 00000000..9efe7d1a
--- /dev/null
+++ b/renderers/react/src/components/interactive/index.ts
@@ -0,0 +1,22 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export { Button } from "./Button.js";
+export { CheckBox } from "./CheckBox.js";
+export { TextField } from "./TextField.js";
+export { DateTimeInput } from "./DateTimeInput.js";
+export { MultipleChoice } from "./MultipleChoice.js";
+export { Slider } from "./Slider.js";
diff --git a/renderers/react/src/components/layout/Card.tsx b/renderers/react/src/components/layout/Card.tsx
new file mode 100644
index 00000000..3c31e8c9
--- /dev/null
+++ b/renderers/react/src/components/layout/Card.tsx
@@ -0,0 +1,36 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, type ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface CardProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Card" };
+ children?: ReactNode;
+}
+
+export function Card({ children }: CardProps) {
+ const theme = useTheme();
+
+ const themeClasses = useMemo(() => {
+ return classMapToString(theme.components.Card);
+ }, [theme]);
+
+ return {children}
;
+}
diff --git a/renderers/react/src/components/layout/Column.tsx b/renderers/react/src/components/layout/Column.tsx
new file mode 100644
index 00000000..08d69113
--- /dev/null
+++ b/renderers/react/src/components/layout/Column.tsx
@@ -0,0 +1,91 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, type ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+type Alignment = "start" | "center" | "end" | "stretch";
+type Distribution =
+ | "start"
+ | "center"
+ | "end"
+ | "spaceBetween"
+ | "spaceAround"
+ | "spaceEvenly";
+
+interface ColumnProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Column" };
+ children?: ReactNode;
+}
+
+export function Column({ node, children }: ColumnProps) {
+ const theme = useTheme();
+
+ const properties = node.properties as {
+ alignment?: Alignment;
+ distribution?: Distribution;
+ };
+
+ const alignment = properties.alignment ?? "stretch";
+ const distribution = properties.distribution ?? "start";
+
+ const themeClasses = useMemo(() => {
+ return classMapToString(theme.components.Column);
+ }, [theme]);
+
+ const alignmentClass = useMemo(() => {
+ switch (alignment) {
+ case "start":
+ return "items-start";
+ case "center":
+ return "items-center";
+ case "end":
+ return "items-end";
+ case "stretch":
+ return "items-stretch";
+ default:
+ return "items-stretch";
+ }
+ }, [alignment]);
+
+ const distributionClass = useMemo(() => {
+ switch (distribution) {
+ case "start":
+ return "justify-start";
+ case "center":
+ return "justify-center";
+ case "end":
+ return "justify-end";
+ case "spaceBetween":
+ return "justify-between";
+ case "spaceAround":
+ return "justify-around";
+ case "spaceEvenly":
+ return "justify-evenly";
+ default:
+ return "justify-start";
+ }
+ }, [distribution]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/renderers/react/src/components/layout/List.tsx b/renderers/react/src/components/layout/List.tsx
new file mode 100644
index 00000000..d928dbe9
--- /dev/null
+++ b/renderers/react/src/components/layout/List.tsx
@@ -0,0 +1,83 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, type ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+type ListDirection = "vertical" | "horizontal";
+type Alignment = "start" | "center" | "end" | "stretch";
+
+interface ListProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "List" };
+ children?: ReactNode;
+}
+
+export function List({ node, children }: ListProps) {
+ const theme = useTheme();
+
+ const properties = node.properties as {
+ direction?: ListDirection;
+ alignment?: Alignment;
+ };
+
+ const direction = properties.direction ?? "vertical";
+ const alignment = properties.alignment ?? "stretch";
+
+ const themeClasses = useMemo(() => {
+ return classMapToString(theme.components.List);
+ }, [theme]);
+
+ const directionClass = useMemo(() => {
+ return direction === "horizontal" ? "flex-row" : "flex-col";
+ }, [direction]);
+
+ const alignmentClass = useMemo(() => {
+ switch (alignment) {
+ case "start":
+ return "items-start";
+ case "center":
+ return "items-center";
+ case "end":
+ return "items-end";
+ case "stretch":
+ return "items-stretch";
+ default:
+ return "items-stretch";
+ }
+ }, [alignment]);
+
+ const overflowClass = useMemo(() => {
+ return direction === "horizontal"
+ ? "overflow-x-auto overflow-y-hidden"
+ : "overflow-y-auto overflow-x-hidden";
+ }, [direction]);
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/renderers/react/src/components/layout/Modal.tsx b/renderers/react/src/components/layout/Modal.tsx
new file mode 100644
index 00000000..ec30de00
--- /dev/null
+++ b/renderers/react/src/components/layout/Modal.tsx
@@ -0,0 +1,114 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useState, useMemo, useCallback, type ReactNode } from "react";
+import { X } from "lucide-react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface ModalProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Modal" };
+ renderChild?: (node: Types.AnyComponentNode) => ReactNode;
+}
+
+export function Modal({ node, renderChild }: ModalProps) {
+ const theme = useTheme();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const properties = node.properties as {
+ entryPointChild?: Types.AnyComponentNode;
+ contentChild?: Types.AnyComponentNode;
+ };
+
+ const entryPointChild = properties.entryPointChild;
+ const contentChild = properties.contentChild;
+
+ const backdropClasses = useMemo(() => {
+ return classMapToString(theme.components.Modal.backdrop);
+ }, [theme]);
+
+ const elementClasses = useMemo(() => {
+ return classMapToString(theme.components.Modal.element);
+ }, [theme]);
+
+ const handleOpen = useCallback(() => {
+ setIsOpen(true);
+ }, []);
+
+ const handleClose = useCallback(() => {
+ setIsOpen(false);
+ }, []);
+
+ const handleBackdropClick = useCallback(
+ (e: React.MouseEvent) => {
+ if (e.target === e.currentTarget) {
+ handleClose();
+ }
+ },
+ [handleClose]
+ );
+
+ React.useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape" && isOpen) {
+ handleClose();
+ }
+ };
+
+ document.addEventListener("keydown", handleEscape);
+ return () => document.removeEventListener("keydown", handleEscape);
+ }, [isOpen, handleClose]);
+
+ return (
+ <>
+ {entryPointChild && renderChild && (
+
+ {renderChild(entryPointChild)}
+
+ )}
+
+ {isOpen && (
+ <>
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/renderers/react/src/components/layout/Row.tsx b/renderers/react/src/components/layout/Row.tsx
new file mode 100644
index 00000000..8559716a
--- /dev/null
+++ b/renderers/react/src/components/layout/Row.tsx
@@ -0,0 +1,91 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useMemo, type ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+type Alignment = "start" | "center" | "end" | "stretch";
+type Distribution =
+ | "start"
+ | "center"
+ | "end"
+ | "spaceBetween"
+ | "spaceAround"
+ | "spaceEvenly";
+
+interface RowProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Row" };
+ children?: ReactNode;
+}
+
+export function Row({ node, children }: RowProps) {
+ const theme = useTheme();
+
+ const properties = node.properties as {
+ alignment?: Alignment;
+ distribution?: Distribution;
+ };
+
+ const alignment = properties.alignment ?? "stretch";
+ const distribution = properties.distribution ?? "start";
+
+ const themeClasses = useMemo(() => {
+ return classMapToString(theme.components.Row);
+ }, [theme]);
+
+ const alignmentClass = useMemo(() => {
+ switch (alignment) {
+ case "start":
+ return "items-start";
+ case "center":
+ return "items-center";
+ case "end":
+ return "items-end";
+ case "stretch":
+ return "items-stretch";
+ default:
+ return "items-stretch";
+ }
+ }, [alignment]);
+
+ const distributionClass = useMemo(() => {
+ switch (distribution) {
+ case "start":
+ return "justify-start";
+ case "center":
+ return "justify-center";
+ case "end":
+ return "justify-end";
+ case "spaceBetween":
+ return "justify-between";
+ case "spaceAround":
+ return "justify-around";
+ case "spaceEvenly":
+ return "justify-evenly";
+ default:
+ return "justify-start";
+ }
+ }, [distribution]);
+
+ return (
+
+ {contentChild && renderChild ? renderChild(contentChild) : null}
+
+
+ {children}
+
+ );
+}
diff --git a/renderers/react/src/components/layout/Tabs.tsx b/renderers/react/src/components/layout/Tabs.tsx
new file mode 100644
index 00000000..e9dfd8b4
--- /dev/null
+++ b/renderers/react/src/components/layout/Tabs.tsx
@@ -0,0 +1,92 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useState, useMemo, type ReactNode } from "react";
+import { Types } from "@a2ui/lit/0.8";
+import { useTheme } from "../../context/ThemeContext.js";
+import { cn, classMapToString } from "../../lib/utils.js";
+import type { A2UIComponentProps } from "../../types/index.js";
+
+interface TabItem {
+ title?: { literalString?: string; path?: string };
+ child?: Types.AnyComponentNode;
+}
+
+interface TabsProps extends A2UIComponentProps {
+ node: Types.AnyComponentNode & { type: "Tabs" };
+ renderChild?: (node: Types.AnyComponentNode) => ReactNode;
+}
+
+export function Tabs({ node, renderChild }: TabsProps) {
+ const theme = useTheme();
+ const [activeIndex, setActiveIndex] = useState(0);
+
+ const properties = node.properties as {
+ tabItems?: TabItem[];
+ };
+
+ const tabItems = properties.tabItems ?? [];
+
+ const containerClasses = useMemo(() => {
+ return classMapToString(theme.components.Tabs.container);
+ }, [theme]);
+
+ const controlsClasses = useMemo(() => {
+ return classMapToString(theme.components.Tabs.controls.all);
+ }, [theme]);
+
+ const selectedClasses = useMemo(() => {
+ return classMapToString(theme.components.Tabs.controls.selected);
+ }, [theme]);
+
+ if (tabItems.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {/* Tab controls */}
+
+ );
+}
diff --git a/renderers/react/src/components/layout/index.ts b/renderers/react/src/components/layout/index.ts
new file mode 100644
index 00000000..1300c919
--- /dev/null
+++ b/renderers/react/src/components/layout/index.ts
@@ -0,0 +1,22 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+export { Row } from "./Row.js";
+export { Column } from "./Column.js";
+export { List } from "./List.js";
+export { Card } from "./Card.js";
+export { Tabs } from "./Tabs.js";
+export { Modal } from "./Modal.js";
diff --git a/renderers/react/src/context/A2UIContext.test.tsx b/renderers/react/src/context/A2UIContext.test.tsx
new file mode 100644
index 00000000..38d615b4
--- /dev/null
+++ b/renderers/react/src/context/A2UIContext.test.tsx
@@ -0,0 +1,244 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import React from "react";
+import { A2UIProvider, useA2UIContext } from "./A2UIContext.js";
+import type { A2UIActionEvent } from "../types/index.js";
+
+// Wrapper component for testing hooks
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+
+ {tabItems.map((item, index) => {
+ const title = item.title?.literalString ?? `Tab ${index + 1}`;
+ const isSelected = index === activeIndex;
+
+ return (
+
+ );
+ })}
+
+
+ {/* Tab content */}
+
+ {tabItems[activeIndex]?.child && renderChild
+ ? renderChild(tabItems[activeIndex].child as Types.AnyComponentNode)
+ : null}
+
+
+
+ );
+}
+
+interface A2aChatCanvasWithUrlProps extends A2aChatCanvasProps {
+ agentCardUrl: string;
+ fetchImpl?: typeof fetch;
+ service?: never;
+}
+
+interface A2aChatCanvasWithServiceProps extends A2aChatCanvasProps {
+ service: A2AService;
+ agentCardUrl?: never;
+ fetchImpl?: never;
+}
+
+type A2aChatCanvasWithProviderProps = A2aChatCanvasWithUrlProps | A2aChatCanvasWithServiceProps;
+
+export function A2aChatCanvas(props: A2aChatCanvasWithProviderProps) {
+ const { emptyHistoryContent, messageDecorator, className } = props;
+ const innerProps = { emptyHistoryContent, messageDecorator, className };
+
+ if ("service" in props && props.service) {
+ return (
+
+
+ );
+}
diff --git a/samples/client/react/projects/a2a-chat-canvas/src/components/Chat.tsx b/samples/client/react/projects/a2a-chat-canvas/src/components/Chat.tsx
new file mode 100644
index 00000000..04af5286
--- /dev/null
+++ b/samples/client/react/projects/a2a-chat-canvas/src/components/Chat.tsx
@@ -0,0 +1,46 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from "react";
+import { ChatHistory } from "./ChatHistory";
+import { InputArea } from "./InputArea";
+import { MessageDecoratorProps } from "../types";
+
+interface ChatProps {
+ emptyHistoryContent?: React.ReactNode;
+ messageDecorator?: React.ComponentType
+
+
+
+
+
+
+ );
+}
diff --git a/samples/client/react/projects/a2a-chat-canvas/src/components/ChatHistory.tsx b/samples/client/react/projects/a2a-chat-canvas/src/components/ChatHistory.tsx
new file mode 100644
index 00000000..1a17c096
--- /dev/null
+++ b/samples/client/react/projects/a2a-chat-canvas/src/components/ChatHistory.tsx
@@ -0,0 +1,69 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import { useRef, useEffect } from "react";
+import type React from "react";
+import { useChatContext } from "../context/ChatContext";
+import { Message } from "./Message";
+import { MessageDecoratorProps } from "../types";
+
+interface ChatHistoryProps {
+ emptyContent?: React.ReactNode;
+ messageDecorator?: React.ComponentType
+ {emptyContent || (
+
+ );
+ }
+
+ return (
+
+
+ )}
+ No messages yet. Start a conversation!
+
+ {chat.history.map((message) => (
+
+ );
+}
diff --git a/samples/client/react/projects/a2a-chat-canvas/src/components/InputArea.tsx b/samples/client/react/projects/a2a-chat-canvas/src/components/InputArea.tsx
new file mode 100644
index 00000000..c7b15d25
--- /dev/null
+++ b/samples/client/react/projects/a2a-chat-canvas/src/components/InputArea.tsx
@@ -0,0 +1,116 @@
+/*
+ Copyright 2025 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React, { useState, useCallback, useRef, KeyboardEvent } from "react";
+import { useChatContext } from "../context/ChatContext";
+
+interface InputAreaProps {
+ className?: string;
+}
+
+/**
+ * Input area component for the chat interface.
+ */
+export function InputArea({ className }: InputAreaProps) {
+ const { chat } = useChatContext();
+ const [value, setValue] = useState("");
+ const textareaRef = useRef