Conversational Code Creator

Live demo: https://codepen.io/hchiam/full/NLVQeo

Conversationally create code with this interactive programming interface.

You describe a code instruction, and the interface will ask you questions to implement it.

UPDATE: won't be working on this anymore - see repos like:

Ideas

Maybe this tool could enable even higher-level programming?

Encourage clean code thinking? Think in terms of nouns and verbs to create more declarative code?

Technical Notes

This project uses compromise.js to parse the user input sentence for verbs, nouns, and prepositions.
- Verbs are treated as function names.
- Nouns are treated as variables or parameter names.
- Prepositions can be treated as parameter separators (or as a parameter when there are no nouns, e.g. the "up" in "move up").
To make it easier to generate and edit the output code (especially nested objects and functions), I'm trying this out:
- User input gets turned into functions and variables (treated as objects) stored in one big JS object (instead of relying on lines and line numbers).
- That JS object is used to generate JavaScript code, to be displayed back to the user.
- Since JS objects support nesting, there can be nesting of functions and variables (all treated as objects.
- All variables are initialized as JS objects.

Hello World Example:

User: "say something"

CCC: "What is the initial value of something?"

User: "Hello world!"

This conversation generates this JSON object:

{
  "something": "\"Hello world\"",
  "say": "function(words) { /*uses external library*/responsiveVoice.speak('\"' + words + '\"', 'UK English Male'); }"
}

Which generates this JS code:

// VARIABLES and FUNCTIONS:
let something = "Hello world";
let say = function (words) {
  /*uses external library*/ responsiveVoice.speak(
    '"' + words + '"',
    "UK English Male"
  );
};

// USAGE:
this.resetSharedVariables();
say(something);

Object Creation Example:

User: "fox says words"

CCC: "What is the initial value of words?"

User: "hi"

This conversation generates this JSON object:

{
  "fox": {
    "say": "function(words) { /*uses external library*/responsiveVoice.speak('\"' + words + '\"', 'UK English Male'); }"
  },
  "words": "\"hi\""
}

Which generates this JS code:

// VARIABLES and FUNCTIONS:
let fox = {};
fox.say = function (words) {
  /*uses external library*/ responsiveVoice.speak(
    '"' + words + '"',
    "UK English Male"
  );
};
let words = "hi";

// USAGE:
this.resetSharedVariables();
fox.say(words);

Note: Nouns that have associated verbs (and nouns) are initialized as JS objects.

If we continue the conversation with the code above:

User: "fox mouth eats food"

CCC: "What is the initial value of food?"

User: "pests"

This conversation re-generates this updated JSON object:

{
  "fox": {
    "say": "function(words) { /*uses external library*/responsiveVoice.speak('\"' + words + '\"', 'UK English Male'); }",
    "mouth": {
      "eat": "function(food) { alert(food); }"
    }
  },
  "words": "\"hi\"",
  "food": "\"pests\""
}

Which re-generates this JS code:

// VARIABLES and FUNCTIONS:
let fox = {};
fox.say = function (words) {
  /*uses external library*/ responsiveVoice.speak(
    '"' + words + '"',
    "UK English Male"
  );
};
fox.mouth = {};
fox.mouth.eat = function (food) {
  alert(food);
};
let words = "hi";
let food = "pests";

// USAGE:
this.resetSharedVariables();
fox.say(words);
fox.mouth.eat(food);

Built-in Things to Try:

Try these:

"move to a position" (when you're prompted for a value, enter "top"/"bottom"/"middle"/etc., listed in the if block.)
"say something"
"what does the fox say"

Related Work:

https://github.com/hchiam/code-tutor

hchiam / ccc