Forem: Yosuke Sakurai

I wired Claude to my flashcard app via MCP. Here's what that actually looks like.

Yosuke Sakurai — Sat, 25 Apr 2026 11:14:31 +0000

Automating Flashcards with Claude, Cursor, and Deckbase (via MCP)

I spend a lot of time reading papers, docs, and codebases. I used to manually copy key concepts into a flashcard app afterward. Now I do not. Claude does it while I work.

This post walks through how I connected Claude and Cursor to Deckbase using its MCP server, and what you can actually do once it is wired up.

What MCP gives you here

Model Context Protocol lets Claude call external tools mid conversation. In this case, those tools are your actual flashcard library: create a deck, add cards, generate audio, export to Anki. All without leaving your editor or chat window.

The Deckbase MCP server exposes about 30 tools over a hosted HTTP endpoint. You authenticate with a Bearer token, point your client at the URL, and Claude can read and write your decks directly.

Setup (5 minutes)

1. Get your API key

2. Add to Claude Desktop

Edit:

~/Library/Application Support/Claude/claude_desktop_config.json

Add:

{
  "mcpServers": {
    "deckbase": {
      "url": "https://www.deckbase.co/api/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Restart Claude Desktop. You should see Deckbase appear in the tools list.

3. Add to Cursor

In Cursor → Settings → MCP, add:

Name: deckbase

URL: https://www.deckbase.co/api/mcp

Authorization: Bearer YOUR_API_KEY

What you can do

Create a deck and fill it from a document

Paste a block of text such as a paper abstract, a README section, or a chapter and ask Claude to card it:

Create a deck called "Transformer Architecture".
Generate 10 flashcards from this text.
One concept per card.
Front = concept.
Back = explanation.

Claude calls create_deck, then create_cards with up to 50 cards in a single batch. Your deck is live in Deckbase before you finish reading the thread.

Add audio to any card

If you are learning a language and want native pronunciation on the back of each card:

List the voices available in Japanese, then add female audio to every card in my Japanese Vocab deck.

Claude calls list_elevenlabs_voices with { language: "ja", gender: "female" }, picks a voice, then runs generate_audio_for_card for each card.

Generate AI images for visual memory

For anatomy, geography, or anything visual:

For each card in my Anatomy deck, generate an illustration matching the front text.
Use a clean medical diagram style.

Claude calls list_ai_image_models, then generate_image_for_card per card with a prompt derived from the card front.

Export to Anki

If you still review in Anki and just want to use Deckbase for creation:

Export my JavaScript Concepts deck as an Anki file.

Claude calls export_deck with export_type: "full" and returns a .apkg file you can import directly.

Normalize a messy deck

When your cards drift from the template:

Check my Python Fundamentals deck for layout drift, then normalize all cards to the current template.

Claude first calls validate_deck_layout, then normalize_cards_to_template.

The workflow that actually changed how I work

When I am reading a technical doc in Cursor, I now do this at the end of any section I want to remember:

Select the relevant text
Open the AI chat panel
Type: Card this.

Claude reads the selection, creates 3 to 5 cards in my current deck with clean front/back separation, and confirms what it added.

The key difference is structure. One cue, one answer, no overstuffing. The cards come out usable without editing. That was not true when using generic prompts before.

What it does not do yet

No automatic PDF parsing. You paste the text and Claude cards it. A folder watcher pipeline is possible via the API, just not built into MCP tools yet.
The hosted MCP requires a Deckbase account and API key. There is also a local stdio server (node mcp-server/index.js), but it only exposes document tools, not deck and card write operations.

Worth trying if

You read a lot of technical material and want a way to retain it
You are building an AI study workflow and want a real API instead of maintaining your own schema
You already live in Cursor and want your flashcard system one prompt away

The MCP docs are at:

https://deckbase.co/mcp

How I Built a 3D Vision Board in React Native Using Three.js

Yosuke Sakurai — Fri, 24 Apr 2026 10:33:20 +0000

The Problem

I was building a manifestation app in React Native and needed a vision board feature. Not a static collage. An immersive 3D space users could actually step into.

The challenge: Three.js is built for the web, not React Native. I needed a bridge that did not destroy performance or bundle size.

## The Architecture

I chose a WebView-based approach rather than a native Three.js port.

React Native handles the shell, navigation, auth, and Firebase sync
WebView renders the 3D scene using Three.js
PostMessage API handles communication between RN and the WebView
Firebase Storage serves optimized images for the vision board

Why not react-three-fiber? At the time of building, R3F's React Native support was experimental and the bundle size exceeded 15MB. A WebView let me lazy-load the 3D scene only when
needed.

## The 3D Scene

The scene is a simple cylindrical panorama. Users upload images, which are mapped to floating planes in 3D space. An affirmation text overlay follows the camera.

Here is the basic Three.js setup:


javascript
  // Inside the WebView
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });

  // Ambient lighting
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);

  // Floating image planes
  const geometry = new THREE.PlaneGeometry(3, 2);
  const texture = new THREE.TextureLoader().load(imageUrl);
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const plane = new THREE.Mesh(geometry, material);
  plane.position.set(x, y, z);
  scene.add(plane);

  Performance Lessons

  1. Lazy load everything
  The WebView is mounted only when the user opens the vision board. The initial bundle does not include Three.js.

  2. Image optimization
  Users upload high-res photos. I compress them to 1024px width on the client before upload using react-native-image-resizer. This cut load times from 4 seconds to under 1 second.

  3. Limit the scene complexity
  I cap the board at 12 images. More than that and frame rate drops below 50fps on mid-range Android devices.

  4. Handle WebView memory
  On Android, WebViews are notorious for memory leaks. I explicitly destroy the WebView instance when the user navigates away:

  useEffect(() => {
    return () => {
      if (webViewRef.current) {
        webViewRef.current.reload(); // forces cleanup
      }
    };
  }, []);

  The Communication Bridge

  The React Native shell sends commands to the WebView via URL hashes, and the WebView sends events back via window.ReactNativeWebView.postMessage.

  // React Native sends a command
  const sendCommand = (command) => {
    webViewRef.current?.injectJavaScript(`
      window.dispatchEvent(new MessageEvent('message', {
        data: ${JSON.stringify(command)}
      }));
      true;
    `);
  };

  // WebView sends back an event
  const handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'planeClicked') {
      // Handle image selection
    }
  };

  The Unlock-Screen Mechanic

  The real insight was not the 3D board. It was the affirmation delivery mechanism.

  Instead of push notifications (70% swipe-away rate), the app shows an affirmation every time the user unlocks their phone. This piggybacks on an existing habit rather than creating a new
  one.

  Technically, this uses React Native's AppState API. When the app transitions from background to active, we render a full-screen modal with the affirmation. The user must hold for 3 seconds
   while feeling the emotion before they can dismiss it.

  Results

  - Day 7 retention: 34%
  - Day 30 retention: 18%
  - Average daily unlock engagements: 23
  - Bundle size: 12MB (without the lazy-loaded WebView assets)

  What I Would Do Differently

  1. Use Expo Modules sooner. I ejected from Expo too early and spent weeks fixing native module issues.
  2. Test on mid-range Android first. I developed on an iPhone 15 Pro and was shocked by Android performance.
  3. Start with a simpler 3D scene. The first version had particle effects and fog. It looked great on my device and crashed on a Samsung A51.

  Source

  The app is free on iOS and Android. If you are building with React Native and Three.js, feel free to reach out with questions.

  Have you tried mixing WebViews with native React Native? I would love to hear about your approach.