diff --git a/package.json b/package.json
index 2188acd7..9b0f3a6d 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "lucide-react": "^0.441.0",
     "next": "14.2.7",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-json-view": "^1.21.3",
diff --git a/src/agent/open-canvas/index.ts b/src/agent/open-canvas/index.ts
index 2dd9d194..3947ad68 100644
--- a/src/agent/open-canvas/index.ts
+++ b/src/agent/open-canvas/index.ts
@@ -1,11 +1,11 @@
 import { END, Send, START, StateGraph } from "@langchain/langgraph";
 import { DEFAULT_INPUTS } from "../../constants";
 import { customAction } from "./nodes/customAction";
-import { generateArtifact } from "./nodes/generateArtifact";
+import { generateArtifact } from "./nodes/generate-artifact";
 import { generateFollowup } from "./nodes/generateFollowup";
 import { generatePath } from "./nodes/generatePath";
 import { reflectNode } from "./nodes/reflect";
-import { rewriteArtifact } from "./nodes/rewriteArtifact";
+import { rewriteArtifact } from "./nodes/rewrite-artifact";
 import { rewriteArtifactTheme } from "./nodes/rewriteArtifactTheme";
 import { updateArtifact } from "./nodes/updateArtifact";
 import { replyToGeneralInput } from "./nodes/replyToGeneralInput";
