diff --git a/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx b/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
new file mode 100644
index 0000000000..7dacd87837
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+// src/app/(dashboard)/dashboard/playground/components/MarkdownMessage.tsx
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { Components } from "react-markdown";
+
+interface MarkdownMessageProps {
+ content: string;
+ className?: string;
+}
+
+/**
+ * MarkdownMessage — renders markdown safely in the Playground chat.
+ *
+ * Security notes:
+ * - react-markdown does NOT render raw HTML by default, so ";
+ const el = renderMarkdown(xssContent);
+
+ // Should NOT contain a