AI学习助手

一个基于Cloudflare Workers和Streamlit的AI学习平台,提供维基百科搜索、文本翻译和词典查询功能。

  • by takzen
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 takzen/learning-assistant-mcp

使用说明

🎓 AI学习助手

一个完整的学习平台,由部署在Cloudflare Workers上的MCP(模型上下文协议)服务器和漂亮的Streamlit前端界面组成。

🌟 特性

📚 维基百科搜索

搜索多种语言的维基百科文章,并获得带有缩略图和链接的简明摘要。

🌍 文本翻译

使用Google Translate API在100多种语言之间翻译文本。

📖 字典查找

查找英语单词定义、发音(带音频)、示例、同义词和反义词。


🏗️ 建筑

┌─────────────────────────────────────┐
│   Streamlit Frontend (Python)       │
│   - User Interface                  │
│   - Visual Components               │
│   http://localhost:8501             │
└──────────────┬──────────────────────┘
               │ HTTP POST
               ▼
┌─────────────────────────────────────┐
│   MCP Server (TypeScript)           │
│   - Tool Registry                   │
│   - API Integrations                │
│   Cloudflare Workers                │
└─────────────────────────────────────┘

📂 项目结构

learning-assistant-mcp/              # Root directory
├── src/
│   ├── index.ts                     # Main server & routing
│   └── tools/
│       ├── wikipedia.ts             # Wikipedia search tool
│       ├── translate.ts             # Translation tool
│       └── dictionary.ts            # Dictionary lookup tool
├── learning-assistant-ui/           # Streamlit Frontend
│   ├── app.py                       # Main Streamlit app
│   ├── requirements.txt             # Python dependencies
│   └── .venv/                        # Virtual environment (gitignored)
├── screenshots/                     # UI screenshots for README
├── wrangler.toml                    # Cloudflare config
├── package.json                     # Node dependencies
├── tsconfig.json                    # TypeScript config
├── .gitignore                       # Git ignore rules
└── README.md                        # This file

🚀 快速开始

先决条件

  • Node.js 18+(用于MCP服务器)
  • Python 3.11+(用于Streamlit UI)
  • npm或pnpm
  • uv(Python包安装程序)
  • Cloudflare帐户(用于部署)

1.MCP服务器设置

# Navigate to project root
cd learning-assistant-mcp

# Install dependencies
npm install

# Run locally
npm run dev

# Test the API
npm test

# Deploy to Cloudflare Workers
npm run deploy

2.流线型UI设置

# Navigate to UI directory (from project root)
cd learning-assistant-ui

# Create virtual environment with uv
uv venv

# Activate venv
# Windows (Git Bash):
source .venv/Scripts/activate
# Linux/Mac:
source .venv/bin/activate

# Install dependencies with uv
uv pip install -r requirements.txt

# Run Streamlit app
streamlit run app.py

应用程序将在以下时间自动打开 http://localhost:8501


🖼️ 截图

维基百科搜索界面

搜索任何语言的维基百科文章,并提供即时摘要

翻译工具

通过源语言和目标语言选择在100多种语言之间翻译文本

字典查找

获取定义、带音频的发音、示例和同义词


🔧 API使用

端点

Production: https://learning-assistant-mcp.mcp-weather.workers.dev
Local: http://localhost:8787

请求格式

{
  "tool": "toolName",
  "input": {
    // tool-specific parameters
  }
}

请求示例

维基百科搜索

curl -X POST https://learning-assistant-mcp.mcp-weather.workers.dev \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "searchWikipedia",
    "input": {
      "query": "Machine Learning",
      "language": "en"
    }
  }'

翻译

curl -X POST https://learning-assistant-mcp.mcp-weather.workers.dev \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "translateText",
    "input": {
      "text": "Hello, world!",
      "sourceLang": "en",
      "targetLang": "pl"
    }
  }'

字典查找

curl -X POST https://learning-assistant-mcp.mcp-weather.workers.dev \
  -H "Content-Type: application/json" \
  -d '{
    "tool": "lookupWord",
    "input": {
      "word": "serendipity"
    }
  }'

响应格式

{
  "success": true,
  // tool-specific response data
  "timestamp": "2025-11-04T05:34:31.266Z"
}

🛠️ 使用的技术

后端(MCP服务器)

  • TypeScript -类型安全代码
  • Cloudflare员工 -无服务器边缘计算
  • 萨德 -架构验证
  • 牧马人 -Cloudflare CLI

前端(流式UI)

  • 溪流 -Python web框架
  • 请求: -HTTP客户端
  • Python 3.11+ -运行时间
  • 紫外线 -快速Python包安装程序

集成API

  • 维基百科REST API -文章摘要
  • 谷歌翻译API -文本翻译
  • 免费词典API -单词定义

📊 演出

  • ⚡ 边缘计算 -部署在Cloudflare的全球网络上
  • 🚀 低延迟 -平均响应时间<200ms
  • 🌍 全球可用性 -全球275+个城市
  • 💰 成本效益 -免费套餐每天支持10万个请求

🧪 测试

在本地测试MCP服务器

# From project root
npm run dev

# In another terminal
npm test

使用自定义请求进行测试

# Test Wikipedia
curl -X POST http://localhost:8787 \
  -H "Content-Type: application/json" \
  -d '{"tool": "searchWikipedia", "input": {"query": "Python"}}'

# Test Translation
curl -X POST http://localhost:8787 \
  -H "Content-Type: application/json" \
  -d '{"tool": "translateText", "input": {"text": "Hello", "sourceLang": "en", "targetLang": "pl"}}'

# Test Dictionary
curl -X POST http://localhost:8787 \
  -H "Content-Type: application/json" \
  -d '{"tool": "lookupWord", "input": {"word": "hello"}}'

📝 添加新工具

1.创建工具文件

// src/tools/your-tool.ts
import { z } from "zod";

export const yourToolInputSchema = z.object({
  param: z.string(),
});

export type YourToolInput = z.infer<typeof yourToolInputSchema>;

export const yourTool = {
  name: "yourTool",
  description: "What your tool does",
  inputSchema: yourToolInputSchema,
  
  async handler(input: YourToolInput) {
    // Your implementation
    return {
      success: true,
      // your response data
    };
  },
};

2.在中注册工具 src/index.ts

import { yourTool } from "./tools/your-tool";

const tools = {
  searchWikipedia: wikipediaTool,
  translateText: translateTool,
  lookupWord: dictionaryTool,
  yourTool: yourTool, // Add here
};

3.测试和部署

npm run dev    # Test locally
npm run deploy # Deploy to production

🌐 部署

将MCP服务器部署到Cloudflare

# From project root
wrangler deploy

将Streamlit UI部署到Streamlit Cloud

  1. 将代码推送到GitHub
  2. 首选 share.streamlit.io
  3. 连接您的存储库
  4. 选择 learning-assistant-ui/app.py 作为主文件
  5. 部署!

🔐 环境变量

MCP服务器

不需要API密钥-所有服务都使用免费的公共API。

流线型UI

更新 API_URL 在 app.py 如果部署到自定义域:

API_URL = "https://your-custom-domain.workers.dev"

🤝 贡献

欢迎投稿!请按照以下步骤操作:

  1. 分叉存储库
  2. 创建要素分支(git checkout -b feature/AmazingFeature)
  3. 提交您的更改(git commit -m 'Add some AmazingFeature')
  4. 推到分支(git push origin feature/AmazingFeature)
  5. 打开拉取请求

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。


🙏 致谢


📧 联系


由以下材料制成❤️ 使用TypeScript、Python和Cloudflare Workers