From 55394629a386d0c94046391c1af64a41b0c76336 Mon Sep 17 00:00:00 2001
From: Jordan Hunt <65152573+jordanhunt22@users.noreply.github.com>
Date: Mon, 22 Sep 2025 21:08:56 -0700
Subject: [PATCH] feat: allow configuring custom system prompts per chat

---
 app/components/chat/Chat.tsx                 |   3 +
 app/components/chat/MessageInput.tsx         | 397 +++++++++++++------
 app/lib/.server/chat.ts                      |  14 +-
 app/lib/.server/llm/convex-agent.ts          |  13 +-
 app/lib/stores/customSystemPrompt.ts         |   3 +
 app/lib/stores/startup/useInitialMessages.ts |   4 +
 convex/messages.test.ts                      |  22 +
 convex/messages.ts                           |  34 ++
 convex/schema.ts                             |   1 +
 9 files changed, 364 insertions(+), 127 deletions(-)
 create mode 100644 app/lib/stores/customSystemPrompt.ts

diff --git a/app/components/chat/Chat.tsx b/app/components/chat/Chat.tsx
index b19fb9ee4..bea37feff 100644
--- a/app/components/chat/Chat.tsx
+++ b/app/components/chat/Chat.tsx
@@ -47,6 +47,7 @@ import { useReferralCode, useReferralStats } from '~/lib/hooks/useReferralCode';
 import { useUsage } from '~/lib/stores/usage';
 import { hasAnyApiKeySet, hasApiKeySet } from '~/lib/common/apiKey';
 import { chatSyncState } from '~/lib/stores/startup/chatSyncState';
+import { customSystemPromptStore } from '~/lib/stores/customSystemPrompt';
 
 const logger = createScopedLogger('Chat');
 
@@ -348,6 +349,7 @@ export const Chat = memo(
         );
 
         const characterCounts = chatContextManager.current.calculatePromptCharacterCounts(preparedMessages);
+        const customSystemPrompt = customSystemPromptStore.get();
 
         return {
           messages: preparedMessages,
@@ -367,6 +369,7 @@ export const Chat = memo(
           featureFlags: {
             enableResend,
           },
+          customSystemPrompt,
         };
       },
       maxSteps: 64,
diff --git a/app/components/chat/MessageInput.tsx b/app/components/chat/MessageInput.tsx
index c85e82ef0..890f89455 100644
--- a/app/components/chat/MessageInput.tsx
+++ b/app/components/chat/MessageInput.tsx
@@ -35,11 +35,21 @@ import { toast } from 'sonner';
 import { captureException } from '@sentry/remix';
 import { Menu as MenuComponent, MenuItem as MenuItemComponent } from '@ui/Menu';
 import { PencilSquareIcon } from '@heroicons/react/24/outline';
