The Mist Project: AI and Syntax Integration for 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

22 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.

4 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

6 Likes
10

𝗔𝗜 𝗜𝗡 𝗔𝗖𝗧𝗜𝗢𝗡


Workspace

The Falcon workspace integrates App Inventor Blockly and one way syntax transformation. (With some AI editing abilities, if you got the key)

:tada: kot.ekita.me:8080 (allow http)

Personally, the best way to try it out (by quality & without using API keys)

  • Give ChatGPT the whole Falcon language specification.
  • Give it instructions, broken down into very smaller parts.
  • Paste the generated code in the Falcon workspace.
  • Magic!

During the process, you may encounter temporary pop-up errors in the workspace. You can ignore them (simply close them).

Updates

  1. (May 24, 3:14 PM, IST): Fixes function, or body empty error, while slow typing
7 Likes
11

Astounding!!
:clap: :clap: :clap:

2 Likes
12

This is an awesome project!
I want to try it out, but unfortunately, the link you provided in the first post is not working. I would like to watch it and interact with it :slight_smile:
But based on the amount of progress that's already achieved, I think it will be quite useful, and I also hope it's integrated into AI2 someday.

1 Like
13

This is so cool. :partying_face:

1 Like
14

Fixed it! mist.ekita.me

Do note that this version uses the first version of the transformer (written in Kotlin), and we've already come a long way (a few things were drastically changed)

1 Like
15

Hi friends, sorry I'm not been able to give time to this project, I'm just stuck between too many things (School, SAT prep, other works) and some downs in my life. Wish to get back to this project asap.

6 Likes
17

𝗙𝗔𝗟𝗖𝗢𝗡 𝗧𝗥𝗔𝗡𝗦𝗙𝗢𝗥𝗠𝗘𝗥
ᴀᴜɢᴜꜱᴛ ᴜᴘᴅᴀᴛᴇ

:globe_with_meridians: mist.ekita.me :octopus: GitHub

screenshot
screenshot1920×884 324 KB


Taifun's Bluetooth Chat app example with Falcon Transformer


We have achieved complete 100% directional Syntax ⟷ Block transformation support for all kinds of App Inventor blocks, with a wide range of advancements.

𝗛𝗜𝗚𝗛𝗟𝗜𝗚𝗛𝗧𝗦

  1. Complete bidirectional Syntax—Blockly transformation achieved. Includes added support for generic blocks, events, and helper blocks. :arrow_upper_right: Documentation.

    When you edit the blocks, the changes are reflected in the Mist panel, and vice versa; if you edit the code, the blocks are updated accordingly.

  2. Support for handling empty sockets.

    image
    image1940×578 81.5 KB

  3. Replaced old math converter syntax with math functions.

    image
    image812×170 5.77 KB

  4. A new compute block.

    image
    image1460×278 43.3 KB

  5. Differential merger mechanism, merges two instances of slightly different codes, one written by a human and the other by a machine, into a single output, which preserves the original human formatting.

    image
    image2344×872 90.4 KB

The top left card displays the code written by a human in a specific format, and the top right card displays the code generated by a machine. The only changes between those two cards are the check n ? text and n ? number.

Those two blocks of code are then merged, preserving the human formatting over the machine's.
It's still in the experimental and testing phase; I've only rolled out the modest implementation.

𝗧𝗥𝗬 𝗜𝗧

:globe_with_meridians: mist.ekita.me
(sometimes try with hard reload Ctrl+Shift+R)

There could be bugs that I'm unaware of, most of which I've already fixed.
Please reload the page when:

  • The mist panel stops updating codes
  • When jumping or changing to a new project

The mist panel may not update the code for bad syntax. Please check the console otherwise.

𝗦𝗨𝗠𝗠𝗔𝗥𝗬

We are progressing rapidly, with more than 2700+ lines of code tested and written in a week.

Our next roadmap is to create an independent project analysis tool, something similar to unchive.kodular.io, but with syntax editability powered by the Falcon transformer core.

With the power of syntax editability, it's much easier for one (e.g. power users) to analyse or debug a project posted on the community.

I also strongly believe this is a stepping stone before we implement robust debugging capabilities and a powerful AI integration for App Inventor. (also see AI in Action)

Thank you
Kumaraswamy B G

7 Likes
18

I try this with your given link, when i open 1st time, its ask for login, i go to with 2nd option and where test@example.com already present, then i click login after its redirect this project (below image is show), and i notice on right side it write # Start Coding!. i go to block section, i notice blocks are present but code not generate, i try clrt + f5 for hard reload, but noting happen (website is too slow to loading), again same things write in right side of mist section.

when i click on mist section and type a key, then all blocks disappear. i try to reload again again but it not come. and also some problem, when i drag any block and put any block, it does not generate code. may be i'm wrong to do, i don't know right way.

image
image1922×1082 337 KB

image
image1922×1082 413 KB

19

Hi, please use a different test mail Id (not the default one), and could you please share a simple screen recording demonstrating the problem?