The Mist Project: An Effort to bring syntax and LLM integration to App Inventor

Open Source Development
1

ᴛʜᴇ ᴍɪsᴛᴘʀᴏᴊᴇᴄᴛ

An effort to bring syntax to App Inventor to enable deeper tooling and code analysis

𝗧𝗔𝗕𝗟𝗘 𝗢𝗙 𝗖𝗢𝗡𝗧𝗘𝗡𝗧𝗦

  1. Preface
  2. The Mist Architecture
  3. The Mist Programming Language
  4. The Code Editor
  5. Open Source
  6. About

𝗣𝗥𝗘𝗙𝗔𝗖𝗘

App Inventor originally did not have syntax for its blocks, which made linting or other code analysis harder to implement into the IDE.

Additionally, as the world embraces LLMs for code assistance, App Inventor faces a challenge. LLMs rely on syntax to understand and analyse code effectively.

My research project aims to cut short these disadvantages to envision an App Inventor IDE filled with much better tooling and code analysis.

𝗧𝗛𝗘 𝗠𝗜𝗦𝗧

𝗔𝗥𝗖𝗛𝗜𝗧𝗘𝗖𝗧𝗨𝗥𝗘

image
image4440×1486 284 KB

Engineering of the Mist Architecture


  1. Generic Blockly Transformer

    Written in Kotlin, can transform over 270+ manually mapped unique blocks, from Blockly XML to an intermediate representation for further syntax construction.

    This allows the translation of App Inventor blocks to any programming language i.e. loosely typed (Mist, Python, JS).

  2. Mist Transpiler

    Generates Mist code from the intermediate Blockly representation.
    The syntactical output can then be fed into LLMs for code analysis and assistance.

    Opens up a possibility, where the LLMs generate Mist code that can later be converted into blocks.

  3. Lexer (internal): Performs Lexical analysis on Mist code.

  4. Parser

    Constructs meaningful ASTs (Abstract Syntax Trees) from the Lexical output.

    This allows static analysis techniques to be applied such as:

    • Dynamic Type Resolution: Pre-determining the possible data types, a piece of code or procedure may return to prevent writing code that always fails.
    • Redundancy testing: Identifying redundant codes, such as if-conditions or blocks, that never execute, always execute, always fail or always succeed.

  5. Multi-Platform Execution

    The Mist Programming Language is written in pure Java 7, allowing it to run anywhere! Android, Desktop and even locally in your browser — using technologies such as TeaVM.

    Almost all of the Built-In blocks have been re-implemented in the language, trying to mimic 1:1 behavior. Although distortions are imminent.

𝗧𝗛𝗘 𝗠𝗜𝗦𝗧

𝗣𝗥𝗢𝗚𝗥𝗔𝗠𝗠𝗜𝗡𝗚 𝗟𝗔𝗡𝗚𝗨𝗔𝗚𝗘

Crafted with syntax to suit App Inventor's needs and functional programming style.

Mist is left to right parsed language, i.e. no high precedence operations. !( +- < */ )

Support for blocks at execution:

  1. Fully supported
    Logic, Math, Text, Colors, Lists, Variables, Procedure

  2. Partially supported

    • Control blocks are fully supported, except app specific blocks such as Close Screen, Close App, Get Start Value ... etc.

    • Dictionary blocks are fully supported, but untested for faulty implementations (dictionary walk blocks)

  3. Redundant; Syntax only support

    • Components, Events, and Properties

𝗧𝗛𝗘 𝗖𝗢𝗗𝗘 𝗘𝗗𝗜𝗧𝗢𝗥

The Mist Code Editor and Live testing Environment


The code editor offers live block-to-syntax conversion and a way to live-test non-application blocks on the go. It's a magic Do-It functionality that happens on your browser locally :wink:.

Try it out! :globe_with_meridians: mist.ekita.me

! The server and syntax conversion might be slow depending on where you are in the world.

! This is a constantly evolving project. Trying out the editor is the best way to learn syntax.

