copilotkit__copilotkit/docs/components/react/select-llm-provider.tsx

"use client";

import { useState } from "react";
import { useLocalStorage } from "usehooks-ts";

export function SelectLLMProvider() {
  const [llmProvider, setLLMProvider] = useLocalStorage<string | null>(
    "llmProvider",
    "openai",
  );
  // const [llmProvider, setLLMProvider] = useState<string | null>("openai");

  return (
    <div className="flex gap-2">
      <button
        onClick={() => setLLMProvider("openai")}
        className={`${llmProvider === "openai" ? "bg-blue-500" : "bg-gray-200"}`}
      >
        OpenAI
      </button>
      <button
        onClick={() => setLLMProvider("anthropic")}
        className={`${llmProvider === "anthropic" ? "bg-blue-500" : "bg-gray-200"}`}
      >
        Anthropic
      </button>
    </div>
  );
}