feat: add GitHubExampleLink component

website/blog/2025-04-23-multi-agent-llm/index.md

@@ -8,6 +8,7 @@ authors: omeraplak
 ---
 
 import LlmChoiceHelper from '@site/src/components/blog-widgets/LlmChoiceHelper';
+import GitHubExampleLink from '@site/src/components/blog-widgets/GitHubExampleLink';
 
 Large language models like ChatGPT have become commonplace tools, helping me write emails as well as code. Other times, though, I found that one LLM wasn't sufficient to manage complex, multistep tasks. That's where I started exploring "multi-agent systems."
 
@@ -21,6 +22,11 @@ Steps we'll cover:
   - [Let Me Show You a Practical Example with VoltAgent](#let-me-show-you-a-practical-example-with-voltagent)
 - [My Final Thoughts](#my-final-thoughts)
 
+<GitHubExampleLink 
+  repoUrl="https://github.com/VoltAgent/voltagent/tree/main/examples/with-rag-chatbot" 
+  npmCommand="npm create voltagent-app@latest -- --example with-rag-chatbot" 
+/>
+
 ## What Are Multi-Agent LLM Systems?
 
 Simply put, I see an agent system like having multiple specialist AI agents working together to accomplish an objective. I think of it like project work where individuals have specific talents. In my experience, there is often one "boss" agent that oversees the team to assign individual tasks to individual "sub-agents."

website/src/components/blog-widgets/GitHubExampleLink.tsx

@@ -0,0 +1,74 @@
+import type React from "react";
+import { GitHubLogo } from "../../../static/img/logos/github";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/20/solid";
+import {
+  ClipboardIcon,
+  ClipboardDocumentCheckIcon,
+} from "@heroicons/react/24/outline";
+import { useState } from "react";
+
+interface GitHubExampleLinkProps {
+  repoUrl: string;
+  npmCommand: string;
+}
+
+const GitHubExampleLink: React.FC<GitHubExampleLinkProps> = ({
+  repoUrl,
+  npmCommand,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(npmCommand).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="my-8 px-6 py-4 border-dashed border-emerald-500 rounded-lg bg-gray-800">
+      <div className="flex-grow">
+        <a
+          href={repoUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-md text-emerald-400 hover:text-emerald-500 no-underline !hover:no-underline font-medium inline-flex items-center mb-3"
+        >
+          <GitHubLogo className="w-6 h-6 mr-2 hidden sm:inline-block" />
+          Get the code example for this article on GitHub
+          <ArrowTopRightOnSquareIcon
+            className="w-5 h-5 ml-1 hidden sm:inline-block"
+            aria-hidden="true"
+          />
+        </a>
+        <p className="text-gray-400 mb-3">To run this example locally:</p>
+        <div className="flex items-stretch">
+          <code className="flex flex-grow justify-between items-center bg-gray-700 p-4 text-xs text-gray-200 font-mono whitespace-pre-wrap break-all">
+            <span className="mr-2">{npmCommand}</span>
+            <button
+              type="button"
+              onClick={copyToClipboard}
+              className="bg-transparent flex items-center justify-center cursor-pointer border-0 outline-none"
+              aria-label="Copy code"
+              title="Copy to clipboard"
+            >
+              {copied ? (
+                <ClipboardDocumentCheckIcon
+                  className="w-5 h-5 text-emerald-400"
+                  aria-hidden="true"
+                />
+              ) : (
+                <ClipboardIcon
+                  className="w-5 h-5 text-gray-400"
+                  aria-hidden="true"
+                />
+              )}
+            </button>
+          </code>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GitHubExampleLink;