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


/.env.example:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=sk-****


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


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


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


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


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


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


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/lib/schema.ts:
--------------------------------------------------------------------------------
 1 | import { z } from "zod";
 2 | 
 3 | export const reasoningStepSchema = z.object({
 4 |   title: z.string().describe("The title of the reasoning step"),
 5 |   content: z.string().describe("The content of the reasoning step."),
 6 |   nextStep: z
 7 |     .enum(["continue", "finalAnswer"])
 8 |     .describe(
 9 |       "Whether to continue with another step or provide the final answer",
10 |     ),
11 | });
12 | 
13 | export type ReasoningStep = z.infer<typeof reasoningStepSchema>;
14 | 


--------------------------------------------------------------------------------
/.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 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/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-roundtrips.vercel.app"),
 7 |   title: "Multi-Step Reasoning with the AI SDK",
 8 |   description:
 9 |     "Reasoning with multi-step generations and the AI SDK",
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 | 


--------------------------------------------------------------------------------
/components/reasoning-step.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { type ReasoningStep as TReasoningStep } from "@/lib/schema";
 4 | import { motion } from "framer-motion";
 5 | 
 6 | export const ReasoningStep = ({ step }: { step: TReasoningStep }) => {
 7 |   return (
 8 |     <motion.div
 9 |       initial={{ opacity: 0 }}
10 |       animate={{ opacity: 1 }}
11 |       className="bg-zinc-50 dark:bg-zinc-800 dark:text-zinc-50 p-4 rounded-lg flex flex-col w-full justify-between"
12 |     >
13 |       <p className="text-[10px] uppercase text-zinc-500 dark:text-zinc-400">
14 |         reasoning step
15 |       </p>
16 |       <h3 className="font-bold">{step.title}</h3>
17 |       <p className="text-zinc-500 dark:text-zinc-400 text-sm">{step.content}</p>
18 |     </motion.div>
19 |   );
20 | };
21 | 


--------------------------------------------------------------------------------
/components/use-scroll-to-bottom.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, RefObject } from "react";
 2 | 
 3 | export function useScrollToBottom<T extends HTMLElement = HTMLDivElement>(): [
 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 as RefObject<T>, endRef as RefObject<T>];
29 | }
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ai-sdk-preview-roundtrips",
 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/openai": "^1.0.10",
