diff --git a/demo/input-output/config.json b/demo/input-output/config.json
new file mode 100644
index 0000000000..ff7a213a69
--- /dev/null
+++ b/demo/input-output/config.json
@@ -0,0 +1,47 @@
+{
+  "mode": "blocks",
+  "components": [
+    {
+      "id": 1,
+      "type": "textbox",
+      "props": {
+        "lines": 1,
+        "placeholder": "None",
+        "default": "",
+        "name": "textbox",
+        "label": "None",
+        "css": {}
+      }
+    },
+    {
+      "id": 2,
+      "type": "button",
+      "props": {
+        "value": "Run",
+        "name": "button",
+        "label": "None",
+        "css": {}
+      }
+    }
+  ],
+  "theme": "default",
+  "layout": {
+    "id": 0,
+    "children": [
+      {
+        "id": 1
+      },
+      {
+        "id": 2
+      }
+    ]
+  },
+  "dependencies": [
+    {
+      "targets": [2],
+      "trigger": "click",
+      "inputs": [1],
+      "outputs": [1]
+    }
+  ]
+}
diff --git a/demo/input-output/run.py b/demo/input-output/run.py
new file mode 100644
index 0000000000..8408a788b2
--- /dev/null
+++ b/demo/input-output/run.py
@@ -0,0 +1,16 @@
+import gradio as gr
+
+
+def image_mod(text):
+    return text[::-1]
+
+block = gr.Blocks()
+
+with block:
+    text = gr.Textbox()
+    btn = gr.Button("Run")
+    btn.click(image_mod, text, text)
+
+print(block.get_config_file())
+if __name__ == "__main__":
+    block.launch()
diff --git a/ui/packages/app/test/input-output.spec.ts b/ui/packages/app/test/input-output.spec.ts
new file mode 100644
index 0000000000..5cbae469f0
--- /dev/null
+++ b/ui/packages/app/test/input-output.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect, Page } from "@playwright/test";
+
+function mock_demo(page: Page, demo: string) {
+	return page.route("http://localhost:7860/config", (route) => {
+		return route.fulfill({
+			headers: {
+				"Access-Control-Allow-Origin": "*"
+			},
+			path: `../../../demo/${demo}/config.json`
+		});
+	});
+}
+
+function mock_api(page: Page, body: Array<unknown>) {
+	return page.route("http://localhost:7860/api/predict/", (route) => {
+		const id = JSON.parse(route.request().postData()!).fn_index;
+		return route.fulfill({
+			headers: {
+				"Access-Control-Allow-Origin": "*"
+			},
+			body: JSON.stringify({
+				data: body[id]
+			})
+		});
+	});
+}
+
+test("a component acts as both input and output", async ({ page }) => {
+	await mock_demo(page, "input-output");
+	await mock_api(page, [["world hello"]]);
+	await page.goto("http://localhost:3000");
+
+	const textbox = await page.locator(".input-text");
+	const button = await page.locator("button");
+
+	await textbox.fill("hello world");
+
+	await Promise.all([
+		button.click(),
+		page.waitForResponse("http://localhost:7860/api/predict/")
+	]);
+
+	await expect(await page.inputValue(".input-text")).toEqual("world hello");
+});