init commit

.env.example

@@ -0,0 +1,3 @@
+XAI_API_KEY=""
+OPENAI_API_KEY=
+DATABASE_URL="postgresql://username:password@host:port/database"

.gitattributes

@@ -0,0 +1,3 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,138 @@
+<a href="https://ai-sdk-starter-xai.vercel.app">
+  <h1 align="center">Vercel x xAI Chatbot</h1>
+</a>
+
+<p align="center">
+  An open-source AI chatbot app template built with Next.js, the AI SDK by Vercel, and xAI.
+</p>
+
+<p align="center">
+  <a href="#features"><strong>Features</strong></a> ·
+  <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
+  <a href="#running-locally"><strong>Running Locally</strong></a> ·
+  <a href="#mcp-server-configuration"><strong>MCP Configuration</strong></a> ·
+  <a href="#authors"><strong>Authors</strong></a>
+</p>
+<br/>
+
+## Features
+
+- Streaming text responses powered by the [AI SDK by Vercel](https://sdk.vercel.ai/docs), allowing multiple AI providers to be used interchangeably with just a few lines of code.
+- Built-in tool integration for extending AI capabilities (demonstrated with a weather tool example).
+- Support for [Model Context Protocol (MCP)](https://modelcontextprotocol.io) servers to expand available tools.
+- Multiple MCP transport types (SSE and stdio) for connecting to various tool providers.
+- Reasoning model support.
+- [shadcn/ui](https://ui.shadcn.com/) components for a modern, responsive UI powered by [Tailwind CSS](https://tailwindcss.com).
+- Built with the latest [Next.js](https://nextjs.org) App Router.
+
+## Deploy Your Own
+
+You can deploy your own version to Vercel by clicking the button below:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=Vercel+x+xAI+Chatbot&repository-name=ai-sdk-starter-xai&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-starter-xai&demo-title=Vercel+x+xAI+Chatbot&demo-url=https%3A%2F%2Fai-sdk-starter-xai.labs.vercel.dev%2F&demo-description=A+simple+chatbot+application+built+with+Next.js+that+uses+xAI+via+the+AI+SDK+and+the+Vercel+Marketplace&products=[{%22type%22:%22integration%22,%22protocol%22:%22ai%22,%22productSlug%22:%22grok%22,%22integrationSlug%22:%22xai%22}])
+
+## Running Locally
+
+1. Clone the repository and install dependencies:
+
+   ```bash
+   npm install
+   # or
+   yarn install
+   # or
+   pnpm install
+   ```
+
+2. Install the [Vercel CLI](https://vercel.com/docs/cli):
+
+   ```bash
+   npm i -g vercel
+   # or
+   yarn global add vercel
+   # or
+   pnpm install -g vercel
+   ```
+
+   Once installed, link your local project to your Vercel project:
+
+   ```bash
+   vercel link
+   ```
+
+   After linking, pull your environment variables:
+
+   ```bash
+   vercel env pull
+   ```
+
+   This will create a `.env.local` file with all the necessary environment variables.
+
+3. Run the development server:
+
+   ```bash
+   npm run dev
+   # or
+   yarn dev
+   # or
+   pnpm dev
+   ```
+
+4. Open [http://localhost:3000](http://localhost:3000) to view your new AI chatbot application.
+
+## MCP Server Configuration
+
+This application supports connecting to Model Context Protocol (MCP) servers to access their tools. You can add and manage MCP servers through the settings icon in the chat interface.
+
+### Adding an MCP Server
+
+1. Click the settings icon (⚙️) next to the model selector in the chat interface.
+2. Enter a name for your MCP server.
+3. Select the transport type:
+   - **SSE (Server-Sent Events)**: For HTTP-based remote servers
+   - **stdio (Standard I/O)**: For local servers running on the same machine
+
+#### SSE Configuration
+
+If you select SSE transport:
+1. Enter the server URL (e.g., `https://mcp.example.com/token/sse`)
+2. Click "Add Server"
+
+#### stdio Configuration
+
+If you select stdio transport:
+1. Enter the command to execute (e.g., `node`)
+2. Enter the command arguments (e.g., `src/mcp-server.js --port 3001`)
+   - You can enter space-separated arguments or paste a JSON array
+3. Click "Add Server"
+
+4. Click "Use" to activate the server for the current chat session.
+
+### Available MCP Servers
+
+You can use any MCP-compatible server with this application. Here are some examples:
+
+- [Composio](https://composio.dev) - Provides search, code interpreter, and other tools
+- Any local MCP server using stdio transport
+- [Any other third-party MCP server]
+
+### Installing Required Dependencies
+
+If you're running the project locally and encounter issues with MCP integration, make sure to install the required dependencies:
+
+```bash
+npm run install-mcp
+# or
+yarn install-mcp
+# or
+pnpm run install-mcp
+```
+
+### Creating Your Own MCP Server
+
+For information on creating your own MCP server, refer to the [Model Context Protocol documentation](https://modelcontextprotocol.io).
+
+## Authors
+
+This repository is maintained by the [Vercel](https://vercel.com) team and community contributors.
+
+Contributions are welcome! Feel free to open issues or submit pull requests to enhance functionality or fix bugs.

ai/providers.ts

@@ -0,0 +1,59 @@
+import { xai } from "@ai-sdk/xai";
+import { openai } from "@ai-sdk/openai";
+import { customProvider } from "ai";
+
+export interface ModelInfo {
+  provider: string;
+  name: string;
+  description: string;
+  apiVersion: string;
+  capabilities: string[];
+}
+
+const languageModels = {
+  "grok-3": xai("grok-3-latest"),
+  "grok-3-mini": xai("grok-3-mini-fast-latest"),
+  "gpt-4.1-mini": openai("gpt-4.1-mini"),
+  "gpt-4.1-nano": openai("gpt-4.1-nano"),
+};
+
+export const modelDetails: Record<keyof typeof languageModels, ModelInfo> = {
+  "grok-3": {
+    provider: "xAI",
+    name: "Grok-3",
+    description: "Latest version of xAI's flagship model with strong reasoning and coding capabilities.",
+    apiVersion: "grok-3-latest",
+    capabilities: ["Balance", "Efficient", "Agentic"]
+  },
+  "grok-3-mini": {
+    provider: "xAI",
+    name: "Grok-3 Mini",
+    description: "Fast, efficient and smaller xAI model with reasoning capabilities.",
+    apiVersion: "grok-3-mini-fast-latest",
+    capabilities: ["Fast","Reasoning", "Efficient"]
+  },
+  "gpt-4.1-mini": {
+    provider: "OpenAI",
+    name: "GPT-4.1 Mini",
+    description: "Compact version of OpenAI's GPT-4.1 with good balance of capabilities, including vision.",
+    apiVersion: "gpt-4.1-mini",
+    capabilities: [ "Balance", "Creative", "Vision"]
+  },
+  "gpt-4.1-nano": {
+    provider: "OpenAI",
+    name: "GPT-4.1 Nano",
+    description: "Smallest and fastest GPT-4.1 variant designed for efficient rapid responses.",
+    apiVersion: "gpt-4.1-nano",
+    capabilities: ["Rapid", "Compact", "Efficient", "Vision"]
+  },
+};
+
+export const model = customProvider({
+  languageModels,
+});
+
+export type modelID = keyof typeof languageModels;
+
+export const MODELS = Object.keys(languageModels);
+
+export const defaultModel: modelID = "grok-3-mini";

ai/tools.ts

@@ -0,0 +1,11 @@
+import { VercelAIToolSet } from "composio-core";
+
+const toolset = new VercelAIToolSet();
+
+export const composioTools = await toolset.getTools(
+  { 
+    apps: [
+      "tavily",
+    ]
+  }
+);

app/actions.ts

@@ -0,0 +1,66 @@
+"use server";
+
+import { openai } from "@ai-sdk/openai";
+import { generateObject } from "ai";
+import { z } from "zod";
+
+// Helper to extract text content from a message regardless of format
+function getMessageText(message: any): string {
+  // Check if the message has parts (new format)
+  if (message.parts && Array.isArray(message.parts)) {
+    const textParts = message.parts.filter((p: any) => p.type === 'text' && p.text);
+    if (textParts.length > 0) {
+      return textParts.map((p: any) => p.text).join('\n');
+    }
+  }
+  
+  // Fallback to content (old format)
+  if (typeof message.content === 'string') {
+    return message.content;
+  }
+  
+  // If content is an array (potentially of parts), try to extract text
+  if (Array.isArray(message.content)) {
+    const textItems = message.content.filter((item: any) => 
+      typeof item === 'string' || (item.type === 'text' && item.text)
+    );
+    
+    if (textItems.length > 0) {
+      return textItems.map((item: any) => 
+        typeof item === 'string' ? item : item.text
+      ).join('\n');
+    }
+  }
+  
+  return '';
+}
+
+export async function generateTitle(messages: any[]) {
+  // Convert messages to a format that OpenAI can understand
+  const normalizedMessages = messages.map(msg => ({
+    role: msg.role,
+    content: getMessageText(msg)
+  }));
+  
+  const { object } = await generateObject({
+    model: openai("gpt-4.1"),
+    schema: z.object({
+      title: z.string().min(1).max(100),
+    }),
+    system: `
+    You are a helpful assistant that generates titles for chat conversations.
+    The title should be a short description of the conversation.
+    The title should be no more than 30 characters.
+    The title should be unique and not generic.
+    `,
+    messages: [
+      ...normalizedMessages,
+      {
+        role: "user",
+        content: "Generate a title for the conversation.",
+      },
+    ],
+  });
+
+  return object.title;
+}

app/api/chat/route.ts

@@ -0,0 +1,228 @@
+import { model, type modelID } from "@/ai/providers";
+import { composioTools } from "@/ai/tools";
+import { streamText, type UIMessage } from "ai";
+import { openai } from '@ai-sdk/openai';
+import { appendResponseMessages } from 'ai';
+import { saveChat, saveMessages, convertToDBMessages } from '@/lib/chat-store';
+import { nanoid } from 'nanoid';
+import { db } from '@/lib/db';
+import { messages, chats } from '@/lib/db/schema';
+import { eq, and } from 'drizzle-orm';
+
+import { experimental_createMCPClient as createMCPClient, MCPTransport } from 'ai';
+import { Experimental_StdioMCPTransport as StdioMCPTransport } from 'ai/mcp-stdio';
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+interface KeyValuePair {
+  key: string;
+  value: string;
+}
+
+interface MCPServerConfig {
+  url: string;
+  type: 'sse' | 'stdio';
+  command?: string;
+  args?: string[];
+  env?: KeyValuePair[];
+  headers?: KeyValuePair[];
+}
+
+export async function POST(req: Request) {
+  const {
+    messages,
+    chatId,
+    selectedModel,
+    userId,
+    mcpServers = [],
+  }: {
+    messages: UIMessage[];
+    chatId?: string;
+    selectedModel: modelID;
+    userId: string;
+    mcpServers?: MCPServerConfig[];
+  } = await req.json();
+
+  if (!userId) {
+    return new Response(
+      JSON.stringify({ error: "User ID is required" }),
+      { status: 400, headers: { "Content-Type": "application/json" } }
+    );
+  }
+
+  const id = chatId || nanoid();
+
+  // Check if chat already exists for the given ID
+  // If not, we'll create it in onFinish
+  let isNewChat = false;
+  if (chatId) {
+    try {
+      const existingChat = await db.query.chats.findFirst({
+        where: and(
+          eq(chats.id, chatId),
+          eq(chats.userId, userId)
+        )
+      });
+      isNewChat = !existingChat;
+    } catch (error) {
+      console.error("Error checking for existing chat:", error);
+      // Continue anyway, we'll create the chat in onFinish
+      isNewChat = true;
+    }
+  } else {
+    // No ID provided, definitely new
+    isNewChat = true;
+  }
+
+  // Initialize tools with Composio tools
+  let tools = { ...composioTools };
+  const mcpClients: any[] = [];
+  
+  // Process each MCP server configuration
+  for (const mcpServer of mcpServers) {
+    try {
+      // Create appropriate transport based on type
+      let transport: MCPTransport | { type: 'sse', url: string, headers?: Record<string, string> };
+      
+      if (mcpServer.type === 'sse') {
+        // Convert headers array to object for SSE transport
+        const headers: Record<string, string> = {};
+        if (mcpServer.headers && mcpServer.headers.length > 0) {
+          mcpServer.headers.forEach(header => {
+            if (header.key) headers[header.key] = header.value || '';
+          });
+        }
+        
+        transport = { 
+          type: 'sse' as const, 
+          url: mcpServer.url,
+          headers: Object.keys(headers).length > 0 ? headers : undefined
+        };
+      } else if (mcpServer.type === 'stdio') {
+        // For stdio transport, we need command and args
+        if (!mcpServer.command || !mcpServer.args || mcpServer.args.length === 0) {
+          console.warn("Skipping stdio MCP server due to missing command or args");
+          continue;
+        }
+        
+        // Convert env array to object for stdio transport
+        const env: Record<string, string> = {};
+        if (mcpServer.env && mcpServer.env.length > 0) {
+          mcpServer.env.forEach(envVar => {
+            if (envVar.key) env[envVar.key] = envVar.value || '';
+          });
+        }
+        
+        transport = new StdioMCPTransport({
+          command: mcpServer.command,
+          args: mcpServer.args,
+          env: Object.keys(env).length > 0 ? env : undefined
+        });
+      } else {
+        console.warn(`Skipping MCP server with unsupported transport type: ${mcpServer.type}`);
+        continue;
+      }
+      
+      const mcpClient = await createMCPClient({ transport });
+      mcpClients.push(mcpClient);
+      
+      const mcptools = await mcpClient.tools();
+      
+      console.log(`MCP tools from ${mcpServer.type} transport:`, Object.keys(mcptools));
+      
+      // Add MCP tools to tools object
+      tools = { ...tools, ...mcptools };
+    } catch (error) {
+      console.error("Failed to initialize MCP client:", error);
+      // Continue with other servers instead of failing the entire request
+    }
+  }
+
+  // Register cleanup for all clients
+  if (mcpClients.length > 0) {
+    req.signal.addEventListener('abort', async () => {
+      for (const client of mcpClients) {
+        try {
+          await client.close();
+        } catch (error) {
+          console.error("Error closing MCP client:", error);
+        }
+      }
+    });
+  }
+
+  console.log("messages", messages);
+  console.log("parts", messages.map(m => m.parts.map(p => p)));
+
+  // If there was an error setting up MCP clients but we at least have composio tools, continue
+  const result = streamText({
+    model: model.languageModel(selectedModel),
+    system: `You are a helpful assistant with access to a variety of tools.
+
+    The tools are very powerful, and you can use them to answer the user's question.
+    So choose the tool that is most relevant to the user's question.
+
+    You can use multiple tools in a single response.
+    Always respond after using the tools for better user experience.
+    You can run multiple steps using all the tools!!!!
+    Make sure to use the right tool to respond to the user's question.
+
+    ## Response Format
+    - Markdown is supported.
+    - Respond according to tool's response.
+    - Use the tools to answer the user's question.
+    - If you don't know the answer, use the tools to find the answer or say you don't know.
+    `,
+    messages,
+    tools,
+    maxSteps: 20,
+    onError: (error) => {
+      console.error(JSON.stringify(error, null, 2));
+    },
+    async onFinish({ response, steps, toolCalls, toolResults }) {
+      console.log("onFinish", response.messages.map(m => {
+        return {
+          id: m.id,
+          content: JSON.stringify(m.content),
+          role: m.role,
+        }
+      }));
+      console.log("steps", steps);
+      console.log("toolCalls", toolCalls);
+      console.log("toolResults", toolResults);
+      
+      // Combine messages for processing
+      const allMessages = appendResponseMessages({
+        messages,
+        responseMessages: response.messages,
+      });
+      
+      // Step 1: Save chat with messages for proper title generation
+      await saveChat({
+        id,
+        userId,
+        messages: allMessages,
+        // No title specified - will be generated
+      });
+      
+      // Step 2: Save all messages
+      const dbMessages = convertToDBMessages(allMessages, id);
+      await saveMessages({ messages: dbMessages });
+    }
+  });
+
+  result.consumeStream()
+  return result.toDataStreamResponse({
+    sendReasoning: true,
+    getErrorMessage: (error) => {
+      if (error instanceof Error) {
+        if (error.message.includes("Rate limit")) {
+          return "Rate limit exceeded. Please try again later.";
+        }
+      }
+      console.error(error);
+      return "An error occurred.";
+    },
+  });
+}

app/api/chats/[id]/route.ts

@@ -0,0 +1,56 @@
+import { NextResponse } from "next/server";
+import { getChatById, deleteChat } from "@/lib/chat-store";
+
+interface Params {
+  params: {
+    id: string;
+  };
+}
+
+export async function GET(request: Request, { params }: Params) {
+  try {
+    const userId = request.headers.get('x-user-id');
+    
+    if (!userId) {
+      return NextResponse.json({ error: "User ID is required" }, { status: 400 });
+    }
+    
+    const { id } = await params;
+    const chat = await getChatById(id, userId);
+    
+    if (!chat) {
+      return NextResponse.json(
+        { error: "Chat not found" },
+        { status: 404 }
+      );
+    }
+    
+    return NextResponse.json(chat);
+  } catch (error) {
+    console.error("Error fetching chat:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch chat" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(request: Request, { params }: Params) {
+  try {
+    const userId = request.headers.get('x-user-id');
+    
+    if (!userId) {
+      return NextResponse.json({ error: "User ID is required" }, { status: 400 });
+    }
+    
+    const { id } = await params;
+    await deleteChat(id, userId);
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Error deleting chat:", error);
+    return NextResponse.json(
+      { error: "Failed to delete chat" },
+      { status: 500 }
+    );
+  }
+} 

app/api/chats/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { getChats } from "@/lib/chat-store";
+
+export async function GET(request: Request) {
+  try {
+    const userId = request.headers.get('x-user-id');
+    
+    if (!userId) {
+      return NextResponse.json({ error: "User ID is required" }, { status: 400 });
+    }
+    
+    const chats = await getChats(userId);
+    return NextResponse.json(chats);
+  } catch (error) {
+    console.error("Error fetching chats:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch chats" },
+      { status: 500 }
+    );
+  }
+} 

app/chat/[id]/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Chat from "@/components/chat";
+import { getUserId } from "@/lib/user-id";
+import { useQueryClient } from "@tanstack/react-query";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+
+export default function ChatPage() {
+  const params = useParams();
+  const chatId = params?.id as string;
+  const queryClient = useQueryClient();
+  const userId = getUserId();
+
+  // Prefetch chat data
+  useEffect(() => {
+    async function prefetchChat() {
+      if (!chatId || !userId) return;
+      
+      // Check if data already exists in cache
+      const existingData = queryClient.getQueryData(['chat', chatId, userId]);
+      if (existingData) return;
+
+      // Prefetch the data
+      await queryClient.prefetchQuery({
+        queryKey: ['chat', chatId, userId] as const,
+        queryFn: async () => {
+          try {
+            const response = await fetch(`/api/chats/${chatId}`, {
+              headers: {
+                'x-user-id': userId
+              }
+            });
+            
+            if (!response.ok) {
+              throw new Error('Failed to load chat');
+            }
+            
+            return response.json();
+          } catch (error) {
+            console.error('Error prefetching chat:', error);
+            return null;
+          }
+        },
+        staleTime: 1000 * 60 * 5, // 5 minutes
+      });
+    }
+
+    prefetchChat();
+  }, [chatId, userId, queryClient]);
+
+  return <Chat />;
+} 

app/globals.css

@@ -0,0 +1,191 @@
+@import "tailwindcss";
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: Montserrat, sans-serif;
+  --font-mono: Ubuntu Mono, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --font-serif: Merriweather, serif;
+  --radius: 0.625rem;
+  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
+  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
+  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
+  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
+  --tracking-normal: var(--tracking-normal);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-md: var(--shadow-md);
+  --shadow: var(--shadow);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-2xs: var(--shadow-2xs);
+  --spacing: var(--spacing);
+  --letter-spacing: var(--letter-spacing);
+  --shadow-offset-y: var(--shadow-offset-y);
+  --shadow-offset-x: var(--shadow-offset-x);
+  --shadow-spread: var(--shadow-spread);
+  --shadow-blur: var(--shadow-blur);
+  --shadow-opacity: var(--shadow-opacity);
+  --color-shadow-color: var(--shadow-color);
+}
+
+:root {
+  --background: oklch(0.99 0.01 56.32);
+  --foreground: oklch(0.34 0.01 2.77);
+  --card: oklch(1.00 0 0);
+  --card-foreground: oklch(0.34 0.01 2.77);
+  --popover: oklch(1.00 0 0);
+  --popover-foreground: oklch(0.34 0.01 2.77);
+  --primary: oklch(0.74 0.16 34.71);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.96 0.02 28.90);
+  --secondary-foreground: oklch(0.56 0.13 32.74);
+  --muted: oklch(0.97 0.02 39.40);
+  --muted-foreground: oklch(0.49 0.05 26.45);
+  --accent: oklch(0.83 0.11 58.00);
+  --accent-foreground: oklch(0.34 0.01 2.77);
+  --destructive: oklch(0.61 0.21 22.24);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.93 0.04 38.69);
+  --input: oklch(0.93 0.04 38.69);
+  --ring: oklch(0.74 0.16 34.71);
+  --chart-1: oklch(0.74 0.16 34.71);
+  --chart-2: oklch(0.83 0.11 58.00);
+  --chart-3: oklch(0.88 0.08 54.93);
+  --chart-4: oklch(0.82 0.11 40.89);
+  --chart-5: oklch(0.64 0.13 32.07);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.97 0.02 39.40);
+  --sidebar-foreground: oklch(0.34 0.01 2.77);
+  --sidebar-primary: oklch(0.74 0.16 34.71);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.83 0.11 58.00);
+  --sidebar-accent-foreground: oklch(0.34 0.01 2.77);
+  --sidebar-border: oklch(0.93 0.04 38.69);
+  --sidebar-ring: oklch(0.74 0.16 34.71);
+  --font-sans: Montserrat, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: Ubuntu Mono, monospace;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-opacity: 0.09;
+  --shadow-blur: 12px;
+  --shadow-spread: -3px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 6px;
+  --letter-spacing: 0em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09);
+  --shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09);
+  --shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09);
+  --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
+  --tracking-normal: 0em;
+}
+
+.dark {
+  --background: oklch(0.26 0.02 352.40);
+  --foreground: oklch(0.94 0.01 51.32);
+  --card: oklch(0.32 0.02 341.45);
+  --card-foreground: oklch(0.94 0.01 51.32);
+  --popover: oklch(0.32 0.02 341.45);
+  --popover-foreground: oklch(0.94 0.01 51.32);
+  --primary: oklch(0.74 0.16 34.71);
+  --primary-foreground: oklch(1.00 0 0);
+  --secondary: oklch(0.36 0.02 342.27);
+  --secondary-foreground: oklch(0.94 0.01 51.32);
+  --muted: oklch(0.32 0.02 341.45);
+  --muted-foreground: oklch(0.84 0.02 52.63);
+  --accent: oklch(0.83 0.11 58.00);
+  --accent-foreground: oklch(0.26 0.02 352.40);
+  --destructive: oklch(0.61 0.21 22.24);
+  --destructive-foreground: oklch(1.00 0 0);
+  --border: oklch(0.36 0.02 342.27);
+  --input: oklch(0.36 0.02 342.27);
+  --ring: oklch(0.74 0.16 34.71);
+  --chart-1: oklch(0.74 0.16 34.71);
+  --chart-2: oklch(0.83 0.11 58.00);
+  --chart-3: oklch(0.88 0.08 54.93);
+  --chart-4: oklch(0.82 0.11 40.89);
+  --chart-5: oklch(0.64 0.13 32.07);
+  --sidebar: oklch(0.26 0.02 352.40);
+  --sidebar-foreground: oklch(0.94 0.01 51.32);
+  --sidebar-primary: oklch(0.74 0.16 34.71);
+  --sidebar-primary-foreground: oklch(1.00 0 0);
+  --sidebar-accent: oklch(0.83 0.11 58.00);
+  --sidebar-accent-foreground: oklch(0.26 0.02 352.40);
+  --sidebar-border: oklch(0.36 0.02 342.27);
+  --sidebar-ring: oklch(0.74 0.16 34.71);
+  --radius: 0.625rem;
+  --font-sans: Montserrat, sans-serif;
+  --font-serif: Merriweather, serif;
+  --font-mono: Ubuntu Mono, monospace;
+  --shadow-color: hsl(0 0% 0%);
+  --shadow-opacity: 0.09;
+  --shadow-blur: 12px;
+  --shadow-spread: -3px;
+  --shadow-offset-x: 0px;
+  --shadow-offset-y: 6px;
+  --letter-spacing: 0em;
+  --spacing: 0.25rem;
+  --shadow-2xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-xs: 0px 6px 12px -3px hsl(0 0% 0% / 0.04);
+  --shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09);
+  --shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09);
+  --shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09);
+  --shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09);
+  --shadow-2xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.22);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    letter-spacing: var(--tracking-normal);
+  }
+}

