MCPlator-带AI副驾驶的逆向计算器
🌐 现场演示： mcplator.com
一款功能齐全的复古卡西欧风格计算器，配有LLM驱动的人工智能助手。具有精致的复古UI，带有真实的动画和自然语言计算器控件。
特性
- 正品卡西欧计算器 功能齐全（内存、百分比、平方根、符号更改等）
- 抛光复古UI 使用CSS模块构建，具有真实的3D按钮效果和LCD显示
- LLM驱动的AI聊天 即：
- 了解自然语言（“加2加100”，“80的15%”，“144的平方根”） - 将请求转换为计算器按键序列 - 实时在计算器显示屏上设置按键动画
- LMCIFY分享 （“让我为你计算一下”）：
- 通过带有压缩消息编码的URL共享计算结果 - 自动播放具有逼真打字动画的共享计算 - 动态打字速度随消息长度而变化
- 持久状态 存储在IndexedDB中（计算器内存、聊天历史、每日配额）
项目统计
SLOC总计： 12420行（非空，不包括依赖项）
| 延伸 | 线路 |
|---|---|
| Markdown（.md） | 4775 |
| TypeScript（.ts） | 2790 |
| CSS（.CSS） | 2077 |
| 多伦多证券交易所 | 2046 |
| JavaScript（.js） | 346 |
| JSON（.JSON） | 243 |
| JavaScript（.mjs） | 98 |
| HTML（.HTML） | 45 |
技术栈
前端
- 框架： React 19+TypeScript 5.9
- 构建： 快7.3
- 状态管理： 状态 + IndexedDB（手动持久性）
- 造型： CSS模块+顺风CSS 4.1（混合方法）
- 储存： IndexedDB（通过
idb图书馆） - 流动： 本土的
fetchAPI用于SSE
后端(/api)
- 平台： Vercel无服务器功能（边缘运行时）
- 人工智能： Claude API（Claude Haiku 4.5车型）
- 流动： 用于实时令牌流的服务器发送事件（SSE）
项目结构
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入门指南
先决条件
- 包子 1.0+
安装
bun install发展
bun run dev前端运行在 http://localhost:5173.API端点(/api/chat)由Vercel在生产中处理。
环境变量
为了让人工智能聊天功能发挥作用，你需要设置你的Anthropic API密钥。
有关获取Anthropic API密钥的详细说明，请参阅 ANTHROPIC_API_GUIDE.md字体.
创建一个 .env 项目根目录中的文件（或在Vercel仪表板中设置）：
ANTHROPIC_API_KEY=sk-ant-...脚本
bun run dev-启动前端开发服务器bun run build-为生产而建bun run test-运行Playwright E2E测试bun run lint-运行ESLintbun run sloc-计算源代码行数
部署
有关详细的分步部署说明，请参阅 构建.md.
快速部署到Vercel
学分
计算器UI设计基于 克雷姆丘/复古计算器.
许可证
麻省理工学院