13 |     "@vercel/analytics": "^1.4.1",
14 |     "@vercel/kv": "^3.0.0",
15 |     "ai": "^4.0.21",
16 |     "d3-scale": "^4.0.2",
17 |     "date-fns": "^4.1.0",
18 |     "framer-motion": "^11.15.0",
19 |     "next": "^15.1.9",
20 |     "react": "^19.0.0",
21 |     "react-dom": "^19.0.0",
22 |     "react-use": "^17.6.0",
23 |     "sonner": "^1.7.1",
24 |     "streamdown": "^1.6.7",
25 |     "tailwindcss-animate": "^1.0.7",
26 |     "zod": "^3.24.1"
27 |   },
28 |   "devDependencies": {
29 |     "@types/d3-scale": "^4.0.8",
30 |     "@types/node": "^22.10.2",
31 |     "@types/react": "^19.0.2",
32 |     "@types/react-dom": "^19.0.2",
33 |     "eslint": "^9.17.0",
34 |     "eslint-config-next": "15.1.2",
35 |     "postcss": "^8.4.49",
36 |     "tailwindcss": "^3.4.17",
37 |     "typescript": "^5.7.2"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/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: "412093",
11 |     name: "Apple Watch Ultra 2",
12 |     orderedAt: "2024-08-26",
13 |     image: "watch.png",
14 |   },
15 |   {
16 |     id: "539182",
17 |     name: "Apple TV",
18 |     orderedAt: "2024-08-25",
19 |     image: "tv.png",
20 |   },
21 |   {
22 |     id: "281958",
23 |     name: "Apple iPhone 14 Pro",
24 |     orderedAt: "2024-08-24",
25 |     image: "iphone.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:31 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: "Front Porch Today 3:16 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 | 


--------------------------------------------------------------------------------
/components/orders.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { motion } from "framer-motion";
 4 | import { InvoiceIcon } from "./icons";
 5 | import Image from "next/image";
 6 | import { format } from "date-fns";
 7 | 
 8 | export const Orders = ({ orders }: { orders: any[] }) => {
 9 |   return (
10 |     <div className="flex flex-col gap-4 md:max-w-[452px] max-w-[calc(100dvw-80px)] w-full">
11 |       {orders.map((order, index) => (
12 |         <motion.div
13 |           className="flex flex-row gap-4 items-center"
14 |           key={order.id}
15 |           initial={{ opacity: 0, y: 10 }}
16 |           animate={{ opacity: 1, y: 0 }}
17 |           transition={{ delay: 0.05 * index }}
18 |         >
19 |           <div className="size-12 bg-zinc-200 flex-shrink-0 rounded-lg">
20 |             <Image
21 |               src={`/${order.image}`}
22 |               alt={order.name}
23 |               width={48}
24 |               height={48}
25 |               className="w-12 h-12 rounded-lg"
26 |             />
27 |           </div>
28 | 
29 |           <div className="flex flex-row justify-between w-full">
30 |             <div className="flex flex-col gap-1">
31 |               <div className="text-sm">{order.name}</div>
32 |               <div className="text-sm text-zinc-500 dark:text-zinc-400">
33 |                 Ordered {format(new Date(order.orderedAt), "dd LLL, yyyy")}
34 |               </div>
35 |             </div>
36 | 
37 |             <div className="flex flex-col flex-start">
38 |               <div className="flex flex-row gap-2 items-center">
39 |                 <div className="text-zinc-400">
40 |                   <InvoiceIcon size={14} />
41 |                 </div>
42 |                 <div className="text-sm text-zinc-500 dark:text-zinc-400">
43 |                   {order.id}
44 |                 </div>
45 |               </div>
46 |             </div>
47 |           </div>
48 |         </motion.div>
49 |       ))}
50 |     </div>
51 |   );
52 | };
53 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Multi-Steps Preview
 2 | 
 3 | This example demonstrates how to use the [AI SDK](https://sdk.vercel.ai/docs) with [Next.js](https://nextjs.org/) and the `streamText` function to automatically handle multi-step generations.
 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-steps-reasoning&env=OPENAI_API_KEY&envDescription=OpenAI%20API%20Key%20Needed&envLink=https%3A%2F%2Fplatform.openai.com)
 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-steps-reasoning ai-sdk-preview-steps-reasoning-example
15 | ```
16 | 
17 | ```bash
18 | yarn create next-app --example https://github.com/vercel-labs/ai-sdk-preview-steps-reasoning ai-sdk-preview-steps-reasoning-example
19 | ```
20 | 
21 | ```bash
22 | pnpm create next-app --example https://github.com/vercel-labs/ai-sdk-preview-steps-reasoning ai-sdk-preview-steps-reasoning-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 | 
34 | ## Learn More
35 | 
36 | To learn more about the AI SDK or Next.js take a look at the following resources:
37 | 
38 | - [AI SDK docs](https://sdk.vercel.ai/docs)
39 | - [Vercel AI Playground](https://play.vercel.ai)
40 | - [Next.js Documentation](https://nextjs.org/docs)
41 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import { fontFamily } from "tailwindcss/defaultTheme";
 3 | import animate from "tailwindcss-animate";
 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)/api/chat/route.ts:
--------------------------------------------------------------------------------
 1 | import { openai } from "@ai-sdk/openai";
 2 | import { streamText } from "ai";
 3 | import { z } from "zod";
 4 | 
 5 | export async function POST(request: Request) {
 6 |   const { messages } = await request.json();
 7 | 
 8 |   const systemMessage = `You are an expert AI assistant that explains your reasoning step by step.
 9 |     You approach every question scientifically.
10 |     For each step, provide a title that describes what you're doing in that step, along with the content. Decide if you need another step or if you're ready to give the final answer.
11 | 
12 |     Follow these guidelines exactly:
13 |     - Answer every question mathematically where possible.
14 |     - USE AS MANY REASONING STEPS AS POSSIBLE. AT LEAST 4.
15 |     - BE AWARE OF YOUR LIMITATIONS AS AN LLM AND WHAT YOU CAN AND CANNOT DO.
16 |     - IN YOUR REASONING, INCLUDE EXPLORATION OF ALTERNATIVE ANSWERS.
17 |     - CONSIDER YOU MAY BE WRONG, AND IF YOU ARE WRONG IN YOUR REASONING, WHERE IT WOULD BE.
18 |     - FULLY TEST ALL OTHER POSSIBILITIES.
19 |     - YOU CAN BE WRONG.
20 |     - WHEN YOU SAY YOU ARE RE-EXAMINING, ACTUALLY RE-EXAMINE, AND USE ANOTHER APPROACH TO DO SO.
21 |     - DO NOT JUST SAY YOU ARE RE-EXAMINING.
22 |     - USE AT LEAST 4 METHODS TO DERIVE THE ANSWER. USE BEST PRACTICES.
23 |     - TRY AND DISPROVE YOUR ANSWER. Slow down.
24 |     - Explain why you are right and why you are wrong.
25 |     - Have at least one step where you explain things slowly (breaking things onto different lines).
26 |     - USE FIRST PRINCIPLES AND MENTAL MODELS (like thinking through the question backwards).
27 |     - If you need to count letters, separate each letter by one dash on either side and identify it by the iterator.
28 |     - When checking your work, do it from the perspective of Albert Einstein, who is looking for mistakes.
29 | 
30 |     NOTE, YOUR FIRST ANSWER MIGHT BE WRONG. Check your work twice.
31 | 
32 |     Use the addReasoningStep function for each step of your reasoning.
33 |     `;
34 | 
35 |   const result = streamText({
36 |     model: openai("gpt-4o-mini"),
37 |     system: systemMessage,
38 |     messages,
39 |     maxSteps: 10,
40 |     experimental_toolCallStreaming: true,
41 |     tools: {
42 |       addAReasoningStep: {
43 |         description: "Add a step to the reasoning process.",
44 |         parameters: z.object({
45 |           title: z.string().describe("The title of the reasoning step"),
46 |           content: z
47 |             .string()
48 |             .describe(
49 |               "The content of the reasoning step. WRITE OUT ALL OF YOUR WORK. Where relevant, prove things mathematically.",
50 |             ),
51 |           nextStep: z
52 |             .enum(["continue", "finalAnswer"])
53 |             .describe(
54 |               "Whether to continue with another step or provide the final answer",
55 |             ),
56 |         }),
57 |         execute: async (params) => params,
58 |       },
59 |     },
60 |   });
61 | 
62 |   return result.toDataStreamResponse();
63 | }
64 | 


--------------------------------------------------------------------------------
/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 { StreamableValue, useStreamableValue } from "ai/rsc";
  7 | import { Streamdown } from "streamdown";
  8 | import { Message as TMessage, ToolInvocation } from "ai";
  9 | import { ReasoningStep } from "./reasoning-step";
 10 | 
 11 | export const TextStreamMessage = ({
 12 |   content,
 13 | }: {
 14 |   content: StreamableValue;
 15 | }) => {
 16 |   const [text] = useStreamableValue(content);
 17 | 
 18 |   return (
 19 |     <motion.div
 20 |       className={`flex flex-row gap-4 px-4 w-full md:w-[500px] md:px-0 first-of-type:pt-20`}
 21 |       initial={{ y: 5, opacity: 0 }}
 22 |       animate={{ y: 0, opacity: 1 }}
 23 |     >
 24 |       <div className="size-[24px] flex flex-col justify-center items-center flex-shrink-0 text-zinc-400">
 25 |         <BotIcon />
 26 |       </div>
 27 | 
 28 |       <div className="flex flex-col gap-1 w-full">
 29 |         <div className="text-zinc-800 dark:text-zinc-300 flex flex-col gap-4">
 30 |           <Streamdown>{text}</Streamdown>
 31 |         </div>
 32 |       </div>
 33 |     </motion.div>
 34 |   );
 35 | };
 36 | 
 37 | export const Message = ({
 38 |   role,
 39 |   content,
 40 |   toolInvocations,
 41 |   reasoningMessages,
 42 | }: {
 43 |   role: string;
 44 |   content: string | ReactNode;
 45 |   toolInvocations: Array<ToolInvocation> | undefined;
 46 |   reasoningMessages: Array<TMessage>;
 47 | }) => {
 48 |   const usingTool = toolInvocations ?? false;
 49 |   const loading = content === "" && toolInvocations === undefined;
 50 |   return (
 51 |     <motion.div
 52 |       className={`flex flex-row gap-4 px-4 w-full md:w-[500px] md:px-0 first-of-type:pt-20`}
 53 |       initial={{ y: 5, opacity: 0 }}
 54 |       animate={{ y: 0, opacity: 1 }}
 55 |     >
 56 |       {usingTool ? null : (
 57 |         <div className="size-[24px] flex flex-col justify-center items-center flex-shrink-0 text-zinc-400">
 58 |           {role === "assistant" ? <BotIcon /> : <UserIcon />}
 59 |         </div>
 60 |       )}
 61 | 
 62 |       <div className="flex flex-col gap-6 w-full">
 63 |         {reasoningMessages.length > 0 ? (
 64 |           <div className="flex flex-col gap-6 w-full">
 65 |             {reasoningMessages.map((message, i) => {
 66 |               const { content, toolInvocations } = message;
 67 |               if (
 68 |                 toolInvocations &&
 69 |                 toolInvocations.length > 0 &&
 70 |                 toolInvocations[0]
 71 |               ) {
 72 |                 return (
 73 |                   // @ts-ignore
 74 |                   <ReasoningStep step={toolInvocations[0].result} key={i} />
 75 |                 );
 76 |               }
 77 |             })}
 78 |           </div>
 79 |         ) : null}
 80 |         {content && (
 81 |           <div className="text-zinc-800 dark:text-zinc-300 flex flex-col gap-4">
 82 |             <Streamdown>{content as string}</Streamdown>
 83 |           </div>
 84 |         )}
 85 | 
 86 |         {toolInvocations && (
 87 |           <div className="flex flex-col gap-4">
 88 |             {toolInvocations.map((toolInvocation) => {
 89 |               const { toolName, toolCallId, state } = toolInvocation;
 90 | 
 91 |               if (state === "result") {
 92 |                 const { result } = toolInvocation;
 93 | 
 94 |                 return (
 95 |                   <div key={toolCallId}>
 96 |                     {toolName === "addAReasoningStep" ? (
 97 |                       <ReasoningStep step={result} />
 98 |                     ) : null}
 99 |                   </div>
100 |                 );
101 |               }
102 |             })}
103 |           </div>
104 |         )}
105 |       </div>
106 |     </motion.div>
107 |   );
108 | };
109 | 


--------------------------------------------------------------------------------
/app/(preview)/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useRef } from "react";
  4 | import { Message } from "@/components/message";
  5 | import { useScrollToBottom } from "@/components/use-scroll-to-bottom";
  6 | import { motion } from "framer-motion";
  7 | import { GitIcon, MasonryIcon, VercelIcon } from "@/components/icons";
  8 | import Link from "next/link";
  9 | import { useChat } from "ai/react";
 10 | 
 11 | export default function Home() {
 12 |   const { messages, handleSubmit, input, setInput, append } = useChat();
 13 | 
 14 |   const inputRef = useRef<HTMLInputElement>(null);
 15 |   const [messagesContainerRef, messagesEndRef] =
 16 |     useScrollToBottom<HTMLDivElement>();
 17 | 
 18 |   const suggestedActions = [
 19 |     {
 20 |       title: "How many 'r's",
 21 |       label: "are in the word strawberry?",
 22 |       action: "How many 'r's are in the word strawberry?",
 23 |     },
 24 |   ];
 25 | 
 26 |   return (
 27 |     <div className="flex flex-row justify-center pb-20 h-dvh bg-white dark:bg-zinc-900">
 28 |       <div className="flex flex-col justify-between gap-4">
 29 |         <div
 30 |           ref={messagesContainerRef}
 31 |           className="flex flex-col gap-6 h-full w-dvw items-center overflow-y-scroll"
 32 |         >
 33 |           {messages.length === 0 && (
 34 |             <motion.div className="h-[350px] px-4 w-full md:w-[500px] md:px-0 pt-20">
 35 |               <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">
 36 |                 <p className="flex flex-row justify-center gap-4 items-center text-zinc-900 dark:text-zinc-50">
 37 |                   <VercelIcon size={16} />
 38 |                   <span>+</span>
 39 |                   <MasonryIcon />
 40 |                 </p>
 41 |                 <p className="text-center">
 42 |                   Multi-step generations with gpt-4o-mini (
 43 |                   <Link
 44 |                     className="text-blue-500 dark:text-blue-400"
 45 |                     href="https://openai.com"
 46 |                     target="_blank"
 47 |                   >
 48 |                     OpenAI
 49 |                   </Link>
 50 |                   ) and the{" "}
 51 |                   <Link
 52 |                     className="text-blue-500 dark:text-blue-400"
 53 |                     href="https://sdk.vercel.ai"
 54 |                     target="_blank"
 55 |                   >
 56 |                     AI SDK
 57 |                   </Link>
 58 |                 </p>
 59 |               </div>
 60 |             </motion.div>
 61 |           )}
 62 | 
 63 |           {messages.map((message, i) => {
 64 |             return (
 65 |               <Message
 66 |                 key={message.id}
 67 |                 role={message.role}
 68 |                 content={message.content}
 69 |                 toolInvocations={message.toolInvocations}
 70 |                 reasoningMessages={[]}
 71 |               ></Message>
 72 |             );
 73 |           })}
 74 |           <div ref={messagesEndRef} />
 75 |         </div>
 76 | 
 77 |         <div className="grid sm:grid-cols-1 gap-2 w-full px-4 md:px-0 mx-auto md:max-w-[500px] mb-4">
 78 |           {messages.length === 0 &&
 79 |             suggestedActions.map((suggestedAction, index) => (
 80 |               <motion.div
 81 |                 initial={{ opacity: 0, y: 20 }}
 82 |                 animate={{ opacity: 1, y: 0 }}
 83 |                 transition={{ delay: 0.05 * index }}
 84 |                 key={index}
 85 |                 className={index > 1 ? "hidden sm:block" : "block"}
 86 |               >
 87 |                 <button
 88 |                   onClick={async () => {
 89 |                     append({
 90 |                       role: "user",
 91 |                       content: suggestedAction.action,
 92 |                     });
 93 |                   }}
 94 |                   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"
 95 |                 >
 96 |                   <span className="font-medium">{suggestedAction.title}</span>
 97 |                   <span className="text-zinc-500 dark:text-zinc-400">
 98 |                     {suggestedAction.label}
 99 |                   </span>
100 |                 </button>
101 |               </motion.div>
102 |             ))}
103 |         </div>
104 | 
105 |         <form
106 |           className="flex flex-col gap-2 relative items-center"
107 |           onSubmit={handleSubmit}
108 |         >
109 |           <input
110 |             ref={inputRef}
111 |             className="bg-zinc-100 rounded-md px-2 py-1.5 w-full outline-none dark:bg-zinc-700 text-zinc-800 dark:text-zinc-300 md:max-w-[500px] max-w-[calc(100dvw-32px)]"
112 |             placeholder="Send a message..."
113 |             value={input}
114 |             onChange={(event) => {
115 |               setInput(event.target.value);
116 |             }}
117 |           />
118 |         </form>
119 |       </div>
120 |     </div>
121 |   );
122 | }
123 | 


--------------------------------------------------------------------------------
/components/tracker.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { TrackingInformation } from "./data";
  4 | import { BoxIcon, GPSIcon, HomeIcon, InvoiceIcon } from "./icons";
  5 | import { motion } from "framer-motion";
  6 | 
  7 | const getColorFromProgress = ({
  8 |   progress,
  9 |   type,
 10 | }: {
 11 |   progress: string;
 12 |   type: "foreground" | "text";
 13 | }) => {
 14 |   switch (progress) {
 15 |     case "Shipped":
 16 |       return type === "foreground" ? "#a1a1aa" : "#fafafa";
 17 |     case "Out for Delivery":
 18 |       return type === "foreground" ? "#3b82f6" : "#eff6ff";
 19 |     case "Delivered":
 20 |       return type === "foreground" ? "#10b981" : "#f0fdf4";
 21 |     default:
 22 |       return type === "foreground" ? "#f4f4f5" : "#71717a";
 23 |   }
 24 | };
 25 | 
 26 | export const Tracker = ({
 27 |   trackingInformation,
 28 | }: {
 29 |   trackingInformation: TrackingInformation;
 30 | }) => {
 31 |   const { progress } = trackingInformation;
 32 | 
 33 |   return (
 34 |     <div className="my-4 flex flex-col gap-6 md:max-w-[452px] max-w-[calc(100dvw-80px)] w-full justify-between">
 35 |       <motion.div
 36 |         className="flex flex-col justify-between items-center"
 37 |         initial={{ opacity: 0 }}
 38 |         animate={{ opacity: 1 }}
 39 |         transition={{ delay: 0.0 }}
 40 |       >
 41 |         <div className="flex flex-row gap-2 items-center text-sm text-zinc-500 dark:text-zinc-400">
 42 |           <div>Tracking Order</div>
 43 |           <InvoiceIcon size={14} />
 44 |           <div>{trackingInformation.orderId}</div>
 45 |         </div>
 46 |       </motion.div>
 47 | 
 48 |       <motion.div
 49 |         className="flex flex-row items-center gap-2"
 50 |         initial={{ opacity: 0 }}
 51 |         animate={{ opacity: 1 }}
 52 |         transition={{ delay: 0.1 }}
 53 |       >
 54 |         <motion.div
 55 |           className="size-8 text-blue-50 rounded-full flex-shrink-0 flex flex-row justify-center items-center"
 56 |           initial={{ background: "#f4f4f5" }}
 57 |           animate={{
 58 |             background: getColorFromProgress({
 59 |               progress,
 60 |               type: "foreground",
 61 |             }),
 62 |             color: getColorFromProgress({
 63 |               progress,
 64 |               type: "text",
 65 |             }),
 66 |           }}
 67 |           transition={{ delay: 0.2 }}
 68 |         >
 69 |           <BoxIcon size={14} />
 70 |         </motion.div>
 71 |         <div className="h-2 bg-zinc-100 w-full rounded-lg relative dark:bg-zinc-700">
 72 |           <motion.div
 73 |             className="h-2 rounded-lg z-10 absolute"
 74 |             initial={{ width: 0, background: "#f4f4f5" }}
 75 |             animate={{
 76 |               width:
 77 |                 progress === "Delivered"
 78 |                   ? "100%"
 79 |                   : progress === "Out for Delivery"
 80 |                     ? "100%"
 81 |                     : progress === "Shipped"
 82 |                       ? "34%"
 83 |                       : "0%",
 84 |               background: getColorFromProgress({
 85 |                 progress,
 86 |                 type: "foreground",
 87 |               }),
 88 |             }}
 89 |             transition={{ delay: 0.3 }}
 90 |           />
 91 |         </div>
 92 | 
 93 |         <motion.div
 94 |           className="size-8 text-blue-50 rounded-full flex-shrink-0 flex flex-row justify-center items-center"
 95 |           initial={{ background: "#f4f4f5" }}
 96 |           animate={{
 97 |             background:
 98 |               progress === "Shipped"
 99 |                 ? "#f4f4f5"
100 |                 : getColorFromProgress({
101 |                     progress,
102 |                     type: "foreground",
103 |                   }),
104 |             color:
105 |               progress === "Shipped"
106 |                 ? "#71717a"
107 |                 : getColorFromProgress({
108 |                     progress,
109 |                     type: "text",
110 |                   }),
111 |           }}
112 |           transition={{ delay: 0.4 }}
113 |         >
114 |           <span style={{ transform: "translateX(-1.25px) translateY(1px)" }}>
115 |             <GPSIcon size={14} />
116 |           </span>
117 |         </motion.div>
118 | 
119 |         <div className="h-2 bg-zinc-100 w-full rounded-lg relative dark:bg-zinc-700">
120 |           <motion.div
121 |             className="h-2 rounded-lg z-10 absolute"
122 |             initial={{ width: 0, background: "#f4f4f5" }}
123 |             animate={{
124 |               width:
125 |                 progress === "Delivered"
126 |                   ? "100%"
127 |                   : progress === "Out for Delivery"
128 |                     ? "71%"
129 |                     : "0%",
130 |               background: getColorFromProgress({
131 |                 progress,
132 |                 type: "foreground",
133 |               }),
134 |             }}
135 |             transition={{ delay: 0.5 }}
136 |           />
137 |         </div>
138 |         <motion.div
139 |           className="size-8 bg-zinc-100 text-zinc-500 dark:text-zinc-400 rounded-full flex-shrink-0 flex flex-row justify-center items-center"
140 |           initial={{
141 |             background: "#f4f4f5",
142 |             color: "#71717a",
143 |           }}
144 |           transition={{ delay: 0.5 }}
145 |           animate={{
146 |             background: ["Out for Delivery", "Shipped"].includes(progress)
147 |               ? "#f4f4f5"
148 |               : getColorFromProgress({
149 |                   progress,
150 |                   type: "foreground",
151 |                 }),
152 |             color: ["Out for Delivery", "Shipped"].includes(progress)
153 |               ? "#71717a"
154 |               : getColorFromProgress({
155 |                   progress,
156 |                   type: "text",
157 |                 }),
158 |           }}
159 |         >
160 |           <HomeIcon size={14} />
161 |         </motion.div>
162 |       </motion.div>
163 | 
164 |       <motion.div
165 |         className="flex flex-col justify-between items-center gap-1"
166 |         initial={{ opacity: 0 }}
167 |         animate={{ opacity: 1 }}
168 |         transition={{ delay: 0.6 }}
169 |       >
170 |         <div className="text-sm">{progress}</div>
171 |         <div className="text-sm text-zinc-500 dark:text-zinc-400">
172 |           {trackingInformation.description}
173 |         </div>
174 |       </motion.div>
175 |     </div>
176 |   );
177 | };
178 | 


--------------------------------------------------------------------------------
/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 MasonryIcon = () => {
 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 |       <path
 88 |         fillRule="evenodd"
 89 |         clipRule="evenodd"
 90 |         d="M2.5 6.5V2.5H5.5V6.5H2.5ZM1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V7C7 7.55228 6.55228 8 6 8H2C1.44772 8 1 7.55228 1 7V2ZM2.5 13.5V11.5H5.5V13.5H2.5ZM1 11C1 10.4477 1.44772 10 2 10H6C6.55228 10 7 10.4477 7 11V14C7 14.5523 6.55228 15 6 15H2C1.44772 15 1 14.5523 1 14V11ZM10.5 2.5V4.5H13.5V2.5H10.5ZM10 1C9.44772 1 9 1.44772 9 2V5C9 5.55228 9.44772 6 10 6H14C14.5523 6 15 5.55228 15 5V2C15 1.44772 14.5523 1 14 1H10ZM13.5 13.5H10.5V9.5H13.5V13.5ZM9 9C9 8.44772 9.44772 8 10 8H14C14.5523 8 15 8.44772 15 9V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V9Z"
 91 |         fill="currentColor"
 92 |       ></path>
 93 |     </svg>
 94 |   );
 95 | };
 96 | 
 97 | export const GitIcon = () => {
 98 |   return (
 99 |     <svg
100 |       height="16"
101 |       strokeLinejoin="round"
102 |       viewBox="0 0 16 16"
103 |       width="16"
104 |       style={{ color: "currentcolor" }}
105 |     >
106 |       <g clipPath="url(#clip0_872_3147)">
107 |         <path
108 |           fillRule="evenodd"
109 |           clipRule="evenodd"
110 |           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"
111 |           fill="currentColor"
112 |         ></path>
113 |       </g>
114 |       <defs>
115 |         <clipPath id="clip0_872_3147">
116 |           <rect width="16" height="16" fill="white"></rect>
117 |         </clipPath>
118 |       </defs>
119 |     </svg>
120 |   );
121 | };
122 | 
123 | export const BoxIcon = ({ 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="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"
136 |         fill="currentColor"
137 |       ></path>
138 |     </svg>
139 |   );
140 | };
141 | 
142 | export const HomeIcon = ({ 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 |         fillRule="evenodd"
153 |         clipRule="evenodd"
154 |         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"
155 |         fill="currentColor"
156 |       ></path>
157 |     </svg>
158 |   );
159 | };
160 | 
161 | export const GPSIcon = ({ size = 16 }: { size: number }) => {
162 |   return (
163 |     <svg
164 |       height={size}
165 |       strokeLinejoin="round"
166 |       viewBox="0 0 16 16"
167 |       width={size}
168 |       style={{ color: "currentcolor" }}
169 |     >
170 |       <path
171 |         d="M1 6L15 1L10 15L7.65955 8.91482C7.55797 8.65073 7.34927 8.44203 7.08518 8.34045L1 6Z"
172 |         stroke="currentColor"
173 |         strokeWidth="1.5"
174 |         strokeLinecap="round"
175 |         strokeLinejoin="bevel"
176 |         fill="transparent"
177 |       ></path>
178 |     </svg>
179 |   );
180 | };
181 | 
182 | export const InvoiceIcon = ({ 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 |         fillRule="evenodd"
193 |         clipRule="evenodd"
194 |         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"
195 |         fill="currentColor"
196 |       ></path>
197 |     </svg>
198 |   );
199 | };
200 | 


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