diff --git a/src/agent/open-canvas/nodes/generate-artifact/index.ts b/src/agent/open-canvas/nodes/generate-artifact/index.ts
new file mode 100644
index 00000000..1386c6de
--- /dev/null
+++ b/src/agent/open-canvas/nodes/generate-artifact/index.ts
@@ -0,0 +1,61 @@
+import {
+  OpenCanvasGraphAnnotation,
+  OpenCanvasGraphReturnType,
+} from "../../state";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import {
+  getFormattedReflections,
+  getModelFromConfig,
+  getModelNameAndProviderFromConfig,
+  optionallyGetSystemPromptFromConfig,
+} from "@/agent/utils";
+import { ARTIFACT_TOOL_SCHEMA } from "./schemas";
+import { ArtifactV3 } from "@/types";
+import { createArtifactContent, formatNewArtifactPrompt } from "./utils";
+
+/**
+ * Generate a new artifact based on the user's query.
+ */
+export const generateArtifact = async (
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<OpenCanvasGraphReturnType> => {
+  const { modelName } = getModelNameAndProviderFromConfig(config);
+  const smallModel = await getModelFromConfig(config, 0.5);
+
+  const modelWithArtifactTool = smallModel.bindTools(
+    [
+      {
+        name: "generate_artifact",
+        schema: ARTIFACT_TOOL_SCHEMA,
+      },
+    ],
+    { tool_choice: "generate_artifact" }
+  );
+
+  const memoriesAsString = await getFormattedReflections(config);
+  const formattedNewArtifactPrompt = formatNewArtifactPrompt(
+    memoriesAsString,
+    modelName
+  );
+
+  const userSystemPrompt = optionallyGetSystemPromptFromConfig(config);
+  const fullSystemPrompt = userSystemPrompt
+    ? `${userSystemPrompt}\n${formattedNewArtifactPrompt}`
+    : formattedNewArtifactPrompt;
+
+  const response = await modelWithArtifactTool.invoke(
+    [{ role: "system", content: fullSystemPrompt }, ...state.messages],
+    { runName: "generate_artifact" }
+  );
+
+  const newArtifactContent = createArtifactContent(response.tool_calls?.[0]);
+  const newArtifact: ArtifactV3 = {
+    currentIndex: 1,
+    contents: [newArtifactContent],
+  };
+
+  return {
+    artifact: newArtifact,
+  };
+};
diff --git a/src/agent/open-canvas/nodes/generate-artifact/schemas.ts b/src/agent/open-canvas/nodes/generate-artifact/schemas.ts
new file mode 100644
index 00000000..2e2d4a4f
--- /dev/null
+++ b/src/agent/open-canvas/nodes/generate-artifact/schemas.ts
@@ -0,0 +1,33 @@
+import { PROGRAMMING_LANGUAGES } from "@/types";
+import { z } from "zod";
+
+export const ARTIFACT_TOOL_SCHEMA = z.object({
+  type: z
+    .enum(["code", "text"])
+    .describe("The content type of the artifact generated."),
+  language: z
+    .enum(
+      PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
+        string,
+        ...string[],
+      ]
+    )
+    .optional()
+    .describe(
+      "The language/programming language of the artifact generated.\n" +
+        "If generating code, it should be one of the options, or 'other'.\n" +
+        "If not generating code, the language should ALWAYS be 'other'."
+    ),
+  isValidReact: z
+    .boolean()
+    .optional()
+    .describe(
+      "Whether or not the generated code is valid React code. Only populate this field if generating code."
+    ),
+  artifact: z.string().describe("The content of the artifact to generate."),
+  title: z
+    .string()
+    .describe(
+      "A short title to give to the artifact. Should be less than 5 words."
+    ),
+});
diff --git a/src/agent/open-canvas/nodes/generate-artifact/utils.ts b/src/agent/open-canvas/nodes/generate-artifact/utils.ts
new file mode 100644
index 00000000..4e6aca8e
--- /dev/null
+++ b/src/agent/open-canvas/nodes/generate-artifact/utils.ts
@@ -0,0 +1,39 @@
+import { NEW_ARTIFACT_PROMPT } from "../../prompts";
+import { ArtifactCodeV3, ArtifactMarkdownV3 } from "@/types";
+import { ToolCall } from "@langchain/core/messages/tool";
+
+export const formatNewArtifactPrompt = (
+  memoriesAsString: string,
+  modelName: string
+): string => {
+  return NEW_ARTIFACT_PROMPT.replace("{reflections}", memoriesAsString).replace(
+    "{disableChainOfThought}",
+    modelName.includes("claude")
+      ? "\n\nIMPORTANT: Do NOT preform chain of thought beforehand. Instead, go STRAIGHT to generating the tool response. This is VERY important."
+      : ""
+  );
+};
+
+export const createArtifactContent = (
+  toolCall: ToolCall | undefined
+): ArtifactCodeV3 | ArtifactMarkdownV3 => {
+  const toolArgs = toolCall?.args;
+  const artifactType = toolArgs?.type;
+
+  if (artifactType === "code") {
+    return {
+      index: 1,
+      type: "code",
+      title: toolArgs?.title,
+      code: toolArgs?.artifact,
+      language: toolArgs?.language,
+    };
+  }
+
+  return {
+    index: 1,
+    type: "text",
+    title: toolArgs?.title,
+    fullMarkdown: toolArgs?.artifact,
+  };
+};
diff --git a/src/agent/open-canvas/nodes/generateArtifact.ts b/src/agent/open-canvas/nodes/generateArtifact.ts
deleted file mode 100644
index bd61bd46..00000000
--- a/src/agent/open-canvas/nodes/generateArtifact.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-import { NEW_ARTIFACT_PROMPT } from "../prompts";
-import {
-  ArtifactCodeV3,
-  ArtifactMarkdownV3,
-  ArtifactV3,
-  PROGRAMMING_LANGUAGES,
-  Reflections,
-} from "../../../types";
-import { z } from "zod";
-import {
-  ensureStoreInConfig,
-  formatReflections,
-  getModelNameAndProviderFromConfig,
-} from "../../utils";
-import { LangGraphRunnableConfig } from "@langchain/langgraph";
-import { initChatModel } from "langchain/chat_models/universal";
-
-/**
- * Generate a new artifact based on the user's query.
- */
-export const generateArtifact = async (
-  state: typeof OpenCanvasGraphAnnotation.State,
-  config: LangGraphRunnableConfig
-): Promise<OpenCanvasGraphReturnType> => {
-  const { modelName, modelProvider } =
-    getModelNameAndProviderFromConfig(config);
-  const smallModel = await initChatModel(modelName, {
-    temperature: 0.5,
-    modelProvider,
-  });
-
-  const store = ensureStoreInConfig(config);
-  const assistantId = config.configurable?.assistant_id;
-  if (!assistantId) {
-    throw new Error("`assistant_id` not found in configurable");
-  }
-  const memoryNamespace = ["memories", assistantId];
-  const memoryKey = "reflection";
-  const memories = await store.get(memoryNamespace, memoryKey);
-  const memoriesAsString = memories?.value
-    ? formatReflections(memories.value as Reflections)
-    : "No reflections found.";
-
-  const modelWithArtifactTool = smallModel.bindTools(
-    [
-      {
-        name: "generate_artifact",
-        schema: z.object({
-          type: z
-            .enum(["code", "text"])
-            .describe("The content type of the artifact generated."),
-          language: z
-            .enum(
-              PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
-                string,
-                ...string[],
-              ]
-            )
-            .optional()
-            .describe(
-              "The language/programming language of the artifact generated.\n" +
-                "If generating code, it should be one of the options, or 'other'.\n" +
-                "If not generating code, the language should ALWAYS be 'other'."
-            ),
-          isValidReact: z
-            .boolean()
-            .optional()
-            .describe(
-              "Whether or not the generated code is valid React code. Only populate this field if generating code."
-            ),
-          artifact: z
-            .string()
-            .describe("The content of the artifact to generate."),
-          title: z
-            .string()
-            .describe(
-              "A short title to give to the artifact. Should be less than 5 words."
-            ),
-        }),
-      },
-    ],
-    { tool_choice: "generate_artifact" }
-  );
-
-  const formattedNewArtifactPrompt = NEW_ARTIFACT_PROMPT.replace(
-    "{reflections}",
-    memoriesAsString
-  ).replace(
-    "{disableChainOfThought}",
-    modelName.includes("claude")
-      ? "\n\nIMPORTANT: Do NOT preform chain of thought beforehand. Instead, go STRAIGHT to generating the tool response. This is VERY important."
-      : ""
-  );
-
-  const response = await modelWithArtifactTool.invoke(
-    [
-      { role: "system", content: formattedNewArtifactPrompt },
-      ...state.messages,
-    ],
-    { runName: "generate_artifact" }
-  );
-
-  const newArtifactType = response.tool_calls?.[0]?.args.type;
-  let newArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3;
-  if (newArtifactType === "code") {
-    newArtifactContent = {
-      index: 1,
-      type: "code",
-      title: response.tool_calls?.[0]?.args.title,
-      code: response.tool_calls?.[0]?.args.artifact,
-      language: response.tool_calls?.[0]?.args.language,
-    };
-  } else {
-    newArtifactContent = {
-      index: 1,
-      type: "text",
-      title: response.tool_calls?.[0]?.args.title,
-      fullMarkdown: response.tool_calls?.[0]?.args.artifact,
-    };
-  }
-
-  const newArtifact: ArtifactV3 = {
-    currentIndex: 1,
-    contents: [newArtifactContent],
-  };
-
-  return {
-    artifact: newArtifact,
-  };
-};
diff --git a/src/agent/open-canvas/nodes/generatePath.ts b/src/agent/open-canvas/nodes/generatePath.ts
index 03a0350b..96b2108d 100644
--- a/src/agent/open-canvas/nodes/generatePath.ts
+++ b/src/agent/open-canvas/nodes/generatePath.ts
@@ -22,6 +22,7 @@ export const generatePath = async (
   state: typeof OpenCanvasGraphAnnotation.State,
   config: LangGraphRunnableConfig
 ) => {
+  console.log("config.configurable!!", config.configurable);
   if (state.highlightedCode) {
     return {
       next: "updateArtifact",
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/index.ts b/src/agent/open-canvas/nodes/rewrite-artifact/index.ts
new file mode 100644
index 00000000..7615366d
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/index.ts
@@ -0,0 +1,68 @@
+import {
+  OpenCanvasGraphAnnotation,
+  OpenCanvasGraphReturnType,
+} from "../../state";
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { optionallyUpdateArtifactMeta } from "./update-meta";
+import { buildPrompt, createNewArtifactContent, validateState } from "./utils";
+import {
+  getFormattedReflections,
+  getModelFromConfig,
+  optionallyGetSystemPromptFromConfig,
+} from "@/agent/utils";
+import { isArtifactMarkdownContent } from "@/lib/artifact_content_types";
+
+export const rewriteArtifact = async (
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<OpenCanvasGraphReturnType> => {
+  const smallModelWithConfig = (await getModelFromConfig(config)).withConfig({
+    runName: "rewrite_artifact_model_call",
+  });
+  const memoriesAsString = await getFormattedReflections(config);
+  const { currentArtifactContent, recentHumanMessage } = validateState(state);
+
+  const artifactMetaToolCall = await optionallyUpdateArtifactMeta(
+    state,
+    config
+  );
+  const artifactType = artifactMetaToolCall?.args?.type;
+  const isNewType = artifactType !== currentArtifactContent.type;
+
+  const artifactContent = isArtifactMarkdownContent(currentArtifactContent)
+    ? currentArtifactContent.fullMarkdown
+    : currentArtifactContent.code;
+
+  const formattedPrompt = buildPrompt({
+    artifactContent,
+    memoriesAsString,
+    isNewType,
+    artifactMetaToolCall,
+  });
+
+  const userSystemPrompt = optionallyGetSystemPromptFromConfig(config);
+  const fullSystemPrompt = userSystemPrompt
+    ? `${userSystemPrompt}\n${formattedPrompt}`
+    : formattedPrompt;
+
+  const newArtifactResponse = await smallModelWithConfig.invoke([
+    { role: "system", content: fullSystemPrompt },
+    recentHumanMessage,
+  ]);
+
+  const newArtifactContent = createNewArtifactContent({
+    artifactType,
+    state,
+    currentArtifactContent,
+    artifactMetaToolCall,
+    newContent: newArtifactResponse.content as string,
+  });
+
+  return {
+    artifact: {
+      ...state.artifact,
+      currentIndex: state.artifact.contents.length + 1,
+      contents: [...state.artifact.contents, newArtifactContent],
+    },
+  };
+};
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts b/src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts
new file mode 100644
index 00000000..080e704a
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/schemas.ts
@@ -0,0 +1,22 @@
+import { PROGRAMMING_LANGUAGES } from "@/types";
+import { z } from "zod";
+
+export const OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA = z.object({
+  type: z.enum(["text", "code"]).describe("The type of the artifact content."),
+  title: z
+    .string()
+    .optional()
+    .describe(
+      "The new title to give the artifact. ONLY update this if the user is making a request which changes the subject/topic of the artifact."
+    ),
+  language: z
+    .enum(
+      PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
+        string,
+        ...string[],
+      ]
+    )
+    .describe(
+      "The language of the code artifact. This should be populated with the programming language if the user is requesting code to be written, or 'other', in all other cases."
+    ),
+});
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts b/src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts
new file mode 100644
index 00000000..e0e2b11c
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/update-meta.ts
@@ -0,0 +1,55 @@
+import { LangGraphRunnableConfig } from "@langchain/langgraph";
+import { OpenCanvasGraphAnnotation } from "../../state";
+import { formatArtifactContent, getModelFromConfig } from "@/agent/utils";
+import { getArtifactContent } from "@/contexts/utils";
+import { GET_TITLE_TYPE_REWRITE_ARTIFACT } from "../../prompts";
+import { OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA } from "./schemas";
+import { ToolCall } from "@langchain/core/messages/tool";
+import { getFormattedReflections } from "../../../utils";
+
+export async function optionallyUpdateArtifactMeta(
+  state: typeof OpenCanvasGraphAnnotation.State,
+  config: LangGraphRunnableConfig
+): Promise<ToolCall | undefined> {
+  const toolCallingModel = (await getModelFromConfig(config))
+    .bindTools(
+      [
+        {
+          name: "optionallyUpdateArtifactMeta",
+          schema: OPTIONALLY_UPDATE_ARTIFACT_META_SCHEMA,
+          description: "Update the artifact meta information, if necessary.",
+        },
+      ],
+      { tool_choice: "optionallyUpdateArtifactMeta" }
+    )
+    .withConfig({ runName: "optionally_update_artifact_meta" });
+
+  const memoriesAsString = await getFormattedReflections(config);
+
+  const currentArtifactContent = state.artifact
+    ? getArtifactContent(state.artifact)
+    : undefined;
+  if (!currentArtifactContent) {
+    throw new Error("No artifact found");
+  }
+
+  const optionallyUpdateArtifactMetaPrompt =
+    GET_TITLE_TYPE_REWRITE_ARTIFACT.replace(
+      "{artifact}",
+      formatArtifactContent(currentArtifactContent, true)
+    ).replace("{reflections}", memoriesAsString);
+
+  const recentHumanMessage = state.messages.findLast(
+    (message) => message.getType() === "human"
+  );
+  if (!recentHumanMessage) {
+    throw new Error("No recent human message found");
+  }
+
+  const optionallyUpdateArtifactResponse = await toolCallingModel.invoke([
+    { role: "system", content: optionallyUpdateArtifactMetaPrompt },
+    recentHumanMessage,
+  ]);
+
+  return optionallyUpdateArtifactResponse.tool_calls?.[0];
+}
diff --git a/src/agent/open-canvas/nodes/rewrite-artifact/utils.ts b/src/agent/open-canvas/nodes/rewrite-artifact/utils.ts
new file mode 100644
index 00000000..3dbac450
--- /dev/null
+++ b/src/agent/open-canvas/nodes/rewrite-artifact/utils.ts
@@ -0,0 +1,110 @@
+import { getArtifactContent } from "@/contexts/utils";
+import { isArtifactCodeContent } from "@/lib/artifact_content_types";
+import { ArtifactCodeV3, ArtifactMarkdownV3 } from "@/types";
+import {
+  OPTIONALLY_UPDATE_META_PROMPT,
+  UPDATE_ENTIRE_ARTIFACT_PROMPT,
+} from "../../prompts";
+import { OpenCanvasGraphAnnotation } from "../../state";
+import { ToolCall } from "@langchain/core/messages/tool";
+
+export const validateState = (
+  state: typeof OpenCanvasGraphAnnotation.State
+) => {
+  const currentArtifactContent = state.artifact
+    ? getArtifactContent(state.artifact)
+    : undefined;
+  if (!currentArtifactContent) {
+    throw new Error("No artifact found");
+  }
+
+  const recentHumanMessage = state.messages.findLast(
+    (message) => message.getType() === "human"
+  );
+  if (!recentHumanMessage) {
+    throw new Error("No recent human message found");
+  }
+
+  return { currentArtifactContent, recentHumanMessage };
+};
+
+const buildMetaPrompt = (artifactMetaToolCall: ToolCall | undefined) => {
+  const titleSection =
+    artifactMetaToolCall?.args?.title &&
+    artifactMetaToolCall?.args?.type !== "code"
+      ? `And its title is (do NOT include this in your response):\n${artifactMetaToolCall.args.title}`
+      : "";
+
+  return OPTIONALLY_UPDATE_META_PROMPT.replace(
+    "{artifactType}",
+    artifactMetaToolCall?.args?.type
+  ).replace("{artifactTitle}", titleSection);
+};
+
+interface BuildPromptArgs {
+  artifactContent: string;
+  memoriesAsString: string;
+  isNewType: boolean;
+  artifactMetaToolCall: ToolCall | undefined;
+}
+
+export const buildPrompt = ({
+  artifactContent,
+  memoriesAsString,
+  isNewType,
+  artifactMetaToolCall,
+}: BuildPromptArgs) => {
+  const metaPrompt = isNewType ? buildMetaPrompt(artifactMetaToolCall) : "";
+
+  return UPDATE_ENTIRE_ARTIFACT_PROMPT.replace(
+    "{artifactContent}",
+    artifactContent
+  )
+    .replace("{reflections}", memoriesAsString)
+    .replace("{updateMetaPrompt}", metaPrompt);
+};
+
+interface CreateNewArtifactContentArgs {
+  artifactType: string;
+  state: typeof OpenCanvasGraphAnnotation.State;
+  currentArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3;
+  artifactMetaToolCall: ToolCall | undefined;
+  newContent: string;
+}
+
+export const createNewArtifactContent = ({
+  artifactType,
+  state,
+  currentArtifactContent,
+  artifactMetaToolCall,
+  newContent,
+}: CreateNewArtifactContentArgs): ArtifactCodeV3 | ArtifactMarkdownV3 => {
+  const baseContent = {
+    index: state.artifact.contents.length + 1,
+    title: artifactMetaToolCall?.args?.title || currentArtifactContent.title,
+  };
+
+  if (artifactType === "code") {
+    return {
+      ...baseContent,
+      type: "code",
+      language: getLanguage(artifactMetaToolCall, currentArtifactContent),
+      code: newContent,
+    };
+  }
+
+  return {
+    ...baseContent,
+    type: "text",
+    fullMarkdown: newContent,
+  };
+};
+
+const getLanguage = (
+  artifactMetaToolCall: ToolCall | undefined,
+  currentArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3 // Replace 'any' with proper type
+) =>
+  artifactMetaToolCall?.args?.programmingLanguage ||
+  (isArtifactCodeContent(currentArtifactContent)
+    ? currentArtifactContent.language
+    : "other");
diff --git a/src/agent/open-canvas/nodes/rewriteArtifact.ts b/src/agent/open-canvas/nodes/rewriteArtifact.ts
deleted file mode 100644
index 067a522f..00000000
--- a/src/agent/open-canvas/nodes/rewriteArtifact.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { OpenCanvasGraphAnnotation, OpenCanvasGraphReturnType } from "../state";
-import {
-  GET_TITLE_TYPE_REWRITE_ARTIFACT,
-  OPTIONALLY_UPDATE_META_PROMPT,
-  UPDATE_ENTIRE_ARTIFACT_PROMPT,
-} from "../prompts";
-import {
-  ensureStoreInConfig,
-  formatArtifactContent,
-  formatReflections,
-  getModelNameAndProviderFromConfig,
-} from "../../utils";
-import {
-  ArtifactCodeV3,
-  ArtifactMarkdownV3,
-  ArtifactV3,
-  PROGRAMMING_LANGUAGES,
-  Reflections,
-} from "../../../types";
-import { LangGraphRunnableConfig } from "@langchain/langgraph";
-import { z } from "zod";
-import { getArtifactContent } from "../../../contexts/utils";
-import {
-  isArtifactCodeContent,
-  isArtifactMarkdownContent,
-} from "../../../lib/artifact_content_types";
-import { initChatModel } from "langchain/chat_models/universal";
-
-export const rewriteArtifact = async (
-  state: typeof OpenCanvasGraphAnnotation.State,
-  config: LangGraphRunnableConfig
-): Promise<OpenCanvasGraphReturnType> => {
-  const optionallyUpdateArtifactMetaSchema = z.object({
-    type: z
-      .enum(["text", "code"])
-      .describe("The type of the artifact content."),
-    title: z
-      .string()
-      .optional()
-      .describe(
-        "The new title to give the artifact. ONLY update this if the user is making a request which changes the subject/topic of the artifact."
-      ),
-    language: z
-      .enum(
-        PROGRAMMING_LANGUAGES.map((lang) => lang.language) as [
-          string,
-          ...string[],
-        ]
-      )
-      .describe(
-        "The language of the code artifact. This should be populated with the programming language if the user is requesting code to be written, or 'other', in all other cases."
-      ),
-  });
-  const { modelName, modelProvider } =
-    getModelNameAndProviderFromConfig(config);
-  const toolCallingModel = (
-    await initChatModel(modelName, {
-      temperature: 0,
-      modelProvider,
-    })
-  )
-    .bindTools(
-      [
-        {
-          name: "optionallyUpdateArtifactMeta",
-          schema: optionallyUpdateArtifactMetaSchema,
-          description: "Update the artifact meta information, if necessary.",
-        },
-      ],
-      { tool_choice: "optionallyUpdateArtifactMeta" }
-    )
-    .withConfig({ runName: "optionally_update_artifact_meta" });
-
-  const smallModelWithConfig = (
-    await initChatModel(modelName, {
-      temperature: 0,
-      modelProvider,
-    })
-  ).withConfig({
-    runName: "rewrite_artifact_model_call",
-  });
-
-  const store = ensureStoreInConfig(config);
-  const assistantId = config.configurable?.assistant_id;
-  if (!assistantId) {
-    throw new Error("`assistant_id` not found in configurable");
-  }
-  const memoryNamespace = ["memories", assistantId];
-  const memoryKey = "reflection";
-  const memories = await store.get(memoryNamespace, memoryKey);
-  const memoriesAsString = memories?.value
-    ? formatReflections(memories.value as Reflections)
-    : "No reflections found.";
-
-  const currentArtifactContent = state.artifact
-    ? getArtifactContent(state.artifact)
-    : undefined;
-  if (!currentArtifactContent) {
-    throw new Error("No artifact found");
-  }
-
-  const optionallyUpdateArtifactMetaPrompt =
-    GET_TITLE_TYPE_REWRITE_ARTIFACT.replace(
-      "{artifact}",
-      formatArtifactContent(currentArtifactContent, true)
-    ).replace("{reflections}", memoriesAsString);
-
-  const recentHumanMessage = state.messages.findLast(
-    (message) => message.getType() === "human"
-  );
-  if (!recentHumanMessage) {
-    throw new Error("No recent human message found");
-  }
-
-  const optionallyUpdateArtifactResponse = await toolCallingModel.invoke([
-    { role: "system", content: optionallyUpdateArtifactMetaPrompt },
-    recentHumanMessage,
-  ]);
-  const artifactMetaToolCall = optionallyUpdateArtifactResponse.tool_calls?.[0];
-  const artifactType = artifactMetaToolCall?.args?.type;
-  const isNewType = artifactType !== currentArtifactContent.type;
-
-  const artifactContent = isArtifactMarkdownContent(currentArtifactContent)
-    ? currentArtifactContent.fullMarkdown
-    : currentArtifactContent.code;
-
-  const formattedPrompt = UPDATE_ENTIRE_ARTIFACT_PROMPT.replace(
-    "{artifactContent}",
-    artifactContent
-  )
-    .replace("{reflections}", memoriesAsString)
-    .replace(
-      "{updateMetaPrompt}",
-      isNewType
-        ? OPTIONALLY_UPDATE_META_PROMPT.replace(
-            "{artifactType}",
-            artifactMetaToolCall?.args?.type
-          ).replace(
-            "{artifactTitle}",
-            artifactMetaToolCall?.args?.title &&
-              artifactMetaToolCall?.args?.type !== "code"
-              ? `And its title is (do NOT include this in your response):\n${artifactMetaToolCall?.args?.title}`
-              : ""
-          )
-        : ""
-    );
-
-  const newArtifactResponse = await smallModelWithConfig.invoke([
-    { role: "system", content: formattedPrompt },
-    recentHumanMessage,
-  ]);
-
-  let newArtifactContent: ArtifactCodeV3 | ArtifactMarkdownV3;
-  if (artifactType === "code") {
-    newArtifactContent = {
-      index: state.artifact.contents.length + 1,
-      type: "code",
-      title: artifactMetaToolCall?.args?.title || currentArtifactContent.title,
-      language:
-        artifactMetaToolCall?.args?.programmingLanguage ||
-        (isArtifactCodeContent(currentArtifactContent)
-          ? currentArtifactContent.language
-          : "other"),
-      code: newArtifactResponse.content as string,
-    };
-  } else {
-    newArtifactContent = {
-      index: state.artifact.contents.length + 1,
-      type: "text",
-      title: artifactMetaToolCall?.args?.title || currentArtifactContent.title,
-      fullMarkdown: newArtifactResponse.content as string,
-    };
-  }
-
-  const newArtifact: ArtifactV3 = {
-    ...state.artifact,
-    currentIndex: state.artifact.contents.length + 1,
-    contents: [...state.artifact.contents, newArtifactContent],
-  };
-
-  return {
-    artifact: newArtifact,
-  };
-};
diff --git a/src/agent/utils.ts b/src/agent/utils.ts
index e58c64cc..37b88de4 100644
--- a/src/agent/utils.ts
+++ b/src/agent/utils.ts
@@ -1,6 +1,7 @@
 import { isArtifactCodeContent } from "@/lib/artifact_content_types";
 import { BaseStore, LangGraphRunnableConfig } from "@langchain/langgraph";
 import { ArtifactCodeV3, ArtifactMarkdownV3, Reflections } from "../types";
+import { initChatModel } from "langchain/chat_models/universal";
 
 export const formatReflections = (
   reflections: Reflections,
@@ -74,6 +75,24 @@ export const formatReflections = (
   return styleString + "\n\n" + contentString;
 };
 
+export async function getFormattedReflections(
+  config: LangGraphRunnableConfig
+): Promise<string> {
+  const store = ensureStoreInConfig(config);
+  const assistantId = config.configurable?.assistant_id;
+  if (!assistantId) {
+    throw new Error("`assistant_id` not found in configurable");
+  }
+  const memoryNamespace = ["memories", assistantId];
+  const memoryKey = "reflection";
+  const memories = await store.get(memoryNamespace, memoryKey);
+  const memoriesAsString = memories?.value
+    ? formatReflections(memories.value as Reflections)
+    : "No reflections found.";
+
+  return memoriesAsString;
+}
+
 export const ensureStoreInConfig = (
   config: LangGraphRunnableConfig
 ): BaseStore => {
@@ -146,3 +165,21 @@ export const getModelNameAndProviderFromConfig = (
 
   throw new Error("Unknown model provider");
 };
+
+export function optionallyGetSystemPromptFromConfig(
+  config: LangGraphRunnableConfig
+): string | undefined {
+  return config.configurable?.systemPrompt as string | undefined;
+}
+
+export async function getModelFromConfig(
+  config: LangGraphRunnableConfig,
+  temperature = 0
+) {
+  const { modelName, modelProvider } =
+    getModelNameAndProviderFromConfig(config);
+  return await initChatModel(modelName, {
+    temperature,
+    modelProvider,
+  });
+}
diff --git a/src/components/artifacts/ArtifactRenderer.tsx b/src/components/artifacts/ArtifactRenderer.tsx
index a7ef3304..ee79da2e 100644
--- a/src/components/artifacts/ArtifactRenderer.tsx
+++ b/src/components/artifacts/ArtifactRenderer.tsx
@@ -354,7 +354,7 @@ function ArtifactRendererComponent(props: ArtifactRendererProps) {
           />
         </div>
         <div className="ml-auto mt-[10px] mr-[6px]">
-          <ReflectionsDialog assistantId={selectedAssistant?.assistant_id} />
+          <ReflectionsDialog selectedAssistant={selectedAssistant} />
         </div>
       </div>
       <div
diff --git a/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx b/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx
index c1ed520e..f6210264 100644
--- a/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx
+++ b/src/components/artifacts/actions_toolbar/custom/NewCustomQuickActionDialog.tsx
@@ -20,7 +20,7 @@ import {
   useState,
 } from "react";
 import { FullPrompt } from "./FullPrompt";
-import { InlineContextTooltip } from "./PromptContextTooltip";
+import { InlineContextTooltip } from "@/components/ui/inline-context-tooltip";
 import { useStore } from "@/hooks/useStore";
 import { useToast } from "@/hooks/use-toast";
 import { v4 as uuidv4 } from "uuid";
@@ -28,6 +28,9 @@ import { CustomQuickAction } from "@/types";
 import { TighterText } from "@/components/ui/header";
 import { User } from "@supabase/supabase-js";
 
+const CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT = `This field contains the custom instructions you set, which will then be used to instruct the LLM on how to re-generate the selected artifact.`;
+const FULL_PROMPT_TOOLTIP_TEXT = `This is the full prompt that will be set to the LLM when you invoke this quick action, including your custom instructions and other default context.`;
+
 interface NewCustomQuickActionDialogProps {
   user: User | undefined;
   isEditing: boolean;
@@ -224,7 +227,11 @@ export function NewCustomQuickActionDialog(
               <div className="w-full h-full flex flex-col gap-1">
                 <TighterText className="text-gray-500 text-sm flex items-center">
                   Custom instructions
-                  <InlineContextTooltip type="custom_instructions" />
+                  <InlineContextTooltip>
+                    <p className="text-sm text-gray-600">
+                      {CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT}
+                    </p>
+                  </InlineContextTooltip>
                 </TighterText>
                 <Textarea
                   disabled={isSubmitLoading}
@@ -241,7 +248,11 @@ export function NewCustomQuickActionDialog(
                 <div className="w-full h-full flex flex-col gap-1">
                   <TighterText className="text-gray-500 text-sm flex items-center">
                     Full prompt
-                    <InlineContextTooltip type="full_prompt" />
+                    <InlineContextTooltip>
+                      <p className="text-sm text-gray-600">
+                        {FULL_PROMPT_TOOLTIP_TEXT}
+                      </p>
+                    </InlineContextTooltip>
                   </TighterText>
                   <FullPrompt
                     customQuickAction={{
diff --git a/src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx b/src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx
deleted file mode 100644
index 35c06ff8..00000000
--- a/src/components/artifacts/actions_toolbar/custom/PromptContextTooltip.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import { CircleHelp } from "lucide-react";
-
-const CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT = `This field contains the custom instructions you set, which will then be used to instruct the LLM on how to re-generate the selected artifact.`;
-const FULL_PROMPT_TOOLTIP_TEXT = `This is the full prompt that will be set to the LLM when you invoke this quick action, including your custom instructions and other default context.`;
-
-export const InlineContextTooltip = ({
-  type,
-}: {
-  type: "custom_instructions" | "full_prompt";
-}) => (
-  <HoverCard>
-    <HoverCardTrigger asChild>
-      <span className="inline-flex items-center ml-1">
-        <CircleHelp className="w-3 h-3 text-gray-600" />
-      </span>
-    </HoverCardTrigger>
-    <HoverCardContent className="max-w-[300px] text-wrap">
-      <p className="text-black font-medium">What&apos;s this?</p>
-      <p className="text-sm text-gray-600">
-        {type === "custom_instructions"
-          ? CUSTOM_INSTRUCTIONS_TOOLTIP_TEXT
-          : FULL_PROMPT_TOOLTIP_TEXT}
-      </p>
-    </HoverCardContent>
-  </HoverCard>
-);
diff --git a/src/components/assistant-select/color-picker.tsx b/src/components/assistant-select/color-picker.tsx
new file mode 100644
index 00000000..a461de12
--- /dev/null
+++ b/src/components/assistant-select/color-picker.tsx
@@ -0,0 +1,77 @@
+import { Dispatch, SetStateAction } from "react";
+import React from "react";
+import { HexColorPicker } from "react-colorful";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface ColorPickerProps {
+  iconColor: string;
+  setIconColor: Dispatch<SetStateAction<string>>;
+  showColorPicker: boolean;
+  setShowColorPicker: Dispatch<SetStateAction<boolean>>;
+  hoverTimer: NodeJS.Timeout | null;
+  setHoverTimer: Dispatch<SetStateAction<NodeJS.Timeout | null>>;
+}
+
+export function ColorPicker(props: ColorPickerProps) {
+  const {
+    iconColor,
+    setIconColor,
+    showColorPicker,
+    setShowColorPicker,
+    hoverTimer,
+    setHoverTimer,
+  } = props;
+
+  const handleMouseEnter = () => {
+    const timer = setTimeout(() => {
+      setShowColorPicker(true);
+    }, 200);
+    setHoverTimer(timer);
+  };
+
+  const handleMouseLeave = () => {
+    if (hoverTimer) {
+      clearTimeout(hoverTimer);
+    }
+    setShowColorPicker(false);
+  };
+
+  return (
+    <div className="relative">
+      <div
+        className="h-9 w-9 rounded-md cursor-pointer hover:ring-2 ring-offset-2 ring-gray-400 transition-all ease-in-out duration-200"
+        style={{ backgroundColor: iconColor }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={() => {
+          if (hoverTimer) {
+            clearTimeout(hoverTimer);
+          }
+        }}
+      />
+      <AnimatePresence>
+        {showColorPicker && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, y: 10 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.9, y: 10 }}
+            transition={{ duration: 0.2 }}
+            className="absolute bottom-full mb-2 z-50"
+            onMouseEnter={() => setShowColorPicker(true)}
+            onMouseLeave={handleMouseLeave}
+          >
+            <HexColorPicker
+              color={iconColor}
+              onChange={(e) => {
+                if (!e.startsWith("#")) {
+                  setIconColor("#" + e);
+                } else {
+                  setIconColor(e);
+                }
+              }}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/src/components/assistant-select/create-edit-assistant-dialog.tsx b/src/components/assistant-select/create-edit-assistant-dialog.tsx
index c739544a..c62e77f3 100644
--- a/src/components/assistant-select/create-edit-assistant-dialog.tsx
+++ b/src/components/assistant-select/create-edit-assistant-dialog.tsx
@@ -16,6 +16,9 @@ import { Input } from "../ui/input";
 import { IconSelect } from "./icon-select";
 import React from "react";
 import { useToast } from "@/hooks/use-toast";
+import { ColorPicker } from "./color-picker";
+import { Textarea } from "../ui/textarea";
+import { InlineContextTooltip } from "../ui/inline-context-tooltip";
 
 interface CreateEditAssistantDialogProps {
   open: boolean;
@@ -36,15 +39,38 @@ interface CreateEditAssistantDialogProps {
   isLoading: boolean;
 }
 
+const GH_DISCUSSION_URL = `https://github.com/langchain-ai/open-canvas/discussions/182`;
+
+const SystemPromptWhatsThis = (): React.ReactNode => (
+  <span className="flex flex-col gap-1 text-sm text-gray-600">
+    <p>
+      Custom system prompts will be passed to the LLM when generating, or
+      re-writing artifacts. They are <i>not</i> used for responding to general
+      queries in the chat, highlight to edit, or quick actions.
+    </p>
+    <p>
+      We&apos;re looking for feedback on how to best handle customizing
+      assistant prompts. To vote, and give feedback please visit{" "}
+      <a href={GH_DISCUSSION_URL} target="_blank">
+        this GitHub discussion
+      </a>
+      .
+    </p>
+  </span>
+);
+
 export function CreateEditAssistantDialog(
   props: CreateEditAssistantDialogProps
 ) {
   const { toast } = useToast();
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
+  const [systemPrompt, setSystemPrompt] = useState("");
   const [iconName, setIconName] = useState<keyof typeof Icons>("User");
   const [hasSelectedIcon, setHasSelectedIcon] = useState(false);
   const [iconColor, setIconColor] = useState("#000000");
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [hoverTimer, setHoverTimer] = useState<NodeJS.Timeout | null>(null);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -61,6 +87,7 @@ export function CreateEditAssistantDialog(
       {
         name,
         description,
+        systemPrompt,
         iconData: {
           iconName,
           iconColor,
@@ -101,7 +128,7 @@ export function CreateEditAssistantDialog(
         props.setOpen(change);
       }}
     >
-      <DialogContent className="max-w-xl p-8 bg-white rounded-lg shadow-xl min-w-[70vw]">
+      <DialogContent className="max-w-xl max-h-[90vh] p-8 bg-white rounded-lg shadow-xl min-w-[70vw] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
         <DialogHeader>
           <DialogTitle className="text-3xl font-light text-gray-800">
             <TighterText>
@@ -145,6 +172,24 @@ export function CreateEditAssistantDialog(
             onChange={(e) => setDescription(e.target.value)}
           />
 
+          <Label htmlFor="system-prompt">
+            <TighterText className="flex items-center">
+              System Prompt
+              <InlineContextTooltip cardContentClassName="w-[500px] ml-10">
+                <SystemPromptWhatsThis />
+              </InlineContextTooltip>
+            </TighterText>
+          </Label>
+          <Textarea
+            disabled={props.isLoading}
+            required={false}
+            id="system-prompt"
+            placeholder="You are an expert email assistant..."
+            value={systemPrompt}
+            onChange={(e) => setSystemPrompt(e.target.value)}
+            rows={5}
+          />
+
           <div className="flex w-full items-center justify-between gap-4">
             <div className="flex flex-col gap-4 items-start justify-start w-full">
               <Label htmlFor="icon">
@@ -165,9 +210,13 @@ export function CreateEditAssistantDialog(
                 <TighterText>Color</TighterText>
               </Label>
               <div className="flex gap-1 items-center justify-start w-full">
-                <div
-                  className="h-9 w-9 rounded-md"
-                  style={{ backgroundColor: iconColor }}
+                <ColorPicker
+                  iconColor={iconColor}
+                  setIconColor={setIconColor}
+                  showColorPicker={showColorPicker}
+                  setShowColorPicker={setShowColorPicker}
+                  hoverTimer={hoverTimer}
+                  setHoverTimer={setHoverTimer}
                 />
                 <Input
                   disabled={props.isLoading}
diff --git a/src/components/assistant-select/icon-select.tsx b/src/components/assistant-select/icon-select.tsx
index fee687ed..ff5eb05a 100644
--- a/src/components/assistant-select/icon-select.tsx
+++ b/src/components/assistant-select/icon-select.tsx
@@ -19,9 +19,10 @@ import { Button } from "../ui/button";
 type KeyofIcons = keyof typeof Icons;
 
 const prettifyIconLabel = (iconName: string) => {
-  if (iconName.includes("Icon") || iconName.includes("icon")) {
-    iconName = iconName.replace("Icon", "").replace("icon", "");
-  }
+  iconName = iconName
+    .replace("Icon", "")
+    .replace("icon", "")
+    .replace("Lucide", "");
   return startCase(iconName);
 };
 
@@ -82,12 +83,32 @@ export function IconSelect({
   };
 
   // Debounced search handler
-  const debouncedSearch = debounce((value: string) => {
-    setSearchTerm(value);
-  }, 300);
+  const debouncedSearch = useMemo(
+    () =>
+      debounce((value: string) => {
+        setSearchTerm(value);
+      }, 300),
+    [] // Empty dependency array since we don't want to recreate the debounced function
+  );
+
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
 
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
+    <DropdownMenu
+      open={open}
+      onOpenChange={(c) => {
+        if (!c) {
+          setStartIndex(0);
+          setSearchTerm("");
+          debouncedSearch.cancel(); // Cancel any pending debounced calls
+        }
+        setOpen(c);
+      }}
+    >
       <DropdownMenuTrigger className="w-full" asChild>
         {hasSelectedIcon ? (
           <Button
diff --git a/src/components/assistant-select/index.tsx b/src/components/assistant-select/index.tsx
index da7b9021..98d3b051 100644
--- a/src/components/assistant-select/index.tsx
+++ b/src/components/assistant-select/index.tsx
@@ -68,7 +68,6 @@ function AssistantSelectComponent(props: AssistantSelectProps) {
       setSelectedAssistant,
       createCustomAssistant,
       editCustomAssistant,
-      deleteAssistant,
     },
   } = useGraphContext();
 
diff --git a/src/components/chat-interface/model-selector.tsx b/src/components/chat-interface/model-selector/alert-new-model-selector.tsx
similarity index 53%
rename from src/components/chat-interface/model-selector.tsx
rename to src/components/chat-interface/model-selector/alert-new-model-selector.tsx
index c5656948..6bad899f 100644
--- a/src/components/chat-interface/model-selector.tsx
+++ b/src/components/chat-interface/model-selector/alert-new-model-selector.tsx
@@ -3,46 +3,14 @@
 import { motion, AnimatePresence } from "framer-motion";
 import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
 import NextImage from "next/image";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  ALL_MODEL_NAMES,
-  ANTHROPIC_MODELS,
-  OPENAI_MODELS,
-  FIREWORKS_MODELS,
-  GEMINI_MODELS,
-  LS_HAS_SEEN_MODEL_DROPDOWN_ALERT,
-} from "@/constants";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { LS_HAS_SEEN_MODEL_DROPDOWN_ALERT } from "@/constants";
+import { Dispatch, SetStateAction, useEffect } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { ExternalLink, X } from "lucide-react";
-import { TighterText } from "../ui/header";
-import { TooltipIconButton } from "../ui/assistant-ui/tooltip-icon-button";
+import { TighterText } from "@/components/ui/header";
+import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
 
-const allModels = [
-  ...ANTHROPIC_MODELS,
-  ...OPENAI_MODELS,
-  ...FIREWORKS_MODELS,
-  ...GEMINI_MODELS,
-];
-
-const modelNameToLabel = (modelName: ALL_MODEL_NAMES) => {
-  const model = allModels.find((m) => m.name === modelName);
-  return model?.label ?? modelName;
-};
-
-interface ModelSelectorProps {
-  modelName: ALL_MODEL_NAMES;
-  setModelName: Dispatch<SetStateAction<ALL_MODEL_NAMES>>;
-  chatStarted: boolean;
-}
-
-const AlertNewModelSelectorFeature = ({
+export const AlertNewModelSelectorFeature = ({
   chatStarted,
   showAlert,
   setShowAlert,
@@ -143,82 +111,3 @@ const AlertNewModelSelectorFeature = ({
     </AnimatePresence>
   );
 };
-
-export default function ModelSelector(props: ModelSelectorProps) {
-  const { modelName, setModelName } = props;
-  const [showAlert, setShowAlert] = useState(false);
-
-  const handleModelChange = async (newModel: ALL_MODEL_NAMES) => {
-    // Create a new thread with the new model
-    setModelName(newModel);
-    if (showAlert) {
-      // Ensure the model is closed if the user selects a model
-      setShowAlert(false);
-      localStorage.setItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT, "true");
-    }
-  };
-  const allAllowedModels = allModels.filter((model) => {
-    if (
-      model.name.includes("fireworks/") &&
-      process.env.NEXT_PUBLIC_FIREWORKS_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("claude-") &&
-      process.env.NEXT_PUBLIC_ANTHROPIC_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("gpt-") &&
-      process.env.NEXT_PUBLIC_OPENAI_ENABLED === "false"
-    ) {
-      return false;
-    }
-    if (
-      model.name.includes("gemini-") &&
-      process.env.NEXT_PUBLIC_GEMINI_ENABLED === "false"
-    ) {
-      return false;
-    }
-
-    // By default, return true if the environment variable is not set or is set to true
-    return true;
-  });
-
-  return (
-    <div className="relative">
-      <Select value={modelName} onValueChange={handleModelChange}>
-        <SelectTrigger className="min-w-[180px] w-[210px] bg-transparent shadow-none text-sm focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600">
-          <SelectValue>
-            <div className="flex items-center pr-2 truncate">
-              <NextImage
-                alt="Model icon"
-                src={LLMIcon}
-                width={14}
-                height={14}
-                className="mr-2"
-              />
-              <span className="truncate">{modelNameToLabel(modelName)}</span>
-            </div>
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {allAllowedModels.map((model) => (
-            <SelectItem key={model.name} value={model.name}>
-              {model.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <div className="absolute top-full -left-10 pt-2 w-max min-w-full">
-        <AlertNewModelSelectorFeature
-          showAlert={showAlert}
-          setShowAlert={setShowAlert}
-          chatStarted={props.chatStarted}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/chat-interface/model-selector/index.tsx b/src/components/chat-interface/model-selector/index.tsx
new file mode 100644
index 00000000..a7a69159
--- /dev/null
+++ b/src/components/chat-interface/model-selector/index.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import LLMIcon from "@/components/icons/svg/LLMIcon.svg";
+import NextImage from "next/image";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  ALL_MODEL_NAMES,
+  ANTHROPIC_MODELS,
+  OPENAI_MODELS,
+  FIREWORKS_MODELS,
+  GEMINI_MODELS,
+  LS_HAS_SEEN_MODEL_DROPDOWN_ALERT,
+} from "@/constants";
+import { Dispatch, SetStateAction, useState } from "react";
+import { AlertNewModelSelectorFeature } from "./alert-new-model-selector";
+import { IsNewBadge } from "./new-badge";
+
+const allModels = [
+  ...ANTHROPIC_MODELS,
+  ...OPENAI_MODELS,
+  ...FIREWORKS_MODELS,
+  ...GEMINI_MODELS,
+];
+
+const modelNameToLabel = (modelName: ALL_MODEL_NAMES) => {
+  const model = allModels.find((m) => m.name === modelName);
+  return model?.label ?? modelName;
+};
+
+interface ModelSelectorProps {
+  modelName: ALL_MODEL_NAMES;
+  setModelName: Dispatch<SetStateAction<ALL_MODEL_NAMES>>;
+  chatStarted: boolean;
+}
+
+export default function ModelSelector(props: ModelSelectorProps) {
+  const { modelName, setModelName } = props;
+  const [showAlert, setShowAlert] = useState(false);
+
+  const isSelectedModelNew = !!allModels.find(
+    (model) => model.name === modelName && model.isNew
+  );
+
+  const handleModelChange = async (newModel: ALL_MODEL_NAMES) => {
+    // Create a new thread with the new model
+    setModelName(newModel);
+    if (showAlert) {
+      // Ensure the model is closed if the user selects a model
+      setShowAlert(false);
+      localStorage.setItem(LS_HAS_SEEN_MODEL_DROPDOWN_ALERT, "true");
+    }
+  };
+  const allAllowedModels = allModels.filter((model) => {
+    if (
+      model.name.includes("fireworks/") &&
+      process.env.NEXT_PUBLIC_FIREWORKS_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("claude-") &&
+      process.env.NEXT_PUBLIC_ANTHROPIC_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("gpt-") &&
+      process.env.NEXT_PUBLIC_OPENAI_ENABLED === "false"
+    ) {
+      return false;
+    }
+    if (
+      model.name.includes("gemini-") &&
+      process.env.NEXT_PUBLIC_GEMINI_ENABLED === "false"
+    ) {
+      return false;
+    }
+
+    // By default, return true if the environment variable is not set or is set to true
+    return true;
+  });
+
+  return (
+    <div className="relative">
+      <Select value={modelName} onValueChange={handleModelChange}>
+        <SelectTrigger className="min-w-[180px] w-[250px] bg-transparent shadow-none text-sm focus:outline-none cursor-pointer hover:bg-gray-100 rounded transition-colors border-none text-gray-600">
+          <SelectValue>
+            <div className="flex items-center pr-2 truncate">
+              <NextImage
+                alt="Model icon"
+                src={LLMIcon}
+                width={14}
+                height={14}
+                className="mr-2"
+              />
+              <span className="flex flex-row items-center justify-start gap-2">
+                {modelNameToLabel(modelName)}
+                {isSelectedModelNew && <IsNewBadge />}
+              </span>
+            </div>
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {allAllowedModels.map((model) => (
+            <SelectItem key={model.name} value={model.name} className="mr-2">
+              <span className="flex flex-row w-full items-center justify-start gap-2">
+                {model.label}
+                {model.isNew && <IsNewBadge />}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <div className="absolute top-full -left-10 pt-2 w-max min-w-full">
+        <AlertNewModelSelectorFeature
+          showAlert={showAlert}
+          setShowAlert={setShowAlert}
+          chatStarted={props.chatStarted}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/chat-interface/model-selector/new-badge.tsx b/src/components/chat-interface/model-selector/new-badge.tsx
new file mode 100644
index 00000000..85339711
--- /dev/null
+++ b/src/components/chat-interface/model-selector/new-badge.tsx
@@ -0,0 +1,30 @@
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export function IsNewBadge() {
+  return (
+    <div
+      className={cn(
+        "before:absolute relative p-[1px] before:p-[4px] rounded-md before:rounded-md before:shadow-[0_0_4px_rgba(236,72,153,0.2)] w-[58px]",
+        "animate-gradient-xy before:animate-gradient-xy-enhanced",
+        "before:inset-0 before:blur-sm before:-z-10 ",
+        "from-pink-500/50 before:from-pink-500/20",
+        "bg-gradient-to-r before:bg-gradient-to-r  ",
+        "via-purple-500/50 before:via-purple-500/20",
+        "to-pink-500/50 before:to-pink-500/20"
+      )}
+    >
+      <Badge
+        className={cn(
+          "bg-gradient-to-r from-pink-50 via-purple-50 to-pink-50",
+          "animate-gradient-x",
+          "rounded-md transition-colors duration-300 ease-in-out",
+          "text-gray-700 text-xs w-14",
+          "hover:from-pink-100 hover:via-purple-100 hover:to-pink-100"
+        )}
+      >
+        New!
+      </Badge>
+    </div>
+  );
+}
diff --git a/src/components/ui/inline-context-tooltip.tsx b/src/components/ui/inline-context-tooltip.tsx
new file mode 100644
index 00000000..2e3fcc90
--- /dev/null
+++ b/src/components/ui/inline-context-tooltip.tsx
@@ -0,0 +1,31 @@
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { cn } from "@/lib/utils";
+import { CircleHelp } from "lucide-react";
+
+export function InlineContextTooltip({
+  cardContentClassName,
+  children,
+}: {
+  cardContentClassName?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <span className="inline-flex items-center ml-1">
+          <CircleHelp className="w-3 h-3 text-gray-600" />
+        </span>
+      </HoverCardTrigger>
+      <HoverCardContent
+        className={cn(cardContentClassName, "w-[300px] text-wrap")}
+      >
+        <p className="text-black font-medium">What&apos;s this?</p>
+        {children}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
diff --git a/src/constants.ts b/src/constants.ts
index bdcb0c22..c62557f1 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,5 +1,5 @@
 export const LANGGRAPH_API_URL =
-  process.env.LANGGRAPH_API_URL ?? "http://localhost:54172";
+  process.env.LANGGRAPH_API_URL ?? "http://localhost:64129";
 // v2 is tied to the 'open-canvas-prod' deployment.
 export const ASSISTANT_ID_COOKIE = "oc_assistant_id_v2";
 // export const ASSISTANT_ID_COOKIE = "oc_assistant_id";
@@ -27,12 +27,14 @@ export const OPENAI_MODELS = [
   {
     name: "gpt-4o-mini",
     label: "GPT-4o mini",
+    isNew: false,
   },
 ];
 export const ANTHROPIC_MODELS = [
   {
-    name: "claude-3-haiku-20240307",
-    label: "Claude 3 Haiku",
+    name: "claude-3-5-haiku-20241022",
+    label: "Claude 3.5 Haiku",
+    isNew: true,
   },
   // {
   //   name: "claude-3-5-sonnet-20240620",
@@ -43,6 +45,7 @@ export const FIREWORKS_MODELS = [
   {
     name: "accounts/fireworks/models/llama-v3p1-70b-instruct",
     label: "Fireworks Llama 70B",
+    isNew: false,
   },
 ];
 
@@ -50,9 +53,10 @@ export const GEMINI_MODELS = [
   {
     name: "gemini-1.5-flash",
     label: "Gemini 1.5 Flash",
+    isNew: false,
   },
 ];
-export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = "gpt-4o-mini";
+export const DEFAULT_MODEL_NAME: ALL_MODEL_NAMES = "claude-3-5-haiku-20241022";
 export type OPENAI_MODEL_NAMES = (typeof OPENAI_MODELS)[number]["name"];
 export type ANTHROPIC_MODEL_NAMES = (typeof ANTHROPIC_MODELS)[number]["name"];
 export type FIREWORKS_MODEL_NAMES = (typeof FIREWORKS_MODELS)[number]["name"];
diff --git a/src/hooks/useAssistants.tsx b/src/hooks/useAssistants.tsx
index d52e891e..7ee88b02 100644
--- a/src/hooks/useAssistants.tsx
+++ b/src/hooks/useAssistants.tsx
@@ -44,6 +44,10 @@ export interface CreateAssistantFields {
    * The tools the assistant has access to.
    */
   tools?: Array<AssistantTool>;
+  /**
+   * An optional system prompt to prefix all generations with.
+   */
+  systemPrompt?: string;
   is_default?: boolean;
 }
 
@@ -117,7 +121,7 @@ export function useAssistants() {
     setIsCreatingAssistant(true);
     try {
       const client = createClient();
-      const { tools, name, ...metadata } = newAssistant;
+      const { tools, systemPrompt, name, ...metadata } = newAssistant;
       const createdAssistant = await client.assistants.create({
         graphId: "agent",
         name,
@@ -128,6 +132,7 @@ export function useAssistants() {
         config: {
           configurable: {
             tools,
+            systemPrompt,
           },
         },
         ifExists: "do_nothing",
@@ -144,6 +149,7 @@ export function useAssistants() {
         description: "Please try again later.",
       });
       setIsCreatingAssistant(false);
+      console.error("Failed to create an assistant", e);
       return false;
     }
   };
@@ -156,7 +162,7 @@ export function useAssistants() {
     setIsEditingAssistant(true);
     try {
       const client = createClient();
-      const { tools, name, ...metadata } = editedAssistant;
+      const { tools, systemPrompt, name, ...metadata } = editedAssistant;
       const response = await client.assistants.update(assistantId, {
         name,
         graphId: "agent",
@@ -167,6 +173,7 @@ export function useAssistants() {
         config: {
           configurable: {
             tools,
+            systemPrompt,
           },
         },
       });
@@ -206,6 +213,7 @@ export function useAssistants() {
         description: "Your default assistant.",
         name: "Default assistant",
         tools: undefined,
+        systemPrompt: undefined,
       },
       assistantIdCookie,
       userId
@@ -325,6 +333,10 @@ export function useAssistants() {
             (firstAssistant.config?.configurable?.tools as
               | AssistantTool[]
               | undefined) || undefined,
+          systemPrompt:
+            (firstAssistant.config?.configurable?.systemPrompt as
+              | string
+              | undefined) || undefined,
         },
         firstAssistant.assistant_id,
         userId
diff --git a/src/hooks/useThread.tsx b/src/hooks/useThread.tsx
index b9e5e42c..7ab66244 100644
--- a/src/hooks/useThread.tsx
+++ b/src/hooks/useThread.tsx
@@ -1,6 +1,5 @@
 import {
   ALL_MODEL_NAMES,
-  ASSISTANT_ID_COOKIE,
   DEFAULT_MODEL_NAME,
   HAS_EMPTY_THREADS_CLEARED_COOKIE,
   THREAD_ID_COOKIE_NAME,
@@ -22,6 +21,7 @@ export function useThread() {
     userId: string
   ): Promise<Thread | undefined> => {
     const client = createClient();
+    console.log("creating thread!", customModelName);
     try {
       const thread = await client.threads.create({
         metadata: {
@@ -155,7 +155,9 @@ export function useThread() {
     try {
       const client = createClient();
       const thread = await client.threads.get(id);
-      if (thread.metadata && thread.metadata.customModelName) {
+      if (!thread.values || !(thread.values as Record<string, any>)?.messages) {
+        setModelName(DEFAULT_MODEL_NAME);
+      } else if (thread.metadata && thread.metadata.customModelName) {
         setModelName(thread.metadata.customModelName as ALL_MODEL_NAMES);
       }
       return thread;
diff --git a/src/types.ts b/src/types.ts
index 59e11df8..22fbd6c5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,3 @@
-import { StructuredToolParams } from "@langchain/core/tools";
-
 export type Message = {
   id: string;
   text?: string;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 48019f85..bf3afe22 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -21,10 +21,21 @@ const config: Config = {
             'background-position': 'right center',
             'transform': 'rotate(3deg)'
           }
-        }
+        },
+        'gradient-x': {
+          '0%, 100%': {
+            'background-size': '200% 200%',
+            'background-position': 'left center',
+          },
+          '50%': {
+            'background-size': '200% 200%',
+            'background-position': 'right center',
+          },
+        },
       },
       animation: {
-        'gradient-xy-enhanced': 'gradient-xy-enhanced 15s ease infinite'
+        'gradient-xy-enhanced': 'gradient-xy-enhanced 15s ease infinite',
+        'gradient-x': 'gradient-x 3s ease-in-out infinite',
       },
   		backgroundImage: {
   			'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
diff --git a/yarn.lock b/yarn.lock
index 8536e252..d922be20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6567,6 +6567,11 @@ react-base16-styling@^0.6.0:
     lodash.flow "^3.3.0"
     pure-color "^1.2.0"
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-dom@^18:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"