The problem it solves

When you're building or testing a pay-per-request API with MPP TestKit, you're juggling a few moving parts at once:

• mppFetch auto-creates a wallet, airdrops SOL, intercepts the 402, pays, and retries
• createTestServer auto-generates a recipient keypair
• mpp.charge({ amount: "0.001" }) gates a route and charges that amount per verified request

All of that is invisible in the code itself. You have to keep the mental model in your head, or scroll to the docs. The extension makes it visible inline — the same way TypeScript shows inferred types.

Installation

From the VS Marketplace

Search MPP Payment Flow Hints in the Extensions panel (Ctrl+Shift+X), or:

ext install mpptestkit.mpp-payment-hints

From source

git clone https://github.com/mpptestkit/mpptestkit
cd packages/vscode-extension
npm install
npm run compile

# Package and install locally
npm install -g @vscode/vsce
vsce package --no-dependencies
code --install-extension mpp-payment-hints-0.1.0.vsix

Requires VS Code 1.75+ and editor inlay hints enabled (editor.inlayHints.enabled).

What you see

Every MPP SDK call gets a small inline label right after the opening (. Here's what each one shows:

mppFetch

const res = await mppFetch( ⬡ 402 flow: wallet → pay → retry  "http://localhost:3001/api/data");

This call does a lot: creates a wallet, requests an airdrop (devnet/testnet), hits the URL, intercepts the 402, sends a SOL transfer, and retries with the Payment-Receipt header. The hint makes that whole flow visible at the call site.

createTestClient

const client = await createTestClient( ⬡ auto-wallet · airdrop  {
  network: "devnet",
  onStep: (step) => console.log(step.type, step.message),
});

Reminds you that this call generates an ephemeral Solana keypair and funds it via airdrop — no wallet setup needed on devnet/testnet.

client.fetch

const res = await client.fetch( ⬡ handles 402 automatically  "http://localhost:3001/api/data");

Same flow as mppFetch, but on a pre-created client with a reused wallet.

mpp.charge — extracts the SOL amount

app.get("/api/data",
  mpp.charge( ⬡ 0.001 SOL per request  { amount: "0.001" }),
  (req, res) => res.json({ data: "premium content" })
);

The extension reads ahead in the document to find amount: "X" and shows the actual value in the hint. If no amount is found (e.g., the argument is a variable), it falls back to ⬡ SOL payment required.

createTestServer

const mpp = createTestServer( ⬡ auto-recipient wallet  );

Confirms that the server auto-generates a recipient keypair. Useful when you're debugging which address is receiving payments.

How it works

The extension registers a vscode.InlayHintsProvider for TypeScript, JavaScript, TSX, and JSX files. On each document change, it scans the document text for the five patterns above and places hints at the offset immediately after the opening ( of each call.

class MppInlayHintsProvider implements vscode.InlayHintsProvider {
  provideInlayHints(document: vscode.TextDocument, range: vscode.Range) {
    const text = document.getText();

    // Only activate in files that use mpp-test-sdk
    if (!text.includes("mpp-test-sdk")) return [];

    const hints: vscode.InlayHint[] = [];

    for (const pattern of PATTERNS) {
      pattern.regex.lastIndex = 0;
      let match: RegExpExecArray | null;

      while ((match = pattern.regex.exec(text)) !== null) {
        const pos = document.positionAt(match.index + match[0].length);
        if (pos.isBefore(range.start) || pos.isAfter(range.end)) continue;

        const label = pattern.getLabel(match, text);
        const hint = new vscode.InlayHint(pos, " " + label + " ", vscode.InlayHintKind.Type);
        hint.paddingLeft = true;
        hints.push(hint);
      }
    }

    return hints;
  }
}

The extractChargeAmount helper looks ahead up to 200 characters from the ( to find amount: "X":

function extractChargeAmount(text: string, offset: number): string {
  const snippet = text.slice(offset, offset + 200);
  const m = /amount\s*:\s*["']([0-9.]+)["']/.exec(snippet);
  return m ? m[1] : "";
}

This handles same-line and next-line argument layouts without needing a full AST.

Activation

The extension activates lazily — only when you open a TypeScript or JavaScript file. If the file doesn't import from mpp-test-sdk, no hints are computed at all (controlled by the showOnAllFiles setting).

"activationEvents": [
  "onLanguage:typescript",
  "onLanguage:javascript",
  "onLanguage:typescriptreact",
  "onLanguage:javascriptreact"
]

Settings

Open VS Code settings (Ctrl+,) and search MPP:

Or set them directly in settings.json:

{
  "mpp.hints.enabled": true,
  "mpp.hints.showOnAllFiles": false,
  "editor.inlayHints.enabled": "on"
}

The broader picture

The extension fits into the MPP TestKit toolchain alongside the CLI:

# Test a live endpoint from the terminal
npx mpp-test-cli https://api.example.com/data

# See the payment flow in your editor as you write the code
# → extension shows hints inline

• CLI (mpp-test-cli) — fire-and-forget endpoint testing from the terminal
• VSCode extension — ambient context in your editor as you write integration tests or server code

Both activate only when you're working with mpp-test-sdk so they stay out of the way otherwise.

Links

• VS Marketplace: MPP Payment Flow Hints
• GitHub: mpptestkit
• npm: mpp-test-sdk
• npm: mpp-test-cli
• mpptestkit.com — live playground