2026/02/07 TX CSTA Chapters Conference

The latest with MIT App Inventor for AI / data science / physical computing / computational action

https://aif.to/2026-tx-csta

Your Presenter

2

A free open-source web platform that allows anyone to create mobile apps, the most accessible modality for under-resourced communities. Backed by 15 years of research from MIT CSAIL and Google.

​

Engages learners as creators of technology, through computational action.

What is App Inventor?

​

Our Impact

4

27M

200

53%

Used in 11,000+ schools monthly, including 900+/month in the US.

​

​

The App Inventor platform has been translated into

19 languages.

Sustained reach to those most in need, per the IMF and the World Bank.

Learners

Countries &�Regions

Developing�World

💡 AI Adoption Milestone

As of 2025, 1+ million learners have explored AI through building 8+ million AI apps with App Inventor

Education Usage

5

Student-Teacher Ratio of 11.6

The mission of MIT App Inventor

• Democratization of App Development
• Creating tools that positively change young people’s perception of themselves:
• From consumer to creator
• From inefficacy to empowerment
• Promoting Computational Action
• Using the power of computing to make a meaningful social impact

​

Seymour Papert & Constructionism

​

​

​

​

​

​

photo: Cynthia Solomon

6

Our curricula — ethics-first

7

8

UNESCO AI Competency Framework for Students

Guiding Principles

1. Fostering critical thinking in shaping the future of AI
2. Prioritizing human-centred interactions with AI
3. Encouraging environmentally sustainable AI
4. Promoting inclusive access to and development of AI
5. Building core AI competencies for lifelong learning

aif.to/unesco-ai-1pager

This document is available Open Access under the Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0) license.

It is based on CC-BY-SA content from UNESCO: https://www.unesco.org/en/digital-education/artificial-intelligence.

Curriculum

9

https://aif.to/curriculum

MIT App Inventor brief introduction

10

11

Components

Viewer

Properties

Palette

MIT App Inventor Designer

When the Designer is selected ( ), there are four panels available:

• Palette: The palette has drawers for all the available app components — including for user interface, sensors, and the cloud.
• Viewer: The viewer is where you drag and drop the components to create the user interface for your app.
• Components: A tree view of the components added to your app.
• Properties: The properties of the components added to your app. The properties can be changed in the designer and in code.

For a basic introduction to MIT App Inventor, see the HelloCodi tutorial.

12

Code Viewer

Components

(click for blocks)

Procedure / Method

Event

Property mutator

Variable

MIT App Inventor Designer

When Blocks Editor is selected ( ) there are two panels available:

• Components: The components panel shows a tree view of the components added to your app similar to the Designer — with an added Built-in set. Click on any component to access the code blocks for that component. The color of each block indicates what type of block it is.
• Code Viewer: The code viewer is where you arrange and code the block-based code blocks for your app.

For a basic introduction to MIT App Inventor, see the HelloCodi tutorial.

14

Set up your mobile device

15

Setting up MIT App Inventor

• https://appinventor.mit.edu/explore/ai2/setup Set up your mobile device — install MIT AI2 Companion from App Store / Play Store

​

• https://code.appinventor.mit.edu/ Use this anonymous website or connect with a Google (for Education) account with https://ai2.appinventor.mit.edu/.

16

Install MIT AI2 Companion

• Search for MIT AI2 — in the App Store (iOS) / Play Store (Android) on your mobile device
• Install the MIT AI2 Companion — it will have the hexagon bee icon (below)
• Open the MIT AI2 Companion — you should see a blue button that says scan QR code (at right)

17

Let's make some apps!

18

Four projects to explore

https://dcpetty.dev/mit-app-inventor/2026-tx-csta/ (blocked in Texas)

• Doodle — A basic drawing app.
• Map — A basic mapping app that calculates (great circle) distances between locations.
• GoodReader — Use a generative artificial intelligence ChatBot to encourage critical reading skills.
• Journal — A basic journal app crowd-sourced data in a shared Google Sheet.

19

Doodle — starter

• Open starter file: DoodleStarter.aia
• Add drawing code
• Extension:
• Make HorizontalArrangement1 visible
• Add ButtonClear Button
• Add SliderWidth Slider

20

What we learned (continued)

From the starter project in the Designer

• There are typical ways to set up user-interface components in a project.
• Visible components have a visible property that can be used to hide / show parts of the user interface.

​

From the completed project in the Designer

• By default, user-interface components stack vertically, so use a HorizontalArrangement to arrange added components side-by-side and Width: Fill Parent... to space evenly.

