Thanks to visit codestin.com
Credit goes to github.com

Skip to content

🌿 Fern — AI Chat Desktop Elegant, streaming chat UI for multiple AI providers. Built with FastAPI (backend), React + Tailwind (web), and Electron (desktop). Features beautiful animated backgrounds, syntax-highlighted code blocks, KaTeX math, and Mermaid diagrams.

License

Notifications You must be signed in to change notification settings

Syphon1205/Fern

Repository files navigation

🌿 Fern — AI Chat Desktop

Elegant, streaming chat UI for multiple AI providers. Built with FastAPI (backend), React + Tailwind (web), and Electron (desktop). Features beautiful animated backgrounds, syntax-highlighted code blocks, KaTeX math, and Mermaid diagrams.


status framework electron backend

image

✨ Highlights

  • Letter‑by‑letter streaming via WebSocket with a smooth typewriter effect.
  • Markdown rendering with KaTeX math and Mermaid diagram support.
  • Code blocks with syntax highlighting (highlight.js), copy, and wrap toggle.
  • Animated backgrounds with theme‑aware accent glow.
  • Multi‑provider ready: OpenAI, OpenRouter, Anthropic, Gemini, Azure, Ollama, Together, Fireworks, Perplexity, Mistral, DeepSeek, Cohere, LiteLLM, vLLM.

Note: Fern requires you to bring your own API keys. A Welcome popup appears on first launch to guide you to Settings.


🧰 Prerequisites

  • Python 3.10+
  • Node.js 18+
  • Windows/macOS/Linux

🚀 Quick Start (Dev)

  1. Create and activate a Python virtual environment
python -m venv .venv
. .venv\Scripts\Activate.ps1   # PowerShell on Windows
  1. Install backend deps
pip install -r requirements.txt
  1. Build web UI
cd web
npm install
npm run build    # outputs to web/dist
  1. Run Electron (spawns FastAPI automatically)
cd ../electron
npm install
npm start

The app will open at http://127.0.0.1:8000 in an Electron window. On first launch, the Welcome modal will prompt you to open Settings and paste your API keys.


🔑 API Keys

Set environment variables before launching (any that apply):

$Env:OPENAI_API_KEY = "sk-..."
$Env:ANTHROPIC_API_KEY = "sk-ant-..."
$Env:GOOGLE_API_KEY = "AIza..."           # Gemini
$Env:OPENROUTER_API_KEY = "sk-or-..."
# ...and so on for the providers you use

You can also paste keys in the Settings dialog in the app.


📦 Package Desktop App (Electron)

Fern uses electron-builder for packaging.

  1. Ensure the web UI is built:
cd web
npm run build
  1. Build installers with electron-builder:
cd ../electron
npm install
npm run dist

Artifacts are written to electron/dist/ (NSIS on Windows, DMG on macOS, AppImage on Linux). Icons are sourced from Assets/Logo.


🖌️ Theming & Visuals

  • Choose themes in Settings; animated background intensity adapts per theme.
  • “Glass” UI lets the glow shine through; adjust in web/src/index.css if desired.

🛠️ Tech Stack

  • Backend: FastAPI, Uvicorn
  • Web: React, Tailwind, marked, highlight.js, katex, mermaid
  • Desktop: Electron, electron-builder

🤝 Contributing

PRs welcome! Please open issues for bugs/requests. Ensure web builds and the Electron app starts before submitting changes.


📄 License

MIT

About

🌿 Fern — AI Chat Desktop Elegant, streaming chat UI for multiple AI providers. Built with FastAPI (backend), React + Tailwind (web), and Electron (desktop). Features beautiful animated backgrounds, syntax-highlighted code blocks, KaTeX math, and Mermaid diagrams.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published