diff --git a/packages/ai/cypress/specs/Input.cy.tsx b/packages/ai/cypress/specs/Input.cy.tsx
new file mode 100644
index 000000000000..48b4325ad1f5
--- /dev/null
+++ b/packages/ai/cypress/specs/Input.cy.tsx
@@ -0,0 +1,839 @@
+import AIInput from "../../src/Input.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import "@ui5/webcomponents-icons/dist/ai.js";
+import "@ui5/webcomponents-icons/dist/stop.js";
+import { VERSIONING_NEXT_BUTTON_TOOLTIP, VERSIONING_PREVIOUS_BUTTON_TOOLTIP, INPUT_WRITING_ASSISTANT_LABEL } from "../../src/generated/i18n/i18n-defaults.js";
+import Input from "../../src/Input.js";
+
+describe("Basic", () => {
+    describe("Initialization", () => {
+        it("should render with default properties", () => {
+            cy.mount(<AIInput />);
+
+            cy.get("[ui5-ai-input]")
+                .as("input")
+                .should("exist")
+                .should("have.prop", "loading", false)
+                .should("have.prop", "currentVersion", 0)
+                .should("have.prop", "totalVersions", 0);
+        });
+
+        it("should set initial value as a property", () => {
+            cy.mount(<AIInput value="AI initial value" />);
+
+            cy.get("[ui5-ai-input]")
+                .should("have.prop", "value", "AI initial value");
+        });
+    });
+
+    describe("Loading States", () => {
+        it("should display non-loading state correctly", () => {
+            cy.mount(<AIInput loading={false} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-busy-indicator]")
+                .should("not.have.attr", "active");
+        });
+
+        it("should display loading state correctly", () => {
+            cy.mount(
+                <AIInput
+                    loading={true}
+                    value="Generating content..."
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-busy-indicator]")
+                .should("have.attr", "active");
+        });
+
+        it("should display single result correctly", () => {
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    value="Generated text"
+                    currentVersion={1}
+                    totalVersions={1}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .should("have.prop", "loading", false)
+                .should("have.prop", "value", "Generated text")
+                .should("have.prop", "currentVersion", 1)
+                .should("have.prop", "totalVersions", 1);
+        });
+
+        it("should display multiple results correctly", () => {
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    value="Generated text"
+                    currentVersion={2}
+                    totalVersions={3}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .should("have.prop", "loading", false)
+                .should("have.prop", "value", "Generated text")
+                .should("have.prop", "currentVersion", 2)
+                .should("have.prop", "totalVersions", 3);
+        });
+    });
+
+    describe("Version Navigation", () => {
+        it("should fire version-change event with backwards=true for previous version", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    currentVersion={2}
+                    totalVersions={3}
+                    onVersionChange={onVersionChange}>
+                </AIInput>
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .realClick();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[ui5-menu]')
+                .as("menu");
+
+            cy.get("@menu")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .realClick();
+
+            cy.get("@onVersionChange")
+                .should("have.been.calledOnce")
+                .its("firstCall.args.0.detail")
+                .should("deep.equal", {
+                    backwards: true
+                });
+        });
+
+        it("should fire version-change event with backwards=false for next version", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    currentVersion={2}
+                    totalVersions={3}
+                    onVersionChange={onVersionChange}>
+                </AIInput>
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .realClick();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[ui5-menu]')
+                .as("menu");
+
+            cy.get("@menu")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .realClick();
+
+            cy.get("@onVersionChange")
+                .should("have.been.calledOnce")
+                .its("firstCall.args.0.detail")
+                .should("deep.equal", {
+                    backwards: false,
+                });
+        });
+
+        it("should disable previous button when at first version", () => {
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    currentVersion={1}
+                    totalVersions={3}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("have.attr", "disabled");
+        });
+
+        it("should disable next button when at last version", () => {
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    currentVersion={3}
+                    totalVersions={3}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .should("have.attr", "disabled");
+        });
+
+        it("should sync input content after version navigation", () => {
+            const initialValue = "Version 1 content";
+            const newValue = "Version 2 content";
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    value={initialValue}
+                    loading={false}
+                    currentVersion={1}
+                    totalVersions={2}
+                    onVersionChange={onVersionChange}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .as("input")
+                .then($input => {
+                    $input[0].addEventListener("version-change", () => {
+                        const input = $input[0] as Input;
+                        input.value = newValue;
+                    });
+                });
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[ui5-menu]')
+                .as("menu");
+
+            cy.get("@menu")
+                .ui5MenuOpen();
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .realClick();
+
+            cy.get("@onVersionChange")
+                .should("have.been.calledOnce");
+
+            cy.get("@input")
+                .shadow()
+                .find("input")
+                .should("have.value", newValue);
+        });
+    });
+
+    describe("Menu Integration", () => {
+        it("should open menu when AI Icon is clicked", () => {
+            cy.mount(
+                <AIInput>
+                    <MenuItem slot={"actions"} text="Generate text" />
+                </AIInput>
+            );
+
+            cy.get("[ui5-ai-input]")
+                .realClick();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-icon]")
+                .realClick();
+
+            cy.get("[ui5-ai-input")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpened();
+        });
+    });
+
+    describe("Stop Generation", () => {
+        it("should fire stop-generation event", () => {
+            const onStopGeneration = cy.spy().as("onStopGeneration");
+
+            cy.mount(
+                <AIInput
+                    loading={true}
+                    onStopGeneration={onStopGeneration}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .realClick();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-icon]")
+                .realClick();
+
+            cy.get("@onStopGeneration").should("have.been.calledOnce");
+        });
+    });
+
+    describe("Keyboard Shortcuts", () => {
+        it("should handle Shift+F4 to open menu", () => {
+            cy.mount(
+                <AIInput>
+                    <MenuItem slot="actions" text="Generate"></MenuItem>
+                </AIInput>
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .focus()
+                .realPress(['Shift', 'F4']);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpened();
+        });
+
+        it("should handle Ctrl+Shift+Z for previous version when multiple versions exist", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    currentVersion={2}
+                    totalVersions={3}
+                    onVersionChange={onVersionChange}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .focus()
+                .realPress(['Control', 'Shift', 'Z']);
+
+            cy.get("@onVersionChange")
+                .should("have.been.calledOnce")
+                .its("firstCall.args.0.detail")
+                .should("deep.equal", {
+                    backwards: true
+                });
+        });
+
+        it("should handle Ctrl+Shift+Y for next version when multiple versions exist", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    loading={false}
+                    currentVersion={2}
+                    totalVersions={3}
+                    onVersionChange={onVersionChange}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .focus()
+                .realPress(['Control', 'Shift', 'Y']);
+
+            cy.get("@onVersionChange")
+                .should("have.been.calledOnce")
+                .its("firstCall.args.0.detail")
+                .should("deep.equal", {
+                    backwards: false
+                });
+        });
+    });
+
+    describe("Busy State", () => {
+        it("should show busy indicator when loading", () => {
+            cy.mount(<AIInput loading={true} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-busy-indicator]")
+                .should("have.attr", "active");
+        });
+
+        it("should hide busy indicator when not loading", () => {
+            cy.mount(<AIInput loading={false} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("ui5-busy-indicator")
+                .should("not.have.attr", "active");
+        });
+    });
+});
+
+describe("Versioning Menu Item", () => {
+    describe("Initialization", () => {
+        it("should render with current step and total steps as text", () => {
+            cy.mount(
+                <AIInput
+                    currentVersion={2}
+                    totalVersions={3} />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input")
+                .shadow()
+                .find("[ui5-menu-item]")
+                .as("menuItemVersioning");
+            cy.get("@menuItemVersioning")
+                .should("exist")
+                .should("have.attr", "text", "2 / 3");
+        });
+    });
+
+    describe("Navigation Buttons", () => {
+        it("should enable both buttons when in middle steps", () => {
+            cy.mount(<AIInput currentVersion={2} totalVersions={4} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input")
+                .shadow()
+                .find("[ui5-menu-item]")
+                .as("menuItemVersioning");
+
+            cy.get("@menuItemVersioning")
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("not.have.attr", "disabled");
+
+            cy.get("@menuItemVersioning")
+                .find('[data-ui5-versioning-button="next"]')
+                .should("not.have.attr", "disabled");
+        });
+
+        it("should have proper icons", () => {
+            cy.mount(<AIInput currentVersion={2} totalVersions={4} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input")
+                .shadow()
+                .find("[ui5-menu-item]")
+                .as("menuItemVersioning");
+
+            cy.get("@menuItemVersioning")
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("have.attr", "icon", "navigation-left-arrow");
+
+            cy.get("@menuItemVersioning")
+                .find('[data-ui5-versioning-button="next"]')
+                .should("have.attr", "icon", "navigation-right-arrow");
+        });
+
+        it("should not fire events when buttons are disabled", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    currentVersion={1}
+                    totalVersions={2}
+                    onVersionChange={onVersionChange}
+                />
+            );
+
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .as("previousButton")
+                .should("have.attr", "disabled");
+
+            cy.get("@previousButton")
+                .realClick();
+
+            cy.get("@onVersionChange").should("not.have.been.called");
+        });
+
+        it("should handle multiple rapid clicks gracefully", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    currentVersion={2}
+                    totalVersions={5}
+                    onVersionChange={onVersionChange}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .realClick()
+                .realClick()
+                .realClick();
+
+            cy.get("@onVersionChange").should("have.callCount", 3);
+
+            // Verify all calls were for next (backwards: false)
+            cy.get("@onVersionChange").should((spy) => {
+                expect(spy).to.have.been.calledWith(Cypress.sinon.match.has("detail", { backwards: false }));
+            });
+        });
+    })
+
+    describe("Focus Management", () => {
+        it("should manage focus when reaching boundaries", () => {
+            const onVersionChange = cy.spy().as("onVersionChange");
+
+            cy.mount(
+                <AIInput
+                    currentVersion={2}
+                    totalVersions={3}
+                    onVersionChange={onVersionChange}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .as("input");
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            // Test that buttons respond correctly when reaching boundaries
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .as("nextButton")
+                .should("not.have.attr", "disabled");
+
+            cy.get("@nextButton").realClick();
+
+            cy.get("@onVersionChange").should("have.been.calledOnce");
+
+            // Simulate reaching the last step - next button should be disabled
+            cy.get("@input").invoke("prop", "currentVersion", 3);
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .should("have.attr", "disabled");
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .as("previousButton")
+                .should("not.have.attr", "disabled");
+
+            cy.get("@previousButton").realClick();
+
+            cy.get("@onVersionChange").should("have.been.calledTwice");
+
+            // Simulate reaching the first step - previous button should be disabled
+            cy.get("@input").invoke("prop", "currentVersion", 1);
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("have.attr", "disabled");
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .should("not.have.attr", "disabled");
+        });
+
+        it("should not change focus when buttons remain enabled", () => {
+            cy.mount(<AIInput currentVersion={3} totalVersions={5} />);
+
+            cy.get("[ui5-ai-input]")
+                .as("input");
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .realClick();
+
+            // Simulate property change without reaching boundary
+            cy.get("@input").invoke("prop", "currentVersion", 4);
+
+            // The button should still exist and be enabled
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("not.have.attr", "disabled");
+        });
+    });
+
+    describe("Step Display", () => {
+        it("should update display when properties change", () => {
+            cy.mount(<AIInput currentVersion={1} totalVersions={2} />);
+
+            cy.get("[ui5-ai-input]")
+                .as("input")
+                .invoke("prop", "currentVersion", 2)
+                .invoke("prop", "totalVersions", 4);
+
+            cy.get("@input")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("@input")
+                .shadow()
+                .find("[ui5-menu-item]")
+                .should("have.attr", "text", "2 / 4");
+        });
+
+        it("should handle large numbers correctly", () => {
+            cy.mount(<AIInput currentVersion={999} totalVersions={1000} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-menu-item]")
+                .should("have.attr", "text", "999 / 1000");
+        });
+    });
+
+    describe("Button State Transitions", () => {
+        it("should handle rapid property changes", () => {
+            cy.mount(<AIInput currentVersion={1} totalVersions={5} />);
+
+            cy.get("[ui5-ai-input]")
+                .as("input");
+
+            // Rapidly change properties
+            for (let i = 1; i <= 5; i++) {
+                cy.get("@input").invoke("prop", "currentVersion", i);
+            }
+
+            cy.get("@input")
+                .shadow()
+                .find("[ui5-menu]")
+                .ui5MenuOpen();
+
+            cy.get("@input")
+                .shadow()
+                .find("[ui5-menu-item]")
+                .should("have.attr", "text", "5 / 5");
+
+            cy.get("@input")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .should("have.attr", "disabled");
+        });
+    });
+
+    describe("Accessibility", () => {
+        it("should support keyboard navigation", () => {
+            cy.mount(
+                <AIInput
+                    currentVersion={2}
+                    totalVersions={3}
+                    onVersionChange={cy.spy().as("onVersionChange")}
+                />
+            );
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("input")
+                .realClick()
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find("[ui5-icon]")
+                .realClick();
+
+            // Test that buttons are clickable (simulating keyboard activation)
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .as("previousButton");
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .as("nextButton");
+
+            cy.realPress("ArrowDown")
+              .realPress("ArrowRight")
+              .realPress("Enter");
+
+            cy.get("@onVersionChange").should("have.been.calledOnce");
+
+            cy.realPress("ArrowRight");
+            cy.realPress("Enter");
+
+            cy.get("@onVersionChange").should("have.been.calledTwice");
+        });
+
+        it("should have proper ARIA attributes", () => {
+            cy.mount(<AIInput currentVersion={2} totalVersions={4} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("have.attr", "design", "Transparent");
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .should("have.attr", "design", "Transparent");
+        });
+
+
+        it("should have translatable previous button tooltip", () => {
+            cy.mount(<AIInput currentVersion={2} totalVersions={3} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="previous"]')
+                .should("have.attr", "tooltip", VERSIONING_PREVIOUS_BUTTON_TOOLTIP.defaultText);
+        });
+
+        it("should have translatable next button tooltip", () => {
+            cy.mount(<AIInput currentVersion={2} totalVersions={3} />);
+
+            cy.get("[ui5-ai-input]")
+                .shadow()
+                .find('[data-ui5-versioning-button="next"]')
+                .should("have.attr", "tooltip", VERSIONING_NEXT_BUTTON_TOOLTIP.defaultText);
+        });
+    });
+});
+
+describe("Writing Assistant Input Icon", () => {
+    it("should not be visible when input is not focused", () => {
+        cy.mount(<AIInput />);
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("[ui5-icon]")
+            .should("not.be.visible");
+    })
+    it("should render AI Icon on focus", () => {
+        cy.mount(<AIInput />);
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("input")
+            .focus();
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("[ui5-icon]")
+            .should("be.visible")
+            .and("have.prop", "name", "ai");
+    });
+    it("should show generating state when loading", () => {
+        cy.mount(<AIInput loading={true} />);
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("[ui5-icon]")
+            .should("have.prop", "name", "stop");
+    });
+    it("should fire icon-click event when clicked in non-loading state", () => {
+        cy.mount(
+            <AIInput
+                loading={false}
+                onButtonClick={cy.stub().as("onButtonClick")}
+            />
+        );
+
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("input")
+            .focus();
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("[ui5-icon]")
+            .realClick();
+
+        cy.get("@onButtonClick")
+            .should("have.been.calledOnce");
+    });
+
+    it("should fire stop-generation event when clicked in loading state", () => {
+        cy.mount(
+            <AIInput
+                loading={true}
+                onStopGeneration={cy.spy().as("onStopGeneration")}
+            />
+        );
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("input")
+            .focus();
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find("[ui5-icon]")
+            .realClick();
+
+        cy.get("@onStopGeneration").should("have.been.calledOnce");
+    });
+
+    it("should have proper ariaKeyShortcuts accessibility attribute", () => {
+        cy.mount(<AIInput />);
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find(".ui5-input-ai-icon")
+            .should("have.attr", "aria-keyshortcuts", "Shift + F4");
+    });
+
+    it("should have correct aria-label attribute", () => {
+        cy.mount(<AIInput />);
+
+        cy.get("[ui5-ai-input]")
+            .shadow()
+            .find(".ui5-input-ai-icon")
+            .should("have.attr", "aria-label", INPUT_WRITING_ASSISTANT_LABEL.defaultText);
+    });
+})
+
diff --git a/packages/ai/src/Input.ts b/packages/ai/src/Input.ts
new file mode 100644
index 000000000000..bd9482ff7450
--- /dev/null
+++ b/packages/ai/src/Input.ts
@@ -0,0 +1,259 @@
+import { customElement, property, slot } from "@ui5/webcomponents-base";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import BaseInput from "@ui5/webcomponents/dist/Input.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type Menu from "@ui5/webcomponents/dist/Menu.js";
+import type Button from "./Button.js";
+
+// styles
+import AIInputCss from "./generated/themes/Input.css.js";
+import InputCss from "@ui5/webcomponents/dist/generated/themes/Input.css.js";
+import ResponsivePopoverCommonCss from "@ui5/webcomponents/dist/generated/themes/ResponsivePopoverCommon.css.js";
+import ValueStateMessageCss from "@ui5/webcomponents/dist/generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "@ui5/webcomponents/dist/generated/themes/Suggestions.css.js";
+
+// templates
+import InputTemplate from "./InputTemplate.js";
+import {
+	VERSIONING_NEXT_BUTTON_TEXT,
+	VERSIONING_PREVIOUS_BUTTON_TEXT,
+	INPUT_WRITING_ASSISTANT_LABEL,
+	WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT,
+} from "./generated/i18n/i18n-defaults.js";
+
+@customElement({
+	tag: "ui5-ai-input",
+	languageAware: true,
+	renderer: jsxRenderer,
+	template: InputTemplate,
+	styles: [
+		AIInputCss,
+		InputCss,
+		ResponsivePopoverCommonCss,
+		ValueStateMessageCss,
+		SuggestionsCss,
+	],
+})
+
+/**
+ * Fired when the user clicks on the AI button.
+ * @public
+ */
+@event("button-click", {
+	cancelable: true,
+})
+
+/**
+ * Fired when the user clicks on the "Stop" button to stop ongoing AI text generation.
+ * @public
+ */
+@event("stop-generation")
+
+/**
+ * Fired when the user clicks on version navigation buttons.
+ *
+ * @param {boolean} backwards - Indicates if navigation is backwards (true) or forwards (false, default)
+ * @public
+ */
+@event("version-change")
+
+class Input extends BaseInput {
+	eventDetails!: BaseInput["eventDetails"] & {
+		"version-change": {
+			backwards: boolean;
+		};
+		"stop-generation": object;
+		"button-click": object;
+	};
+
+	/**
+	 * Indicates the index of the currently displayed version.
+	 *
+	 * @default 0
+	 */
+	@property({ type: Number })
+	currentVersion = 0;
+
+	/**
+	 * Indicates the total number of result versions available.
+	 *
+	 * When not set or `0`, versioning UI will be hidden.
+	 *
+	 * @default 0
+	 * @public
+	 */
+	@property({ type: Number })
+	totalVersions = 0;
+
+	/**
+	 * Defines whether the AI Writing Assistant is currently loading.
+	 *
+	 * When `true`, indicates that an AI action is in progress.
+	 *
+	 * @default false
+	 */
+	@property({ type: Boolean })
+	loading: boolean = false;
+
+	/**
+	 * Indicates if the menu is open.
+	 * @default 0
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_isMenuOpen: boolean = false;
+
+	/**
+	 * Defines the items of the menu for the component.
+	 * @public
+	 */
+	@slot({
+		type: HTMLElement,
+		invalidateOnChildChange: true,
+	})
+	actions!: Array<HTMLElement>;
+
+	_previousCurrentStep = 0;
+	_previousTotalSteps = 0;
+	isFocused: boolean = false;
+
+	_onfocusin(e: FocusEvent): void {
+		super._onfocusin(e);
+		this.isFocused = true;
+	}
+
+	_onfocusout(e: FocusEvent): void {
+		super._onfocusout(e);
+		this.isFocused = false;
+	}
+
+	/**
+	 * Manages focus when navigation buttons become disabled/enabled.
+	 * Automatically moves focus to available button when user reaches boundaries.
+	 * @private
+	 */
+	_manageVersionButtonsFocus() {
+		const previousButton = this.shadowRoot?.querySelectorAll("ui5-button")[0] as Button;
+		const nextButton = this.shadowRoot?.querySelectorAll("ui5-button")[1] as Button;
+		const isPreviousDisabled = this.currentVersion <= 1;
+		const isNextDisabled = this.currentVersion >= this.totalVersions;
+
+		if (isPreviousDisabled && previousButton) {
+			setTimeout(() => {
+				nextButton.focus();
+			}, 0);
+		} else if (isNextDisabled && nextButton) {
+			setTimeout(() => {
+				previousButton.focus();
+			}, 0);
+		}
+	}
+
+	/**
+	 * Handles the click event for the AI generate icon.
+	 * Fires the appropriate event based on the AI icon state.
+	 * @private
+	 */
+	_handleAIIconClick(e: Event) {
+		const target = e.target as HTMLElement & { name?: string };
+		if (target?.name === "stop") {
+			this.fireDecoratorEvent("stop-generation");
+		} else {
+			const opener = this.shadowRoot?.querySelector(".ui5-input-ai-icon") as HTMLElement;
+			this.fireDecoratorEvent("button-click");
+			this.menu.opener = opener;
+			this.menu.open = true;
+			this.menu.horizontalAlign = "End";
+		}
+	}
+
+	/**
+	 * Handles the version change event from the versioning component.
+	 *
+	 * @param {CustomEvent} e - The version change event
+	 */
+	_handleVersionChange(e: CustomEvent<{ backwards: boolean }>) {
+		this.fireDecoratorEvent("version-change", {
+			backwards: e.detail.backwards,
+		});
+		this._manageVersionButtonsFocus();
+	}
+
+	/**
+	 * Handles the click event for the "Previous Version" button.
+	 * Updates the current version index and syncs content.
+	 * @private
+	 */
+	_handlePreviousButtonClick(): void {
+		this._handleVersionChange(new CustomEvent("version-change", { detail: { backwards: true } }));
+	}
+
+	/**
+	 * Handles the click event for the "Next Version" button.
+	 * Updates the current version index and syncs content.
+	 * @private
+	 */
+	_handleNextButtonClick(): void {
+		this._handleVersionChange(new CustomEvent("version-change", { detail: { backwards: false } }));
+	}
+
+	_onMenuIconClick(): void {
+		this.menu?.addEventListener("item-click", (e: Event) => {
+			const customEvent = e as CustomEvent;
+			this.dispatchEvent(new CustomEvent("item-click", {
+				detail: customEvent.detail,
+				bubbles: true,
+				composed: true,
+			}));
+		});
+	}
+
+	/**
+	 * Handles keydown events for keyboard shortcuts.
+	 * @private
+	 */
+	_onkeydown(e: KeyboardEvent): void {
+		super._onkeydown(e);
+		this.menu.opener = this.shadowRoot?.querySelector(".ui5-input-ai-icon") as HTMLElement;
+
+		if (e.key === "F4" && e.shiftKey) {
+			e.preventDefault();
+			this.menu.open = true;
+			this.menu.horizontalAlign = "End";
+		}
+		const goPreviousStep = e.key === "Z" && e.shiftKey && e.ctrlKey;
+		const goNextStep = e.key === "Y" && e.shiftKey && e.ctrlKey;
+
+		if (goPreviousStep) {
+			e.preventDefault();
+			this._handlePreviousButtonClick();
+		} else if (goNextStep) {
+			e.preventDefault();
+			this._handleNextButtonClick();
+		}
+	}
+
+	get ariaLabel() {
+		return this.accessibleName || !this.loading ? Input.i18nBundle.getText(INPUT_WRITING_ASSISTANT_LABEL) : Input.i18nBundle.getText(WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT);
+	}
+
+	get stopGeneratingTooltip() {
+		return Input.i18nBundle.getText(WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT);
+	}
+
+	get nextButtonAccessibleName() {
+		return Input.i18nBundle.getText(VERSIONING_NEXT_BUTTON_TEXT);
+	}
+
+	get previousButtonAccessibleName() {
+		return Input.i18nBundle.getText(VERSIONING_PREVIOUS_BUTTON_TEXT);
+	}
+
+	get menu() {
+		return this.shadowRoot?.querySelector("ui5-menu") as Menu;
+	}
+}
+
+Input.define();
+
+export default Input;
diff --git a/packages/ai/src/InputTemplate.tsx b/packages/ai/src/InputTemplate.tsx
new file mode 100644
index 000000000000..228af33512bf
--- /dev/null
+++ b/packages/ai/src/InputTemplate.tsx
@@ -0,0 +1,207 @@
+import type Input from "./Input.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import InputPopoverTemplate from "@ui5/webcomponents/dist/InputPopoverTemplate.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base";
+
+type TemplateHook = () => JsxTemplateResult;
+
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+	const suggestionsList = hooks?.suggestionsList;
+	const preContent = hooks?.preContent || defaultPreContent;
+	const postContent = hooks?.postContent || defaultPostContent;
+	return (
+		<>
+			<div
+				class={`ui5-ai-input-root ui5-input-focusable-element ${this.loading && "ui5-ai-input-busy"}`}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-input-content">
+					<BusyIndicator
+						id={`${this._id}-busyIndicator`}
+						active={this.loading}
+						class="ui5-input-busy-indicator"
+					>
+
+						<div
+							class="ui5-input-root"
+							part="root"
+						>
+							<div class="ui5-input-content">
+								{preContent.call(this)}
+
+								<input
+									id="inner"
+									part="input"
+									class="ui5-input-inner"
+									style={this.styles.innerInput}
+									type={this.inputNativeType}
+									inner-input
+									inner-input-with-icon={!!this.icon.length}
+									disabled={this.disabled}
+									readonly={this._readonly}
+									value={this._innerValue}
+									placeholder={this._placeholder}
+									maxlength={this.maxlength}
+									role={this.accInfo.role}
+									enterkeyhint={this.hint}
+									aria-controls={this.accInfo.ariaControls}
+									aria-invalid={this.accInfo.ariaInvalid}
+									aria-haspopup={this.accInfo.ariaHasPopup}
+									aria-describedby={this.accInfo.ariaDescribedBy}
+									aria-roledescription={this.accInfo.ariaRoledescription}
+									aria-autocomplete={this.accInfo.ariaAutoComplete}
+									aria-expanded={this.accInfo.ariaExpanded}
+									aria-label={this.ariaLabel}
+									aria-required={this.required}
+									autocomplete="off"
+									data-sap-focus-ref
+									step={this.nativeInputAttributes.step}
+									min={this.nativeInputAttributes.min}
+									max={this.nativeInputAttributes.max}
+									onInput={this._handleNativeInput}
+									onChange={this._handleChange}
+									onSelect={this._handleSelect}
+									onKeyDown={this._onkeydown}
+									onKeyUp={this._onkeyup}
+									onClick={this._click}
+									onFocusIn={this.innerFocusIn}
+								/>
+
+								{this._effectiveShowClearIcon &&
+									<div
+										tabindex={-1}
+										part="clear-icon-wrapper"
+										class="ui5-input-clear-icon-wrapper inputIcon"
+										onClick={this._clear}
+										onMouseDown={this._iconMouseDown}
+									>
+										<Icon
+											part="clear-icon"
+											class="ui5-input-clear-icon"
+											name={"decline"}
+											tabindex={-1}
+											accessibleName={this.clearIconAccessibleName}>
+										</Icon>
+									</div>
+								}
+
+								{this.icon.length > 0 &&
+									<div class="ui5-input-icon-root"
+										tabindex={-1}
+									>
+										<slot name="icon"></slot>
+									</div>
+								}
+
+								<div class="ui5-input-value-state-icon">
+									{this._valueStateInputIcon}
+								</div>
+								{ postContent.call(this) }
+								{this._effectiveShowSuggestions &&
+									<>
+										<span id="suggestionsText" class="ui5-hidden-text">{this.suggestionsText}</span>
+										<span id="selectionText" class="ui5-hidden-text" aria-live="polite" role="status"></span>
+										<span id="suggestionsCount" class="ui5-hidden-text" aria-live="polite">{this.availableSuggestionsCount}</span>
+									</>
+								}
+
+								{this.accInfo.ariaDescription &&
+									<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
+								}
+
+								{this.accInfo.accessibleDescription &&
+									<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
+								}
+
+								{this.linksInAriaValueStateHiddenText.length > 0 &&
+									<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.valueStateLinksShortcutsTextAcc}</span>
+								}
+
+								{this.hasValueState &&
+									<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+								}
+							</div>
+						</div>
+
+					</BusyIndicator>
+					<div
+						 hidden={!this.isFocused || this.readonly}
+						 class={`ui5-input-ai-icon ui5-ai-input-icon-wrapper ${this._isMenuOpen && "ui5-input-icon-menu-open"} ${this.loading && "ui5-ai-input-loading"}`}
+						 tabIndex={-1}
+						 title={ this.loading ? this.stopGeneratingTooltip : this.ariaLabel}
+						 aria-keyshortcuts={ this.loading ? "Esc" : "Shift + F4" }
+						 aria-haspopup={this.loading ? "false" : "menu"}
+						 onClick={this._handleAIIconClick}
+						 aria-label={this.ariaLabel}
+						 >
+						<Icon
+							id="ai-menu-icon"
+							class={"ui5-ai-input-icon"}
+							name={this.loading ? "stop" : "ai"}
+						/>
+					</div>
+					<Menu
+						onItemClick={this._onMenuIconClick}
+						onBeforeOpen={() => { this._isMenuOpen = true; }}
+						onBeforeClose={() => { this._isMenuOpen = false; }}
+					>
+						<slot name="actions"></slot>
+						{this.totalVersions > 1 && Versioning.call(this)}
+					</Menu>
+				</div>
+			</div>
+			{InputPopoverTemplate.call(this, { suggestionsList })}
+		</>
+	);
+}
+
+function Versioning(this: Input) {
+	return (
+		<>
+			<MenuItem
+				type="Inactive"
+				class="ui5-ai-versioning-menu-footer"
+				text={`${this.currentVersion} / ${this.totalVersions}`}
+			>
+				<Button
+					id="arrow-left"
+					class="versioning-button"
+					slot="endContent"
+					design="Transparent"
+					icon="navigation-left-arrow"
+					tooltip={this.previousButtonAccessibleName}
+					accessibleName={this.previousButtonAccessibleName}
+					aria-keyshortcut="Shift+Ctrl+Z"
+					disabled={this.currentVersion <= 1}
+					onClick={this._handlePreviousButtonClick}
+					data-ui5-versioning-button="previous"
+				>
+				</Button>
+				<Button
+					id="arrow-right"
+					class="versioning-button"
+					slot="endContent"
+					design="Transparent"
+					icon="navigation-right-arrow"
+					tooltip={this.nextButtonAccessibleName}
+					accessibleName={this.nextButtonAccessibleName}
+					aria-keyshortcut="Shift+Ctrl+Y"
+					disabled={this.currentVersion >= this.totalVersions}
+					onClick={this._handleNextButtonClick}
+					data-ui5-versioning-button="next"
+				/>
+			</MenuItem>
+		</>
+	);
+}
+
+function defaultPreContent() { }
+
+function defaultPostContent() {}
diff --git a/packages/ai/src/bundle.esm.ts b/packages/ai/src/bundle.esm.ts
index 158da279831e..fa967cc1f311 100644
--- a/packages/ai/src/bundle.esm.ts
+++ b/packages/ai/src/bundle.esm.ts
@@ -8,5 +8,6 @@ import Button from "./Button.js";
 import ButtonState from "./ButtonState.js";
 import PromptInput from "./PromptInput.js";
 import AITextArea from "./TextArea.js";
