Claude Code mods: setup and email masking tutorial

Learn how Claude Code mods use TypeScript event handlers, load as plugins, and hide email addresses on hover without changing the model's text.

Player not loading? Watch on YouTube

Lydia from Anthropic introduces mods for Claude Code, a coding assistant whose behavior she says can be customized through internal event handlers. Her examples add a live context breakdown above the prompt, list project agents in a side pane, and hide email addresses until the user hovers over them.

The tutorial describes a mod as a plugin with plugin.json and hooks.json files. A modules key in hooks.json points to the TypeScript file containing the mod. Handlers run before Claude Code processes an exposed event, such as a tool call, permission check or message render.

Each handler receives a dollar-sign object for interacting with Claude Code, the event data, and a next function. Passing modified data to next changes what Claude Code does. Returning a result without calling next lets the handler supply its own response.

Lydia explains loading the folder through a plugin directory flag, or through global settings for the desktop app, which does not accept flags. She says the active session picks up saved changes automatically.

The worked example intercepts reply rendering and replaces email addresses with blocks that reveal their text on hover. This masks the display only: the model still has the original address and can use it in a later message. Mods run in a sandbox and can access only the events Claude Code exposes.