New model dropped

app/api/ask/route.ts

@@ -18,6 +18,7 @@ import {
   UPDATE_PAGE_END,
   PROMPT_FOR_PROJECT_NAME,
 } from "@/lib/prompts";
+import { calculateMaxTokens, estimateInputTokens, getProviderSpecificConfig } from "@/lib/max-tokens";
 import MY_TOKEN_KEY from "@/lib/get-cookie-name";
 import { Page } from "@/types";
 import { createRepo, RepoDesignation, uploadFiles } from "@huggingface/hub";
@@ -25,6 +26,7 @@ import { isAuthenticated } from "@/lib/auth";
 import { getBestProvider } from "@/lib/best-provider";
 import { rewritePrompt } from "@/lib/rewrite-prompt";
 import { COLORS } from "@/lib/utils";
+import { templates } from "@/lib/templates";
 
 const ipAddresses = new Map();
 
@@ -122,6 +124,21 @@ export async function POST(request: NextRequest) {
       // let completeResponse = "";
       try {
         const client = new InferenceClient(token);
+        
+        // Calculate dynamic max_tokens based on provider and input size
+        const systemPrompt = INITIAL_SYSTEM_PROMPT + (enhancedSettings.isActive ? `
+Here are some examples of designs that you can inspire from: 
+${templates.map((template) => `- ${template}`).join("\n")}
+IMPORTANT: Use the templates as inspiration, but do not copy them exactly.
+Try to create a unique design, based on the templates, but not exactly like them, mostly depending on the user's prompt. These are just examples, do not copy them exactly.
+` : "");
+        
+        const userPrompt = `${rewrittenPrompt}${redesignMarkdown ? `\n\nHere is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : ""} : ""}`;
+        
+        const estimatedInputTokens = estimateInputTokens(systemPrompt, userPrompt);
+        const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, true);
+        const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
+        
         const chatCompletion = client.chatCompletionStream(
           {
             model: selectedModel.value,
@@ -129,14 +146,14 @@ export async function POST(request: NextRequest) {
             messages: [
               {
                 role: "system",
-                content: INITIAL_SYSTEM_PROMPT,
+                content: systemPrompt,
               },
               {
                 role: "user",
-                content: `${rewrittenPrompt}${redesignMarkdown ? `\n\nHere is my current design as a markdown:\n\n${redesignMarkdown}\n\nNow, please create a new design based on this markdown. Use the images in the markdown.` : ""} : ""}`
+                content: userPrompt
               },
             ],
-            max_tokens: 65_536,
+            ...providerConfig,
           },
           billTo ? { billTo } : {}
         );
@@ -297,6 +314,21 @@ export async function PUT(request: NextRequest) {
   const selectedProvider = await getBestProvider(selectedModel.value, provider)
 
   try {
+    // Calculate dynamic max_tokens for PUT request
+    const systemPrompt = FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : "");
+    const userContext = previousPrompts
+      ? `Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
+      : "You are modifying the HTML file based on the user's request.";
+    const assistantContext = `${
+      selectedElementHtml
+        ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\` Could be in multiple pages, if so, update all the pages.`
+        : ""
+    }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`;
+    
+    const estimatedInputTokens = estimateInputTokens(systemPrompt, prompt, userContext + assistantContext);
+    const dynamicMaxTokens = calculateMaxTokens(selectedProvider, estimatedInputTokens, false);
+    const providerConfig = getProviderSpecificConfig(selectedProvider, dynamicMaxTokens);
+    
     const response = await client.chatCompletion(
       {
         model: selectedModel.value,
@@ -304,33 +336,22 @@ export async function PUT(request: NextRequest) {
         messages: [
           {
             role: "system",
-            content: FOLLOW_UP_SYSTEM_PROMPT + (isNew ? PROMPT_FOR_PROJECT_NAME : ""),
+            content: systemPrompt,
           },
           {
             role: "user",
-            content: previousPrompts
-              ? `Also here are the previous prompts:\n\n${previousPrompts.map((p: string) => `- ${p}`).join("\n")}`
-              : "You are modifying the HTML file based on the user's request.",
+            content: userContext,
           },
           {
             role: "assistant",
-
-            content: `${
-              selectedElementHtml
-                ? `\n\nYou have to update ONLY the following element, NOTHING ELSE: \n\n\`\`\`html\n${selectedElementHtml}\n\`\`\` Could be in multiple pages, if so, update all the pages.`
-                : ""
-            }. Current pages: ${pages?.map((p: Page) => `- ${p.path} \n${p.html}`).join("\n")}. ${files?.length > 0 ? `Current images: ${files?.map((f: string) => `- ${f}`).join("\n")}.` : ""}`,
+            content: assistantContext,
           },
           {
             role: "user",
             content: prompt,
           },
         ],
-        ...(selectedProvider.provider !== "sambanova"
-          ? {
-              max_tokens: 65_536,
-            }
-          : {}),
+        ...providerConfig,
       },
       billTo ? { billTo } : {}
     );

components/editor/ask-ai/fake-ask.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useLocalStorage } from "react-use";
+import { ArrowUp } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { useLoginModal } from "@/components/contexts/login-context";
+import { PromptBuilder } from "./prompt-builder";
+import { EnhancedSettings } from "@/types";
+import { Settings } from "./settings";
+
+export const FakeAskAi = () => {
+  const router = useRouter();
+  const [prompt, setPrompt] = useState("");
+  const [openProvider, setOpenProvider] = useState(false);
+  const [enhancedSettings, setEnhancedSettings, removeEnhancedSettings] =
+    useLocalStorage<EnhancedSettings>("deepsite-enhancedSettings", {
+      isActive: true,
+      primaryColor: undefined,
+      secondaryColor: undefined,
+      theme: undefined,
+    });
+  const [, setPromptStorage] = useLocalStorage("prompt", "");
+
+  const callAi = async () => {
+    setPromptStorage(prompt);
+    router.push("/projects/new");
+  };
+
+  // todo redirect to login + set prompt in storage, then redirect to projects/new + set the prompt in the state
+
+  return (
+    <div className="p-3 w-full max-w-xl mx-auto">
+      <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-20 w-full group">
+        <div className="w-full relative flex items-center justify-between">
+          <textarea
+            className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none"
+            placeholder="Ask DeepSite anything..."
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                callAi();
+              }
+            }}
+          />
+        </div>
+        <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
+          <div className="flex-1 flex items-center justify-start gap-1.5 flex-wrap">
+            <PromptBuilder
+              enhancedSettings={enhancedSettings!}
+              setEnhancedSettings={setEnhancedSettings}
+            />
+            <Settings
+              open={openProvider}
+              isFollowUp={false}
+              error=""
+              onClose={setOpenProvider}
+            />
+          </div>
+          <div className="flex items-center justify-end gap-2">
+            <Button
+              size="iconXs"
+              variant="outline"
+              className="!rounded-md"
+              onClick={() => callAi()}
+            >
+              <ArrowUp className="size-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/editor/ask-ai/index.tsx

@@ -1,20 +1,11 @@
-import { useMemo, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import classNames from "classnames";
-import {
-  ArrowUp,
-  ChevronDown,
-  CircleStop,
-  Pause,
-  Plus,
-  Square,
-  StopCircle,
-} from "lucide-react";
-import { useLocalStorage, useUpdateEffect } from "react-use";
+import { ArrowUp, ChevronDown, CircleStop } from "lucide-react";
+import { useLocalStorage, useUpdateEffect, useMount } from "react-use";
 import { toast } from "sonner";
 
 import { useAi } from "@/hooks/useAi";
 import { useEditor } from "@/hooks/useEditor";
-import { isTheSameHtml } from "@/lib/compare-html-diff";
 import { EnhancedSettings, Project } from "@/types";
 import { SelectedFiles } from "@/components/editor/ask-ai/selected-files";
 import { SelectedHtmlElement } from "@/components/editor/ask-ai/selected-html-element";
@@ -28,7 +19,6 @@ import { useUser } from "@/hooks/useUser";
 import { useLoginModal } from "@/components/contexts/login-context";
 import { Settings } from "./settings";
 import { useProModal } from "@/components/contexts/pro-context";
-import { MODELS } from "@/lib/providers";
 import { MAX_FREE_PROJECTS } from "@/lib/utils";
 
 export const AskAi = ({
@@ -71,6 +61,7 @@ export const AskAi = ({
       secondaryColor: undefined,
       theme: undefined,
     });
+  const [promptStorage, , removePromptStorage] = useLocalStorage("prompt", "");
 
   const [isFollowUp, setIsFollowUp] = useState(true);
   const [prompt, setPrompt] = useState("");
@@ -83,8 +74,16 @@ export const AskAi = ({
     setOpenThink(true);
   };
 
+  useMount(() => {
+    if (promptStorage && promptStorage.trim() !== "") {
+      setPrompt(promptStorage);
+      callAi();
+    }
+  });
+
   const callAi = async (redesignMarkdown?: string) => {
     if (!user) return openLoginModal();
+    removePromptStorage();
     if (!user.isPro && projects.length >= MAX_FREE_PROJECTS)
       return openProModal([]);
     if (isAiWorking) return;

components/editor/ask-ai/loading.tsx

@@ -1,5 +1,6 @@
+"use client";
 import Loading from "@/components/loading";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useInterval } from "react-use";
 
 const TEXTS = [
@@ -23,8 +24,16 @@ export const AiLoading = ({
   className?: string;
 }) => {
   const [selectedText, setSelectedText] = useState(
-    text ?? TEXTS[Math.floor(Math.random() * TEXTS.length)]
+    text ?? TEXTS[0] // Start with first text to avoid hydration issues
   );
+
+  // Set random text on client-side only to avoid hydration mismatch
+  useEffect(() => {
+    if (!text) {
+      setSelectedText(TEXTS[Math.floor(Math.random() * TEXTS.length)]);
+    }
+  }, [text]);
+
   useInterval(() => {
     if (!text) {
       if (selectedText === TEXTS[TEXTS.length - 1]) {

components/editor/ask-ai/settings.tsx

@@ -76,7 +76,16 @@ export function Settings({
           disabled={globalAiLoading}
           size="xs"
         >
-          <Brain className="size-3.5" />
+          {/* <Brain className="size-3.5" /> */}
+          {selectedModel?.logo && (
+            <Image
+              src={selectedModel?.logo}
+              alt={selectedModel.label}
+              className={`size-3.5 ${open ? "" : "filter invert"}`}
+              width={20}
+              height={20}
+            />
+          )}
           <span className="truncate max-w-[120px]">
             {isMounted
               ? selectedModel?.label?.split(" ").join("-").toLowerCase()

components/my-projects/index.tsx

@@ -13,7 +13,6 @@ import { Button } from "@/components/ui/button";
 import { useProModal } from "@/components/contexts/pro-context";
 import { api } from "@/lib/api";
 import { NotLogged } from "../not-logged/not-logged";
-import { LoadProject } from "./load-project";
 
 export function MyProjects() {
   const { user, projects, setProjects } = useUser();

components/not-logged/not-logged.tsx

@@ -4,6 +4,7 @@ import { useUser } from "@/hooks/useUser";
 import { Button } from "@/components/ui/button";
 import { AnimatedBlobs } from "../animated-blobs";
 import { AnimatedText } from "../animated-text";
+import { FakeAskAi } from "../editor/ask-ai/fake-ask";
 
 export const NotLogged = () => {
   const { openLoginWindow } = useUser();
@@ -21,10 +22,7 @@ export const NotLogged = () => {
           Access the most simple and powerful AI Vibe Code Editor to create your
           next project.
         </p>
-        <Button size="xl" variant="default" onClick={openLoginWindow}>
-          Log In to Continue
-        </Button>
-        <div className="mt-14 max-w-2xl w-full mx-auto">{/* <AskAi /> */}</div>
+        <FakeAskAi />
         <AnimatedBlobs />
       </header>
       <div id="features" className="min-h-screen py-20 px-6 relative">

lib/max-tokens.ts

@@ -0,0 +1,95 @@
+/**
+ * Calculate optimal max_tokens based on provider capabilities and input size
+ * 
+ * @param selectedProvider - The selected provider object from getBestProvider
+ * @param inputTokens - Estimated input tokens (prompt + system message + context)
+ * @param isStreaming - Whether this is a streaming request (affects buffer)
+ * @returns Optimal max_tokens value
+ */
+export function calculateMaxTokens(
+  selectedProvider: any,
+  inputTokens: number = 0,
+  isStreaming: boolean = false
+): number {
+  if (!selectedProvider?.context_length) {
+    // Fallback for unknown providers - use conservative default
+    return 4096;
+  }
+
+  const contextLength = selectedProvider.context_length;
+  
+  // Reserve buffer for safety and potential tokenization differences
+  const safetyBuffer = isStreaming ? 1000 : 500;
+  
+  // Calculate available tokens for output
+  const availableTokens = contextLength - inputTokens - safetyBuffer;
+  
+  // Define reasonable max output limits based on use case
+  const useCase = {
+    // For HTML generation, we typically need substantial output
+    htmlGeneration: Math.min(32_000, availableTokens),
+    // For code editing, moderate output is usually sufficient  
+    codeEditing: Math.min(16_000, availableTokens),
+    // Conservative fallback
+    default: Math.min(8_000, availableTokens)
+  };
+  
+  // Choose based on available tokens and provider capabilities
+  let targetTokens: number;
+  
+  if (availableTokens >= 32_000) {
+    targetTokens = useCase.htmlGeneration;
+  } else if (availableTokens >= 16_000) {
+    targetTokens = useCase.codeEditing;
+  } else {
+    targetTokens = useCase.default;
+  }
+  
+  // Ensure we don't go below minimum viable output
+  const minimumViableOutput = 2048;
+  if (targetTokens < minimumViableOutput) {
+    // If we can't provide minimum viable output, try with minimal buffer
+    const minimalBuffer = 200;
+    targetTokens = Math.max(
+      minimumViableOutput,
+      contextLength - inputTokens - minimalBuffer
+    );
+  }
+  
+  // Final safety check - never exceed context length
+  return Math.min(targetTokens, contextLength - inputTokens - 100);
+}
+
+/**
+ * Estimate input tokens for a request (rough estimation)
+ * 
+ * @param systemPrompt - System prompt content
+ * @param userPrompt - User prompt content  
+ * @param additionalContext - Additional context (templates, pages, etc.)
+ * @returns Estimated token count
+ */
+export function estimateInputTokens(
+  systemPrompt: string = "",
+  userPrompt: string = "",
+  additionalContext: string = ""
+): number {
+  // Rough estimation: ~4 characters per token for English text
+  // This is conservative - actual tokenization may vary
+  const totalChars = systemPrompt.length + userPrompt.length + additionalContext.length;
+  return Math.ceil(totalChars / 3.5); // Slightly more conservative than 4 chars/token
+}
+
+/**
+ * Get max_tokens configuration for specific providers with special handling
+ */
+export function getProviderSpecificConfig(selectedProvider: any, baseMaxTokens: number) {
+  const providerName = selectedProvider?.provider;
+  
+  switch (providerName) {
+    case "sambanova":
+      // SambaNova has specific limitations - don't set max_tokens
+      return {};
+    default:
+      return { max_tokens: baseMaxTokens };
+  }
+}

lib/providers.ts

@@ -1,37 +1,34 @@
+import DeepSeekLogo from "@/assets/deepseek.svg";
+import QwenLogo from "@/assets/qwen.svg";
+import KimiLogo from "@/assets/kimi.svg";
+
 export const PROVIDERS = {
   "fireworks-ai": {
     name: "Fireworks AI",
-    max_tokens: 131_000,
     id: "fireworks-ai",
   },
   nebius: {
     name: "Nebius AI Studio",
-    max_tokens: 131_000,
     id: "nebius",
   },
   sambanova: {
     name: "SambaNova",
-    max_tokens: 32_000,
     id: "sambanova",
   },
   novita: {
     name: "NovitaAI",
-    max_tokens: 16_000,
     id: "novita",
   },
   hyperbolic: {
     name: "Hyperbolic",
-    max_tokens: 131_000,
     id: "hyperbolic",
   },
   together: {
     name: "Together AI",
-    max_tokens: 128_000,
     id: "together",
   },
   groq: {
     name: "Groq",
-    max_tokens: 16_384,
     id: "groq",
   },
 };
@@ -42,6 +39,7 @@ export const MODELS = [
     label: "DeepSeek V3 O324",
     providers: ["fireworks-ai", "nebius", "sambanova", "novita", "hyperbolic"],
     autoProvider: "novita",
+    logo: DeepSeekLogo,
   },
   // {
   //   value: "deepseek-ai/DeepSeek-R1-0528",
@@ -62,31 +60,42 @@ export const MODELS = [
     label: "Qwen3 Coder 480B A35B Instruct",
     providers: ["novita", "hyperbolic"],
     autoProvider: "novita",
+    logo: QwenLogo,
   },
   {
     value: "moonshotai/Kimi-K2-Instruct",
     label: "Kimi K2 Instruct",
     providers: ["together", "novita", "groq"],
     autoProvider: "groq",
+    logo: KimiLogo,
   },
   {
     value: "deepseek-ai/DeepSeek-V3.1",
     label: "DeepSeek V3.1",
     providers: ["fireworks-ai", "novita"],
     autoProvider: "fireworks-ai",
+    logo: DeepSeekLogo,
   },
   {
     value: "moonshotai/Kimi-K2-Instruct-0905",
     label: "Kimi K2 Instruct 0905",
     providers: ["together", "groq", "novita"],
-    isNew: true,
-    autoProvider: "groq"
+    autoProvider: "groq",
+    logo: KimiLogo,
   },
   {
     value: "deepseek-ai/DeepSeek-V3.1-Terminus",
     label: "DeepSeek V3.1 Terminus",
     providers: ["novita"],
     autoProvider: "novita",
+    logo: DeepSeekLogo,
+  },
+  {
+    value: "deepseek-ai/DeepSeek-V3.2-Exp",
+    label: "DeepSeek V3.2 Exp",
+    providers: ["novita"],
+    autoProvider: "novita",
+    logo: DeepSeekLogo,
     isNew: true,
   }
 ];