├── .eslintrc.json
├── .env.example
├── public
    ├── tv.png
    ├── watch.png
    └── iphone.png
├── app
    ├── favicon.ico
    └── (preview)
    │   ├── twitter-image.png
    │   ├── uncut-sans.woff2
    │   ├── opengraph-image.png
    │   ├── layout.tsx
    │   ├── api
    │       └── chat
    │       │   └── route.ts
    │   ├── globals.css
    │   └── page.tsx
├── next.config.mjs
├── postcss.config.mjs
├── .gitignore
├── LICENSE
├── tsconfig.json
├── components
    ├── use-scroll-to-bottom.ts
    ├── message.tsx
    ├── data.ts
    └── icons.tsx
├── package.json
├── README.md
└── tailwind.config.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=****
2 | GOOGLE_GENERATIVE_AI_API_KEY=****
3 | ANTHROPIC_API_KEY=****
4 | 


--------------------------------------------------------------------------------
/public/tv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/public/tv.png


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/watch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/public/watch.png


--------------------------------------------------------------------------------
/public/iphone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/public/iphone.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/app/(preview)/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/app/(preview)/twitter-image.png


--------------------------------------------------------------------------------
/app/(preview)/uncut-sans.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/app/(preview)/uncut-sans.woff2


--------------------------------------------------------------------------------
/app/(preview)/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vercel-labs/ai-sdk-preview-provider-registry/HEAD/app/(preview)/opengraph-image.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2024 Vercel, Inc.
 2 | 
 3 | Licensed under the Apache License, Version 2.0 (the "License");
 4 | you may not use this file except in compliance with the License.
 5 | You may obtain a copy of the License at
 6 | 
 7 |     http://www.apache.org/licenses/LICENSE-2.0
 8 | 
 9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
14 | 


--------------------------------------------------------------------------------
/app/(preview)/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "./globals.css";
 2 | import { Metadata } from "next";
 3 | import { Toaster } from "sonner";
 4 | 
 5 | export const metadata: Metadata = {
 6 |   metadataBase: new URL("https://ai-sdk-preview-provider-registry.vercel.app"),
 7 |   title: "Provider Registry Preview",
 8 |   description:
 9 |     "Handle multiple providers and models and switch between them easily",
10 | };
11 | 
12 | export default function RootLayout({
13 |   children,
14 | }: Readonly<{
15 |   children: React.ReactNode;
16 | }>) {
17 |   return (
18 |     <html lang="en">
19 |       <body>
20 |         <Toaster position="top-center" richColors />
21 |         {children}
22 |       </body>
23 |     </html>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/app/(preview)/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { openai } from "@ai-sdk/openai";
 2 | import { anthropic } from "@ai-sdk/anthropic";
 3 | import { experimental_createProviderRegistry, streamText } from "ai";
 4 | import { google } from "@ai-sdk/google";
 5 | 
 6 | const registry = experimental_createProviderRegistry({
 7 |   openai,
 8 |   anthropic,
 9 |   google,
10 | });
11 | 
12 | export async function POST(request: Request) {
13 |   const { messages, model } = await request.json();
14 | 
15 |   const stream = streamText({
16 |     model: registry.languageModel(model),
17 |     system: `\
18 |       - you are a friendly assistant
19 |       - you are concise with your responses
20 |       - you do not use lists, that's silly
21 |     `,
22 |     messages,
23 |   });
24 | 
25 |   return stream.toDataStreamResponse();
26 | }
27 | 


--------------------------------------------------------------------------------
/components/use-scroll-to-bottom.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, RefObject } from "react";
 2 | 
 3 | export function useScrollToBottom<T extends HTMLElement>(): [
 4 |   RefObject<T>,
 5 |   RefObject<T>,
 6 | ] {
 7 |   const containerRef = useRef<T>(null);
 8 |   const endRef = useRef<T>(null);
 9 | 
10 |   useEffect(() => {
11 |     const container = containerRef.current;
12 |     const end = endRef.current;
13 | 
14 |     if (container && end) {
15 |       const observer = new MutationObserver(() => {
16 |         end.scrollIntoView({ behavior: "smooth" });
17 |       });
18 | 
19 |       observer.observe(container, {
20 |         childList: true,
21 |         subtree: true,
22 |       });
23 | 
24 |       return () => observer.disconnect();
25 |     }
26 |   }, []);
27 | 
28 |   return [containerRef, endRef];
29 | }
30 | 


--------------------------------------------------------------------------------
/components/message.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion } from "framer-motion";
 4 | import { BotIcon, UserIcon } from "./icons";
 5 | import { ReactNode } from "react";
 6 | import { Streamdown as Markdown } from "streamdown";
 7 | 
 8 | export const Message = ({
 9 |   role,
10 |   content,
11 | }: {
12 |   role: string;
13 |   content: string | ReactNode;
14 | }) => {
15 |   return (
16 |     <motion.div
17 |       className={`flex flex-row gap-4 px-4 w-full md:w-[500px] md:px-0 first-of-type:pt-20`}
18 |       initial={{ y: 5, opacity: 0 }}
19 |       animate={{ y: 0, opacity: 1 }}
20 |     >
21 |       <div className="size-[24px] flex flex-col justify-center items-center flex-shrink-0 text-zinc-400">
22 |         {role === "assistant" ? <BotIcon /> : <UserIcon />}
23 |       </div>
24 | 
25 |       <div className="flex flex-col gap-6 w-full">
26 |         <div className="text-zinc-800 dark:text-zinc-300 flex flex-col gap-4">
27 |           <Markdown>{content as string}</Markdown>
28 |         </div>
29 |       </div>
30 |     </motion.div>
31 |   );
32 | };
33 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-sdk-preview-provider-registry",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@ai-sdk/anthropic": "^1.0.5",
13 |     "@ai-sdk/google": "^1.0.11",
14 |     "@ai-sdk/openai": "^1.0.10",
15 |     "@vercel/analytics": "^1.3.1",
16 |     "@vercel/kv": "^2.0.0",
17 |     "ai": "^4.0.21",
18 |     "d3-scale": "^4.0.2",
19 |     "date-fns": "^3.6.0",
20 |     "framer-motion": "^11.3.19",
21 |     "next": "14.2.5",
22 |     "react": "^18",
23 |     "react-dom": "^18",
24 |     "sonner": "^1.5.0",
25 |     "streamdown": "^1.6.7",
26 |     "tailwindcss-animate": "^1.0.7",
27 |     "zod": "^3.24.1"
28 |   },
29 |   "devDependencies": {
30 |     "@types/d3-scale": "^4.0.8",
31 |     "@types/node": "^20",
32 |     "@types/react": "^18",
33 |     "@types/react-dom": "^18",
34 |     "eslint": "^8",
35 |     "eslint-config-next": "14.2.5",
36 |     "postcss": "^8",
37 |     "tailwindcss": "^3.4.1",
38 |     "typescript": "^5"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/components/data.ts:
--------------------------------------------------------------------------------
 1 | export interface Order {
 2 |   id: string;
 3 |   name: string;
 4 |   orderedAt: string;
 5 |   image: string;
 6 | }
 7 | 
 8 | export const ORDERS: Order[] = [
 9 |   {
10 |     id: "539182",
11 |     name: "Apple TV",
12 |     orderedAt: "2024-08-25",
13 |     image: "tv.png",
14 |   },
15 |   {
16 |     id: "281958",
17 |     name: "Apple iPhone 14 Pro",
18 |     orderedAt: "2024-08-24",
19 |     image: "iphone.png",
20 |   },
21 |   {
22 |     id: "281958",
23 |     name: "Apple Watch Ultra 2",
24 |     orderedAt: "2024-08-26",
25 |     image: "watch.png",
26 |   },
27 | ];
28 | 
29 | export interface TrackingInformation {
30 |   orderId: string;
31 |   progress: "Shipped" | "Out for Delivery" | "Delivered";
32 |   description: string;
33 | }
34 | 
35 | export const TRACKING_INFORMATION = [
36 |   {
37 |     orderId: "412093",
38 |     progress: "Shipped",
39 |     description: "Last Updated Today 4:30 PM",
40 |   },
41 |   {
42 |     orderId: "281958",
43 |     progress: "Out for Delivery",
44 |     description: "ETA Today 5:45 PM",
45 |   },
46 |   {
47 |     orderId: "539182",
48 |     progress: "Delivered",
49 |     description: "Delivered Today 3:00 PM",
50 |   },
51 | ];
52 | 
53 | export const getOrders = () => {
54 |   return ORDERS;
55 | };
56 | 
57 | export const getTrackingInformation = ({ orderId }: { orderId: string }) => {
58 |   return TRACKING_INFORMATION.find((info) => info.orderId === orderId);
59 | };
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Provider Registry Preview
 2 | 
 3 | This example demonstrates how to use the [Vercel AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) and the `experimental_createProviderRegistry` function to handle multiple providers and models and switch between them easily in your application.
 4 | 
 5 | ## Deploy your own
 6 | 
 7 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-preview-provider-registry&env=OPENAI_API_KEY,ANTHROPIC_API_KEY,GOOGLE_GENERATIVE_AI_API_KEY&envDescription=API%20Keys%20needed%20for%20the%20application.)
 8 | 
 9 | ## How to use