A few tips to work with the editor

  • Clicking on the workspace shows only the syntax of top blocks (Global Variables, Procedures, and Events), orphaned blocks are ignored.

  • Do not leave empty sockets, they result in syntax conversion failure.

  • Hold shift to select multiple blocks — to run a procedure, select the procedure itself and the call block.

  • Any manual edits on the editor are discarded.

  • You may run into a few errors while testing, do check out your browser's console.

The syntax conversion happens on the cloud (due to high level Kotlin) and the execution locally on your browser (JS).

𝗢𝗣𝗘𝗡 𝗦𝗢𝗨𝗥𝗖𝗘

The project is licensed under Apache 2.0.

𝗔𝗕𝗢𝗨𝗧

I had a good time working on this project half-summer. I have a lot of ideas in my mind.

Currently, I'm done with the Block Syntax conversion and live testing environment... Eventually, we'd need to do the reverse (Syntax to Block conversion), which would be a step closer to LLM integration and linting.

Need to also balance other of my work... Let's see how far we can get this summer before my pre-university (high school) starts.

Thank you
Built with Love and Passion

Kumaraswamy B G
a 17 year old

15 Likes
2

@Kumaraswamy this is an awesome project. You have come a long way since you joined the community almost 5 years ago.

3 Likes
3

I'm very impressed! Congratulations!
Taifun

2 Likes
4

Impressive!

1 Like
5

I'm experimenting with a new transformer written in Golang, that compiles to WebAssembly to run directly on the client side. This helps to reduce overhead.

Screenshot From 2025-05-12 17-39-48
Screenshot From 2025-05-12 17-39-481370×710 97.1 KB

Screenshot From 2025-05-12 17-40-59
Screenshot From 2025-05-12 17-40-591281×394 44.2 KB

It has a better live coding support with ability to mark empty sockets.

3 Likes
6

What is the motivation to use golang versus using a framework like treesitter?

7

Hi Evan, the project originally consists of two main parts

  • Blockly Transformer and Mist Code Generator - written in Kotlin for technical flexibility
  • Mist Syntax Parser, and Runtime - written in Pure Java 7 for portability

The motivation to write the Syntax Parser and the Runtime in Java 7 was to keep it as lightweight as possible without any dependency. This allows it to run anywhere - Desktop, Android and even on Web.

We use TeaVM to compile Java Bytecode to JS. For this, we need to keep the project as simple/lightweight as possible (avoid new Java/Kotlin features, or libs that may complicate the process).

Additionally, I've been writing my own Parsers for quite a few years now. So I'm pretty comfortable setting things up quickly in a matter of two or three days.

The problem with having the Blockly Transformer and Code Generator written in Kotlin is that we need to host it on a Server. The technical nature of it makes it complected to run 'em on the client's side.

I was looking to rewrite them in a language that can compile to WebAssembly, that also has a good XML Parsing support. I discovered Go. It has a robust in-built XML Parser (You define data structs to parse XML). So in a matter of two days, I got the Blockly Transformer and Code Generator completed and written in Golang.

8

𝗧𝗛𝗘 𝗙𝗔𝗟𝗖𝗢𝗡 𝗧𝗥𝗔𝗡𝗦𝗙𝗢𝗥𝗠𝗘𝗥
ᴀ ɴᴇᴡ ʙʀᴇᴀᴋᴛʜʀᴏᴜɢʜ


Demonstration of the Falcon transformer.
A simple fib function, followed by two examples of complex list manipulation and logical expressions, taken from an official App Inventor tutorial.



:star: Falcon — a syntax-to-block transformation engine. Soon it'll be the very core of the syntax-block bi-directional transformer.

Currently, it has a full 1:1 syntax support for all the in-built blocks.

I've designed a new version 2 Mist syntax, that further adapts to App Inventor's unique nature and requirements. The design — influenced by many good elements of various languages ( Simplicity of Python, Transformers from Kotlin, with style of Golang)

But we've got a long way to go — I'm designing the syntax in a way i.e. easier for humans and feasible for LLMs to consume ( without reinventing a lot of stuff ).

This requires us to build a smart chain of architecture that'd involve complex parsing and mapping techniques (type resolution, flow predictions) — and we are just starting.

I'll be sharing a live version of the implementation as adequate resources (e.g. documentation) and other technical requirements are satisfied.

Thank you
Kumaraswamy B G

4 Likes