+import Input from "./Input.js";
 
 export default testAssets;
diff --git a/packages/ai/src/i18n/messagebundle.properties b/packages/ai/src/i18n/messagebundle.properties
index a62c708da7e4..925685b925ab 100644
--- a/packages/ai/src/i18n/messagebundle.properties
+++ b/packages/ai/src/i18n/messagebundle.properties
@@ -13,6 +13,9 @@ BUTTON_TOOLTIP_TEXT={0} with Artificial Intelligence
 #XFLD: Text for the aria-label attribute of the Writing Assistant toolbar
 WRITING_ASSISTANT_LABEL=AI Writing Assistant Toolbar Shift + F4
 
+#XFLD: Text for the aria-label attribute of the Input with Writing Assistant
+INPUT_WRITING_ASSISTANT_LABEL= Input with AI Writing Assistant Shift + F4
+
 #XFLD: Previous version button accessible name
 VERSIONING_PREVIOUS_BUTTON_TEXT=Previous Version
 
diff --git a/packages/ai/src/themes/Input.css b/packages/ai/src/themes/Input.css
new file mode 100644
index 000000000000..5555324c20fb
--- /dev/null
+++ b/packages/ai/src/themes/Input.css
@@ -0,0 +1,86 @@
+/* root*/
+.ui5-ai-input-root {
+	width: 100%;
+	height: 100%;
+	border-right: none;
+}
+
+:host([focused]:not([opened])[_is-menu-open]) .ui5-ai-input-root:hover {
+	border-radius: var(--_ui5_input_border_radius);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+:host([focused]:not([opened])[_is-menu-open]) .ui5-input-focusable-element::after {
+	border: var(--_ui5-input-border);
+}
+
+.ui5-input-busy-indicator {
+	flex: 1;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-sizing: border-box;
+	display: block;
+}
+
+.ui5-ai-input-busy .ui5-ai-input-icon-wrapper {
+	background-color: inherit;
+	border: none;
+}
+
+/* ai icon */
+.ui5-ai-input-icon {
+    cursor: pointer;
+    color: var(--sapButton_Selected_TextColor);
+    border: none;
+}
+
+.ui5-ai-input-icon-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: var(--_ui5_input_icon_width);
+	min-width: var(--_ui5_input_icon_width);
+	height: var(--_ui5_input_icon_wrapper_height);
+	padding: 0;
+	box-sizing: border-box;
+	border-radius: var(--_ui5_input_border_radius);
+	cursor: pointer;
+	color: var(--sapButton_Selected_TextColor);
+	border: none;
+}
+
+/* Hidden state */
+.ui5-input-ai-icon[hidden] {
+	display: none;
+}
+
+/* Active / Open / Loading states */
+.ui5-ai-input-icon-wrapper.ui5-input-icon-menu-open,
+.ui5-ai-input-icon-wrapper:active {
+	background-color: var(--sapButton_Selected_Background);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+/* Hover state */
+.ui5-ai-input-icon-wrapper:not(.ui5-input-icon-menu-open):not(.ui5-ai-input-loading):not(:active):hover,
+.ui5-ai-input-icon-wrapper.ui5-ai-input-loading:hover {
+	background-color: var(--sapButton_Hover_Background);
+	border: 1px solid var(--sapButton_Hover_BorderColor);
+	box-shadow: inset 0 0 0 0.0625rem var(--sapContent_Neutral_Shadow);
+}
+
+/* menu & versioning */
+
+.ui5-input-icon-menu-open {
+	background-color: var(--sapButton_Selected_Background);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+[ui5-menu-item].ui5-ai-versioning-menu-footer:hover {
+	background-color: inherit;
+}
+
+.ui5-ai-versioning-menu-footer::part(native-li) {
+  padding-right: 0.25rem;
+}
\ No newline at end of file
diff --git a/packages/ai/test/pages/Input.html b/packages/ai/test/pages/Input.html
new file mode 100644
index 000000000000..e08882cc0e0a
--- /dev/null
+++ b/packages/ai/test/pages/Input.html
@@ -0,0 +1,315 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>ui5-ai-input</title>
+  <script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+  <style>
+    :root {
+      --spacing-small: 0.5rem;
+      --spacing-medium: 1rem;
+      --font-size-small: 0.875rem;
+      --color-text-secondary: #556b82;
+    }
+
+    body {
+      font-family: var(--sapFontFamily, Arial, sans-serif);
+      margin: var(--spacing-medium);
+    }
+
+    [ui5-ai-input] {
+      width: 500px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1 class="sr-only">AI Input Demo</h1>
+
+  <ui5-ai-input
+    id="ai-input"
+    placeholder="Ask me something..."
+	>
+    <ui5-menu-item text="Generate text" slot="actions" additional-text="Ctrl + Enter" data-menu-action="generate"></ui5-menu-item>
+  </ui5-ai-input>
+
+  	<script>
+		const SAMPLE_TEXTS = {
+				en: "AI can help you write faster.",
+				bg: "ИИ може да ви помогне да пишете по-бързо.",
+				de: "KI kann Ihnen beim schnelleren Schreiben helfen.",
+				expanded: "AI assists in generating detailed content quickly.",
+				rephrased: "AI helps reword sentences clearly.",
+				simplified: "AI makes text simpler.",
+				summarized: "AI shortens long content."
+			};
+
+		const MENU_CONFIG = [
+			{
+				text: "Regenerate",
+				action: "regenerate",
+				processingLabel: "Regenerating text",
+				completedLabel: "Regenerated text",
+				textKey: "en",
+				replaces: "generate"
+			},
+			{
+				text: "Fix spelling and grammar",
+				action: "fixSpelling",
+				processingLabel: "Fixing spelling and grammar",
+				completedLabel: "Fixed spelling and grammar",
+				textKey: "en",
+				startsSection: true
+			},
+			{
+				text: "Rewrite text",
+				isGroup: true,
+				children: [
+					{ text: "Simplify", action: "simplify", processingLabel: "Simplifying text", completedLabel: "Simplified text", textKey: "simplified", isChild: true },
+					{ text: "Expand", action: "expand", processingLabel: "Expanding text", completedLabel: "Expanded text", textKey: "expanded", isChild: true },
+					{ text: "Rephrase", action: "rephrase", processingLabel: "Rephrasing text", completedLabel: "Rephrased text", textKey: "rephrased", isChild: true },
+					{ text: "Summarize", action: "summarize", processingLabel: "Summarizing text", completedLabel: "Summarized text", textKey: "summarized", isChild: true }
+				]
+			},
+			{
+				text: "Translate",
+				isGroup: true,
+				children: [
+					{ text: "English", action: "translateEN", processingLabel: "Translating to English", completedLabel: "Translated to English", textKey: "en", isChild: true },
+					{ text: "German", action: "translateDE", processingLabel: "Translating to German", completedLabel: "Translated to German", textKey: "de", isChild: true },
+					{ text: "Bulgarian", action: "translateBG", processingLabel: "Translating to Bulgarian", completedLabel: "Translated to Bulgarian", textKey: "bg", isChild: true }
+				]
+			}
+		];
+
+		let versionHistory = [];
+		let currentIndexHistory = 0;
+		let currentActionInProgress = null;
+		let typingInterval = null;
+		let isGenerating = false;
+		let currentGenerationId = 0;  // used to cancel stale runs
+
+		const aiInput = document.getElementById("ai-input");
+		menu = document.getElementById('ai-wa-menu');
+
+		aiInput.addEventListener('version-change', handleVersionChange);
+		aiInput.addEventListener('stop-generation', stopGeneration);
+
+		aiInput.addEventListener('item-click', handleMenuItemClick);
+
+		function delay(ms) {
+			return new Promise(resolve => setTimeout(resolve, ms));
+		}
+
+		function addToHistory(entry) {
+			versionHistory.push(entry);
+			if (versionHistory.length > 50) {
+				versionHistory.shift();
+				if (currentIndexHistory > 0) currentIndexHistory--;
+			}
+		}
+
+		function saveCurrentVersion() {
+			if (versionHistory.length > 0 && versionHistory[currentIndexHistory]) {
+				versionHistory[currentIndexHistory].value = aiInput.value;
+			}
+		}
+
+		function updateComponentState(versionIndex = null) {
+			if (versionIndex !== null && versionHistory[versionIndex]) {
+				currentIndexHistory = versionIndex;
+				aiInput.value = versionHistory[versionIndex].value;
+			}
+
+			aiInput.currentVersion = currentIndexHistory + 1;
+			aiInput.totalVersions = versionHistory.length;
+
+			if (versionHistory[currentIndexHistory]) {
+				aiInput.promptDescription = versionHistory[currentIndexHistory].endAction;
+			} else {
+				aiInput.promptDescription = "";
+			}
+		}
+
+		function createMenuItem(cfg) {
+			const item = document.createElement('ui5-menu-item');
+			item.setAttribute('text', cfg.text || '');
+
+      if(!cfg.isChild) {
+        item.setAttribute('slot', 'actions');
+      }
+
+			if (cfg.action) {
+				item.dataset.action = cfg.action;
+				if (cfg.processingLabel) item.dataset.processingLabel = cfg.processingLabel;
+				if (cfg.completedLabel) item.dataset.completedLabel = cfg.completedLabel;
+				if (cfg.textKey) item.dataset.textKey = cfg.textKey;
+			}
+			if (cfg.shortcut) item.setAttribute('additional-text', cfg.shortcut);
+			if (cfg.startsSection) item.setAttribute('starts-section', '');
+			return item;
+		}
+
+		function buildMenuFromConfig() {
+			const hasHistory = versionHistory.length > 0;
+
+			if (hasHistory) {
+				aiInput.querySelectorAll("ui5-menu-item").forEach(item => item.remove());
+				MENU_CONFIG.forEach(cfg => {
+					if (cfg.replaces && !hasHistory) return;
+
+					if (cfg.isGroup && Array.isArray(cfg.children)) {
+						const group = createMenuItem(cfg);
+						cfg.children.forEach(child => {
+							const childItem = createMenuItem(child);
+							group.appendChild(childItem);
+						});
+						aiInput.appendChild(group);
+					} else {
+						aiInput.appendChild(createMenuItem(cfg));
+					}
+				});
+			}
+		}
+
+		function stopTypingAnimation() {
+			if (typingInterval) {
+				clearInterval(typingInterval);
+				typingInterval = null;
+			}
+		}
+
+		function completeGeneration(action, menuItem) {
+			stopTypingAnimation();
+			const completedLabel = (menuItem && menuItem.dataset.completedLabel) ? menuItem.dataset.completedLabel : 'Action completed';
+
+			addToHistory({
+				value: aiInput.value,
+				action,
+				endAction: completedLabel,
+				timestamp: new Date().toISOString()
+			});
+
+			currentIndexHistory = versionHistory.length - 1;
+			currentActionInProgress = null;
+			isGenerating = false;
+
+			if (versionHistory.length === 1) buildMenuFromConfig();
+
+			updateComponentState();
+			aiInput.loading = false;
+		}
+
+		function animateTextGeneration(text, action, menuItem) {
+			return new Promise(resolve => {
+				const chars = text.split('');
+				let i = 0;
+				aiInput.value = "";
+				aiInput.loading = true;
+
+				typingInterval = setInterval(() => {
+					if (i < chars.length) {
+						aiInput.value += chars[i++];
+					} else {
+						completeGeneration(action, menuItem);
+						resolve();
+					}
+				}, 10);
+			});
+		}
+
+		function setLoadingState(promptDescription) {
+			aiInput.value = ""
+			aiInput.loading = true;
+			aiInput.promptDescription = promptDescription || '';
+		}
+
+		function resetGenerationState() {
+			stopTypingAnimation();
+			isGenerating = false;
+			currentActionInProgress = null;
+			aiInput.loading = false;
+		}
+
+		function findMenuItemByAction(action) {
+			return aiInput.querySelector(`ui5-menu-item[data-menu-action="${action}"]`) || aiInput.querySelector(`ui5-menu-item[data-action="${action}"]`);
+		}
+
+		async function executeAction(action) {
+			if (isGenerating) return;
+
+			const menuItem = findMenuItemByAction(action);
+			if (!menuItem) return;
+
+			const processingLabel = menuItem.dataset.processingLabel || 'Processing...';
+			const textKey = menuItem.dataset.textKey || 'en';
+
+			saveCurrentVersion();
+			currentActionInProgress = action;
+			isGenerating = true;
+			currentGenerationId += 1;
+			const generationIdForThisRun = currentGenerationId;
+
+			setLoadingState(processingLabel);
+
+			await delay(3000);
+
+			if (!isGenerating || generationIdForThisRun !== currentGenerationId) {
+				resetGenerationState();
+				return;
+			}
+
+			const text = SAMPLE_TEXTS[textKey] || SAMPLE_TEXTS.en;
+			await animateTextGeneration(text, action, menuItem);
+		}
+
+		function stopGeneration() {
+			if (!isGenerating) return;
+
+			stopTypingAnimation();
+			currentGenerationId += 1;
+			const action = currentActionInProgress || 'generate';
+			const menuItem = findMenuItemByAction(action);
+			const completedLabel = (menuItem && menuItem.dataset.completedLabel) ? menuItem.dataset.completedLabel : 'Action completed';
+
+			addToHistory({
+				value: aiInput.value,
+				action,
+				endAction: completedLabel + " (stopped)",
+				timestamp: new Date().toISOString()
+			});
+
+			currentIndexHistory = versionHistory.length - 1;
+			currentActionInProgress = null;
+			isGenerating = false;
+
+			if (versionHistory.length === 1) buildMenuFromConfig();
+
+			updateComponentState();
+			aiInput.loading = false;
+		}
+
+		function handleVersionChange(event) {
+			const { backwards } = event.detail || {};
+			if (backwards && currentIndexHistory > 0) {
+				saveCurrentVersion();
+				updateComponentState(currentIndexHistory - 1);
+			} else if (!backwards && currentIndexHistory < versionHistory.length - 1) {
+				saveCurrentVersion();
+				updateComponentState(currentIndexHistory + 1);
+			}
+		}
+
+		async function handleMenuItemClick(event) {
+
+			const action = event?.detail?.item?.dataset?.menuAction || event?.detail?.item?.dataset?.action;
+			if (!action) return;
+			await executeAction(action);
+		}
+	</script>
+</body>
+
+</html>
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index 45f5df7db550..55cc4b4c62a1 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -282,12 +282,13 @@ class Menu extends UI5Element {
 	/** Returns all menu items (including those in groups */
 	get _allMenuItems() {
 		const items: MenuItem[] = [];
+		const slottedItems = this.getSlottedNodes<MenuItem>("items");
 
-		this.items.forEach(item => {
+		slottedItems.forEach(item => {
 			if (isInstanceOfMenuItemGroup(item)) {
 				items.push(...item._menuItems);
 			} else if (!isInstanceOfMenuSeparator(item)) {
-				items.push(item as MenuItem);
+				items.push(item);
 			}
 		});