10 | 
11 | Run [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
12 | 
13 | ```bash
14 | npx create-next-app --example https://github.com/vercel-labs/ai-sdk-preview-provider-registry ai-sdk-preview-provider-registry-example
15 | ```
16 | 
17 | ```bash
18 | yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-provider-registry ai-sdk-preview-provider-registry-example
19 | ```
20 | 
21 | ```bash
22 | pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-provider-registry ai-sdk-preview-provider-registry-example
23 | ```
24 | 
25 | To run the example locally you need to:
26 | 
27 | 1. Sign up for accounts with the AI providers you want to use (e.g., OpenAI, Anthropic).
28 | 2. Obtain API keys for each provider.
29 | 3. Set the required environment variables as shown in the `.env.example` file, but in a new file called `.env`.
30 | 4. `npm install` to install the required dependencies.
31 | 5. `npm run dev` to launch the development server.
32 | 
33 | ## Learn More
34 | 
35 | To learn more about Vercel AI SDK or Next.js take a look at the following resources:
36 | 
37 | - [Vercel AI SDK docs](https://sdk.vercel.ai/docs)
38 | - [Vercel AI Playground](https://play.vercel.ai)
39 | - [Next.js Documentation](https://nextjs.org/docs)
40 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import animate from "tailwindcss-animate";
 3 | import { fontFamily } from "tailwindcss/defaultTheme";
 4 | 
 5 | const config: Config = {
 6 |   content: [
 7 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 9 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
10 |     "./node_modules/streamdown/dist/*.js",
11 |   ],
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: `var(--radius)`,
58 |         md: `calc(var(--radius) - 2px)`,
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       fontFamily: {
62 |         sans: ["var(--font-sans)", ...fontFamily.sans],
63 |       },
64 |       keyframes: {
65 |         "accordion-down": {
66 |           from: { height: "0" },
67 |           to: { height: "var(--radix-accordion-content-height)" },
68 |         },
69 |         "accordion-up": {
70 |           from: { height: "var(--radix-accordion-content-height)" },
71 |           to: { height: "0" },
72 |         },
73 |       },
74 |       animation: {
75 |         "accordion-down": "accordion-down 0.2s ease-out",
76 |         "accordion-up": "accordion-up 0.2s ease-out",
77 |       },
78 |       backgroundImage: {
79 |         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
80 |         "gradient-conic":
81 |           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
82 |       },
83 |     },
84 |   },
85 |   plugins: [animate],
86 | };
87 | export default config;
88 | 


--------------------------------------------------------------------------------
/app/(preview)/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 |     :root {
  7 |         --background: 0 0% 100%;
  8 |         --foreground: 0 0% 3.9%;
  9 | 
 10 |         --card: 0 0% 100%;
 11 |         --card-foreground: 0 0% 3.9%;
 12 | 
 13 |         --popover: 0 0% 100%;
 14 |         --popover-foreground: 0 0% 3.9%;
 15 | 
 16 |         --primary: 0 0% 9%;
 17 |         --primary-foreground: 0 0% 98%;
 18 | 
 19 |         --secondary: 0 0% 96.1%;
 20 |         --secondary-foreground: 0 0% 9%;
 21 | 
 22 |         --muted: 0 0% 96.1%;
 23 |         --muted-foreground: 0 0% 45.1%;
 24 | 
 25 |         --accent: 0 0% 96.1%;
 26 |         --accent-foreground: 0 0% 9%;
 27 | 
 28 |         --destructive: 0 84.2% 60.2%;
 29 |         --destructive-foreground: 0 0% 98%;
 30 | 
 31 |         --border: 0 0% 89.8%;
 32 |         --input: 0 0% 89.8%;
 33 |         --ring: 0 0% 3.9%;
 34 | 
 35 |         --radius: 0.5rem;
 36 |     }
 37 | 
 38 |     .dark {
 39 |         --background: 0 0% 3.9%;
 40 |         --foreground: 0 0% 98%;
 41 | 
 42 |         --card: 0 0% 3.9%;
 43 |         --card-foreground: 0 0% 98%;
 44 | 
 45 |         --popover: 0 0% 3.9%;
 46 |         --popover-foreground: 0 0% 98%;
 47 | 
 48 |         --primary: 0 0% 98%;
 49 |         --primary-foreground: 0 0% 9%;
 50 | 
 51 |         --secondary: 0 0% 14.9%;
 52 |         --secondary-foreground: 0 0% 98%;
 53 | 
 54 |         --muted: 0 0% 14.9%;
 55 |         --muted-foreground: 0 0% 63.9%;
 56 | 
 57 |         --accent: 0 0% 14.9%;
 58 |         --accent-foreground: 0 0% 98%;
 59 | 
 60 |         --destructive: 0 62.8% 30.6%;
 61 |         --destructive-foreground: 0 0% 98%;
 62 | 
 63 |         --border: 0 0% 14.9%;
 64 |         --input: 0 0% 14.9%;
 65 |         --ring: 0 0% 83.1%;
 66 |     }
 67 | }
 68 | 
 69 | @layer base {
 70 |     * {
 71 |         @apply border-border;
 72 |     }
 73 |     body {
 74 |         @apply bg-background text-foreground;
 75 |     }
 76 | }
 77 | 
 78 | :root {
 79 |     --foreground-rgb: 0, 0, 0;
 80 |     --background-start-rgb: 214, 219, 220;
 81 |     --background-end-rgb: 255, 255, 255;
 82 | }
 83 | 
 84 | @font-face {
 85 |     font-family: "uncut sans";
 86 |     src: url("./uncut-sans.woff2") format("woff2");
 87 | }
 88 | 
 89 | * {
 90 |     font-family: "uncut sans", sans-serif;
 91 | }
 92 | 
 93 | @media (prefers-color-scheme: dark) {
 94 |     :root {
 95 |         --foreground-rgb: 255, 255, 255;
 96 |         --background-start-rgb: 0, 0, 0;
 97 |         --background-end-rgb: 0, 0, 0;
 98 |     }
 99 | }
100 | 
101 | body {
102 |     color: rgb(var(--foreground-rgb));
103 |     background: linear-gradient(
104 |             to bottom,
105 |             transparent,
106 |             rgb(var(--background-end-rgb))
107 |         )
108 |         rgb(var(--background-start-rgb));
109 | }
110 | 
111 | @layer utilities {
112 |     .text-balance {
113 |         text-wrap: balance;
114 |     }
115 | }
116 | 


--------------------------------------------------------------------------------
/app/(preview)/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState } from "react";
  4 | import { Message } from "@/components/message";
  5 | import { useScrollToBottom } from "@/components/use-scroll-to-bottom";
  6 | import { AnimatePresence, motion } from "framer-motion";
  7 | import {
  8 |   LogoAnthropic,
  9 |   LogoGoogle,
 10 |   LogoOpenAI,
 11 |   RouteIcon,
 12 |   VercelIcon,
 13 | } from "@/components/icons";
 14 | import Link from "next/link";
 15 | import { useChat } from "ai/react";
 16 | 
 17 | const suggestedActions = [
 18 |   {
 19 |     title: "Why is",
 20 |     label: "the sky blue?",
 21 |     action: "why is the sky blue?",
 22 |   },
 23 |   {
 24 |     title: "What does it mean",
 25 |     label: "to be in the arena?",
 26 |     action: "what does it mean to be in the arena?",
 27 |   },
 28 | ];
 29 | 
 30 | const models = [
 31 |   "openai:gpt-4o",
 32 |   "anthropic:claude-3-sonnet-20240229",
 33 |   "google:gemini-1.5-flash",
 34 | ];
 35 | 
 36 | const getProviderIcon = (model: string) => {
 37 |   const provider = model.split(":")[0];
 38 | 
 39 |   switch (provider) {
 40 |     case "openai":
 41 |       return <LogoOpenAI />;
 42 |     case "anthropic":
 43 |       return <LogoAnthropic />;
 44 |     case "google":
 45 |       return <LogoGoogle />;
 46 |     default:
 47 |       return null;
 48 |   }
 49 | };
 50 | 
 51 | export default function Home() {
 52 |   const [selectedModel, setSelectedModel] = useState(
 53 |     "anthropic:claude-3-sonnet-20240229",
 54 |   );
 55 |   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
 56 | 
 57 |   const { messages, handleSubmit, input, setInput, append } = useChat({
 58 |     body: {
 59 |       model: selectedModel,
 60 |     },
 61 |   });
 62 | 
 63 |   const [messagesContainerRef, messagesEndRef] =
 64 |     useScrollToBottom<HTMLDivElement>();
 65 | 
 66 |   return (
 67 |     <div className="flex flex-row justify-center pb-20 h-dvh bg-white dark:bg-zinc-900">
 68 |       <div className="flex flex-col justify-between items-center gap-4">
 69 |         <div
 70 |           ref={messagesContainerRef}
 71 |           className="flex flex-col gap-4 h-full w-dvw items-center overflow-y-scroll"
 72 |         >
 73 |           {messages.length === 0 && (
 74 |             <motion.div className="h-[350px] px-4 w-full md:w-[500px] md:px-0 pt-20">
 75 |               <div className="border rounded-lg p-6 flex flex-col gap-4 text-zinc-500 text-sm dark:text-zinc-400 dark:border-zinc-700">
 76 |                 <p className="flex flex-row justify-center gap-4 items-center text-zinc-900 dark:text-zinc-50">
 77 |                   <VercelIcon size={16} />
 78 |                   <span>+</span>
 79 |                   <RouteIcon />
 80 |                 </p>
 81 |                 <p>
 82 |                   The experimental_createProviderRegistry function allows you to
 83 |                   create a registry of providers and models that you can can
 84 |                   switch between and use in your application.
 85 |                 </p>
 86 |                 <p>
 87 |                   {" "}
 88 |                   Learn more about the{" "}
 89 |                   <Link
 90 |                     className="text-blue-500 dark:text-blue-400"
 91 |                     href="https://sdk.vercel.ai/docs/reference/ai-sdk-core/provider-registry"
 92 |                     target="_blank"
 93 |                   >
 94 |                     Provider Registry{" "}
 95 |                   </Link>
 96 |                   from Vercel AI SDK.
 97 |                 </p>
 98 |               </div>
 99 |             </motion.div>
100 |           )}
101 | 
102 |           {messages.map((message) => (
103 |             <Message
104 |               key={message.id}
105 |               role={message.role}
106 |               content={message.content}
107 |             ></Message>
108 |           ))}
109 |           <div ref={messagesEndRef} />
110 |         </div>
111 | 
112 |         <div className="grid sm:grid-cols-2 gap-2 w-full px-4 md:px-0 mx-auto md:max-w-[500px] mb-4">
113 |           {messages.length === 0 &&
114 |             suggestedActions.map((suggestedAction, index) => (
115 |               <motion.div
116 |                 initial={{ opacity: 0, y: 20 }}
117 |                 animate={{ opacity: 1, y: 0 }}
118 |                 transition={{ delay: 0.05 * index }}
119 |                 key={index}
120 |                 className={index > 1 ? "hidden sm:block" : "block"}
121 |               >
122 |                 <button
123 |                   onClick={async () => {
124 |                     append({
125 |                       role: "user",
126 |                       content: suggestedAction.action,
127 |                     });
128 |                   }}
129 |                   className="w-full text-left border border-zinc-200 dark:border-zinc-800 text-zinc-800 dark:text-zinc-300 rounded-lg p-2 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors flex flex-col"
130 |                 >
131 |                   <span className="font-medium">{suggestedAction.title}</span>
132 |                   <span className="text-zinc-500 dark:text-zinc-400">
133 |                     {suggestedAction.label}
134 |                   </span>
135 |                 </button>
136 |               </motion.div>
137 |             ))}
138 |         </div>
139 | 
140 |         <form
141 |           className="flex flex-row gap-2 relative items-center w-full md:max-w-[500px] max-w-[calc(100dvw-32px) px-4 md:px-0"
142 |           onSubmit={handleSubmit}
143 |         >
144 |           <input
145 |             className="bg-zinc-100 rounded-md px-2 py-1.5 flex-1 outline-none dark:bg-zinc-700 text-zinc-800 dark:text-zinc-300"
146 |             placeholder="Send a message..."
147 |             value={input}
148 |             onChange={(event) => {
149 |               setInput(event.target.value);
150 |             }}
151 |           />
152 | 
153 |           <div
154 |             className="text-sm bg-zinc-100 rounded-lg size-9 flex-shrink-0 flex flex-row items-center justify-center cursor-pointer hover:bg-zinc-200 dark:text-zinc-50 dark:bg-zinc-700 dark:hover:bg-zinc-800"
155 |             onClick={() => {
156 |               setIsDropdownVisible(!isDropdownVisible);
157 |             }}
158 |           >
159 |             {getProviderIcon(selectedModel)}
160 |           </div>
161 |         </form>
162 |       </div>
163 | 
164 |       <AnimatePresence>
165 |         {isDropdownVisible && (
166 |           <>
167 |             <motion.div
168 |               className="fixed bg-zinc-900/50 h-dvh w-dvw top-0 left-0"
169 |               initial={{ opacity: 0 }}
170 |               animate={{ opacity: 1 }}
171 |               exit={{ opacity: 0 }}
172 |               onClick={() => {
173 |                 setIsDropdownVisible(false);
174 |               }}
175 |             />
176 | 
177 |             <motion.div
178 |               className="fixed top-0 right-0 w-dvw h-dvh p-4 flex flex-col gap-6 bg-white dark:bg-zinc-800"
179 |               initial={{ y: "100%" }}
180 |               animate={{ y: "50%" }}
181 |               exit={{ y: "100%" }}
182 |               transition={{ type: "spring", stiffness: 400, damping: 40 }}
183 |             >
184 |               <div className="text-sm">Choose a Model</div>
185 |               <div className="flex flex-col">
186 |                 {models.map((model) => {
187 |                   return (
188 |                     <div
189 |                       key={model}
190 |                       className={`flex flex-row gap-4 items-center hover:bg-zinc-100 dark:hover:bg-zinc-700 p-1.5 px-2 cursor-pointer rounded-lg ${
191 |                         model === selectedModel
192 |                           ? "bg-zinc-100 dark:bg-zinc-700"
193 |                           : ""
194 |                       }`}
195 |                       onClick={() => {
196 |                         setSelectedModel(model);
197 |                         setIsDropdownVisible(false);
198 |                       }}
199 |                     >
200 |                       <div className="">{getProviderIcon(model)}</div>
201 |                       <div className="text-sm text-zinc-500 dark:text-zinc-400">
202 |                         {model.split(":")[1]}
203 |                       </div>
204 |                     </div>
205 |                   );
206 |                 })}
207 |               </div>
208 |             </motion.div>
209 |           </>
210 |         )}
211 |       </AnimatePresence>
212 |     </div>
213 |   );
214 | }
215 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | export const BotIcon = () => {
  2 |   return (
  3 |     <svg
  4 |       height="16"
  5 |       strokeLinejoin="round"
  6 |       viewBox="0 0 16 16"
  7 |       width="16"
  8 |       style={{ color: "currentcolor" }}
  9 |     >
 10 |       <path
 11 |         fillRule="evenodd"
 12 |         clipRule="evenodd"
 13 |         d="M8.75 2.79933C9.19835 2.53997 9.5 2.05521 9.5 1.5C9.5 0.671573 8.82843 0 8 0C7.17157 0 6.5 0.671573 6.5 1.5C6.5 2.05521 6.80165 2.53997 7.25 2.79933V5H7C4.027 5 1.55904 7.16229 1.08296 10H0V13H1V14.5V16H2.5H13.5H15V14.5V13H16V10H14.917C14.441 7.16229 11.973 5 9 5H8.75V2.79933ZM7 6.5C4.51472 6.5 2.5 8.51472 2.5 11V14.5H13.5V11C13.5 8.51472 11.4853 6.5 9 6.5H7ZM7.25 11.25C7.25 12.2165 6.4665 13 5.5 13C4.5335 13 3.75 12.2165 3.75 11.25C3.75 10.2835 4.5335 9.5 5.5 9.5C6.4665 9.5 7.25 10.2835 7.25 11.25ZM10.5 13C11.4665 13 12.25 12.2165 12.25 11.25C12.25 10.2835 11.4665 9.5 10.5 9.5C9.5335 9.5 8.75 10.2835 8.75 11.25C8.75 12.2165 9.5335 13 10.5 13Z"
 14 |         fill="currentColor"
 15 |       ></path>
 16 |     </svg>
 17 |   );
 18 | };
 19 | 
 20 | export const UserIcon = () => {
 21 |   return (
 22 |     <svg
 23 |       data-testid="geist-icon"
 24 |       height="16"
 25 |       strokeLinejoin="round"
 26 |       viewBox="0 0 16 16"
 27 |       width="16"
 28 |       style={{ color: "currentcolor" }}
 29 |     >
 30 |       <path
 31 |         fillRule="evenodd"
 32 |         clipRule="evenodd"
 33 |         d="M7.75 0C5.95507 0 4.5 1.45507 4.5 3.25V3.75C4.5 5.54493 5.95507 7 7.75 7H8.25C10.0449 7 11.5 5.54493 11.5 3.75V3.25C11.5 1.45507 10.0449 0 8.25 0H7.75ZM6 3.25C6 2.2835 6.7835 1.5 7.75 1.5H8.25C9.2165 1.5 10 2.2835 10 3.25V3.75C10 4.7165 9.2165 5.5 8.25 5.5H7.75C6.7835 5.5 6 4.7165 6 3.75V3.25ZM2.5 14.5V13.1709C3.31958 11.5377 4.99308 10.5 6.82945 10.5H9.17055C11.0069 10.5 12.6804 11.5377 13.5 13.1709V14.5H2.5ZM6.82945 9C4.35483 9 2.10604 10.4388 1.06903 12.6857L1 12.8353V13V15.25V16H1.75H14.25H15V15.25V13V12.8353L14.931 12.6857C13.894 10.4388 11.6452 9 9.17055 9H6.82945Z"
 34 |         fill="currentColor"
 35 |       ></path>
 36 |     </svg>
 37 |   );
 38 | };
 39 | 
 40 | export const AttachmentIcon = () => {
 41 |   return (
 42 |     <svg
 43 |       height="16"
 44 |       strokeLinejoin="round"
 45 |       viewBox="0 0 16 16"
 46 |       width="16"
 47 |       style={{ color: "currentcolor" }}
 48 |     >
 49 |       <path
 50 |         fillRule="evenodd"
 51 |         clipRule="evenodd"
 52 |         d="M14.5 6.5V13.5C14.5 14.8807 13.3807 16 12 16H4C2.61929 16 1.5 14.8807 1.5 13.5V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5ZM13 6.5V13.5C13 14.0523 12.5523 14.5 12 14.5H4C3.44772 14.5 3 14.0523 3 13.5V1.5H8V5V6.5H9.5H13ZM9.5 2.12132V5H12.3787L9.5 2.12132Z"
 53 |         fill="currentColor"
 54 |       ></path>
 55 |     </svg>
 56 |   );
 57 | };
 58 | 
 59 | export const VercelIcon = ({ size = 17 }) => {
 60 |   return (
 61 |     <svg
 62 |       height={size}
 63 |       strokeLinejoin="round"
 64 |       viewBox="0 0 16 16"
 65 |       width={size}
 66 |       style={{ color: "currentcolor" }}
 67 |     >
 68 |       <path
 69 |         fillRule="evenodd"
 70 |         clipRule="evenodd"
 71 |         d="M8 1L16 15H0L8 1Z"
 72 |         fill="currentColor"
 73 |       ></path>
 74 |     </svg>
 75 |   );
 76 | };
 77 | 
 78 | export const GitIcon = () => {
 79 |   return (
 80 |     <svg
 81 |       height="16"
 82 |       strokeLinejoin="round"
 83 |       viewBox="0 0 16 16"
 84 |       width="16"
 85 |       style={{ color: "currentcolor" }}
 86 |     >
 87 |       <g clipPath="url(#clip0_872_3147)">
 88 |         <path
 89 |           fillRule="evenodd"
 90 |           clipRule="evenodd"
 91 |           d="M8 0C3.58 0 0 3.57879 0 7.99729C0 11.5361 2.29 14.5251 5.47 15.5847C5.87 15.6547 6.02 15.4148 6.02 15.2049C6.02 15.0149 6.01 14.3851 6.01 13.7154C4 14.0852 3.48 13.2255 3.32 12.7757C3.23 12.5458 2.84 11.836 2.5 11.6461C2.22 11.4961 1.82 11.1262 2.49 11.1162C3.12 11.1062 3.57 11.696 3.72 11.936C4.44 13.1455 5.59 12.8057 6.05 12.5957C6.12 12.0759 6.33 11.726 6.56 11.5261C4.78 11.3262 2.92 10.6364 2.92 7.57743C2.92 6.70773 3.23 5.98797 3.74 5.42816C3.66 5.22823 3.38 4.40851 3.82 3.30888C3.82 3.30888 4.49 3.09895 6.02 4.1286C6.66 3.94866 7.34 3.85869 8.02 3.85869C8.7 3.85869 9.38 3.94866 10.02 4.1286C11.55 3.08895 12.22 3.30888 12.22 3.30888C12.66 4.40851 12.38 5.22823 12.3 5.42816C12.81 5.98797 13.12 6.69773 13.12 7.57743C13.12 10.6464 11.25 11.3262 9.47 11.5261C9.76 11.776 10.01 12.2558 10.01 13.0056C10.01 14.0752 10 14.9349 10 15.2049C10 15.4148 10.15 15.6647 10.55 15.5847C12.1381 15.0488 13.5182 14.0284 14.4958 12.6673C15.4735 11.3062 15.9996 9.67293 16 7.99729C16 3.57879 12.42 0 8 0Z"
 92 |           fill="currentColor"
 93 |         ></path>
 94 |       </g>
 95 |       <defs>
 96 |         <clipPath id="clip0_872_3147">
 97 |           <rect width="16" height="16" fill="white"></rect>
 98 |         </clipPath>
 99 |       </defs>
100 |     </svg>
101 |   );
102 | };
103 | 
104 | export const BoxIcon = ({ size = 16 }: { size: number }) => {
105 |   return (
106 |     <svg
107 |       height={size}
108 |       strokeLinejoin="round"
109 |       viewBox="0 0 16 16"
110 |       width={size}
111 |       style={{ color: "currentcolor" }}
112 |     >
113 |       <path
114 |         fillRule="evenodd"
115 |         clipRule="evenodd"
116 |         d="M8 0.154663L8.34601 0.334591L14.596 3.58459L15 3.79466V4.25V11.75V12.2053L14.596 12.4154L8.34601 15.6654L8 15.8453L7.65399 15.6654L1.40399 12.4154L1 12.2053V11.75V4.25V3.79466L1.40399 3.58459L7.65399 0.334591L8 0.154663ZM2.5 11.2947V5.44058L7.25 7.81559V13.7647L2.5 11.2947ZM8.75 13.7647L13.5 11.2947V5.44056L8.75 7.81556V13.7647ZM8 1.84534L12.5766 4.22519L7.99998 6.51352L3.42335 4.2252L8 1.84534Z"
117 |         fill="currentColor"
118 |       ></path>
119 |     </svg>
120 |   );
121 | };
122 | 
123 | export const HomeIcon = ({ size = 16 }: { size: number }) => {
124 |   return (
125 |     <svg
126 |       height={size}
127 |       strokeLinejoin="round"
128 |       viewBox="0 0 16 16"
129 |       width={size}
130 |       style={{ color: "currentcolor" }}
131 |     >
132 |       <path
133 |         fillRule="evenodd"
134 |         clipRule="evenodd"
135 |         d="M12.5 6.56062L8.00001 2.06062L3.50001 6.56062V13.5L6.00001 13.5V11C6.00001 9.89539 6.89544 8.99996 8.00001 8.99996C9.10458 8.99996 10 9.89539 10 11V13.5L12.5 13.5V6.56062ZM13.78 5.71933L8.70711 0.646409C8.31659 0.255886 7.68342 0.255883 7.2929 0.646409L2.21987 5.71944C2.21974 5.71957 2.21961 5.7197 2.21949 5.71982L0.469676 7.46963L-0.0606537 7.99996L1.00001 9.06062L1.53034 8.53029L2.00001 8.06062V14.25V15H2.75001L6.00001 15H7.50001H8.50001H10L13.25 15H14V14.25V8.06062L14.4697 8.53029L15 9.06062L16.0607 7.99996L15.5303 7.46963L13.7806 5.71993C13.7804 5.71973 13.7802 5.71953 13.78 5.71933ZM8.50001 11V13.5H7.50001V11C7.50001 10.7238 7.72386 10.5 8.00001 10.5C8.27615 10.5 8.50001 10.7238 8.50001 11Z"
136 |         fill="currentColor"
137 |       ></path>
138 |     </svg>
139 |   );
140 | };
141 | 
142 | export const GPSIcon = ({ size = 16 }: { size: number }) => {
143 |   return (
144 |     <svg
145 |       height={size}
146 |       strokeLinejoin="round"
147 |       viewBox="0 0 16 16"
148 |       width={size}
149 |       style={{ color: "currentcolor" }}
150 |     >
151 |       <path
152 |         d="M1 6L15 1L10 15L7.65955 8.91482C7.55797 8.65073 7.34927 8.44203 7.08518 8.34045L1 6Z"
153 |         stroke="currentColor"
154 |         strokeWidth="1.5"
155 |         strokeLinecap="round"
156 |         strokeLinejoin="bevel"
157 |         fill="transparent"
158 |       ></path>
159 |     </svg>
160 |   );
161 | };
162 | 
163 | export const InvoiceIcon = ({ size = 16 }: { size: number }) => {
164 |   return (
165 |     <svg
166 |       height={size}
167 |       strokeLinejoin="round"
168 |       viewBox="0 0 16 16"
169 |       width={size}
170 |       style={{ color: "currentcolor" }}
171 |     >
172 |       <path
173 |         fillRule="evenodd"
174 |         clipRule="evenodd"
175 |         d="M13 15.1L12 14.5L10.1524 15.8857C10.0621 15.9534 9.93791 15.9534 9.8476 15.8857L8 14.5L6.14377 15.8922C6.05761 15.9568 5.94008 15.9601 5.85047 15.9003L3.75 14.5L3 15L2.83257 15.1116L1.83633 15.7758L1.68656 15.8756C1.60682 15.9288 1.5 15.8716 1.5 15.7758V15.5958V14.3985V14.1972V1.5V0H3H8H9.08579C9.351 0 9.60536 0.105357 9.79289 0.292893L14.2071 4.70711C14.3946 4.89464 14.5 5.149 14.5 5.41421V6.5V14.2507V14.411V15.5881V15.7881C14.5 15.8813 14.3982 15.9389 14.3183 15.891L14.1468 15.7881L13.1375 15.1825L13 15.1ZM12.3787 5L9.5 2.12132V5H12.3787ZM8 1.5V5V6.5H9.5H13V13.3507L12.7717 13.2138L11.9069 12.6948L11.1 13.3L10 14.125L8.9 13.3L8 12.625L7.1 13.3L5.94902 14.1632L4.58205 13.2519L3.75 12.6972L3 13.1972V1.5H8Z"
176 |         fill="currentColor"
177 |       ></path>
178 |     </svg>
179 |   );
180 | };
181 | 
182 | export const LogoOpenAI = ({ size = 16 }: { size?: number }) => {
183 |   return (
184 |     <svg
185 |       height={size}
186 |       strokeLinejoin="round"
187 |       viewBox="0 0 16 16"
188 |       width={size}
189 |       style={{ color: "currentcolor" }}
190 |     >
191 |       <path
192 |         d="M14.9449 6.54871C15.3128 5.45919 15.1861 4.26567 14.5978 3.27464C13.7131 1.75461 11.9345 0.972595 10.1974 1.3406C9.42464 0.481584 8.3144 -0.00692594 7.15045 7.42132e-05C5.37487 -0.00392587 3.79946 1.1241 3.2532 2.79113C2.11256 3.02164 1.12799 3.72615 0.551837 4.72468C-0.339497 6.24071 -0.1363 8.15175 1.05451 9.45178C0.686626 10.5413 0.813308 11.7348 1.40162 12.7258C2.28637 14.2459 4.06498 15.0279 5.80204 14.6599C6.5743 15.5189 7.68504 16.0074 8.849 15.9999C10.6256 16.0044 12.2015 14.8754 12.7478 13.2069C13.8884 12.9764 14.873 12.2718 15.4491 11.2733C16.3394 9.75728 16.1357 7.84774 14.9454 6.54771L14.9449 6.54871ZM8.85001 14.9544C8.13907 14.9554 7.45043 14.7099 6.90468 14.2604C6.92951 14.2474 6.97259 14.2239 7.00046 14.2069L10.2293 12.3668C10.3945 12.2743 10.4959 12.1008 10.4949 11.9133V7.42173L11.8595 8.19925C11.8742 8.20625 11.8838 8.22025 11.8858 8.23625V11.9558C11.8838 13.6099 10.5263 14.9509 8.85001 14.9544ZM2.32133 12.2028C1.9651 11.5958 1.8369 10.8843 1.95902 10.1938C1.98284 10.2078 2.02489 10.2333 2.05479 10.2503L5.28366 12.0903C5.44733 12.1848 5.65003 12.1848 5.81421 12.0903L9.75604 9.84429V11.3993C9.75705 11.4153 9.74945 11.4308 9.73678 11.4408L6.47295 13.3004C5.01915 14.1264 3.1625 13.6354 2.32184 12.2028H2.32133ZM1.47155 5.24819C1.82626 4.64017 2.38619 4.17516 3.05305 3.93366C3.05305 3.96116 3.05152 4.00966 3.05152 4.04366V7.72424C3.05051 7.91124 3.15186 8.08475 3.31654 8.17725L7.25838 10.4228L5.89376 11.2003C5.88008 11.2093 5.86285 11.2108 5.84765 11.2043L2.58331 9.34327C1.13255 8.51426 0.63494 6.68272 1.47104 5.24869L1.47155 5.24819ZM12.6834 7.82274L8.74157 5.57669L10.1062 4.79968C10.1199 4.79068 10.1371 4.78918 10.1523 4.79568L13.4166 6.65522C14.8699 7.48373 15.3681 9.31827 14.5284 10.7523C14.1732 11.3593 13.6138 11.8243 12.9474 12.0663V8.27575C12.9489 8.08875 12.8481 7.91574 12.6839 7.82274H12.6834ZM14.0414 5.8057C14.0176 5.7912 13.9756 5.7662 13.9457 5.7492L10.7168 3.90916C10.5531 3.81466 10.3504 3.81466 10.1863 3.90916L6.24442 6.15521V4.60017C6.2434 4.58417 6.251 4.56867 6.26367 4.55867L9.52751 2.70063C10.9813 1.87311 12.84 2.36563 13.6781 3.80066C14.0323 4.40667 14.1605 5.11618 14.0404 5.8057H14.0414ZM5.50257 8.57726L4.13744 7.79974C4.12275 7.79274 4.11312 7.77874 4.11109 7.76274V4.04316C4.11211 2.38713 5.47368 1.0451 7.15197 1.0461C7.86189 1.0461 8.54902 1.2921 9.09476 1.74011C9.06993 1.75311 9.02737 1.77661 8.99899 1.79361L5.77012 3.63365C5.60493 3.72615 5.50358 3.89916 5.50459 4.08666L5.50257 8.57626V8.57726ZM6.24391 7.00022L7.99972 5.9997L9.75553 6.99972V9.00027L7.99972 10.0003L6.24391 9.00027V7.00022Z"
193 |         fill="currentColor"
194 |       ></path>
195 |     </svg>
196 |   );
197 | };
198 | 
199 | export const LogoGoogle = ({ size = 16 }: { size?: number }) => {
200 |   return (
201 |     <svg
202 |       data-testid="geist-icon"
203 |       height={size}
204 |       strokeLinejoin="round"
205 |       viewBox="0 0 16 16"
206 |       width={size}
207 |       style={{ color: "currentcolor" }}
208 |     >
209 |       <path
210 |         d="M8.15991 6.54543V9.64362H12.4654C12.2763 10.64 11.709 11.4837 10.8581 12.0509L13.4544 14.0655C14.9671 12.6692 15.8399 10.6182 15.8399 8.18188C15.8399 7.61461 15.789 7.06911 15.6944 6.54552L8.15991 6.54543Z"
211 |         fill="#4285F4"
212 |       ></path>
213 |       <path
214 |         d="M3.6764 9.52268L3.09083 9.97093L1.01807 11.5855C2.33443 14.1963 5.03241 16 8.15966 16C10.3196 16 12.1305 15.2873 13.4542 14.0655L10.8578 12.0509C10.1451 12.5309 9.23598 12.8219 8.15966 12.8219C6.07967 12.8219 4.31245 11.4182 3.67967 9.5273L3.6764 9.52268Z"
215 |         fill="#34A853"
216 |       ></path>
217 |       <path
218 |         d="M1.01803 4.41455C0.472607 5.49087 0.159912 6.70543 0.159912 7.99995C0.159912 9.29447 0.472607 10.509 1.01803 11.5854C1.01803 11.5926 3.6799 9.51991 3.6799 9.51991C3.5199 9.03991 3.42532 8.53085 3.42532 7.99987C3.42532 7.46889 3.5199 6.95983 3.6799 6.47983L1.01803 4.41455Z"
219 |         fill="#FBBC05"
220 |       ></path>
221 |       <path
222 |         d="M8.15982 3.18545C9.33802 3.18545 10.3853 3.59271 11.2216 4.37818L13.5125 2.0873C12.1234 0.792777 10.3199 0 8.15982 0C5.03257 0 2.33443 1.79636 1.01807 4.41455L3.67985 6.48001C4.31254 4.58908 6.07983 3.18545 8.15982 3.18545Z"
223 |         fill="#EA4335"
224 |       ></path>
225 |     </svg>
226 |   );
227 | };
228 | 
229 | export const LogoAnthropic = () => {
230 |   return (
231 |     <svg
232 |       xmlns="http://www.w3.org/2000/svg"
233 |       xmlnsXlink="http://www.w3.org/1999/xlink"
234 |       x="0px"
235 |       y="0px"
236 |       viewBox="0 0 92.2 65"
237 |       style={{ color: "currentcolor", fill: "currentcolor" }}
238 |       width="18px"
239 |       height="18px"
240 |     >
241 |       <path
242 |         d="M66.5,0H52.4l25.7,65h14.1L66.5,0z M25.7,0L0,65h14.4l5.3-13.6h26.9L51.8,65h14.4L40.5,0C40.5,0,25.7,0,25.7,0z
243 | 		M24.3,39.3l8.8-22.8l8.8,22.8H24.3z"
244 |       ></path>
245 |     </svg>
246 |   );
247 | };
248 | 
249 | export const RouteIcon = ({ size = 16 }: { size?: number }) => {
250 |   return (
251 |     <svg
252 |       height={size}
253 |       strokeLinejoin="round"
254 |       viewBox="0 0 16 16"
255 |       width={size}
256 |       style={{ color: "currentcolor" }}
257 |     >
258 |       <path
259 |         fillRule="evenodd"
260 |         clipRule="evenodd"
261 |         d="M7.53033 0.719661L7 0.189331L5.93934 1.24999L6.46967 1.78032L6.68934 1.99999H3.375C1.51104 1.99999 0 3.51103 0 5.37499C0 7.23895 1.51104 8.74999 3.375 8.74999H12.625C13.6605 8.74999 14.5 9.58946 14.5 10.625C14.5 11.6605 13.6605 12.5 12.625 12.5H4.88555C4.56698 11.4857 3.61941 10.75 2.5 10.75C1.11929 10.75 0 11.8693 0 13.25C0 14.6307 1.11929 15.75 2.5 15.75C3.61941 15.75 4.56698 15.0143 4.88555 14H12.625C14.489 14 16 12.489 16 10.625C16 8.76103 14.489 7.24999 12.625 7.24999H3.375C2.33947 7.24999 1.5 6.41052 1.5 5.37499C1.5 4.33946 2.33947 3.49999 3.375 3.49999H6.68934L6.46967 3.71966L5.93934 4.24999L7 5.31065L7.53033 4.78032L8.85355 3.4571C9.24408 3.06657 9.24408 2.43341 8.85355 2.04288L7.53033 0.719661ZM2.5 14.25C3.05228 14.25 3.5 13.8023 3.5 13.25C3.5 12.6977 3.05228 12.25 2.5 12.25C1.94772 12.25 1.5 12.6977 1.5 13.25C1.5 13.8023 1.94772 14.25 2.5 14.25ZM14.5 2.74999C14.5 3.30228 14.0523 3.74999 13.5 3.74999C12.9477 3.74999 12.5 3.30228 12.5 2.74999C12.5 2.19771 12.9477 1.74999 13.5 1.74999C14.0523 1.74999 14.5 2.19771 14.5 2.74999ZM16 2.74999C16 4.1307 14.8807 5.24999 13.5 5.24999C12.1193 5.24999 11 4.1307 11 2.74999C11 1.36928 12.1193 0.249991 13.5 0.249991C14.8807 0.249991 16 1.36928 16 2.74999Z"
262 |         fill="currentColor"
263 |       ></path>
264 |     </svg>
265 |   );
266 | };
267 | 


--------------------------------------------------------------------------------