Add built-in latex editor

Author: TKassis

README.md

@@ -19,6 +19,7 @@ It's built for scientists, analysts, and curious people who want a powerful AI w
 - **Choose your AI model** — Pick from 40+ models (OpenAI, Anthropic, Google, xAI, Qwen, and more) through a simple dropdown in the app. You're not stuck with one.
 - **326 ready-to-use workflows** — Browse a built-in library of workflow templates spanning 22 disciplines — from genomics and drug discovery to finance and astrophysics. Pick a workflow, fill in the variables, select a model, and launch. Each workflow comes with curated skill suggestions so the agent knows exactly which tools to reach for. Workflows that need uploaded data are clearly marked, and you can upload files directly from the launch dialog.
 - **Run heavy computations remotely** — Optionally connect [Modal](https://modal.com/) to run demanding workloads on powerful cloud hardware instead of your laptop.
+- **Add custom MCP servers** — Extend the AI experts' capabilities by adding your own [MCP](https://modelcontextprotocol.io/) servers through the Settings panel. Custom servers are merged with the built-in defaults and persist across app restarts.
 
 > **Note:** The model you select in the dropdown only applies to Kady (the main agent). Expert execution and coding tasks use the Gemini CLI, which always runs through a Gemini model on [OpenRouter](https://openrouter.ai/) regardless of your dropdown selection.
 
@@ -105,9 +106,31 @@ k-dense-byok/
 │   ├── agent.py          ← Main agent definition
 │   └── tools/            ← Tools Kady can use (web search, delegation, etc.)
 ├── web/                  ← Frontend (the UI you see in your browser)
-└── sandbox/              ← Workspace for files and expert tasks (created on first run)
+├── sandbox/              ← Workspace for files and expert tasks (created on first run)
+└── user_config/          ← Your persistent settings (custom MCP servers, etc.)
 ```
 
+## Adding custom MCP servers
+
+You can extend the tools available to Kady's expert agents by adding your own [MCP](https://modelcontextprotocol.io/) servers. Click the **gear icon** in the top-right corner of the app, then open the **MCP Servers** tab.
+
+The editor accepts a JSON object where each key is a server name and its value is the server configuration. For example:
+
+```json
+{
+  "my-server": {
+    "command": "npx",
+    "args": ["-y", "my-mcp-server"]
+  },
+  "remote-api": {
+    "httpUrl": "https://mcp.example.com/api",
+    "headers": { "Authorization": "Bearer your-token" }
+  }
+}
+```
+
+Your custom servers are **merged** with the built-in defaults (docling, parallel-search) and passed to the Gemini CLI. The custom configuration is saved in `user_config/custom_mcps.json` at the project root — outside the `sandbox/` directory — so it survives sandbox deletion and app restarts.
+
 ## Why "BYOK"?
 
 BYOK stands for **Bring Your Own Keys**. Instead of paying a subscription to a single AI company, you plug in API keys from whatever providers you prefer. You stay in control of which models you use, how much you spend, and where your data goes.
@@ -177,7 +200,7 @@ If you hit a case where a skill isn't behaving as expected, try re-running the t
 - Better utilization of Skills
 - Choose what model to use with Gemini CLI
 - Choice between Claude Code or Gemini CLI as the delegation expert
-- Support of MCP config in the UI (can be done in the code right now but we want to make it easier)
+- ~~Support of MCP config in the UI~~ — Done! Open **Settings > MCP Servers** to add custom servers.
 - Better UI experience tailored to scientific workflows
 - Faster PDF parsing
 - AutoResearch integration

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "kady"
-version = "0.2.7"
+version = "0.2.8"
 description = "Kady — K-Dense BYOK Agent"
 readme = "README.md"
 requires-python = ">=3.13"

web/src/app/page.tsx

@@ -207,6 +207,7 @@ function mentionIconForFile(name: string): ReactNode {
   if (cat === "biotable") return <TableIcon className="size-3.5 text-indigo-500" />;
   if (cat === "image") return <FileImageIcon className="size-3.5 text-rose-500" />;
   if (cat === "markdown") return <FileTextIcon className="size-3.5 text-emerald-600" />;
+  if (cat === "latex") return <FileCodeIcon className="size-3.5 text-teal-500" />;
   if (ext === "json" || ext === "jsonl") return <FileJsonIcon className="size-3.5 text-amber-600" />;
   const codeExts = ["py","ts","tsx","js","jsx","rs","go","java","c","cpp","h","rb","sh","bash","css","html","xml","yaml","yml","toml","sql"];
   if (codeExts.includes(ext)) return <FileCodeIcon className="size-3.5 text-violet-500" />;
@@ -845,6 +846,7 @@ export default function ChatPage() {
               onDownload={sandbox.downloadFile}
               onSaveText={sandbox.saveFile}
               onSaveImageBlob={sandbox.saveImageBlob}
+              onCompileLatex={sandbox.compileLatex}
             />
           </div>
         )}

web/src/components/file-preview-panel.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { MessageResponse } from "@/components/ai-elements/message";
+import { LatexEditor } from "@/components/latex-editor";
 import { cn } from "@/lib/utils";
-import { fileCategory, rawFileUrl, type Tab } from "@/lib/use-sandbox";
+import { fileCategory, rawFileUrl, type Tab, type LatexCompileResult } from "@/lib/use-sandbox";
 import CodeMirror, { EditorView } from "@uiw/react-codemirror";
 import { loadLanguage, type LanguageName } from "@uiw/codemirror-extensions-langs";
 import { githubLight } from "@uiw/codemirror-theme-github";
@@ -95,6 +96,7 @@ function categoryLabel(name: string): string {
   if (cat === "markdown") return "markdown";
   if (cat === "csv") return "csv";
   if (cat === "notebook") return "jupyter";
+  if (cat === "latex") return "latex";
   if (cat === "fasta") return ext === "fastq" || ext === "fq" ? "fastq" : "fasta";
   if (cat === "biotable") return ext;
   return langForFile(name);
@@ -1165,6 +1167,7 @@ export interface FilePreviewPanelProps {
   onDownload: (path: string) => void;
   onSaveText: (path: string, content: string) => Promise<boolean>;
   onSaveImageBlob: (path: string, blob: Blob) => Promise<boolean>;
+  onCompileLatex?: (path: string, engine?: string) => Promise<LatexCompileResult>;
 }
 
 export function FilePreviewPanel({
@@ -1175,6 +1178,7 @@ export function FilePreviewPanel({
   onDownload,
   onSaveText,
   onSaveImageBlob,
+  onCompileLatex,
 }: FilePreviewPanelProps) {
   // Per-tab mode tracking
   const [tabModes, setTabModes] = useState<Record<string, PanelMode>>({});
@@ -1257,8 +1261,26 @@ export function FilePreviewPanel({
         </div>
       )}
 
-      {/* Edit mode */}
-      {selectedPath && mode === "edit" && (
+      {/* Edit mode — LaTeX gets the split-pane editor */}
+      {selectedPath && mode === "edit" && cat === "latex" && onCompileLatex && (
+        <>
+          {header}
+          <div className="flex-1 min-h-0">
+            <LatexEditor
+              key={selectedPath}
+              path={selectedPath}
+              name={selectedName ?? ""}
+              initialContent={fileContent ?? ""}
+              onSave={(content) => onSaveText(selectedPath, content)}
+              onCompile={onCompileLatex}
+              onDiscard={() => setMode(selectedPath, "view")}
+            />
+          </div>
+        </>
+      )}
+
+      {/* Edit mode — standard text editor */}
+      {selectedPath && mode === "edit" && (cat !== "latex" || !onCompileLatex) && (
         <>
           {header}
           <div className="flex-1 min-h-0">