Ottimo is a modern, AI-powered workplace assistant that helps you work faster across five everyday tasks: chat, email drafting, meeting summarization, task planning, and research.
It is built as a full-stack React application using TanStack Start, React 19, Tailwind CSS v4, and the Lovable AI Gateway for safe, server-side AI generation.
| Panel | What it does |
|---|---|
| AI Chatbot | Ask anything and get a helpful, conversational response. |
| Email Generator | Turn a few inputs into a polished, ready-to-send email. |
| Meeting Summarizer | Paste meeting notes and receive a concise summary with action items. |
| Task Planner | Describe a goal and get a structured, step-by-step task plan. |
| Research Assistant | Enter a topic and receive a synthesized research overview. |
All AI calls are handled by a secure server route at /api/generate, so the API key never reaches the browser.
- Framework: TanStack Start with file-based routing
- UI Library: React 19 + TypeScript
- Styling: Tailwind CSS v4, shadcn/ui components
- Icons: Lucide React
- AI Backend: Lovable AI Gateway (
ai.gateway.lovable.dev) viagoogle/gemini-3-flash-preview - Server Runtime: Edge / Worker-compatible server functions
- Bun (recommended) or Node.js 20+
- A Lovable project with Cloud enabled (provides the
LOVABLE_API_KEYsecret)
bun installbun devThe app will be available at http://localhost:8080 by default.
bun run buildThe AI route reads the API key from the server-side secret. Do not prefix it with VITE_ or expose it to the browser.
| Variable | Required | Description |
|---|---|---|
LOVABLE_API_KEY |
Yes | Lovable AI Gateway API key, used in src/routes/api/generate.ts. |
Set this in your Lovable Cloud secrets panel or in your hosting environment.
src/
├── routes/
│ ├── __root.tsx # App shell (head, fonts, global providers)
│ ├── index.tsx # Home page with all 5 Ottimo panels
│ └── api/
│ └── generate.ts # Server route that calls the AI Gateway
├── components/ui/ # shadcn/ui components
├── lib/ # Utilities and helpers
├── styles.css # Tailwind v4 theme + custom Ottimo styles
├── router.tsx # TanStack Router setup
└── start.ts # Server start configuration
- The user fills out a form in one of the five panels.
- The frontend builds a prompt and sends it via
POST /api/generateas{ prompt: string }. - The server route reads
LOVABLE_API_KEYand forwards the prompt to the Lovable AI Gateway. - The gateway returns the generated text, which the server sends back as
{ text: string }. - The frontend renders the response in a clean, formatted output box with section headings, smooth fade-in animation, and a text-to-speech option.
- AI API keys are kept server-side only.
- No Gemini or third-party API keys are bundled into the frontend.
- Input is sent as a simple JSON prompt and validated on the server.
This project is private and maintained through Lovable. Refer to your project settings for licensing and deployment details.
Built with ❤️ using Lovable.