From the completed project in the Blocks

• The Canvas component has many procedures for drawing and managing the image. The thumb-position value of a Slider can change the behavior of an app.

​

21

For more details, see the What we learned in the repository.

Doodle — completed

22

Map — starter

• Open starter file: MapStarter.aia
• Add Map1.LongPressAtPoint code to create pins and save them in local variables
• Extension:
• Add infobox code to newly added pin that should:
• Use Any Marker to set EnableInfoBox to true;
• Use Any Marker to calculate DistanceToPoint to the MarkerMcMillen and set Title of the new Marker.

23

What we learned

From the starter project in the Designer

• There are typical ways to set up user-interface components in a project.
• Markers (pins) can be added to Maps in Designer.

​

From the completed project in the Blocks

• Markers (pins) can be added to Maps under programmatic control, but must be kept track of.
• Any Component Blocks can manage properties, handle events, and call procedures of any component with a reference — in this case to manage the infobox window display property.

​

​

24

For more details, see the What we learned in the repository.

Map — completed

25

GoodReader — starter

• Open starter file: GoodReaderStarter.aia
• Add HorizontalArrangement4 & ButtonSubmit
• Add ChatBot1 code and code for ButtonSubmit
• Extension:
• Add ButtonNew
• Add ChatBot1 code for ButtonNew
• Add Screen1.Initialize code for all Buttons

26

What we learned

From the starter project in the Designer

• There are typical ways to set up user-interface components in a project, including using HorizontalArrangements to arrange components side-by-side and Width: Fill Parent... to space evenly. The three HorizontalArrangements each contain a label and a user-interface component to create the prompt for ChatBot1.

From the starter project in the Blocks

• The blocks in the Screen1.Initialize event illustrate several coding idioms in MIT App Inventor, including iteration and the Any component drawer.

From the completed project in the Designer

• The starter code includes components for creating a prompt for ChatBot1 — add HorizontalArrangement4 and components for interacting with ChatBot1.

From the completed project in the Blocks

• Property modifications for every Button can also be added to Screen1.Initialize.
• Property modifications for every Button can also be added to Screen1.Initialize.
• The value of a Slider's thumb position is only visible if displayed.
• The project illustrates several code techniques for smooth interactions with a generative AI ChatBot..

​

27

For more details, see the What we learned in the repository.

GoodReader — completed

28

Journal — starter

• Open starter file: JournalStarter.aia
• Obtain Google Sheets API private-key .JSON file (request)
• Add Spreadsheet1 and ChatBot1 code to:
• Add a row to Spreadsheet1 using the makeRow procedure
• Read all of Spreadsheet1
• Prompt ChatBot1 to summarize Spreadsheet1 data
• Display the summary

Each of those steps is an event initially triggered by ButtonSave.Click

29

What we learned

From the starter project in the Designer

• There are typical ways to set up user-interface components in a project, including using HorizontalArrangements to arrange components side-by-side and Width: Fill Parent... to space evenly.
• This app include a variety of non-visible components for special functions.

From the starter project in the Blocks

• The blocks in the JournalStarter project illustrate several MIT App Inventor coding idioms, including global variables, procedures, and selection.

From the completed project in the Blocks

• Many MIT App Inventor components use the protocol where a component procedure generates an asynchronous event — a two-step process used by Spreadsheet1 and ChatBot1. In this case submitting a journal entry adds a row to Spreadsheet1 → which in turn is queried for all journal entries → which are then submitted to ChatBot1for a summary → whose result is displayed in Label1.

​

30

For more details, see the What we learned in the repository.

Journal

31

Physical Computing?

Come to one of our workshops (aif.to/2026-tx-ppw) this summer!

• 2026/06/17-06/18: Two-day WeTeach_CS Summit 'deep dive' into physical computing with MIT App Inventor & micro:bit in San Antonio
• 2026/06/22-06/25: Four-day WeTeach_CS preferred provider workshop on our curricula — including physical computing — in Waco
• 2026/06/29-07/02: Four-day WeTeach_CS preferred provider workshop on our curricula — including physical computing — in Dallas

Deep Dive and  Preferred Provider Workshops generously sponsored by WeTeach_CS of the TACC.

32

Please complete this survey

33

https://forms.gle/vRxzYqVgyMfeemAD6

Links

34

35

What do you think?

To stay up-to-date on free App Inventor resources & events, visit our website, follow us on social media, or sign up for our newsletter.

Newsletter:

https://aif.to/newsletter