diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte
index 72829ce64..5c30c4586 100644
--- a/src/lib/components/chat/Messages/ContentRenderer.svelte
+++ b/src/lib/components/chat/Messages/ContentRenderer.svelte
@@ -4,6 +4,7 @@
 
 	import Markdown from './Markdown.svelte';
 	import LightBlub from '$lib/components/icons/LightBlub.svelte';
+	import { showArtifacts, showControls, showOverview } from '$lib/stores';
 
 	export let id;
 	export let content;
@@ -69,6 +70,13 @@
 		on:update={(e) => {
 			dispatch('update', e.detail);
 		}}
+		on:code={(e) => {
+			const { lang } = e.detail;
+			if (lang === 'html') {
+				showArtifacts.set(true);
+				showControls.set(true);
+			}
+		}}
 	/>
 </div>
 
diff --git a/src/lib/components/chat/Messages/Markdown.svelte b/src/lib/components/chat/Messages/Markdown.svelte
index 8c24358fa..1c627919a 100644
--- a/src/lib/components/chat/Messages/Markdown.svelte
+++ b/src/lib/components/chat/Messages/Markdown.svelte
@@ -42,5 +42,8 @@
 		on:update={(e) => {
 			dispatch('update', e.detail);
 		}}
+		on:code={(e) => {
+			dispatch('code', e.detail);
+		}}
 	/>
 {/key}
diff --git a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
index 411a13448..be86ff4f1 100644
--- a/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+++ b/src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
@@ -33,6 +33,11 @@
 			<MarkdownInlineTokens id={`${id}-${tokenIdx}-h`} tokens={token.tokens} />
 		</svelte:element>
 	{:else if token.type === 'code'}
+		{#if token.lang === 'html'}
+			{dispatch('code', {
+				lang: token.lang
+			})}
+		{/if}
 		{#if token.raw.includes('```')}
 			<CodeBlock
 				id={`${id}-${tokenIdx}`}