How do I make the gscript gmail addon demo run?

So I created a new project, via Google Apps Script Welcome Screen ->Gmail add-on

It creates a project with an appscript.json and Code.js, but if you then attempt to run it without making any changes, I get this:

TypeError: Cannot read property 'gmail' of undefined (line 2, file "Code")

this is the contents of Code.js

function loadAddOn(event) {
  var accessToken = event.gmail.accessToken;
  var messageId = event.gmail.messageId;
  GmailApp.setCurrentMessageAccessToken(accessToken);
  var mailMessage = GmailApp.getMessageById(messageId);
  var from = mailMessage.getFrom();

  var openDocButton = CardService.newTextButton()
      .setText("open docs")
      .setOpenLink(
          CardService.newOpenLink().setUrl("https://developers.google.com/gmail/add-ons/"));

  var card = CardService.newCardBuilder()
      .setHeader(CardService.newCardHeader().setTitle("My First Gmail Addon"))
      .addSection(CardService.newCardSection()
          .addWidget(CardService.newTextParagraph().setText("The email is from: " + from))
          .addWidget(openDocButton))
      .build();

  return [card];
}

The comments on the question successfully answer the question. Specifically, I had to select Publish > Deploy From Manifest Then in the dialog that opens, "Install add-on"

Then, next time you open/refresh Gmail, it will run the project as-is. Testing changes is as simple as saving the Code.gs, refreshing the Gmail page and then your addon will show up as if you had installed a regular addon