app/layout.tsx

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { ChatSidebar } from "@/components/chat-sidebar";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { Menu } from "lucide-react";
+import { Providers } from "./providers";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Scira MCP Chat",
+  description: "Scira MCP Chat is a chat interface for interacting with MCP servers.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className}`}>
+        <Providers>
+          <div className="flex h-dvh w-full">
+            <ChatSidebar />
+            <main className="flex-1 flex flex-col relative">
+              <div className="absolute top-4 left-4 z-50">
+                <SidebarTrigger>
+                  <button className="flex items-center justify-center h-8 w-8 bg-muted hover:bg-accent rounded-md transition-colors">
+                    <Menu className="h-4 w-4" />
+                  </button>
+                </SidebarTrigger>
+              </div>
+              <div className="flex-1 flex justify-center">
+                {children}
+              </div>
+            </main>
+          </div>
+        </Providers>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import Chat from "@/components/chat";
+
+export default function Page() {
+  return <Chat />;
+}

app/providers.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ThemeProvider } from "@/components/theme-provider";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "sonner";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+// Create a client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      refetchOnWindowFocus: true,
+    },
+  },
+});
+
+export function Providers({ children }: { children: ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <SidebarProvider defaultOpen={true}>
+          {children}
+          <Toaster position="top-center" richColors />
+        </SidebarProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+} 

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/chat-sidebar.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { MessageSquare, PlusCircle, Trash2, ServerIcon, Settings, Loader2, Sparkles } from "lucide-react";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuBadge,
+    SidebarSeparator,
+    useSidebar
+} from "@/components/ui/sidebar";
+import { Separator } from "@/components/ui/separator";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+import { type Chat } from "@/lib/db/schema";
+import Image from "next/image";
+import { MCPServerManager, type MCPServer } from "./mcp-server-manager";
+import { ThemeToggle } from "./theme-toggle";
+import { useTheme } from "next-themes";
+import { getUserId } from "@/lib/user-id";
+import { useLocalStorage } from "@/lib/hooks/use-local-storage";
+import { STORAGE_KEYS } from "@/lib/constants";
+import { useChats } from "@/lib/hooks/use-chats";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+export function ChatSidebar() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const [userId, setUserId] = useState<string>('');
+    const [mcpServers, setMcpServers] = useLocalStorage<MCPServer[]>(STORAGE_KEYS.MCP_SERVERS, []);
+    const [selectedMcpServers, setSelectedMcpServers] = useLocalStorage<string[]>(STORAGE_KEYS.SELECTED_MCP_SERVERS, []);
+    const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);
+    const { state } = useSidebar();
+    const isCollapsed = state === "collapsed";
+
+    // Initialize userId
+    useEffect(() => {
+        setUserId(getUserId());
+    }, []);
+    
+    // Use TanStack Query to fetch chats
+    const { chats, isLoading, deleteChat, refreshChats } = useChats(userId);
+
+    // Start a new chat
+    const handleNewChat = () => {
+        router.push('/');
+    };
+
+    // Delete a chat
+    const handleDeleteChat = async (chatId: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        deleteChat(chatId);
+        
+        // If we're currently on the deleted chat's page, navigate to home
+        if (pathname === `/chat/${chatId}`) {
+            router.push('/');
+        }
+    };
+
+    // Get active MCP servers status
+    const activeServersCount = selectedMcpServers.length;
+    const multipleServersActive = activeServersCount > 1;
+
+    // Show loading state if user ID is not yet initialized
+    if (!userId) {
+        return null; // Or a loading spinner
+    }
+
+    return (
+        <Sidebar className="shadow-sm bg-background/80 dark:bg-background/40 backdrop-blur-md" collapsible="icon">
+            <SidebarHeader className="p-4 border-b border-border/40">
+                <div className="flex items-center justify-start">
+                    <div className={`flex items-center gap-2 ${isCollapsed ? "justify-center w-full" : ""}`}>
+                        <div className={`relative rounded-full bg-primary/10 flex items-center justify-center ${isCollapsed ? "size-5 p-3" : "size-6"}`}>
+                            <Image src="/scira.png" alt="Scira Logo" width={24} height={24} className="invert dark:invert-0 absolute transform scale-75" unoptimized quality={100} />
+                        </div>
+                        {!isCollapsed && (
+                            <div className="font-semibold text-lg text-foreground/90">MCP</div>
+                        )}
+                    </div>
+                </div>
+            </SidebarHeader>
+            
+            <SidebarContent className="pt-4">
+                <SidebarGroup>
+                    <SidebarGroupLabel className={cn(
+                        "px-4 mb-1 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
+                        isCollapsed ? "sr-only" : ""
+                    )}>
+                        Chats
+                    </SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            {isLoading ? (
+                                <div className={`flex items-center justify-center py-4 ${isCollapsed ? "" : "px-4"}`}>
+                                    <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                    {!isCollapsed && (
+                                        <span className="ml-2 text-xs text-muted-foreground">Loading...</span>
+                                    )}
+                                </div>
+                            ) : chats.length === 0 ? (
+                                <div className={`flex flex-col items-center gap-2 py-6 ${isCollapsed ? "" : "px-4"}`}>
+                                    {isCollapsed ? (
+                                        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-secondary/60">
+                                            <Sparkles className="h-3 w-3 text-secondary-foreground" />
+                                        </div>
+                                    ) : (
+                                        <div className="flex flex-col items-center text-center py-4">
+                                            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary/60 mb-3">
+                                                <Sparkles className="h-5 w-5 text-secondary-foreground" />
+                                            </div>
+                                            <span className="text-sm font-medium text-foreground/90">No chats yet</span>
+                                            <span className="text-xs text-muted-foreground mt-1 max-w-[200px]">
+                                                Start a new conversation below
+                                            </span>
+                                        </div>
+                                    )}
+                                </div>
+                            ) : (
+                                chats.map((chat) => (
+                                    <SidebarMenuItem key={chat.id}>
+                                        <SidebarMenuButton 
+                                            asChild
+                                            tooltip={isCollapsed ? chat.title : undefined}
+                                            data-active={pathname === `/chat/${chat.id}`}
+                                            className={cn(
+                                                "transition-all hover:bg-secondary/50 active:bg-secondary/70",
+                                                pathname === `/chat/${chat.id}` ? "bg-secondary/60 hover:bg-secondary/60" : ""
+                                            )}
+                                        >
+                                            <Link
+                                                href={`/chat/${chat.id}`}
+                                                className="flex items-center justify-between w-full gap-1"
+                                            >
+                                                <div className="flex items-center min-w-0 overflow-hidden flex-1 pr-2">
+                                                    <MessageSquare className={cn(
+                                                        "h-4 w-4 flex-shrink-0",
+                                                        pathname === `/chat/${chat.id}` ? "text-foreground" : "text-muted-foreground"
+                                                    )} />
+                                                    {!isCollapsed && (
+                                                        <span className={cn(
+                                                            "ml-2 truncate text-sm",
+                                                            pathname === `/chat/${chat.id}` ? "text-foreground font-medium" : "text-foreground/80"
+                                                        )} title={chat.title}>
+                                                            {chat.title.length > 18 ? `${chat.title.slice(0, 18)}...` : chat.title}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                                {!isCollapsed && (
+                                                    <Button
+                                                        variant="ghost"
+                                                        size="icon"
+                                                        className="h-6 w-6 text-muted-foreground hover:text-foreground flex-shrink-0"
+                                                        onClick={(e) => handleDeleteChat(chat.id, e)}
+                                                        title="Delete chat"
+                                                    >
+                                                        <Trash2 className="h-3.5 w-3.5" />
+                                                    </Button>
+                                                )}
+                                            </Link>
+                                        </SidebarMenuButton>
+                                    </SidebarMenuItem>
+                                ))
+                            )}
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+                
+                <div className="relative my-3">
+                    <div className="absolute inset-x-0">
+                        <Separator className="w-full h-px bg-border/40" />
+                    </div>
+                </div>
+                
+                <SidebarGroup>
+                    <SidebarGroupLabel className={cn(
+                        "px-4 mb-1 text-xs font-medium text-muted-foreground/80 uppercase tracking-wider",
+                        isCollapsed ? "sr-only" : ""
+                    )}>
+                        MCP Servers
+                    </SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            <SidebarMenuItem>
+                                <SidebarMenuButton 
+                                    onClick={() => setMcpSettingsOpen(true)}
+                                    className={cn(
+                                        "w-full flex items-center gap-2 transition-all",
+                                        "hover:bg-secondary/50 active:bg-secondary/70"
+                                    )}
+                                    tooltip={isCollapsed ? "MCP Servers" : undefined}
+                                >
+                                    <ServerIcon className={cn(
+                                        "h-4 w-4 flex-shrink-0",
+                                        activeServersCount > 0 ? "text-green-500" : "text-muted-foreground"
+                                    )} />
+                                    {!isCollapsed && (
+                                        <span className="flex-grow text-sm text-foreground/80">MCP Servers</span>
+                                    )}
+                                    {activeServersCount > 0 && !isCollapsed ? (
+                                        <Badge 
+                                            variant="secondary" 
+                                            className="ml-auto text-[10px] px-1.5 py-0 h-5 bg-secondary/80"
+                                        >
+                                            {activeServersCount}
+                                        </Badge>
+                                    ) : activeServersCount > 0 && isCollapsed ? (
+                                        <SidebarMenuBadge className="bg-secondary/80 text-secondary-foreground">
+                                            {activeServersCount}
+                                        </SidebarMenuBadge>
+                                    ) : null}
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+            
+            <SidebarFooter className="p-4 border-t border-border/40 mt-auto">
+                <div className={`flex flex-col ${isCollapsed ? "items-center" : ""} gap-3`}>
+                    <Button
+                        variant="default"
+                        className={cn(
+                            "w-full bg-primary text-primary-foreground hover:bg-primary/90",
+                            isCollapsed ? "w-8 h-8 p-0" : ""
+                        )}
+                        onClick={handleNewChat}
+                        title={isCollapsed ? "New Chat" : undefined}
+                    >
+                        <PlusCircle className={`${isCollapsed ? "" : "mr-2"} h-4 w-4`} />
+                        {!isCollapsed && <span>New Chat</span>}
+                    </Button>
+                    
+                    <div className={`flex ${isCollapsed ? "flex-col" : ""} gap-2 ${isCollapsed ? "items-center" : "justify-between items-center"}`}>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 rounded-md hover:bg-secondary/50 text-muted-foreground hover:text-foreground"
+                            onClick={() => setMcpSettingsOpen(true)}
+                        >
+                            <Settings className="h-4 w-4" />
+                            <span className="sr-only">MCP Settings</span>
+                        </Button>
+                        <ThemeToggle className="hover:bg-secondary/50 text-muted-foreground hover:text-foreground" />
+                    </div>
+                </div>
+                
+                <MCPServerManager
+                    servers={mcpServers}
+                    onServersChange={setMcpServers}
+                    selectedServers={selectedMcpServers}
+                    onSelectedServersChange={setSelectedMcpServers}
+                    open={mcpSettingsOpen}
+                    onOpenChange={setMcpSettingsOpen}
+                />
+            </SidebarFooter>
+        </Sidebar>
+    );
+} 

components/chat.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { defaultModel, type modelID } from "@/ai/providers";
+import { Message, useChat } from "@ai-sdk/react";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Textarea } from "./textarea";
+import { ProjectOverview } from "./project-overview";
+import { Messages } from "./messages";
+import { toast } from "sonner";
+import { useRouter, useParams } from "next/navigation";
+import { getUserId } from "@/lib/user-id";
+import { useLocalStorageValue, useLocalStorage } from "@/lib/hooks/use-local-storage";
+import { STORAGE_KEYS } from "@/lib/constants";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { convertToUIMessages } from "@/lib/chat-store";
+import { type Message as DBMessage } from "@/lib/db/schema";
+import { nanoid } from "nanoid";
+
+// Define types for MCP server
+interface KeyValuePair {
+  key: string;
+  value: string;
+}
+
+interface MCPServer {
+  id: string;
+  name: string;
+  url: string;
+  type: 'sse' | 'stdio';
+  command?: string;
+  args?: string[];
+  env?: KeyValuePair[];
+  headers?: KeyValuePair[];
+}
+
+
+interface ChatData {
+  id: string;
+  messages: DBMessage[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function Chat() {
+  const router = useRouter();
+  const params = useParams();
+  const chatId = params?.id as string | undefined;
+  const queryClient = useQueryClient();
+  
+  const [selectedModel, setSelectedModel] = useLocalStorage<modelID>("selectedModel", defaultModel);
+  const [userId, setUserId] = useState<string>('');
+  const [generatedChatId, setGeneratedChatId] = useState<string>('');
+  
+  // Get MCP server data from localStorage via our custom hooks
+  const mcpServers = useLocalStorageValue<MCPServer[]>(STORAGE_KEYS.MCP_SERVERS, []);
+  const selectedMcpServers = useLocalStorageValue<string[]>(STORAGE_KEYS.SELECTED_MCP_SERVERS, []);
+  
+  // Initialize userId
+  useEffect(() => {
+    setUserId(getUserId());
+  }, []);
+  
+  // Generate a chat ID if needed
+  useEffect(() => {
+    if (!chatId) {
+      setGeneratedChatId(nanoid());
+    }
+  }, [chatId]);
+  
+  // Use React Query to fetch chat history
+  const { data: chatData, isLoading: isLoadingChat } = useQuery({
+    queryKey: ['chat', chatId, userId] as const,
+    queryFn: async ({ queryKey }) => {
+      const [_, chatId, userId] = queryKey;
+      if (!chatId || !userId) return null;
+      
+      try {
+        const response = await fetch(`/api/chats/${chatId}`, {
+          headers: {
+            'x-user-id': userId
+          }
+        });
+        
+        if (!response.ok) {
+          throw new Error('Failed to load chat');
+        }
+        
+        const data = await response.json();
+        return data as ChatData;
+      } catch (error) {
+        console.error('Error loading chat history:', error);
+        toast.error('Failed to load chat history');
+        throw error;
+      }
+    },
+    enabled: !!chatId && !!userId,
+    retry: 1,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    refetchOnWindowFocus: false
+  });
+
+  // Memoize MCP server configuration for API
+  const mcpServersForApi = useMemo(() => {
+    if (!selectedMcpServers.length) return [];
+    
+    return selectedMcpServers
+      .map(id => mcpServers.find(server => server.id === id))
+      .filter((server): server is MCPServer => Boolean(server))
+      .map(server => ({
+        type: server.type,
+        url: server.url,
+        command: server.command,
+        args: server.args,
+        env: server.env,
+        headers: server.headers
+      }));
+  }, [mcpServers, selectedMcpServers]);
+  
+  // Prepare initial messages from query data
+  const initialMessages = useMemo(() => {
+    if (!chatData || !chatData.messages || chatData.messages.length === 0) {
+      return [];
+    }
+    
+    // Convert DB messages to UI format, then ensure it matches the Message type from @ai-sdk/react
+    const uiMessages = convertToUIMessages(chatData.messages);
+    return uiMessages.map(msg => ({
+      id: msg.id,
+      role: msg.role as Message['role'], // Ensure role is properly typed
+      content: msg.content,
+      parts: msg.parts,
+    } as Message));
+  }, [chatData]);
+  
+  const { messages, input, handleInputChange, handleSubmit, status, stop } =
+    useChat({
+      id: chatId || generatedChatId, // Use generated ID if no chatId in URL
+      initialMessages,
+      maxSteps: 20,
+      body: {
+        selectedModel,
+        mcpServers: mcpServersForApi,
+        chatId: chatId || generatedChatId, // Use generated ID if no chatId in URL
+        userId,
+      },
+      experimental_throttle: 500,
+      onFinish: () => {
+        // Invalidate the chats query to refresh the sidebar
+        if (userId) {
+          queryClient.invalidateQueries({ queryKey: ['chats', userId] });
+        }
+      },
+      onError: (error) => {
+        toast.error(
+          error.message.length > 0
+            ? error.message
+            : "An error occured, please try again later.",
+          { position: "top-center", richColors: true },
+        );
+      },
+    });
+    
+  // Custom submit handler
+  const handleFormSubmit = useCallback((e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    if (!chatId && generatedChatId && input.trim()) {
+      // If this is a new conversation, redirect to the chat page with the generated ID
+      const effectiveChatId = generatedChatId;
+      
+      // Submit the form
+      handleSubmit(e);
+      
+      // Redirect to the chat page with the generated ID
+      router.push(`/chat/${effectiveChatId}`);
+    } else {
+      // Normal submission for existing chats
+      handleSubmit(e);
+    }
+  }, [chatId, generatedChatId, input, handleSubmit, router]);
+
+  const isLoading = status === "streaming" || status === "submitted" || isLoadingChat;
+
+  return (
+    <div className="h-dvh flex flex-col justify-center py-4 w-full max-w-3xl">
+      {messages.length === 0 && !isLoadingChat ? (
+        <div className="max-w-xl mx-auto w-full">
+          <ProjectOverview />
+          <form
+            onSubmit={handleFormSubmit}
+            className="mt-4 w-full mx-auto"
+          >
+            <Textarea
+              selectedModel={selectedModel}
+              setSelectedModel={setSelectedModel}
+              handleInputChange={handleInputChange}
+              input={input}
+              isLoading={isLoading}
+              status={status}
+              stop={stop}
+            />
+          </form>
+        </div>
+      ) : (
+        <>
+          <div className="flex-1 overflow-y-auto min-h-0">
+            <Messages messages={messages} isLoading={isLoading} status={status} />
+          </div>
+          <form
+            onSubmit={handleFormSubmit}
+            className="mt-4 w-full max-w-2xl mx-auto"
+          >
+            <Textarea
+              selectedModel={selectedModel}
+              setSelectedModel={setSelectedModel}
+              handleInputChange={handleInputChange}
+              input={input}
+              isLoading={isLoading}
+              status={status}
+              stop={stop}
+            />
+          </form>
+        </>
+      )}
+    </div>
+  );
+}

components/deploy-button.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+export const DeployButton = () => (
+  <Link
+    href={`https://vercel.com/new/clone?project-name=Vercel+x+xAI+Chatbot&repository-name=ai-sdk-starter-xai&repository-url=https%3A%2F%2Fgithub.com%2Fvercel-labs%2Fai-sdk-starter-xai&demo-title=Vercel+x+xAI+Chatbot&demo-url=https%3A%2F%2Fai-sdk-starter-xai.labs.vercel.dev%2F&demo-description=A+simple+chatbot+application+built+with+Next.js+that+uses+xAI+via+the+AI+SDK+and+the+Vercel+Marketplace&products=%5B%7B%22type%22:%22integration%22,%22protocol%22:%22ai%22,%22productSlug%22:%22grok%22,%22integrationSlug%22:%22xai%22%7D%5D`}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="inline-flex items-center gap-2 ml-2 bg-black text-white text-sm px-3 py-1.5 rounded-md hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-100"
+  >
+    <svg
+      data-testid="geist-icon"
+      height={14}
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width={14}
+      style={{ color: "currentcolor" }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 1L16 15H0L8 1Z"
+        fill="currentColor"
+      />
+    </svg>
+    Deploy
+  </Link>
+);

components/icons.tsx

@@ -0,0 +1,140 @@
+import Link from "next/link";
+import * as React from "react";
+import type { SVGProps } from "react";
+
+export const VercelIcon = ({ size = 17 }) => {
+  return (
+    <svg
+      height={size}
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width={size}
+      style={{ color: "currentcolor" }}
+    >
+      <title>Vercel Icon</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 1L16 15H0L8 1Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SpinnerIcon = ({ size = 16 }: { size?: number }) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    viewBox="0 0 16 16"
+    width={size}
+    style={{ color: "currentcolor" }}
+  >
+    <title>Spinner Icon</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        opacity="0.5"
+        d="M8 16V12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.9"
+        d="M3.29773 1.52783L5.64887 4.7639"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.1"
+        d="M12.7023 1.52783L10.3511 4.7639"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.4"
+        d="M12.7023 14.472L10.3511 11.236"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.6"
+        d="M3.29773 14.472L5.64887 11.236"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.2"
+        d="M15.6085 5.52783L11.8043 6.7639"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.7"
+        d="M0.391602 10.472L4.19583 9.23598"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.3"
+        d="M15.6085 10.4722L11.8043 9.2361"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        opacity="0.8"
+        d="M0.391602 5.52783L4.19583 6.7639"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const Github = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 256 250"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="xMidYMid"
+    {...props}
+  >
+    <title>GitHub Icon</title>
+    <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
+  </svg>
+);
+
+export function StarButton() {
+  return (
+    <Link
+      href="https://github.com/vercel-labs/ai-sdk-preview-reasoning"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-300"
+    >
+      <Github className="size-4" />
+      <span className="hidden sm:inline">Star on GitHub</span>
+    </Link>
+  );
+}
+
+export const XAiIcon = ({ size = 16 }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={size}
+      version="1.1"
+      viewBox="0 0 438.7 481.4"
+    >
+      <title>xAI Icon</title>
+      <path d="M355.5,155.1l8.3,326.4h66.6l8.3-445.2-83.2,118.8ZM438.7,0h-101.6l-159.4,227.6,50.8,72.5L438.7,0ZM0,481.4h101.6l50.8-72.5-50.8-72.5L0,481.4ZM0,155.1l228.5,326.4h101.6L101.6,155.1H0Z" />
+    </svg>
+  );
+};

components/input.tsx

@@ -0,0 +1,64 @@
+import { ArrowUp } from "lucide-react";
+import { Input as ShadcnInput } from "./ui/input";
+
+interface InputProps {
+  input: string;
+  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  isLoading: boolean;
+  status: string;
+  stop: () => void;
+}
+
+export const Input = ({
+  input,
+  handleInputChange,
+  isLoading,
+  status,
+  stop,
+}: InputProps) => {
+  return (
+    <div className="relative w-full">
+      <ShadcnInput
+        className="bg-secondary py-6 w-full rounded-xl pr-12"
+        value={input}
+        autoFocus
+        placeholder={"Say something..."}
+        onChange={handleInputChange}
+      />
+      {status === "streaming" || status === "submitted" ? (
+        <button
+          type="button"
+          onClick={stop}
+          className="cursor-pointer absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
+        >
+          <div className="animate-spin h-4 w-4">
+            <svg className="h-4 w-4 text-white" viewBox="0 0 24 24">
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+                fill="none"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          </div>
+        </button>
+      ) : (
+        <button
+          type="submit"
+          disabled={isLoading || !input.trim()}
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-2 bg-black hover:bg-zinc-800 disabled:bg-zinc-300 disabled:cursor-not-allowed transition-colors"
+        >
+          <ArrowUp className="h-4 w-4 text-white" />
+        </button>
+      )}
+    </div>
+  );
+};

components/markdown.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Link from "next/link";
+import React, { memo } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "@/lib/utils";
+
+const components: Partial<Components> = {
+  pre: ({ children, ...props }) => (
+    <pre className="overflow-x-auto rounded-lg bg-zinc-100 dark:bg-zinc-800/50 p-4 my-2 text-sm" {...props}>
+      {children}
+    </pre>
+  ),
+  code: ({ children, className, ...props }: React.HTMLProps<HTMLElement> & { className?: string }) => {
+    const match = /language-(\w+)/.exec(className || '');
+    const isInline = !match && !className;
+
+    if (isInline) {
+      return (
+        <code
+          className="px-1.5 py-0.5 rounded-md bg-zinc-100 dark:bg-zinc-800/50 text-zinc-700 dark:text-zinc-300 text-[0.9em] font-mono"
+          {...props}
+        >
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className={cn("block font-mono text-sm", className)} {...props}>
+        {children}
+      </code>
+    );
+  },
+  ol: ({ node, children, ...props }) => (
+    <ol className="list-decimal list-outside ml-4 space-y-1 my-2" {...props}>
+      {children}
+    </ol>
+  ),
+  ul: ({ node, children, ...props }) => (
+    <ul className="list-disc list-outside ml-4 space-y-1 my-2" {...props}>
+      {children}
+    </ul>
+  ),
+  li: ({ node, children, ...props }) => (
+    <li className="leading-relaxed" {...props}>
+      {children}
+    </li>
+  ),
+  p: ({ node, children, ...props }) => (
+    <p className="leading-7" {...props}>
+      {children}
+    </p>
+  ),
+  strong: ({ node, children, ...props }) => (
+    <strong className="font-semibold" {...props}>
+      {children}
+    </strong>
+  ),
+  em: ({ node, children, ...props }) => (
+    <em className="italic" {...props}>
+      {children}
+    </em>
+  ),
+  blockquote: ({ node, children, ...props }) => (
+    <blockquote
+      className="border-l-2 border-zinc-200 dark:border-zinc-700 pl-4 my-3 italic text-zinc-600 dark:text-zinc-400"
+      {...props}
+    >
+      {children}
+    </blockquote>
+  ),
+  a: ({ node, children, ...props }) => (
+    // @ts-expect-error error
+    <Link
+      className="text-blue-500 hover:underline hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+      target="_blank"
+      rel="noreferrer"
+      {...props}
+    >
+      {children}
+    </Link>
+  ),
+  h1: ({ node, children, ...props }) => (
+    <h1 className="text-3xl font-semibold mt-6 mb-4 text-zinc-800 dark:text-zinc-200" {...props}>
+      {children}
+    </h1>
+  ),
+  h2: ({ node, children, ...props }) => (
+    <h2 className="text-2xl font-semibold mt-6 mb-3 text-zinc-800 dark:text-zinc-200" {...props}>
+      {children}
+    </h2>
+  ),
+  h3: ({ node, children, ...props }) => (
+    <h3 className="text-xl font-semibold mt-6 mb-3 text-zinc-800 dark:text-zinc-200" {...props}>
+      {children}
+    </h3>
+  ),
+  h4: ({ node, children, ...props }) => (
+    <h4 className="text-lg font-semibold mt-6 mb-2 text-zinc-800 dark:text-zinc-200" {...props}>
+      {children}
+    </h4>
+  ),
+  h5: ({ node, children, ...props }) => (
+    <h5 className="text-base font-semibold mt-6 mb-2 text-zinc-800 dark:text-zinc-200" {...props}>
+      {children}
+    </h5>
+  ),
+  h6: ({ node, children, ...props }) => (
+    <h6 className="text-sm font-semibold mt-6 mb-2 text-zinc-800 dark:text-zinc-200" {...props}>
+      {children}
+    </h6>
+  ),
+  table: ({ node, children, ...props }) => (
+    <div className="my-4 overflow-x-auto">
+      <table className="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700" {...props}>
+        {children}
+      </table>
+    </div>
+  ),
+  thead: ({ node, children, ...props }) => (
+    <thead className="bg-zinc-50 dark:bg-zinc-800/50" {...props}>
+      {children}
+    </thead>
+  ),
+  tbody: ({ node, children, ...props }) => (
+    <tbody className="divide-y divide-zinc-200 dark:divide-zinc-700 bg-white dark:bg-transparent" {...props}>
+      {children}
+    </tbody>
+  ),
+  tr: ({ node, children, ...props }) => (
+    <tr className="transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/30" {...props}>
+      {children}
+    </tr>
+  ),
+  th: ({ node, children, ...props }) => (
+    <th
+      className="px-4 py-3 text-left text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider"
+      {...props}
+    >
+      {children}
+    </th>
+  ),
+  td: ({ node, children, ...props }) => (
+    <td className="px-4 py-3 text-sm" {...props}>
+      {children}
+    </td>
+  ),
+  hr: ({ node, ...props }) => (
+    <hr className="my-4 border-zinc-200 dark:border-zinc-700" {...props} />
+  ),
+};
+
+const remarkPlugins = [remarkGfm];
+
+const NonMemoizedMarkdown = ({ children }: { children: string }) => {
+  return (
+    <ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
+      {children}
+    </ReactMarkdown>
+  );
+};
+
+export const Markdown = memo(
+  NonMemoizedMarkdown,
+  (prevProps, nextProps) => prevProps.children === nextProps.children,
+);

components/mcp-server-manager.tsx

@@ -0,0 +1,916 @@
+"use client";
+
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from "./ui/dialog";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import {
+    PlusCircle,
+    ServerIcon,
+    X,
+    Terminal,
+    Globe,
+    ExternalLink,
+    Trash2,
+    CheckCircle,
+    Plus,
+    Cog,
+    Edit2,
+    Eye,
+    EyeOff
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "./ui/select";
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger
+} from "./ui/accordion";
+
+// Key-value pair for environment variables and headers
+interface KeyValuePair {
+    key: string;
+    value: string;
+}
+
+// Default template for a new MCP server
+const INITIAL_NEW_SERVER: Omit<MCPServer, 'id'> = {
+    name: '',
+    url: '',
+    type: 'sse',
+    command: 'node',
+    args: [],
+    env: [],
+    headers: []
+};
+
+export interface MCPServer {
+    id: string;
+    name: string;
+    url: string;
+    type: 'sse' | 'stdio';
+    command?: string;
+    args?: string[];
+    env?: KeyValuePair[];
+    headers?: KeyValuePair[];
+}
+
+interface MCPServerManagerProps {
+    servers: MCPServer[];
+    onServersChange: (servers: MCPServer[]) => void;
+    selectedServers: string[];
+    onSelectedServersChange: (serverIds: string[]) => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+// Check if a key name might contain sensitive information
+const isSensitiveKey = (key: string): boolean => {
+    const sensitivePatterns = [
+        /key/i, 
+        /token/i, 
+        /secret/i, 
+        /password/i, 
+        /pass/i,
+        /auth/i,
+        /credential/i
+    ];
+    return sensitivePatterns.some(pattern => pattern.test(key));
+};
+
+// Mask a sensitive value
+const maskValue = (value: string): string => {
+    if (!value) return '';
+    if (value.length < 8) return '••••••';
+    return value.substring(0, 3) + '•'.repeat(Math.min(10, value.length - 4)) + value.substring(value.length - 1);
+};
+
+export const MCPServerManager = ({
+    servers,
+    onServersChange,
+    selectedServers,
+    onSelectedServersChange,
+    open,
+    onOpenChange
+}: MCPServerManagerProps) => {
+    const [newServer, setNewServer] = useState<Omit<MCPServer, 'id'>>(INITIAL_NEW_SERVER);
+    const [view, setView] = useState<'list' | 'add'>('list');
+    const [newEnvVar, setNewEnvVar] = useState<KeyValuePair>({ key: '', value: '' });
+    const [newHeader, setNewHeader] = useState<KeyValuePair>({ key: '', value: '' });
+    const [editingServerId, setEditingServerId] = useState<string | null>(null);
+    const [showSensitiveEnvValues, setShowSensitiveEnvValues] = useState<Record<number, boolean>>({});
+    const [showSensitiveHeaderValues, setShowSensitiveHeaderValues] = useState<Record<number, boolean>>({});
+    const [editingEnvIndex, setEditingEnvIndex] = useState<number | null>(null);
+    const [editingHeaderIndex, setEditingHeaderIndex] = useState<number | null>(null);
+    const [editedEnvValue, setEditedEnvValue] = useState<string>('');
+    const [editedHeaderValue, setEditedHeaderValue] = useState<string>('');
+
+    const resetAndClose = () => {
+        setView('list');
+        setNewServer(INITIAL_NEW_SERVER);
+        setNewEnvVar({ key: '', value: '' });
+        setNewHeader({ key: '', value: '' });
+        setShowSensitiveEnvValues({});
+        setShowSensitiveHeaderValues({});
+        setEditingEnvIndex(null);
+        setEditingHeaderIndex(null);
+        onOpenChange(false);
+    };
+
+    const addServer = () => {
+        if (!newServer.name) {
+            toast.error("Server name is required");
+            return;
+        }
+
+        if (newServer.type === 'sse' && !newServer.url) {
+            toast.error("Server URL is required for SSE transport");
+            return;
+        }
+
+        if (newServer.type === 'stdio' && (!newServer.command || !newServer.args?.length)) {
+            toast.error("Command and at least one argument are required for stdio transport");
+            return;
+        }
+
+        const id = crypto.randomUUID();
+        const updatedServers = [...servers, { ...newServer, id }];
+        onServersChange(updatedServers);
+
+        toast.success(`Added MCP server: ${newServer.name}`);
+        setView('list');
+        setNewServer(INITIAL_NEW_SERVER);
+        setNewEnvVar({ key: '', value: '' });
+        setNewHeader({ key: '', value: '' });
+        setShowSensitiveEnvValues({});
+        setShowSensitiveHeaderValues({});
+    };
+
+    const removeServer = (id: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        const updatedServers = servers.filter(server => server.id !== id);
+        onServersChange(updatedServers);
+
+        // If the removed server was selected, remove it from selected servers
+        if (selectedServers.includes(id)) {
+            onSelectedServersChange(selectedServers.filter(serverId => serverId !== id));
+        }
+
+        toast.success("Server removed");
+    };
+
+    const toggleServer = (id: string) => {
+        if (selectedServers.includes(id)) {
+            // Remove from selected servers
+            onSelectedServersChange(selectedServers.filter(serverId => serverId !== id));
+            const server = servers.find(s => s.id === id);
+            if (server) {
+                toast.success(`Disabled MCP server: ${server.name}`);
+            }
+        } else {
+            // Add to selected servers
+            onSelectedServersChange([...selectedServers, id]);
+            const server = servers.find(s => s.id === id);
+            if (server) {
+                toast.success(`Enabled MCP server: ${server.name}`);
+            }
+        }
+    };
+
+    const clearAllServers = () => {
+        if (selectedServers.length > 0) {
+            onSelectedServersChange([]);
+            toast.success("All MCP servers disabled");
+            resetAndClose();
+        }
+    };
+
+    const handleArgsChange = (value: string) => {
+        try {
+            // Try to parse as JSON if it starts with [ (array)
+            const argsArray = value.trim().startsWith('[')
+                ? JSON.parse(value)
+                : value.split(' ').filter(Boolean);
+
+            setNewServer({ ...newServer, args: argsArray });
+        } catch (error) {
+            // If parsing fails, just split by spaces
+            setNewServer({ ...newServer, args: value.split(' ').filter(Boolean) });
+        }
+    };
+
+    const addEnvVar = () => {
+        if (!newEnvVar.key) return;
+
+        setNewServer({
+            ...newServer,
+            env: [...(newServer.env || []), { ...newEnvVar }]
+        });
+
+        setNewEnvVar({ key: '', value: '' });
+    };
+
+    const removeEnvVar = (index: number) => {
+        const updatedEnv = [...(newServer.env || [])];
+        updatedEnv.splice(index, 1);
+        setNewServer({ ...newServer, env: updatedEnv });
+        
+        // Clean up visibility state for this index
+        const updatedVisibility = { ...showSensitiveEnvValues };
+        delete updatedVisibility[index];
+        setShowSensitiveEnvValues(updatedVisibility);
+        
+        // If currently editing this value, cancel editing
+        if (editingEnvIndex === index) {
+            setEditingEnvIndex(null);
+        }
+    };
+
+    const startEditEnvValue = (index: number, value: string) => {
+        setEditingEnvIndex(index);
+        setEditedEnvValue(value);
+    };
+
+    const saveEditedEnvValue = () => {
+        if (editingEnvIndex !== null) {
+            const updatedEnv = [...(newServer.env || [])];
+            updatedEnv[editingEnvIndex] = {
+                ...updatedEnv[editingEnvIndex],
+                value: editedEnvValue
+            };
+            setNewServer({ ...newServer, env: updatedEnv });
+            setEditingEnvIndex(null);
+        }
+    };
+
+    const addHeader = () => {
+        if (!newHeader.key) return;
+
+        setNewServer({
+            ...newServer,
+            headers: [...(newServer.headers || []), { ...newHeader }]
+        });
+
+        setNewHeader({ key: '', value: '' });
+    };
+
+    const removeHeader = (index: number) => {
+        const updatedHeaders = [...(newServer.headers || [])];
+        updatedHeaders.splice(index, 1);
+        setNewServer({ ...newServer, headers: updatedHeaders });
+        
+        // Clean up visibility state for this index
+        const updatedVisibility = { ...showSensitiveHeaderValues };
+        delete updatedVisibility[index];
+        setShowSensitiveHeaderValues(updatedVisibility);
+        
+        // If currently editing this value, cancel editing
+        if (editingHeaderIndex === index) {
+            setEditingHeaderIndex(null);
+        }
+    };
+
+    const startEditHeaderValue = (index: number, value: string) => {
+        setEditingHeaderIndex(index);
+        setEditedHeaderValue(value);
+    };
+
+    const saveEditedHeaderValue = () => {
+        if (editingHeaderIndex !== null) {
+            const updatedHeaders = [...(newServer.headers || [])];
+            updatedHeaders[editingHeaderIndex] = {
+                ...updatedHeaders[editingHeaderIndex],
+                value: editedHeaderValue
+            };
+            setNewServer({ ...newServer, headers: updatedHeaders });
+            setEditingHeaderIndex(null);
+        }
+    };
+
+    const toggleSensitiveEnvValue = (index: number) => {
+        setShowSensitiveEnvValues(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
+
+    const toggleSensitiveHeaderValue = (index: number) => {
+        setShowSensitiveHeaderValues(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
+
+    const hasAdvancedConfig = (server: MCPServer) => {
+        return (server.env && server.env.length > 0) ||
+            (server.headers && server.headers.length > 0);
+    };
+
+    // Editing support
+    const startEditing = (server: MCPServer) => {
+        setEditingServerId(server.id);
+        setNewServer({
+            name: server.name,
+            url: server.url,
+            type: server.type,
+            command: server.command,
+            args: server.args,
+            env: server.env,
+            headers: server.headers
+        });
+        setView('add');
+        // Reset sensitive value visibility states
+        setShowSensitiveEnvValues({});
+        setShowSensitiveHeaderValues({});
+        setEditingEnvIndex(null);
+        setEditingHeaderIndex(null);
+    };
+
+    const handleFormCancel = () => {
+        if (view === 'add') {
+            setView('list');
+            setEditingServerId(null);
+            setNewServer(INITIAL_NEW_SERVER);
+            setShowSensitiveEnvValues({});
+            setShowSensitiveHeaderValues({});
+            setEditingEnvIndex(null);
+            setEditingHeaderIndex(null);
+        } else {
+            resetAndClose();
+        }
+    };
+
+    const updateServer = () => {
+        if (!newServer.name) {
+            toast.error("Server name is required");
+            return;
+        }
+        if (newServer.type === 'sse' && !newServer.url) {
+            toast.error("Server URL is required for SSE transport");
+            return;
+        }
+        if (newServer.type === 'stdio' && (!newServer.command || !newServer.args?.length)) {
+            toast.error("Command and at least one argument are required for stdio transport");
+            return;
+        }
+        const updated = servers.map(s =>
+            s.id === editingServerId ? { ...newServer, id: editingServerId! } : s
+        );
+        onServersChange(updated);
+        toast.success(`Updated MCP server: ${newServer.name}`);
+        setView('list');
+        setEditingServerId(null);
+        setNewServer(INITIAL_NEW_SERVER);
+        setShowSensitiveEnvValues({});
+        setShowSensitiveHeaderValues({});
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[480px] max-h-[85vh] overflow-hidden flex flex-col">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <ServerIcon className="h-5 w-5 text-primary" />
+                        MCP Server Configuration
+                    </DialogTitle>
+                    <DialogDescription>
+                        Connect to Model Context Protocol servers to access additional AI tools.
+                        {selectedServers.length > 0 && (
+                            <span className="block mt-1 text-xs font-medium text-primary">
+                                {selectedServers.length} server{selectedServers.length !== 1 ? 's' : ''} currently active
+                            </span>
+                        )}
+                    </DialogDescription>
+                </DialogHeader>
+
+                {view === 'list' ? (
+                    <div className="flex-1 overflow-hidden flex flex-col pb-14">
+                        {servers.length > 0 ? (
+                            <div className="flex-1 overflow-hidden flex flex-col">
+                                <div className="flex-1 overflow-hidden flex flex-col">
+                                    <div className="flex items-center justify-between mb-2">
+                                        <h3 className="text-sm font-medium">Available Servers</h3>
+                                        <span className="text-xs text-muted-foreground">
+                                            Select multiple servers to combine their tools
+                                        </span>
+                                    </div>
+                                    <div className="overflow-y-auto pr-1 flex-1 gap-2 flex flex-col">
+                                        {servers.map((server) => {
+                                            const isActive = selectedServers.includes(server.id);
+                                            return (
+                                                <div
+                                                    key={server.id}
+                                                    className={`
+                            relative flex flex-col p-3 rounded-lg transition-colors
+                            border ${isActive
+                                                            ? 'border-primary bg-primary/10'
+                                                            : 'border-border hover:border-primary/30 hover:bg-primary/5'}
+                          `}
+                                                >
+                                                    {/* Server Header with Type Badge and Delete Button */}
+                                                    <div className="flex items-center justify-between mb-1.5">
+                                                        <div className="flex items-center gap-2">
+                                                            {server.type === 'sse' ? (
+                                                                <Globe className="h-4 w-4 text-primary flex-shrink-0" />
+                                                            ) : (
+                                                                <Terminal className="h-4 w-4 text-primary flex-shrink-0" />
+                                                            )}
+                                                            <h4 className="text-sm font-medium truncate max-w-[220px]">{server.name}</h4>
+                                                            {hasAdvancedConfig(server) && (
+                                                                <span className="flex-shrink-0">
+                                                                    <Cog className="h-3 w-3 text-muted-foreground" />
+                                                                </span>
+                                                            )}
+                                                        </div>
+                                                        <div className="flex items-center gap-2">
+                                                            <span className="text-xs px-1.5 py-0.5 rounded-full bg-secondary text-secondary-foreground">
+                                                                {server.type.toUpperCase()}
+                                                            </span>
+                                                            <button
+                                                                onClick={(e) => removeServer(server.id, e)}
+                                                                className="p-1 rounded-full hover:bg-muted/70"
+                                                                aria-label="Remove server"
+                                                            >
+                                                                <Trash2 className="h-3.5 w-3.5 text-muted-foreground" />
+                                                            </button>
+                                                            <button
+                                                                onClick={() => startEditing(server)}
+                                                                className="p-1 rounded-full hover:bg-muted/50"
+                                                                aria-label="Edit server"
+                                                            >
+                                                                <Edit2 className="h-3.5 w-3.5 text-muted-foreground" />
+                                                            </button>
+                                                        </div>
+                                                    </div>
+
+                                                    {/* Server Details */}
+                                                    <p className="text-xs text-muted-foreground mb-2 truncate">
+                                                        {server.type === 'sse'
+                                                            ? server.url
+                                                            : `${server.command} ${server.args?.join(' ')}`
+                                                        }
+                                                    </p>
+
+                                                    {/* Action Button */}
+                                                    <Button
+                                                        size="sm"
+                                                        className="w-full mt-0.5 gap-1.5"
+                                                        variant={isActive ? "default" : "outline"}
+                                                        onClick={() => toggleServer(server.id)}
+                                                    >
+                                                        {isActive && <CheckCircle className="h-3.5 w-3.5" />}
+                                                        {isActive ? "Active" : "Enable Server"}
+                                                    </Button>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="flex-1 py-8 pb-16 flex flex-col items-center justify-center space-y-4">
+                                <div className="rounded-full p-3 bg-primary/10">
+                                    <ServerIcon className="h-7 w-7 text-primary" />
+                                </div>
+                                <div className="text-center space-y-1">
+                                    <h3 className="text-base font-medium">No MCP Servers Added</h3>
+                                    <p className="text-sm text-muted-foreground max-w-[300px]">
+                                        Add your first MCP server to access additional AI tools
+                                    </p>
+                                </div>
+                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mt-4">
+                                    <a
+                                        href="https://modelcontextprotocol.io"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="flex items-center gap-1 hover:text-primary transition-colors"
+                                    >
+                                        Learn about MCP
+                                        <ExternalLink className="h-3 w-3" />
+                                    </a>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div className="space-y-4 overflow-y-auto px-1 py-0.5 mb-14 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+                        <h3 className="text-sm font-medium">{editingServerId ? "Edit MCP Server" : "Add New MCP Server"}</h3>
+                        <div className="space-y-4">
+                            <div className="grid gap-1.5">
+                                <Label htmlFor="name">
+                                    Server Name
+                                </Label>
+                                <Input
+                                    id="name"
+                                    value={newServer.name}
+                                    onChange={(e) => setNewServer({ ...newServer, name: e.target.value })}
+                                    placeholder="My MCP Server"
+                                    className="relative z-0"
+                                />
+                            </div>
+
+                            <div className="grid gap-1.5">
+                                <Label htmlFor="transport-type">
+                                    Transport Type
+                                </Label>
+                                <div className="space-y-2">
+                                    <p className="text-xs text-muted-foreground">Choose how to connect to your MCP server:</p>
+                                    <div className="grid gap-2 grid-cols-2">
+                                        <button
+                                            type="button"
+                                            onClick={() => setNewServer({ ...newServer, type: 'sse' })}
+                                            className={`flex items-center gap-2 p-3 rounded-md text-left border transition-all ${
+                                                newServer.type === 'sse' 
+                                                    ? 'border-primary bg-primary/10 ring-1 ring-primary' 
+                                                    : 'border-border hover:border-border/80 hover:bg-muted/50'
+                                            }`}
+                                        >
+                                            <Globe className={`h-5 w-5 shrink-0 ${newServer.type === 'sse' ? 'text-primary' : ''}`} />
+                                            <div>
+                                                <p className="font-medium">SSE</p>
+                                                <p className="text-xs text-muted-foreground">Server-Sent Events</p>
+                                            </div>
+                                        </button>
+                                        
+                                        <button
+                                            type="button"
+                                            onClick={() => setNewServer({ ...newServer, type: 'stdio' })}
+                                            className={`flex items-center gap-2 p-3 rounded-md text-left border transition-all ${
+                                                newServer.type === 'stdio' 
+                                                    ? 'border-primary bg-primary/10 ring-1 ring-primary' 
+                                                    : 'border-border hover:border-border/80 hover:bg-muted/50'
+                                            }`}
+                                        >
+                                            <Terminal className={`h-5 w-5 shrink-0 ${newServer.type === 'stdio' ? 'text-primary' : ''}`} />
+                                            <div>
+                                                <p className="font-medium">stdio</p>
+                                                <p className="text-xs text-muted-foreground">Standard I/O</p>
+                                            </div>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            {newServer.type === 'sse' ? (
+                                <div className="grid gap-1.5">
+                                    <Label htmlFor="url">
+                                        Server URL
+                                    </Label>
+                                    <Input
+                                        id="url"
+                                        value={newServer.url}
+                                        onChange={(e) => setNewServer({ ...newServer, url: e.target.value })}
+                                        placeholder="https://mcp.example.com/token/sse"
+                                        className="relative z-0"
+                                    />
+                                    <p className="text-xs text-muted-foreground">
+                                        Full URL to the SSE endpoint of the MCP server
+                                    </p>
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="grid gap-1.5">
+                                        <Label htmlFor="command">
+                                            Command
+                                        </Label>
+                                        <Input
+                                            id="command"
+                                            value={newServer.command}
+                                            onChange={(e) => setNewServer({ ...newServer, command: e.target.value })}
+                                            placeholder="node"
+                                            className="relative z-0"
+                                        />
+                                        <p className="text-xs text-muted-foreground">
+                                            Executable to run (e.g., node, python)
+                                        </p>
+                                    </div>
+                                    <div className="grid gap-1.5">
+                                        <Label htmlFor="args">
+                                            Arguments
+                                        </Label>
+                                        <Input
+                                            id="args"
+                                            value={newServer.args?.join(' ') || ''}
+                                            onChange={(e) => handleArgsChange(e.target.value)}
+                                            placeholder="src/mcp-server.js --port 3001"
+                                            className="relative z-0"
+                                        />
+                                        <p className="text-xs text-muted-foreground">
+                                            Space-separated arguments or JSON array
+                                        </p>
+                                    </div>
+                                </>
+                            )}
+
+                            {/* Advanced Configuration */}
+                            <Accordion type="single" collapsible className="w-full">
+                                <AccordionItem value="env-vars">
+                                    <AccordionTrigger className="text-sm py-2">
+                                        Environment Variables
+                                    </AccordionTrigger>
+                                    <AccordionContent>
+                                        <div className="space-y-3">
+                                            <div className="flex items-end gap-2">
+                                                <div className="flex-1">
+                                                    <Label htmlFor="env-key" className="text-xs mb-1 block">
+                                                        Key
+                                                    </Label>
+                                                    <Input
+                                                        id="env-key"
+                                                        value={newEnvVar.key}
+                                                        onChange={(e) => setNewEnvVar({ ...newEnvVar, key: e.target.value })}
+                                                        placeholder="API_KEY"
+                                                        className="h-8 relative z-0"
+                                                    />
+                                                </div>
+                                                <div className="flex-1">
+                                                    <Label htmlFor="env-value" className="text-xs mb-1 block">
+                                                        Value
+                                                    </Label>
+                                                    <Input
+                                                        id="env-value"
+                                                        value={newEnvVar.value}
+                                                        onChange={(e) => setNewEnvVar({ ...newEnvVar, value: e.target.value })}
+                                                        placeholder="your-secret-key"
+                                                        className="h-8 relative z-0"
+                                                        type="text"
+                                                    />
+                                                </div>
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    size="sm"
+                                                    onClick={addEnvVar}
+                                                    disabled={!newEnvVar.key}
+                                                    className="h-8 mt-1"
+                                                >
+                                                    <Plus className="h-3.5 w-3.5" />
+                                                </Button>
+                                            </div>
+
+                                            {newServer.env && newServer.env.length > 0 ? (
+                                                <div className="border rounded-md divide-y">
+                                                    {newServer.env.map((env, index) => (
+                                                        <div key={index} className="flex items-center justify-between p-2 text-sm">
+                                                            <div className="flex-1 flex items-center gap-1 truncate">
+                                                                <span className="font-mono text-xs">{env.key}</span>
+                                                                <span className="mx-2 text-muted-foreground">=</span>
+                                                                
+                                                                {editingEnvIndex === index ? (
+                                                                    <div className="flex gap-1 flex-1">
+                                                                        <Input
+                                                                            className="h-6 text-xs py-1 px-2"
+                                                                            value={editedEnvValue}
+                                                                            onChange={(e) => setEditedEnvValue(e.target.value)}
+                                                                            onKeyDown={(e) => e.key === 'Enter' && saveEditedEnvValue()}
+                                                                            autoFocus
+                                                                        />
+                                                                        <Button 
+                                                                            size="sm" 
+                                                                            className="h-6 px-2"
+                                                                            onClick={saveEditedEnvValue}
+                                                                        >
+                                                                            Save
+                                                                        </Button>
+                                                                    </div>
+                                                                ) : (
+                                                                    <>
+                                                                        <span className="text-xs text-muted-foreground truncate">
+                                                                            {isSensitiveKey(env.key) && !showSensitiveEnvValues[index] 
+                                                                                ? maskValue(env.value) 
+                                                                                : env.value}
+                                                                        </span>
+                                                                        <span className="flex ml-1 gap-1">
+                                                                            {isSensitiveKey(env.key) && (
+                                                                                <button
+                                                                                    onClick={() => toggleSensitiveEnvValue(index)}
+                                                                                    className="p-1 hover:bg-muted/50 rounded-full"
+                                                                                >
+                                                                                    {showSensitiveEnvValues[index] ? (
+                                                                                        <EyeOff className="h-3 w-3 text-muted-foreground" />
+                                                                                    ) : (
+                                                                                        <Eye className="h-3 w-3 text-muted-foreground" />
+                                                                                    )}
+                                                                                </button>
+                                                                            )}
+                                                                            <button
+                                                                                onClick={() => startEditEnvValue(index, env.value)}
+                                                                                className="p-1 hover:bg-muted/50 rounded-full"
+                                                                            >
+                                                                                <Edit2 className="h-3 w-3 text-muted-foreground" />
+                                                                            </button>
+                                                                        </span>
+                                                                    </>
+                                                                )}
+                                                            </div>
+                                                            <Button
+                                                                type="button"
+                                                                variant="ghost"
+                                                                size="sm"
+                                                                onClick={() => removeEnvVar(index)}
+                                                                className="h-6 w-6 p-0 ml-2"
+                                                            >
+                                                                <X className="h-3 w-3" />
+                                                            </Button>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            ) : (
+                                                <p className="text-xs text-muted-foreground text-center py-2">
+                                                    No environment variables added
+                                                </p>
+                                            )}
+                                            <p className="text-xs text-muted-foreground">
+                                                Environment variables will be passed to the MCP server process.
+                                            </p>
+                                        </div>
+                                    </AccordionContent>
+                                </AccordionItem>
+
+                                <AccordionItem value="headers">
+                                    <AccordionTrigger className="text-sm py-2">
+                                        {newServer.type === 'sse' ? 'HTTP Headers' : 'Additional Configuration'}
+                                    </AccordionTrigger>
+                                    <AccordionContent>
+                                        <div className="space-y-3">
+                                            <div className="flex items-end gap-2">
+                                                <div className="flex-1">
+                                                    <Label htmlFor="header-key" className="text-xs mb-1 block">
+                                                        Key
+                                                    </Label>
+                                                    <Input
+                                                        id="header-key"
+                                                        value={newHeader.key}
+                                                        onChange={(e) => setNewHeader({ ...newHeader, key: e.target.value })}
+                                                        placeholder="Authorization"
+                                                        className="h-8 relative z-0"
+                                                    />
+                                                </div>
+                                                <div className="flex-1">
+                                                    <Label htmlFor="header-value" className="text-xs mb-1 block">
+                                                        Value
+                                                    </Label>
+                                                    <Input
+                                                        id="header-value"
+                                                        value={newHeader.value}
+                                                        onChange={(e) => setNewHeader({ ...newHeader, value: e.target.value })}
+                                                        placeholder="Bearer token123"
+                                                        className="h-8 relative z-0"
+                                                    />
+                                                </div>
+                                                <Button
+                                                    type="button"
+                                                    variant="outline"
+                                                    size="sm"
+                                                    onClick={addHeader}
+                                                    disabled={!newHeader.key}
+                                                    className="h-8 mt-1"
+                                                >
+                                                    <Plus className="h-3.5 w-3.5" />
+                                                </Button>
+                                            </div>
+
+                                            {newServer.headers && newServer.headers.length > 0 ? (
+                                                <div className="border rounded-md divide-y">
+                                                    {newServer.headers.map((header, index) => (
+                                                        <div key={index} className="flex items-center justify-between p-2 text-sm">
+                                                            <div className="flex-1 flex items-center gap-1 truncate">
+                                                                <span className="font-mono text-xs">{header.key}</span>
+                                                                <span className="mx-2 text-muted-foreground">:</span>
+                                                                
+                                                                {editingHeaderIndex === index ? (
+                                                                    <div className="flex gap-1 flex-1">
+                                                                        <Input
+                                                                            className="h-6 text-xs py-1 px-2"
+                                                                            value={editedHeaderValue}
+                                                                            onChange={(e) => setEditedHeaderValue(e.target.value)}
+                                                                            onKeyDown={(e) => e.key === 'Enter' && saveEditedHeaderValue()}
+                                                                            autoFocus
+                                                                        />
+                                                                        <Button 
+                                                                            size="sm" 
+                                                                            className="h-6 px-2"
+                                                                            onClick={saveEditedHeaderValue}
+                                                                        >
+                                                                            Save
+                                                                        </Button>
+                                                                    </div>
+                                                                ) : (
+                                                                    <>
+                                                                        <span className="text-xs text-muted-foreground truncate">
+                                                                            {isSensitiveKey(header.key) && !showSensitiveHeaderValues[index] 
+                                                                                ? maskValue(header.value) 
+                                                                                : header.value}
+                                                                        </span>
+                                                                        <span className="flex ml-1 gap-1">
+                                                                            {isSensitiveKey(header.key) && (
+                                                                                <button
+                                                                                    onClick={() => toggleSensitiveHeaderValue(index)}
+                                                                                    className="p-1 hover:bg-muted/50 rounded-full"
+                                                                                >
+                                                                                    {showSensitiveHeaderValues[index] ? (
+                                                                                        <EyeOff className="h-3 w-3 text-muted-foreground" />
+                                                                                    ) : (
+                                                                                        <Eye className="h-3 w-3 text-muted-foreground" />
+                                                                                    )}
+                                                                                </button>
+                                                                            )}
+                                                                            <button
+                                                                                onClick={() => startEditHeaderValue(index, header.value)}
+                                                                                className="p-1 hover:bg-muted/50 rounded-full"
+                                                                            >
+                                                                                <Edit2 className="h-3 w-3 text-muted-foreground" />
+                                                                            </button>
+                                                                        </span>
+                                                                    </>
+                                                                )}
+                                                            </div>
+                                                            <Button
+                                                                type="button"
+                                                                variant="ghost"
+                                                                size="sm"
+                                                                onClick={() => removeHeader(index)}
+                                                                className="h-6 w-6 p-0 ml-2"
+                                                            >
+                                                                <X className="h-3 w-3" />
+                                                            </Button>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            ) : (
+                                                <p className="text-xs text-muted-foreground text-center py-2">
+                                                    No {newServer.type === 'sse' ? 'headers' : 'additional configuration'} added
+                                                </p>
+                                            )}
+                                            <p className="text-xs text-muted-foreground">
+                                                {newServer.type === 'sse'
+                                                    ? 'HTTP headers will be sent with requests to the SSE endpoint.'
+                                                    : 'Additional configuration parameters for the stdio transport.'}
+                                            </p>
+                                        </div>
+                                    </AccordionContent>
+                                </AccordionItem>
+                            </Accordion>
+                        </div>
+                    </div>
+                )}
+
+                {/* Persistent fixed footer with buttons */}
+                <div className="absolute bottom-0 left-0 right-0 p-4 bg-background border-t border-border flex justify-between">
+                    {view === 'list' ? (
+                        <>
+                            <Button
+                                variant="outline"
+                                onClick={clearAllServers}
+                                size="sm"
+                                className="gap-1.5"
+                                disabled={selectedServers.length === 0}
+                            >
+                                <X className="h-3.5 w-3.5" />
+                                Disable All
+                            </Button>
+                            <Button
+                                onClick={() => setView('add')}
+                                size="sm"
+                                className="gap-1.5"
+                            >
+                                <PlusCircle className="h-3.5 w-3.5" />
+                                Add Server
+                            </Button>
+                        </>
+                    ) : (
+                        <>
+                            <Button variant="outline" onClick={handleFormCancel}>
+                                Cancel
+                            </Button>
+                            <Button
+                                onClick={editingServerId ? updateServer : addServer}
+                                disabled={
+                                    !newServer.name ||
+                                    (newServer.type === 'sse' && !newServer.url) ||
+                                    (newServer.type === 'stdio' && (!newServer.command || !newServer.args?.length))
+                                }
+                            >
+                                {editingServerId ? "Save Changes" : "Add Server"}
+                            </Button>
+                        </>
+                    )}
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}; 

components/message.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import type { Message as TMessage } from "ai";
+import { AnimatePresence, motion } from "motion/react";
+import { memo, useCallback, useEffect, useState } from "react";
+import equal from "fast-deep-equal";
+import { Markdown } from "./markdown";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon, LightbulbIcon } from "lucide-react";
+import { SpinnerIcon } from "./icons";
+import { ToolInvocation } from "./tool-invocation";
+
+interface ReasoningPart {
+  type: "reasoning";
+  reasoning: string;
+  details: Array<{ type: "text"; text: string }>;
+}
+
+interface ReasoningMessagePartProps {
+  part: ReasoningPart;
+  isReasoning: boolean;
+}
+
+export function ReasoningMessagePart({
+  part,
+  isReasoning,
+}: ReasoningMessagePartProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const memoizedSetIsExpanded = useCallback((value: boolean) => {
+    setIsExpanded(value);
+  }, []);
+
+  useEffect(() => {
+    memoizedSetIsExpanded(isReasoning);
+  }, [isReasoning, memoizedSetIsExpanded]);
+
+  return (
+    <div className="flex flex-col py-1">
+      {isReasoning ? (
+        <div className="flex items-center gap-2 text-zinc-500 dark:text-zinc-400">
+          <div className="animate-spin">
+            <SpinnerIcon />
+          </div>
+          <div className="text-sm">Thinking...</div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 group">
+          <div className="flex items-center gap-2">
+            <LightbulbIcon className="h-4 w-4 text-zinc-400" />
+            <div className="text-sm text-zinc-600 dark:text-zinc-300">Reasoning</div>
+          </div>
+          <button
+            className={cn(
+              "cursor-pointer rounded-md p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors opacity-0 group-hover:opacity-100",
+              {
+                "opacity-100 bg-zinc-100 dark:bg-zinc-800": isExpanded,
+              },
+            )}
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isExpanded ? (
+              <ChevronDownIcon className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronUpIcon className="h-3.5 w-3.5" />
+            )}
+          </button>
+        </div>
+      )}
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            key="reasoning"
+            className="text-sm text-zinc-600 dark:text-zinc-400 flex flex-col gap-3 border-l-2 pl-4 mt-2 border-zinc-200 dark:border-zinc-700 overflow-hidden"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+          >
+            {part.details.map((detail, detailIndex) =>
+              detail.type === "text" ? (
+                <Markdown key={detailIndex}>{detail.text}</Markdown>
+              ) : (
+                "<redacted>"
+              ),
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+const PurePreviewMessage = ({
+  message,
+  isLatestMessage,
+  status,
+}: {
+  message: TMessage;
+  isLoading: boolean;
+  status: "error" | "submitted" | "streaming" | "ready";
+  isLatestMessage: boolean;
+}) => {
+  return (
+    <AnimatePresence key={message.id}>
+      <motion.div
+        className={cn(
+          "w-full mx-auto px-4 group/message",
+          message.role === "assistant" ? "mb-8" : "mb-6"
+        )}
+        initial={{ y: 5, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        key={`message-${message.id}`}
+        data-role={message.role}
+      >
+        <div
+          className={cn(
+            "flex gap-4 w-full group-data-[role=user]/message:ml-auto group-data-[role=user]/message:max-w-2xl",
+            "group-data-[role=user]/message:w-fit",
+          )}
+        >
+          <div className="flex flex-col w-full space-y-3">
+            {message.parts?.map((part, i) => {
+              switch (part.type) {
+                case "text":
+                  return (
+                    <motion.div
+                      initial={{ y: 5, opacity: 0 }}
+                      animate={{ y: 0, opacity: 1 }}
+                      key={`message-${message.id}-part-${i}`}
+                      className="flex flex-row gap-2 items-start w-full"
+                    >
+                      <div
+                        className={cn("flex flex-col gap-3 w-full", {
+                          "bg-secondary text-secondary-foreground px-4 py-3 rounded-2xl":
+                            message.role === "user",
+                        })}
+                      >
+                        <Markdown>{part.text}</Markdown>
+                      </div>
+                    </motion.div>
+                  );
+                case "tool-invocation":
+                  const { toolName, state, args } = part.toolInvocation;
+                  const result = 'result' in part.toolInvocation ? part.toolInvocation.result : null;
+                  
+                  return (
+                    <ToolInvocation
+                      key={`message-${message.id}-part-${i}`}
+                      toolName={toolName}
+                      state={state}
+                      args={args}
+                      result={result}
+                      isLatestMessage={isLatestMessage}
+                      status={status}
+                    />
+                  );
+                case "reasoning":
+                  return (
+                    <ReasoningMessagePart
+                      key={`message-${message.id}-${i}`}
+                      // @ts-expect-error part
+                      part={part}
+                      isReasoning={
+                        (message.parts &&
+                          status === "streaming" &&
+                          i === message.parts.length - 1) ??
+                        false
+                      }
+                    />
+                  );
+                default:
+                  return null;
+              }
+            })}
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export const Message = memo(PurePreviewMessage, (prevProps, nextProps) => {
+  if (prevProps.status !== nextProps.status) return false;
+  if (prevProps.message.annotations !== nextProps.message.annotations)
+    return false;
+  if (!equal(prevProps.message.parts, nextProps.message.parts)) return false;
+  return true;
+});

components/messages.tsx

@@ -0,0 +1,34 @@
+import type { Message as TMessage } from "ai";
+import { Message } from "./message";
+import { useScrollToBottom } from "@/lib/hooks/use-scroll-to-bottom";
+
+export const Messages = ({
+  messages,
+  isLoading,
+  status,
+}: {
+  messages: TMessage[];
+  isLoading: boolean;
+  status: "error" | "submitted" | "streaming" | "ready";
+}) => {
+  // const [containerRef, endRef] = useScrollToBottom();
+  return (
+    <div
+      className="h-full overflow-y-auto"
+      // ref={containerRef}
+    >
+      <div className="max-w-xl mx-auto py-4">
+        {messages.map((m, i) => (
+          <Message
+            key={i}
+            isLatestMessage={i === messages.length - 1}
+            isLoading={isLoading}
+            message={m}
+            status={status}
+          />
+        ))}
+        {/* <div className="h-1" ref={endRef} /> */}
+      </div>
+    </div>
+  );
+};

components/model-picker.tsx

@@ -0,0 +1,217 @@
+"use client";
+import { MODELS, modelDetails, type modelID, defaultModel } from "@/ai/providers";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { cn } from "@/lib/utils";
+import { Sparkles, Zap, Info, Bolt, Code, Brain, Lightbulb, Image, Gauge, Rocket, Bot } from "lucide-react";
+import { useState, useEffect } from "react";
+import { TextMorph } from "./ui/text-morph";
+
+interface ModelPickerProps {
+  selectedModel: modelID;
+  setSelectedModel: (model: modelID) => void;
+}
+
+export const ModelPicker = ({ selectedModel, setSelectedModel }: ModelPickerProps) => {
+  const [hoveredModel, setHoveredModel] = useState<modelID | null>(null);
+  
+  // Ensure we always have a valid model ID
+  const validModelId = MODELS.includes(selectedModel) ? selectedModel : defaultModel;
+  
+  // If the selected model is invalid, update it to the default
+  useEffect(() => {
+    if (selectedModel !== validModelId) {
+      setSelectedModel(validModelId as modelID);
+    }
+  }, [selectedModel, validModelId, setSelectedModel]);
+  
+  // Function to get the appropriate icon for each provider
+  const getProviderIcon = (provider: string) => {
+    switch (provider.toLowerCase()) {
+      case 'xai':
+        return <Sparkles className="h-3 w-3 text-yellow-500" />;
+      case 'openai':
+        return <Zap className="h-3 w-3 text-green-500" />;
+      default:
+        return <Info className="h-3 w-3 text-blue-500" />;
+    }
+  };
+  
+  // Function to get capability icon
+  const getCapabilityIcon = (capability: string) => {
+    switch (capability.toLowerCase()) {
+      case 'code':
+        return <Code className="h-2.5 w-2.5" />;
+      case 'reasoning':
+        return <Brain className="h-2.5 w-2.5" />;
+      case 'research':
+        return <Lightbulb className="h-2.5 w-2.5" />;
+      case 'vision':
+        return <Image className="h-2.5 w-2.5" />;
+      case 'fast':
+      case 'rapid':
+        return <Bolt className="h-2.5 w-2.5" />;
+      case 'efficient':
+      case 'compact':
+        return <Gauge className="h-2.5 w-2.5" />;
+      case 'creative':
+      case 'balance':
+        return <Rocket className="h-2.5 w-2.5" />;
+      case 'agentic':
+        return <Bot className="h-2.5 w-2.5" />;
+      default:
+        return <Info className="h-2.5 w-2.5" />;
+    }
+  };
+  
+  // Get capability badge color
+  const getCapabilityColor = (capability: string) => {
+    switch (capability.toLowerCase()) {
+      case 'code':
+        return "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300";
+      case 'reasoning':
+      case 'research':
+        return "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300";
+      case 'vision':
+        return "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300";
+      case 'fast':
+      case 'rapid':
+        return "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300";
+      case 'efficient':
+      case 'compact':
+        return "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300";
+      case 'creative':
+      case 'balance':
+        return "bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-300";
+      case 'agentic':
+        return "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300";
+      default:
+        return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
+    }
+  };
+  
+  // Get current model details to display
+  const displayModelId = hoveredModel || validModelId;
+  const currentModelDetails = modelDetails[displayModelId];
+
+  // Handle model change
+  const handleModelChange = (modelId: string) => {
+    if (MODELS.includes(modelId)) {
+      const typedModelId = modelId as modelID;
+      setSelectedModel(typedModelId);
+    }
+  };
+
+  return (
+    <div className="absolute bottom-2 left-2">
+      <Select 
+        value={validModelId} 
+        onValueChange={handleModelChange} 
+        defaultValue={validModelId}
+      >
+        <SelectTrigger 
+          className="w-48 px-3 h-9 rounded-full group border-border/80 bg-background/80 backdrop-blur-sm hover:bg-muted/30 transition-all duration-200"
+        >
+          <SelectValue 
+            placeholder="Select model" 
+            className="text-xs font-medium flex items-center gap-2"
+          >
+            <div className="flex items-center gap-2">
+              {getProviderIcon(modelDetails[validModelId].provider)}
+              <TextMorph>{modelDetails[validModelId].name}</TextMorph>
+            </div>
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent
+          align="start"
+          className="bg-background/95 dark:bg-muted/95 backdrop-blur-sm border-border/80 rounded-lg overflow-hidden p-0"
+          style={{ width: "485px" }}
+        >
+          <div className="grid grid-cols-[170px_1fr] items-start gap-x-4">
+            {/* Model selector column */}
+            <div className="border-r border-border/40 bg-muted/20 p-2">
+              <SelectGroup className="space-y-1">
+                {MODELS.map((id) => {
+                  const modelId = id as modelID;
+                  return (
+                    <SelectItem 
+                      key={id} 
+                      value={id}
+                      onMouseEnter={() => setHoveredModel(modelId)}
+                      onMouseLeave={() => setHoveredModel(null)}
+                      className={cn(
+                        "!px-3 py-2 cursor-pointer rounded-md text-xs transition-colors duration-150",
+                        "hover:bg-primary/5 hover:text-primary-foreground",
+                        "focus:bg-primary/10 focus:text-primary focus:outline-none",
+                        "data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary",
+                        validModelId === id && "!bg-primary/15 !text-primary font-medium"
+                      )}
+                    >
+                      <div className="flex flex-col gap-0.5">
+                        <div className="flex items-center gap-2">
+                          {getProviderIcon(modelDetails[modelId].provider)}
+                          <span className="font-medium truncate">{modelDetails[modelId].name}</span>
+                        </div>
+                        <span className="text-xs text-muted-foreground">
+                          {modelDetails[modelId].provider}
+                        </span>
+                      </div>
+                    </SelectItem>
+                  );
+                })}
+              </SelectGroup>
+            </div>
+            
+            {/* Model details column */}
+            <div className="p-4 flex flex-col">
+              <div>
+                <div className="flex items-center gap-2 mb-1">
+                  {getProviderIcon(currentModelDetails.provider)}
+                  <h3 className="text-sm font-semibold">{currentModelDetails.name}</h3>
+                </div>
+                <div className="text-xs text-muted-foreground mb-1">
+                  Provider: <span className="font-medium">{currentModelDetails.provider}</span>
+                </div>
+                
+                {/* Capability badges */}
+                <div className="flex flex-wrap gap-1 mt-2 mb-3">
+                  {currentModelDetails.capabilities.map((capability) => (
+                    <span 
+                      key={capability}
+                      className={cn(
+                        "inline-flex items-center gap-1 text-[9px] px-1.5 py-0.5 rounded-full font-medium",
+                        getCapabilityColor(capability)
+                      )}
+                    >
+                      {getCapabilityIcon(capability)}
+                      <span>{capability}</span>
+                    </span>
+                  ))}
+                </div>
+                
+                <div className="text-xs text-foreground/90 leading-relaxed mb-3">
+                  {currentModelDetails.description}
+                </div>
+              </div>
+              
+              <div className="bg-muted/40 rounded-md p-2">
+                <div className="text-[10px] text-muted-foreground flex justify-between items-center">
+                  <span>API Version:</span>
+                  <code className="bg-background/80 px-2 py-0.5 rounded text-[10px] font-mono">
+                    {currentModelDetails.apiVersion}
+                  </code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};

components/project-overview.tsx

@@ -0,0 +1,26 @@
+import NextLink from "next/link";
+export const ProjectOverview = () => {
+  return (
+    <div className="flex flex-col items-center justify-end">
+      <h1 className="text-3xl font-semibold mb-4">Scira MCP Chat</h1>
+    </div>
+  );
+};
+
+const Link = ({
+  children,
+  href,
+}: {
+  children: React.ReactNode;
+  href: string;
+}) => {
+  return (
+    <NextLink
+      target="_blank"
+      className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-75"
+      href={href}
+    >
+      {children}
+    </NextLink>
+  );
+};

components/suggested-prompts.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Button } from "./ui/button";
+import { memo } from "react";
+
+interface SuggestedPromptsProps {
+  sendMessage: (input: string) => void;
+}
+
+function PureSuggestedPrompts({ sendMessage }: SuggestedPromptsProps) {
+  const suggestedActions = [
+    {
+      title: "What are the advantages",
+      label: "of using Next.js?",
+      action: "What are the advantages of using Next.js?",
+    },
+    {
+      title: "What is the weather",
+      label: "in San Francisco?",
+      action: "What is the weather in San Francisco?",
+    },
+  ];
+
+  return (
+    <div
+      data-testid="suggested-actions"
+      className="grid sm:grid-cols-2 gap-2 w-full"
+    >
+      {suggestedActions.map((suggestedAction, index) => (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ delay: 0.05 * index }}
+          key={`suggested-action-${suggestedAction.title}-${index}`}
+          className={index > 1 ? "hidden sm:block" : "block"}
+        >
+          <Button
+            variant="ghost"
+            onClick={async () => {
+              sendMessage(suggestedAction.action);
+            }}
+            className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
+          >
+            <span className="font-medium">{suggestedAction.title}</span>
+            <span className="text-muted-foreground">
+              {suggestedAction.label}
+            </span>
+          </Button>
+        </motion.div>
+      ))}
+    </div>
+  );
+}
+
+export const SuggestedPrompts = memo(PureSuggestedPrompts, () => true);

components/textarea.tsx

@@ -0,0 +1,61 @@
+import { modelID } from "@/ai/providers";
+import { Textarea as ShadcnTextarea } from "@/components/ui/textarea";
+import { ArrowUp, Loader2 } from "lucide-react";
+import { ModelPicker } from "./model-picker";
+
+interface InputProps {
+  input: string;
+  handleInputChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  isLoading: boolean;
+  status: string;
+  stop: () => void;
+  selectedModel: modelID;
+  setSelectedModel: (model: modelID) => void;
+}
+
+export const Textarea = ({
+  input,
+  handleInputChange,
+  isLoading,
+  status,
+  stop,
+  selectedModel,
+  setSelectedModel,
+}: InputProps) => {
+  const isStreaming = status === "streaming" || status === "submitted";
+  
+  return (
+    <div className="relative w-full">
+      <ShadcnTextarea
+        className="resize-none bg-background/50 dark:bg-muted/50 backdrop-blur-sm w-full rounded-2xl pr-12 pt-4 pb-16 border-input focus-visible:ring-ring placeholder:text-muted-foreground"
+        value={input}
+        autoFocus
+        placeholder="Send a message..."
+        onChange={handleInputChange}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey && !isLoading && input.trim()) {
+            e.preventDefault();
+            e.currentTarget.form?.requestSubmit();
+          }
+        }}
+      />
+      <ModelPicker
+        setSelectedModel={setSelectedModel}
+        selectedModel={selectedModel}
+      />
+
+      <button
+        type={isStreaming ? "button" : "submit"}
+        onClick={isStreaming ? stop : undefined}
+        disabled={(!isStreaming && !input.trim()) || (isStreaming && status === "submitted")}
+        className="absolute right-2 bottom-2 rounded-full p-2 bg-primary hover:bg-primary/90 disabled:bg-muted disabled:cursor-not-allowed transition-all duration-200"
+      >
+        {isStreaming ? (
+          <Loader2 className="h-4 w-4 text-primary-foreground animate-spin" />
+        ) : (
+          <ArrowUp className="h-4 w-4 text-primary-foreground" />
+        )}
+      </button>
+    </div>
+  );
+};

components/theme-provider.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+} 

components/theme-toggle.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "./ui/button"
+
+export function ThemeToggle({ className, ...props }: React.ComponentProps<typeof Button>) {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      className={`rounded-md h-8 w-8 ${className}`}
+      {...props}
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+} 

components/tool-invocation.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Loader2,
+  PocketKnife,
+  CheckCircle,
+  StopCircle,
+  Code2,
+  Terminal,
+} from "lucide-react";
+
+interface ToolInvocationProps {
+  toolName: string;
+  state: string;
+  args: any;
+  result: any;
+  isLatestMessage: boolean;
+  status: string;
+}
+
+export function ToolInvocation({
+  toolName,
+  state,
+  args,
+  result,
+  isLatestMessage,
+  status,
+}: ToolInvocationProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const variants = {
+    collapsed: {
+      height: 0,
+      opacity: 0,
+    },
+    expanded: {
+      height: "auto",
+      opacity: 1,
+    },
+  };
+
+  const getStatusIcon = () => {
+    if (state === "call") {
+      if (isLatestMessage && status !== "ready") {
+        return <Loader2 className="animate-spin h-4 w-4 text-muted-foreground" />;
+      }
+      return <StopCircle className="h-4 w-4 text-destructive" />;
+    }
+    return <CheckCircle size={14} className="text-success" />;
+  };
+
+  const formatContent = (content: any): string => {
+    try {
+      if (typeof content === "string") {
+        try {
+          const parsed = JSON.parse(content);
+          return JSON.stringify(parsed, null, 2);
+        } catch {
+          return content;
+        }
+      }
+      return JSON.stringify(content, null, 2);
+    } catch {
+      return String(content);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2 p-4 mb-4 bg-muted/50 rounded-xl border border-border backdrop-blur-sm">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center w-8 h-8 bg-muted rounded-lg">
+          <PocketKnife className="h-4 w-4" />
+        </div>
+        <div className="flex-1 flex items-center gap-2">
+          <span className="text-sm font-medium">
+            {state === "call" ? "Calling" : "Called"}
+          </span>
+          <code className="px-2 py-1 text-xs font-mono rounded-md bg-muted text-muted-foreground">
+            {toolName}
+          </code>
+        </div>
+        <div className="flex items-center gap-2">
+          {getStatusIcon()}
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1 hover:bg-muted rounded-md transition-colors"
+          >
+            {isExpanded ? (
+              <ChevronUpIcon className="h-4 w-4" />
+            ) : (
+              <ChevronDownIcon className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial="collapsed"
+            animate="expanded"
+            exit="collapsed"
+            variants={variants}
+            transition={{ duration: 0.2 }}
+            className="space-y-3 pt-2"
+          >
+            {!!args && (
+              <div className="space-y-1.5">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <Terminal className="h-3.5 w-3.5" />
+                  <span>Arguments</span>
+                </div>
+                <pre className="text-xs font-mono bg-muted p-3 rounded-lg overflow-x-auto">
+                  {formatContent(args)}
+                </pre>
+              </div>
+            )}
+            
+            {!!result && (
+              <div className="space-y-1.5">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <Code2 className="h-3.5 w-3.5" />
+                  <span>Result</span>
+                </div>
+                <pre className="text-xs font-mono bg-muted p-3 rounded-lg overflow-x-auto max-h-[300px] overflow-y-auto">
+                  {formatContent(result)}
+                </pre>
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+} 

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("mb-1", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:ring-ring/30 flex flex-1 items-center justify-between py-3 text-left text-sm font-medium transition-all outline-none focus-visible:ring-2 rounded-md disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground/70 size-3.5 shrink-0 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("py-2 pl-1", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

components/ui/select.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "text-muted-foreground data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-secondary data-[state=open]:bg-secondary disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-secondary text-secondary-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

components/ui/sidebar.tsx

@@ -0,0 +1,726 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

components/ui/text-morph.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { cn } from '@/lib/utils';
+import { AnimatePresence, motion, Transition, Variants } from 'motion/react';
+import { useMemo, useId } from 'react';
+
+export type TextMorphProps = {
+  children: string;
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  variants?: Variants;
+  transition?: Transition;
+};
+
+export function TextMorph({
+  children,
+  as: Component = 'p',
+  className,
+  style,
+  variants,
+  transition,
+}: TextMorphProps) {
+  const uniqueId = useId();
+
+  const characters = useMemo(() => {
+    const charCounts: Record<string, number> = {};
+
+    return children.split('').map((char) => {
+      const lowerChar = char.toLowerCase();
+      charCounts[lowerChar] = (charCounts[lowerChar] || 0) + 1;
+
+      return {
+        id: `${uniqueId}-${lowerChar}${charCounts[lowerChar]}`,
+        label: char === ' ' ? '\u00A0' : char,
+      };
+    });
+  }, [children, uniqueId]);
+
+  const defaultVariants: Variants = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  };
+
+  const defaultTransition: Transition = {
+    type: 'spring',
+    stiffness: 280,
+    damping: 18,
+    mass: 0.3,
+  };
+
+  return (
+    <Component className={cn(className)} aria-label={children} style={style}>
+      <AnimatePresence mode='popLayout' initial={false}>
+        {characters.map((character) => (
+          <motion.span
+            key={character.id}
+            layoutId={character.id}
+            className='inline-block'
+            aria-hidden='true'
+            initial='initial'
+            animate='animate'
+            exit='exit'
+            variants={variants || defaultVariants}
+            transition={transition || defaultTransition}
+          >
+            {character.label}
+          </motion.span>
+        ))}
+      </AnimatePresence>
+    </Component>
+  );
+}

components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

drizzle.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from "drizzle-kit";
+import dotenv from "dotenv";
+
+// Load environment variables
+dotenv.config({ path: ".env.local" });
+
+export default {
+  schema: "./lib/db/schema.ts",
+  out: "./drizzle",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+} satisfies Config;