-import { ChatBubbleLeftIcon, DocumentArrowUpIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+import {
+  AdjustmentsHorizontalIcon,
+  ChatBubbleLeftIcon,
+  DocumentArrowUpIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/24/outline';
 import { useAuth } from '@workos-inc/authkit-react';
 import { useConvex } from 'convex/react';
+import { api } from '@convex/_generated/api';
+import { customSystemPromptStore } from '~/lib/stores/customSystemPrompt';
+import { chatIdStore } from '~/lib/stores/chatId';
+import { Modal } from '@ui/Modal';
 
 const PROMPT_LENGTH_WARNING_THRESHOLD = 2000;
+const CUSTOM_SYSTEM_PROMPT_MAX_LENGTH = 2000;
 
 type Highlight = {
   text: string; // must be lowercase
@@ -116,11 +126,77 @@ export const MessageInput = memo(function MessageInput({
   const chefAuthState = useChefAuth();
   const selectedTeamSlug = useSelectedTeamSlug();
   const convex = useConvex();
+  const customSystemPrompt = useStore(customSystemPromptStore);
+  const chatId = useStore(chatIdStore);
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const input = useStore(messageInputStore);
 
+  const [isCustomPromptModalOpen, setIsCustomPromptModalOpen] = useState(false);
+  const [customPromptDraft, setCustomPromptDraft] = useState('');
+  const [isSavingCustomPrompt, setIsSavingCustomPrompt] = useState(false);
+
+  useEffect(() => {
+    if (!isCustomPromptModalOpen) {
+      setCustomPromptDraft(customSystemPrompt ?? '');
+    }
+  }, [customSystemPrompt, isCustomPromptModalOpen]);
+
+  const customPromptLength = customPromptDraft.length;
+  const isCustomPromptTooLong = customPromptLength > CUSTOM_SYSTEM_PROMPT_MAX_LENGTH;
+  const hasCustomPrompt = !!customSystemPrompt && customSystemPrompt.trim().length > 0;
+  const customPromptButtonDisabled = !sessionId || !chatId;
+
+  const openCustomPromptModal = useCallback(() => {
+    setCustomPromptDraft(customSystemPrompt ?? '');
+    setIsCustomPromptModalOpen(true);
+  }, [customSystemPrompt]);
+
+  const closeCustomPromptModal = useCallback(() => {
+    setIsCustomPromptModalOpen(false);
+    setCustomPromptDraft(customSystemPrompt ?? '');
+  }, [customSystemPrompt]);
+
+  const handleCustomPromptChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setCustomPromptDraft(event.target.value);
+  }, []);
+
+  const handleSaveCustomPrompt = useCallback(async () => {
+    if (isCustomPromptTooLong) {
+      toast.error(`Custom instructions must be ${CUSTOM_SYSTEM_PROMPT_MAX_LENGTH} characters or fewer.`);
+      return;
+    }
+    if (!chatId) {
+      toast.error('Chat Id is not available');
+      return;
+    }
+    if (!sessionId) {
+      toast.error('Session is not ready yet.');
+      return;
+    }
+
+    try {
+      setIsSavingCustomPrompt(true);
+      const trimmedPrompt = customPromptDraft.trim();
+      await convex.mutation(api.messages.setCustomSystemPrompt, {
+        id: chatId,
+        sessionId,
+        customSystemPrompt: trimmedPrompt.length > 0 ? trimmedPrompt : null,
+      });
+      customSystemPromptStore.set(trimmedPrompt.length > 0 ? trimmedPrompt : undefined);
+      toast.success(trimmedPrompt.length > 0 ? 'Custom instructions saved' : 'Custom instructions cleared');
+      setIsCustomPromptModalOpen(false);
+      setCustomPromptDraft(trimmedPrompt);
+    } catch (error) {
+      captureException(error);
+      console.error('Failed to update custom system prompt:', error);
+      toast.error('Failed to update custom instructions. Please try again.');
+    } finally {
+      setIsSavingCustomPrompt(false);
+    }
+  }, [chatId, convex, customPromptDraft, isCustomPromptTooLong, sessionId]);
+
   // Set the initial input value
   const [searchParams] = useSearchParams();
   useEffect(() => {
@@ -224,7 +300,7 @@ export const MessageInput = memo(function MessageInput({
     } finally {
       setIsEnhancing(false);
     }
-  }, [input, convex]);
+  }, [input, convex, selectedTeamSlug]);
 
   // Helper to insert template and select '[...]'
   const insertTemplate = useCallback(
@@ -251,136 +327,209 @@ export const MessageInput = memo(function MessageInput({
   );
 
   return (
-    <div className="relative z-20 mx-auto w-full max-w-chat rounded-xl shadow transition-all duration-200">
-      <div className="rounded-xl bg-background-primary/75 backdrop-blur-md">
-        <div className="rounded-t-xl border transition-all has-[textarea:focus]:border-border-selected">
-          <TextareaWithHighlights
-            onKeyDown={handleKeyDown}
-            onChange={handleChange}
-            value={input}
-            chatStarted={chatStarted}
-            minHeight={100}
-            maxHeight={chatStarted ? 400 : 200}
-            placeholder={
-              chatStarted
-                ? numMessages !== undefined && numMessages > 0
-                  ? 'Request changes by sending another message…'
-                  : 'Send a prompt for a new feature…'
-                : 'What app do you want to serve?'
-            }
-            disabled={disabled}
-            highlights={HIGHLIGHTS}
-          />
-        </div>
-        <div
-          className={classNames(
-            'flex items-center gap-2 border rounded-b-xl border-t-0 bg-background-secondary/80 p-1.5 text-sm flex-wrap',
-          )}
-        >
-          {chefAuthState.kind === 'fullyLoggedIn' && (
-            <ModelSelector modelSelection={modelSelection} setModelSelection={setModelSelection} size="sm" />
-          )}
-          {!chatStarted && sessionId && (
-            <TeamSelector
-              description="Your project will be created in this Convex team"
-              selectedTeamSlug={selectedTeamSlug}
-              setSelectedTeamSlug={setSelectedTeamSlug}
-              size="sm"
+    <>
+      <div className="relative z-20 mx-auto w-full max-w-chat rounded-xl shadow transition-all duration-200">
+        <div className="rounded-xl bg-background-primary/75 backdrop-blur-md">
+          <div className="rounded-t-xl border transition-all has-[textarea:focus]:border-border-selected">
+            <TextareaWithHighlights
+              onKeyDown={handleKeyDown}
+              onChange={handleChange}
+              value={input}
+              chatStarted={chatStarted}
+              minHeight={100}
+              maxHeight={chatStarted ? 400 : 200}
+              placeholder={
+                chatStarted
+                  ? numMessages !== undefined && numMessages > 0
+                    ? 'Request changes by sending another message…'
+                    : 'Send a prompt for a new feature…'
+                  : 'What app do you want to serve?'
+              }
+              disabled={disabled}
+              highlights={HIGHLIGHTS}
             />
-          )}
-          {chatStarted && <ConvexConnection />}
-          {input.length > 3 && input.length <= PROMPT_LENGTH_WARNING_THRESHOLD && <NewLineShortcut />}
-          {input.length > PROMPT_LENGTH_WARNING_THRESHOLD && <CharacterWarning />}
-          <div className="ml-auto flex items-center gap-1">
-            {chefAuthState.kind === 'unauthenticated' && <SignInButton />}
-            {chefAuthState.kind === 'fullyLoggedIn' && (
-              <MenuComponent
-                buttonProps={{
-                  variant: 'neutral',
-                  tip: 'Use a recipe',
-                  inline: true,
-                  icon: (
-                    <div className="text-lg">
-                      <SquaresPlusIcon className="size-4" />
-                    </div>
-                  ),
-                }}
-                placement="top-start"
-              >
-                <div className="ml-3 flex items-center gap-1">
-                  <h2 className="text-sm font-bold">Use a recipe</h2>
-                  <Tooltip tip="Recipes are Chef prompts that add powerful full-stack features to your app." side="top">
-                    <span className="cursor-help text-content-tertiary">
-                      <InformationCircleIcon className="size-4" />
-                    </span>
-                  </Tooltip>
-                </div>
-                <MenuItemComponent action={() => insertTemplate('Make a collaborative text editor that ...')}>
-                  <div className="flex w-full items-center gap-2">
-                    <PencilSquareIcon className="size-4 text-content-secondary" />
-                    Make a collaborative text editor
-                  </div>
-                </MenuItemComponent>
-                <MenuItemComponent action={() => insertTemplate('Add AI chat to ...')}>
-                  <div className="flex w-full items-center gap-2">
-                    <ChatBubbleLeftIcon className="size-4 text-content-secondary" />
-                    Add AI chat
-                  </div>
-                </MenuItemComponent>
-                <MenuItemComponent action={() => insertTemplate('Add file upload to ...')}>
-                  <div className="flex w-full items-center gap-2">
-                    <DocumentArrowUpIcon className="size-4 text-content-secondary" />
-                    Add file upload
-                  </div>
-                </MenuItemComponent>
-                <MenuItemComponent action={() => insertTemplate('Add full text search to ...')}>
-                  <div className="flex w-full items-center gap-2">
-                    <MagnifyingGlassIcon className="size-4 text-content-secondary" />
-                    Add full text search
-                  </div>
-                </MenuItemComponent>
-              </MenuComponent>
+          </div>
+          <div
+            className={classNames(
+              'flex items-center gap-2 border rounded-b-xl border-t-0 bg-background-secondary/80 p-1.5 text-sm flex-wrap',
             )}
+          >
             {chefAuthState.kind === 'fullyLoggedIn' && (
-              <EnhancePromptButton
-                isEnhancing={isEnhancing}
-                disabled={!selectedTeamSlug || disabled || input.length === 0}
-                onClick={enhancePrompt}
+              <ModelSelector modelSelection={modelSelection} setModelSelection={setModelSelection} size="sm" />
+            )}
+            {!chatStarted && sessionId && (
+              <TeamSelector
+                description="Your project will be created in this Convex team"
+                selectedTeamSlug={selectedTeamSlug}
+                setSelectedTeamSlug={setSelectedTeamSlug}
+                size="sm"
               />
             )}
-            <Button
-              disabled={
-                (!isStreaming && input.length === 0) ||
-                !selectedTeamSlug ||
-                chefAuthState.kind === 'loading' ||
-                sendMessageInProgress ||
-                disabled
-              }
-              tip={
-                chefAuthState.kind === 'unauthenticated'
-                  ? 'Please sign in to continue'
-                  : !selectedTeamSlug
-                    ? 'Please select a team to continue'
-                    : undefined
-              }
-              onClick={handleClickButton}
-              size="xs"
-              className="ml-2 h-[1.625rem]"
-              aria-label={isStreaming ? 'Stop' : 'Send'}
-              icon={
-                sendMessageInProgress ? (
-                  <Spinner className="text-white" />
-                ) : !isStreaming ? (
-                  <ArrowRightIcon />
-                ) : (
-                  <StopIcon />
-                )
-              }
-            />
+            {chatStarted && <ConvexConnection />}
+            {input.length > 3 && input.length <= PROMPT_LENGTH_WARNING_THRESHOLD && <NewLineShortcut />}
+            {input.length > PROMPT_LENGTH_WARNING_THRESHOLD && <CharacterWarning />}
+            <div className="ml-auto flex items-center gap-1">
+              {chefAuthState.kind === 'unauthenticated' && <SignInButton />}
+              {chefAuthState.kind === 'fullyLoggedIn' && (
+                <MenuComponent
+                  buttonProps={{
+                    variant: 'neutral',
+                    tip: 'Use a recipe',
+                    inline: true,
+                    icon: (
+                      <div className="text-lg">
+                        <SquaresPlusIcon className="size-4" />
+                      </div>
+                    ),
+                  }}
+                  placement="top-start"
+                >
+                  <div className="ml-3 flex items-center gap-1">
+                    <h2 className="text-sm font-bold">Use a recipe</h2>
+                    <Tooltip
+                      tip="Recipes are Chef prompts that add powerful full-stack features to your app."
+                      side="top"
+                    >
+                      <span className="cursor-help text-content-tertiary">
+                        <InformationCircleIcon className="size-4" />
+                      </span>
+                    </Tooltip>
+                  </div>
+                  <MenuItemComponent action={() => insertTemplate('Make a collaborative text editor that ...')}>
+                    <div className="flex w-full items-center gap-2">
+                      <PencilSquareIcon className="size-4 text-content-secondary" />
+                      Make a collaborative text editor
+                    </div>
+                  </MenuItemComponent>
+                  <MenuItemComponent action={() => insertTemplate('Add AI chat to ...')}>
+                    <div className="flex w-full items-center gap-2">
+                      <ChatBubbleLeftIcon className="size-4 text-content-secondary" />
+                      Add AI chat
+                    </div>
+                  </MenuItemComponent>
+                  <MenuItemComponent action={() => insertTemplate('Add file upload to ...')}>
+                    <div className="flex w-full items-center gap-2">
+                      <DocumentArrowUpIcon className="size-4 text-content-secondary" />
+                      Add file upload
+                    </div>
+                  </MenuItemComponent>
+                  <MenuItemComponent action={() => insertTemplate('Add full text search to ...')}>
+                    <div className="flex w-full items-center gap-2">
+                      <MagnifyingGlassIcon className="size-4 text-content-secondary" />
+                      Add full text search
+                    </div>
+                  </MenuItemComponent>
+                </MenuComponent>
+              )}
+              {chefAuthState.kind === 'fullyLoggedIn' && (
+                <Button
+                  variant={hasCustomPrompt ? 'primary' : 'neutral'}
+                  inline
+                  onClick={openCustomPromptModal}
+                  disabled={customPromptButtonDisabled}
+                  tip={
+                    !sessionId
+                      ? 'Please sign in to customize Chef'
+                      : !chatId
+                        ? 'Chat is not ready yet'
+                        : "Customize Chef's instructions for this chat"
+                  }
+                >
+                  <div className="flex items-center gap-1">
+                    <AdjustmentsHorizontalIcon className="size-4" />
+                    <span className="text-xs font-medium">Custom instructions</span>
+                    {hasCustomPrompt && <span className="ml-1 size-2 rounded-full bg-emerald-500" aria-hidden />}
+                  </div>
+                </Button>
+              )}
+              {chefAuthState.kind === 'fullyLoggedIn' && (
+                <EnhancePromptButton
+                  isEnhancing={isEnhancing}
+                  disabled={!selectedTeamSlug || disabled || input.length === 0}
+                  onClick={enhancePrompt}
+                />
+              )}
+              <Button
+                disabled={
+                  (!isStreaming && input.length === 0) ||
+                  !selectedTeamSlug ||
+                  chefAuthState.kind === 'loading' ||
+                  sendMessageInProgress ||
+                  disabled
+                }
+                tip={
+                  chefAuthState.kind === 'unauthenticated'
+                    ? 'Please sign in to continue'
+                    : !selectedTeamSlug
+                      ? 'Please select a team to continue'
+                      : undefined
+                }
+                onClick={handleClickButton}
+                size="xs"
+                className="ml-2 h-[1.625rem]"
+                aria-label={isStreaming ? 'Stop' : 'Send'}
+                icon={
+                  sendMessageInProgress ? (
+                    <Spinner className="text-white" />
+                  ) : !isStreaming ? (
+                    <ArrowRightIcon />
+                  ) : (
+                    <StopIcon />
+                  )
+                }
+              />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+      {isCustomPromptModalOpen && (
+        <Modal
+          onClose={closeCustomPromptModal}
+          title="Custom system prompt"
+          description="Chef will include these instructions with every request in this chat."
+          size="md"
+        >
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void handleSaveCustomPrompt();
+            }}
+          >
+            <textarea
+              className="mt-2 min-h-40 w-full resize-y rounded-lg border bg-background-primary p-3 text-sm text-content-primary shadow-sm focus:border-border-selected focus:outline-none"
+              placeholder="Add any extra context or instructions for Chef…"
+              value={customPromptDraft}
+              onChange={handleCustomPromptChange}
+              disabled={isSavingCustomPrompt}
+            />
+            <p className="text-sm text-content-secondary">
+              Tailor Chef&apos;s behavior for this project. Leave the field empty to reset to the default system prompt.
+            </p>
+            <div className="flex items-center justify-between text-xs text-content-secondary">
+              <span>
+                {hasCustomPrompt ? 'Custom instructions are currently enabled.' : 'No custom instructions yet.'}
+              </span>
+              <span className={classNames('font-medium', isCustomPromptTooLong ? 'text-red-500' : undefined)}>
+                {customPromptLength}/{CUSTOM_SYSTEM_PROMPT_MAX_LENGTH}
+              </span>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button variant="neutral" type="button" onClick={closeCustomPromptModal} disabled={isSavingCustomPrompt}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSavingCustomPrompt || isCustomPromptTooLong || customPromptButtonDisabled}
+                loading={isSavingCustomPrompt}
+              >
+                Save instructions
+              </Button>
+            </div>
+          </form>
+        </Modal>
+      )}
+    </>
   );
 });
 
diff --git a/app/lib/.server/chat.ts b/app/lib/.server/chat.ts
index db50b79a5..725f4e618 100644
--- a/app/lib/.server/chat.ts
+++ b/app/lib/.server/chat.ts
@@ -68,12 +68,21 @@ export async function chatAction({ request }: ActionFunctionArgs) {
     recordRawPromptsForDebugging?: boolean;
     collapsedMessages: boolean;
     promptCharacterCounts?: PromptCharacterCounts;
+    customSystemPrompt?: string | null;
     featureFlags: {
       enableResend?: boolean;
     };
   };
-  const { messages, firstUserMessage, chatInitialId, deploymentName, token, teamSlug, recordRawPromptsForDebugging } =
-    body;
+  const {
+    messages,
+    firstUserMessage,
+    chatInitialId,
+    deploymentName,
+    token,
+    teamSlug,
+    recordRawPromptsForDebugging,
+    customSystemPrompt,
+  } = body;
 
   if (getEnv('DISABLE_BEDROCK') === '1' && body.modelProvider === 'Bedrock') {
     body.modelProvider = 'Anthropic';
@@ -186,6 +195,7 @@ export async function chatAction({ request }: ActionFunctionArgs) {
       featureFlags: {
         enableResend: body.featureFlags.enableResend ?? false,
       },
+      customSystemPrompt: typeof customSystemPrompt === 'string' ? customSystemPrompt : undefined,
     });
 
     return new Response(dataStream, {
diff --git a/app/lib/.server/llm/convex-agent.ts b/app/lib/.server/llm/convex-agent.ts
index 06bba9c10..1834de5b6 100644
--- a/app/lib/.server/llm/convex-agent.ts
+++ b/app/lib/.server/llm/convex-agent.ts
@@ -58,6 +58,7 @@ export async function convexAgent(args: {
   featureFlags: {
     enableResend: boolean;
   };
+  customSystemPrompt?: string;
 }) {
   const {
     chatInitialId,
@@ -73,6 +74,7 @@ export async function convexAgent(args: {
     collapsedMessages,
     promptCharacterCounts,
     featureFlags,
+    customSystemPrompt,
   } = args;
   console.debug('Starting agent with model provider', modelProvider);
   if (userApiKey) {
@@ -111,9 +113,18 @@ export async function convexAgent(args: {
       role: 'system' as const,
       content: generalSystemPrompt(opts),
     },
-    ...cleanupAssistantMessages(messages),
   ];
 
+  const trimmedCustomPrompt = customSystemPrompt?.trim();
+  if (trimmedCustomPrompt) {
+    messagesForDataStream.push({
+      role: 'system' as const,
+      content: trimmedCustomPrompt,
+    });
+  }
+
+  messagesForDataStream.push(...cleanupAssistantMessages(messages));
+
   if (modelProvider === 'Bedrock') {
     messagesForDataStream[messagesForDataStream.length - 1].providerOptions = {
       bedrock: {
diff --git a/app/lib/stores/customSystemPrompt.ts b/app/lib/stores/customSystemPrompt.ts
new file mode 100644
index 000000000..6c1228a48
--- /dev/null
+++ b/app/lib/stores/customSystemPrompt.ts
@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const customSystemPromptStore = atom<string | undefined>(undefined);
diff --git a/app/lib/stores/startup/useInitialMessages.ts b/app/lib/stores/startup/useInitialMessages.ts
index 1c0e5a249..8ced33004 100644
--- a/app/lib/stores/startup/useInitialMessages.ts
+++ b/app/lib/stores/startup/useInitialMessages.ts
@@ -12,6 +12,7 @@ import * as lz4 from 'lz4-wasm';
 import { getConvexSiteUrl } from '~/lib/convexSiteUrl';
 import { subchatIndexStore } from '~/lib/stores/subchats';
 import { useStore } from '@nanostores/react';
+import { customSystemPromptStore } from '~/lib/stores/customSystemPrompt';
 
 export interface InitialMessages {
   loadedChatId: string;
@@ -43,6 +44,7 @@ export function useInitialMessages(chatId: string | undefined):
         });
         if (chatInfo === null) {
           setInitialMessages(null);
+          customSystemPromptStore.set(undefined);
           return;
         }
         if (subchatIndex === undefined) {
@@ -75,6 +77,7 @@ export function useInitialMessages(chatId: string | undefined):
             deserialized: [],
             loadedSubchatIndex: subchatIndexToFetch,
           });
+          customSystemPromptStore.set(chatInfo.customSystemPrompt ?? undefined);
           return;
         }
         const content = await initialMessagesResponse.arrayBuffer();
@@ -118,6 +121,7 @@ export function useInitialMessages(chatId: string | undefined):
           loadedSubchatIndex: subchatIndexToFetch,
         });
         description.set(chatInfo.description);
+        customSystemPromptStore.set(chatInfo.customSystemPrompt ?? undefined);
       } catch (error) {
         toast.error('Failed to load chat messages from Convex. Try reloading the page.');
         console.error('Error fetching initial messages:', error);
diff --git a/convex/messages.test.ts b/convex/messages.test.ts
index e1f0151c1..875c9971f 100644
--- a/convex/messages.test.ts
+++ b/convex/messages.test.ts
@@ -157,6 +157,28 @@ describe("messages", () => {
     await expect(
       t.mutation(api.messages.setDescription, { sessionId, id: chatId, description: "test" }),
     ).rejects.toThrow();
+    await expect(
+      t.mutation(api.messages.setCustomSystemPrompt, { sessionId, id: chatId, customSystemPrompt: "Prompt" }),
+    ).rejects.toThrow();
+  });
+
+  test("set custom system prompt", async () => {
+    const { sessionId, chatId } = await createChat(t);
+
+    const prompt = "Use concise language.";
+    await t.mutation(api.messages.setCustomSystemPrompt, { sessionId, id: chatId, customSystemPrompt: prompt });
+
+    const chatWithPrompt = await t.query(api.messages.get, { sessionId, id: chatId });
+    expect(chatWithPrompt?.customSystemPrompt).toBe(prompt);
+
+    await t.mutation(api.messages.setCustomSystemPrompt, { sessionId, id: chatId, customSystemPrompt: null });
+    const chatWithoutPrompt = await t.query(api.messages.get, { sessionId, id: chatId });
+    expect(chatWithoutPrompt?.customSystemPrompt).toBeUndefined();
+
+    const tooLongPrompt = "a".repeat(2001);
+    await expect(
+      t.mutation(api.messages.setCustomSystemPrompt, { sessionId, id: chatId, customSystemPrompt: tooLongPrompt }),
+    ).rejects.toThrow("Custom system prompt must be at most 2000 characters long");
   });
 
   test("store chat without snapshot", async () => {
diff --git a/convex/messages.ts b/convex/messages.ts
index bcca6a146..4e8b4b520 100644
--- a/convex/messages.ts
+++ b/convex/messages.ts
@@ -23,6 +23,8 @@ export type SerializedMessage = Omit<AIMessage, "createdAt" | "content"> & {
 
 export const CHAT_NOT_FOUND_ERROR = new ConvexError({ code: "NotFound", message: "Chat not found" });
 
+const MAX_CUSTOM_SYSTEM_PROMPT_LENGTH = 2000;
+
 export const initializeChat = mutation({
   args: {
     sessionId: v.id("sessions"),
@@ -102,6 +104,36 @@ export const setDescription = mutation({
   },
 });
 
+export const setCustomSystemPrompt = mutation({
+  args: {
+    sessionId: v.id("sessions"),
+    id: v.string(),
+    customSystemPrompt: v.union(v.string(), v.null()),
+  },
+  returns: v.null(),
+  handler: async (ctx, args) => {
+    const { id, customSystemPrompt } = args;
+    const existing = await getChatByIdOrUrlIdEnsuringAccess(ctx, { id, sessionId: args.sessionId });
+
+    if (!existing) {
+      throw CHAT_NOT_FOUND_ERROR;
+    }
+
+    const normalizedPrompt = customSystemPrompt === null ? "" : customSystemPrompt.trim();
+
+    if (normalizedPrompt.length > MAX_CUSTOM_SYSTEM_PROMPT_LENGTH) {
+      throw new ConvexError({
+        code: "InvalidArgument",
+        message: `Custom system prompt must be at most ${MAX_CUSTOM_SYSTEM_PROMPT_LENGTH} characters long`,
+      });
+    }
+
+    await ctx.db.patch(existing._id, {
+      customSystemPrompt: normalizedPrompt.length > 0 ? normalizedPrompt : undefined,
+    });
+  },
+});
+
 export async function getChat(ctx: QueryCtx, id: string, sessionId: Id<"sessions">) {
   const chat = await getChatByIdOrUrlIdEnsuringAccess(ctx, { id, sessionId });
 
@@ -114,6 +146,7 @@ export async function getChat(ctx: QueryCtx, id: string, sessionId: Id<"sessions
     initialId: chat.initialId,
     urlId: chat.urlId,
     description: chat.description,
+    customSystemPrompt: chat.customSystemPrompt,
     timestamp: chat.timestamp,
     snapshotId: chat.snapshotId,
     subchatIndex: chat.lastSubchatIndex,
@@ -131,6 +164,7 @@ export const get = query({
       initialId: v.string(),
       urlId: v.optional(v.string()),
       description: v.optional(v.string()),
+      customSystemPrompt: v.optional(v.string()),
       timestamp: v.string(),
       snapshotId: v.optional(v.id("_storage")),
       subchatIndex: v.optional(v.number()),
diff --git a/convex/schema.ts b/convex/schema.ts
index a7e593fb5..1c1493345 100644
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -76,6 +76,7 @@ export default defineSchema({
     initialId: v.string(),
     urlId: v.optional(v.string()),
     description: v.optional(v.string()),
+    customSystemPrompt: v.optional(v.string()),
     timestamp: v.string(),
     metadata: v.optional(v.any()), // TODO migration to remove this column
     snapshotId: v.optional(v.id("_storage")),