ai chatbot code syntax-highlighting developer response ai response code syntax code-block developer programming AI response with code block chat message showing code output
AI Response Code Block
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-response/code-block.json code-block.html
<article class="ws-ai-response rounded-2xl border border-[var(--ws-ai-response-border)] bg-[var(--ws-ai-response-bg)] p-6 sm:p-8">
<div class="flex gap-4">
<!-- Avatar -->
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-ai-response-accent)] text-sm font-bold text-[var(--ws-ai-response-action-text)]" aria-hidden="true">AI</div>
</div>
<!-- Response content -->
<div class="min-w-0 flex-1 space-y-4">
<p class="text-base leading-relaxed text-[var(--ws-ai-response-text-soft)]">Here is a simple Express server that handles GET requests:</p>
<!-- Code block -->
<div class="overflow-hidden rounded-xl border border-[var(--ws-ai-response-border)]">
<!-- Filename header -->
<div class="flex items-center justify-between border-b border-[var(--ws-ai-response-border)] bg-slate-900 px-4 py-2.5"> <!-- ws-ok -->
<span class="text-xs font-medium text-slate-400">app.js</span>
<button type="button" title="Copy code" class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium text-slate-400 transition hover:bg-slate-800 hover:text-slate-200">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m0 0a2.625 2.625 0 115.25 0H15" /></svg>
Copy code
</button>
</div>
<!-- Code content -->
<pre class="overflow-x-auto bg-slate-950 p-4 text-sm leading-relaxed"> <!-- ws-ok --><code><span class="text-sky-400">const</span> <span class="text-slate-200">express</span> <span class="text-sky-400">=</span> <span class="text-amber-300">require</span><span class="text-slate-400">(</span><span class="text-emerald-400">'express'</span><span class="text-slate-400">)</span><span class="text-slate-400">;</span>
<span class="text-sky-400">const</span> <span class="text-slate-200">app</span> <span class="text-sky-400">=</span> <span class="text-amber-300">express</span><span class="text-slate-400">();</span>
<span class="text-slate-200">app</span><span class="text-slate-400">.</span><span class="text-amber-300">get</span><span class="text-slate-400">(</span><span class="text-emerald-400">'/'</span><span class="text-slate-400">,</span> <span class="text-slate-400">(</span><span class="text-orange-300">req</span><span class="text-slate-400">,</span> <span class="text-orange-300">res</span><span class="text-slate-400">)</span> <span class="text-sky-400">=></span> <span class="text-slate-400">{</span>
<span class="text-slate-200">res</span><span class="text-slate-400">.</span><span class="text-amber-300">json</span><span class="text-slate-400">(</span><span class="text-slate-400">{</span> <span class="text-slate-200">message</span><span class="text-slate-400">:</span> <span class="text-emerald-400">'Hello World'</span> <span class="text-slate-400">}</span><span class="text-slate-400">)</span><span class="text-slate-400">;</span>
<span class="text-slate-400">}</span><span class="text-slate-400">)</span><span class="text-slate-400">;</span>
<span class="text-slate-200">app</span><span class="text-slate-400">.</span><span class="text-amber-300">listen</span><span class="text-slate-400">(</span><span class="text-purple-400">3000</span><span class="text-slate-400">,</span> <span class="text-slate-400">()</span> <span class="text-sky-400">=></span> <span class="text-slate-400">{</span>
<span class="text-slate-200">console</span><span class="text-slate-400">.</span><span class="text-amber-300">log</span><span class="text-slate-400">(</span><span class="text-emerald-400">'Server running on port 3000'</span><span class="text-slate-400">)</span><span class="text-slate-400">;</span>
<span class="text-slate-400">}</span><span class="text-slate-400">)</span><span class="text-slate-400">;</span></code></pre>
</div>
</div>
</div>
</article>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aichatbotcodesyntax-highlightingdeveloperresponse
Slots
| Name | Required | Description |
|---|---|---|
| avatar | Yes | Avatar circle identifying the AI assistant. |
| intro | Yes | Introductory text paragraph above the code block. |
| codeBlock | Yes | Dark code block with filename header and syntax-colored content. |
| copyAction | Yes | Copy code button in the code block header. |
Enhanced AI response with an embedded code block. Features a dark code area with filename header bar, simulated syntax highlighting via Tailwind color utilities, and a copy code button. Ideal for AI coding assistants.