AI计算器

MCPlator - Retro Calculator with AI Co-Pilot

🌐 Live Demo: mcplator.com

A fully functional retro Casio-style calculator with an LLM-powered AI assistant. Features a polished retro UI with authentic animations and natural language calculator control.

Features

• Authentic Casio calculator with complete functionality (memory, percentage, square root, sign change, etc.)
• Polished retro UI built with CSS Modules featuring authentic 3D button effects and LCD display
• LLM-powered AI chat that:
  • Understands natural language ("add 2 plus one hundred", "what's 15% of 80", "square root of 144")
  • Translates requests into calculator key sequences
  • Animates key presses on the calculator display in real-time
• LMCIFY sharing ("Let Me Calculate It For You"):
  • Share calculations via URL with compressed message encoding
  • Auto-plays shared calculations with realistic typing animation
  • Dynamic typing speed that scales with message length
• Persistent state stored in IndexedDB (calculator memory, chat history, daily quota)

Project Stats

Total SLOC: 13,135 lines (non-empty, excluding dependencies)

Tech Stack

Frontend

• Framework: React 19 + TypeScript 5.9
• Build: Vite 7.3
• State management: Zustand + IndexedDB (manual persistence)
• Styling: CSS Modules + Tailwind CSS 4.1 (hybrid approach)
• Storage: IndexedDB (via idb library)
• Streaming: Native fetch API for SSE

Backend (/api)

• Platform: Vercel Serverless Functions (Edge Runtime)
• AI: Anthropic Claude API (Claude Haiku 5.5 model)
• Streaming: Server-Sent Events (SSE) for real-time token streaming

Project Structure

MCPlator/
├── src/              # React application source
│   ├── components/   # UI components
│   ├── engine/       # Calculator computation logic
│   ├── types/        # TypeScript type definitions
│   ├── state/        # Zustand stores
│   ├── hooks/        # Custom React hooks
│   ├── api/          # Frontend API utilities
│   ├── db/           # IndexedDB persistence
│   └── assets/       # Images, fonts, icons
├── api/              # Vercel serverless functions
├── public/           # Static assets
├── tests/            # Playwright E2E tests
└── docs/             # Documentation

Getting Started

Prerequisites

• Bun 1.0+

Installation

bun install

Development

bun run dev

The frontend runs on http://localhost:5173. The API endpoint (/api/chat) is handled by Vercel in production.

Environment Variables

For the AI chat features to work, you need to set up your Anthropic API key.

For detailed instructions on getting an Anthropic API key, see ANTHROPIC_API_GUIDE.md.

Create a .env file in the project root (or set in Vercel dashboard):

ANTHROPIC_API_KEY=sk-ant-...

Scripts

• bun run dev - Start frontend dev server
• bun run build - Build for production
• bun run test - Run Playwright E2E tests
• bun run lint - Run ESLint
• bun run sloc - Calculate source lines of code

Deployment

For detailed, step-by-step deployment instructions, please refer to docs/BUILD.md.

Quick Deploy to Vercel

Credits

The calculator UI design is based on keremciu/retro-calculator.

License

MIT