EM‑AI — Your Engineering Manager AI

Plan your day, manage OKRs, chat, and talk to an AI that acts like a thoughtful Engineering Manager.

If the GIF doesn’t load on GitHub, open it directly from docs/em-ai-demo.gif.

Overview

EM‑AI is a React + Vite + TypeScript app powered by Google Gemini. It helps you and your team stay on track by combining planning, OKR tracking, and conversational assistance. You can type or speak; EM‑AI can listen, think, and reply.

Highlights

• Daily planner and weekly summaries that you can iterate with the AI
• OKR management with an EM‑style assistant that nudges and clarifies
• Voice input with live conversation mode and audio transcription
• Image generation and rich chat for creative prompts
• Lightweight, fast, and hackable—ideal for personal workflows or team demos

Features

• Chat Bot: ask anything or delegate tasks in natural language
• Daily Planner: plan your day and keep it realistic with AI feedback
• OKR Manager: write, refine, and track objectives and key results
• Weekly Summary: reflect on wins, gaps, and next steps
• Voice Assistant: speak to EM‑AI; it listens and responds
• Live Conversation: streaming, low-latency dialog
• Audio Transcriber: record and transcribe right in the app
• Image Generator: create visuals from prompts

Tech Stack

• React 19 + TypeScript
• Vite 6 for fast dev/build
• Google Gemini via @google/genai
• Custom hooks and utilities for speech, audio, and live interaction

Project structure

App.tsx
index.html
index.tsx
metadata.json
package.json
tsconfig.json
types.ts
vite.config.ts
components/
AudioTranscriber.tsx
ChatBot.tsx
DailyPlanner.tsx
icons.tsx
ImageGenerator.tsx
LiveConversation.tsx
OkrManager.tsx
TaskDetailModal.tsx
TaskItem.tsx
VoiceAssistant.tsx
WeeklySummary.tsx
hooks/
useSpeechRecognition.ts
services/
geminiService.ts
utils/
audio.ts
speech.ts

Key internals:

• services/geminiService.ts wraps the Gemini client and centralizes calls
• hooks/useSpeechRecognition.ts handles microphone capture and recognition
• utils/audio.ts and utils/speech.ts provide recording and TTS helpers

Getting started

Prerequisites: Node.js 18+ and a Google Gemini API key.

1. Install dependencies

npm install

1. Configure environment

Create a .env.local file at the project root and set:

GEMINI_API_KEY=your_api_key_here

Vite exposes this to the app at build/dev time. The app also requests microphone permissions (see metadata.json).

1. Run the dev server

npm run dev

Open the printed URL (default http://localhost:3000). Start with the Chat Bot, try the Daily Planner, and toggle voice features when prompted.

Scripts

• npm run dev — start Vite dev server
• npm run build — production build
• npm run preview — preview the production build locally

Deployment

This is a static Vite app. Any static host works:

1. Build: npm run build
2. Upload dist/ to your host (GitHub Pages, Netlify, Vercel, Cloudflare Pages, etc.)

Troubleshooting

• 401/403 from API: confirm GEMINI_API_KEY and account access.
• Microphone blocked: allow mic permissions in the browser.
• Corporate proxy/ad blocker: may block model requests; try a different network or disable blockers.

Contributing

Issues and PRs are welcome. If you add a feature, include a short demo or screenshot and basic tests when applicable.

Security and guardrails

• Never commit real keys; use .env.local and see .env.example.
• GitHub Actions run build + typecheck on every PR.
• CodeQL and Dependabot are enabled to detect vulnerabilities and stale deps.

License

MIT — see LICENSE.