LangChain Agent MCP Server

import { Moon, Sun } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useEffect, useState } from "react"; export const ThemeToggle = () => { const [theme, setTheme] = useState<"light" | "dark">("light"); useEffect(() => { const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null; const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; const initialTheme = savedTheme || (prefersDark ? "dark" : "light"); setTheme(initialTheme); document.documentElement.classList.toggle("dark", initialTheme === "dark"); }, []); const toggleTheme = () => { const newTheme = theme === "light" ? "dark" : "light"; setTheme(newTheme); localStorage.setItem("theme", newTheme); document.documentElement.classList.toggle("dark", newTheme === "dark"); }; return ( <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full" > {theme === "light" ? ( <Moon className="h-5 w-5" /> ) : ( <Sun className="h-5 w-5" /> )} </Button> ); };