diff --git a/frontend/src/components/directory.js b/frontend/src/components/directory.js
index 06c69de150..31ec5a73c1 100644
--- a/frontend/src/components/directory.js
+++ b/frontend/src/components/directory.js
@@ -23,7 +23,9 @@ import OutputJson from "./output/Json/config.js";
 import OutputLabel from "./output/Label/config.js";
 import OutputTextbox from "./output/Textbox/config.js";
 import OutputVideo from "./output/Video/config.js";
-import OutputTimeSeries from './output/TimeSeries/config.js'
+import OutputTimeSeries from './output/TimeSeries/config.js';
+import OutputChatbot from './output/Chatbot/config.js';
+
 
 import Dummy from "./Dummy.svelte"
 
@@ -56,4 +58,5 @@ export const output_component_map = {
     "textbox": OutputTextbox,
     "timeseries": OutputTimeSeries,
     "video": OutputVideo,
+    "chatbot": OutputChatbot,
 }
diff --git a/frontend/src/components/output/Chatbot/Component.svelte b/frontend/src/components/output/Chatbot/Component.svelte
new file mode 100644
index 0000000000..c1282117e4
--- /dev/null
+++ b/frontend/src/components/output/Chatbot/Component.svelte
@@ -0,0 +1,14 @@
+<script>
+	export let value;
+	export let theme;
+</script>
+
+
+<div class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight">
+	<div class="flex flex-col items-end space-y-4 p-3">
+		{#each value as message}
+			<div class="px-3 py-2 rounded-2xl place-self-start bg-gray-300 dark:bg-gray-850 dark:text-gray-200 mr-7">{ message[1] }</div>
+			<div class="px-3 py-2 rounded-2xl bg-yellow-500 text-white ml-7">{ message[0] }</div> 		
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/components/output/Chatbot/config.js b/frontend/src/components/output/Chatbot/config.js
new file mode 100644
index 0000000000..4ec4c21795
--- /dev/null
+++ b/frontend/src/components/output/Chatbot/config.js
@@ -0,0 +1,5 @@
+import Component from "./Component.svelte";
+
+export default {
+    "component": Component, 
+}
\ No newline at end of file
diff --git a/gradio/outputs.py b/gradio/outputs.py
index b4bec518a3..4efac66e8d 100644
--- a/gradio/outputs.py
+++ b/gradio/outputs.py
@@ -794,6 +794,24 @@ class Timeseries(OutputComponent):
     def restore_flagged(self, dir, data, encryption_key):
         return json.loads(data)
 
+class Chatbot(OutputComponent):
+
+    def __init__(self, label: Optional[str] = None):
+        super().__init__(label)
+
+    def get_template_context(self):
+        return {**super().get_template_context()}
+
+    @classmethod
+    def get_shortcut_implementations(cls):
+        return {
+            "chatbot": {},
+        }
+
+    def postprocess(self, y):
+        return y
+
+
 
 class State(OutputComponent):
     """