MCP Flashcards

MCP server for managing flashcards - create, study, and organize flashcard decks programmatically.

Features

• Create and manage flashcard decks
• Add, edit, and delete cards
• Study mode with spaced repetition
• Import/Export decks
• Statistics tracking
• Full MCP integration
• NEW: UI workflow integration for Claude Desktop
• NEW: Human-in-the-loop UI prompts
• NEW: Workflow session management

Installation

npm install @no-smoke/mcp-flashcards

Configuration

Add to your MCP settings:

{
  "mcpServers": {
    "flashcards": {
      "command": "npx",
      "args": ["@no-smoke/mcp-flashcards"],
      "env": {
        "FLASHCARDS_DATA_DIR": "./flashcards-data"
      }
    }
  }
}

Usage

Create a deck

await createDeck({
  name: "JavaScript Basics",
  description: "Fundamental JavaScript concepts"
});

Add cards

await addCard({
  deckId: "deck-id",
  question: "What is a closure?",
  answer: "A function that has access to variables in its outer scope"
});

Study mode

const card = await getNextCard({ deckId: "deck-id" });
await markCard({ cardId: card.id, correct: true });

UI Workflow Integration (v1.1.0)

The Flashcards MCP server now includes UI workflow capabilities that enable human-in-the-loop interactions directly within Claude Desktop.

Key Features

1. Start Workflow Session: Initialize a UI workflow session for flashcard operations
2. Human-in-the-Loop Prompts: Get user input for deck creation, card addition, and study sessions
3. Update Session State: Manage workflow state and progress
4. Get Session Status: Check current workflow status and state

Using UI Workflows

Start a Workflow Session

await startFlashcardSession({
  type: "create_deck",  // or "study", "import"
  metadata: {
    deckName: "JavaScript Advanced Concepts"
  }
});

Show UI Prompt

await showFlashcardPrompt({
  sessionId: "session-id",
  promptType: "card_content",
  data: {
    currentStep: 1,
    totalSteps: 5,
    deckName: "JavaScript Advanced Concepts"
  }
});

Update Session

await updateFlashcardSession({
  sessionId: "session-id",
  updates: {
    step: 2,
    cardsAdded: 1
  }
});

Workflow Types

• create_deck: Interactive deck creation workflow
• study: Guided study session with UI prompts
• import: File import workflow with user confirmation

UI Components

The workflow system uses MCP's ui_textarea and ui_select elements to:

• Collect card content from users
• Get user decisions on study session results
• Confirm import operations
• Display progress through multi-step workflows

Documentation

• 📚 UI Workflow Documentation - Complete guide to UI workflows
• 🔧 UI Tools Reference - Quick reference for UI tools
• 🔄 Migration Guide - Upgrade from v1.0.0 to v1.1.0
• 📦 Release Notes - Version history and changelog
• 📋 Changelog - Detailed change history

Development

# Clone the repository
git clone https://github.com/No-Smoke/mcp-flashcards.git
cd mcp-flashcards

# Install dependencies
npm install

# Build
npm run build

# Run tests
npm test

# Start development server
npm run dev

License

MIT License - see LICENSE file for details