Inspiration We wanted a fast, privacy‑friendly AI chat experience that feels delightful on the web—no heavy setup, no vendor lock‑in, and great UX out of the box. Sant AI was born to make everyday “ask-and-iterate” work smoother: from brainstorming and drafting to quick code help, with thoughtful touches like export, analytics, and voice input.
What it does Multi‑chat workspace with titles, tags, search, and autosave Streaming responses with smooth typing effect and stop control Voice input (start/stop dictation) via the browser’s speech recognition Export chats to Markdown, TXT, JSON, and PDF; shareable links Built‑in analytics: usage stats, daily activity, model usage, popular tags Theming and dark mode with polished chatbox styling Keyboard shortcuts for faster navigation PWA‑ready UX for installable, app‑like usage How we built it Frontend in React + TypeScript, bundled with Vite for fast dev cycles UI built with Tailwind CSS and shadcn/ui (Radix primitives) for accessible, composable components Custom markdown renderer in chat (tables, headings, code blocks) Streaming AI via Hugging Face Inference API (Together provider), with automatic fallbacks to OpenRouter and Puter AI for resilience State/UI patterns with TanStack Query, React Router, and small custom hooks Data visualization with Recharts for lightweight, responsive charts Voice Input powered by the Web Speech API Clean component architecture: chat sessions, sidebar, export, analytics, prompts, system prompts, and more Challenges we ran into Handling streaming reliably across providers and timeouts CORS and rate‑limit edges when testing multiple AI backends Consistent dark mode polish (inputs, borders, placeholders) Browser differences for speech recognition reliability Keeping performance snappy with long chats and rich markdown rendering Accomplishments that we’re proud of A cohesive, minimal UX that feels fast and intentional Robust multi‑provider fallback for high AI availability Full export/sharing suite plus built‑in analytics Voice input that just works, with clear user feedback Clean, modular code that’s easy to extend What we learned Streaming semantics and limits vary widely between AI providers Small design details (focus rings, placeholders, motion) matter for perceived quality Radix + shadcn/ui is a great foundation for accessible, consistent UI TypeScript pays off quickly in a streaming, event‑heavy codebase Building for resilience (fallbacks, timeouts) dramatically improves UX What’s next for Sant AI Optional Supabase backend for auth, cloud sync, and cross‑device history RAG: upload files, embed, and ground responses with a vector DB Multimodal input/output and image understanding Plugin‑like “tools” for web search, code execution, and scheduling More export presets and collaborative sharing Mobile/PWA refinements and offline‑first caching End‑to‑end encryption for private chats ———
What languages, frameworks, platforms, cloud services, databases, APIs, or other technologies did you use?
Languages: TypeScript, JavaScript, HTML, CSS Frameworks/Libraries: React 18, Vite, Tailwind CSS, shadcn/ui, Radix UI, Lucide React State/Forms/Routing: TanStack React Query, React Hook Form, React Router DOM, Zod UI/UX Utilities: date-fns, cmdk (command palette), Embla Carousel Charts/Visualization: Recharts AI/APIs: Hugging Face Inference API (Together provider: openai/gpt-oss-120b) OpenRouter API (fallback: deepseek-r1) Puter AI SDK (optional fallback: Claude Sonnet 4 via OpenRouter) Browser APIs: Web Speech API (speech recognition), Clipboard API Build/Tooling: Vite, ESLint Optional Backend: Supabase (Edge Functions for proxying; DB for sync) if enabled lov-plan Plan to add this content into the app:
Create a new “About Sant” modal component that renders this content (markdown-safe) with headings and a clean layout. Add an “About” button in the header (next to existing controls) that opens the modal. Ensure markdown styles match the app theme and dark mode, including headings, lists, and code blocks. Optionally add a dedicated /about route so the content can be shared via URL, linking to the same component. Here’s polished copy you can paste into your README or Devpost:
Inspiration We wanted a fast, privacy‑friendly AI chat experience that feels delightful on the web—no heavy setup, no vendor lock‑in, and great UX out of the box. Sant AI was born to make everyday “ask-and-iterate” work smoother: from brainstorming and drafting to quick code help, with thoughtful touches like export, analytics, and voice input.
What it does Multi‑chat workspace with titles, tags, search, and autosave Streaming responses with smooth typing effect and stop control Voice input (start/stop dictation) via the browser’s speech recognition Export chats to Markdown, TXT, JSON, and PDF; shareable links Built‑in analytics: usage stats, daily activity, model usage, popular tags Theming and dark mode with polished chatbox styling Keyboard shortcuts for faster navigation PWA‑ready UX for installable, app‑like usage How we built it Frontend in React + TypeScript, bundled with Vite for fast dev cycles UI built with Tailwind CSS and shadcn/ui (Radix primitives) for accessible, composable components Custom markdown renderer in chat (tables, headings, code blocks) Streaming AI via Hugging Face Inference API (Together provider), with automatic fallbacks to OpenRouter and Puter AI for resilience State/UI patterns with TanStack Query, React Router, and small custom hooks Data visualization with Recharts for lightweight, responsive charts Voice Input powered by the Web Speech API Clean component architecture: chat sessions, sidebar, export, analytics, prompts, system prompts, and more Challenges we ran into Handling streaming reliably across providers and timeouts CORS and rate‑limit edges when testing multiple AI backends Consistent dark mode polish (inputs, borders, placeholders) Browser differences for speech recognition reliability Keeping performance snappy with long chats and rich markdown rendering Accomplishments that we’re proud of A cohesive, minimal UX that feels fast and intentional Robust multi‑provider fallback for high AI availability Full export/sharing suite plus built‑in analytics Voice input that just works, with clear user feedback Clean, modular code that’s easy to extend What we learned Streaming semantics and limits vary widely between AI providers Small design details (focus rings, placeholders, motion) matter for perceived quality Radix + shadcn/ui is a great foundation for accessible, consistent UI TypeScript pays off quickly in a streaming, event‑heavy codebase Building for resilience (fallbacks, timeouts) dramatically improves UX What’s next for Sant AI Optional Supabase backend for auth, cloud sync, and cross‑device history RAG: upload files, embed, and ground responses with a vector DB Multimodal input/output and image understanding Plugin‑like “tools” for web search, code execution, and scheduling More export presets and collaborative sharing Mobile/PWA refinements and offline‑first caching End‑to‑end encryption for private chats ———
What languages, frameworks, platforms, cloud services, databases, APIs, or other technologies did you use?
Languages: TypeScript, JavaScript, HTML, CSS Frameworks/Libraries: React 18, Vite, Tailwind CSS, shadcn/ui, Radix UI, Lucide React State/Forms/Routing: TanStack React Query, React Hook Form, React Router DOM, Zod UI/UX Utilities: date-fns, cmdk (command palette), Embla Carousel Charts/Visualization: Recharts AI/APIs: Hugging Face Inference API (Together provider: openai/gpt-oss-120b) OpenRouter API (fallback: deepseek-r1) Puter AI SDK (optional fallback: Claude Sonnet 4 via OpenRouter) Browser APIs: Web Speech API (speech recognition), Clipboard API Build/Tooling: Vite, ESLint Optional Backend: Supabase (Edge Functions for proxying; DB for sync) if enabled lov-plan Plan to add this content into the app:
Create a new “About Sant” modal component that renders this content (markdown-safe) with headings and a clean layout. Add an “About” button in the header (next to existing controls) that opens the modal. Ensure markdown styles match the app theme and dark mode, including headings, lists, and code blocks. Optionally add a dedicated /about route so the content can be shared via URL, linking to the same component.
Built With
- etc
- huggingface
- javascript
- openai
- puter.js
Log in or sign up for Devpost to join the conversation.