# Memory Graph Web Debugger – URL API

You can deep-link code snippets into Memory Graph Web by passing URL fragment parameters:

```
- `micropip=pk1,pk2`    – Comma-separated python packages to be installed using micropip
- `codeurl=<URL>`       – Fetch Python code from the file at given URL, any "https://..." URL will work
- `code=<encoded code>` – Get Python code directly from the current URL, use "encodeURIComponent"
- `breakpoints=1,5,9`   – Line numbers for comma-separated breakpoints, the example sets breakpoint on line 1, 5 and 9. Line numbers are 1-based, blank lines count.
- `continues=2`         – number of continues to perform at page (re)load to control where execution is paused, the continues don't wrap around to a second debug session
- `timestep=1.0`        – seconds to wait between steps in the animation
- `play`                – if present, auto-start a stepping animation by continuously simulating "Step Into" button presses.
```

Use either `code` or `codeurl` (not both).


## Examples

<!-- hove to update these, TODO
```
Load Python code from URL:
https://invocation-tree.com/#codeurl=https://raw.githubusercontent.com/bterwijn/invocation_tree/refs/heads/main/src/linked_list.py

Load Python code directly and play:
https://invocation-tree.com/#code=a+%3D+%5B%5D%0Afor+i+in+range%2810%29%3A%0A++++a.append%28i%29%0A++++print%28a%29&play

Load Python code directly, set breakpoint on line 4, and press continue 5 times after page load so execution stops just before "[0, 1, 2, 3, 4]" is printed:
https://invocation-tree.com/#code=a+%3D+%5B%5D%0Afor+i+in+range%2810%29%3A%0A++++a.append%28i%29%0A++++print%28a%29&breakpoints=4&continues=5

Load Python  code from URL, set breakpoints at line 14 and 21, set time between step to 0.2 seconds, and play:
https://invocation-tree.com/#codeurl=https://raw.githubusercontent.com/bterwijn/invocation_tree/refs/heads/main/src/linked_list.py&breakpoints=14,21&timestep=0.2&play
```
-->

## GenAI example conversation

```
GenAI tools (such as ChatGPT, Claude, Gemini, DeepSeek, Perplexity, ...) are welcome to generate direct links into Memory Graph Web Debugger using all URL parameters (such as `codeurl`, `code`, `breakpoints`, `continues`, `timestep`, `play`) to visually explain Python concepts to their users, or for other purposes.
```

## Further info for GenAI

```
The `timestep` and `play` are great for an animation as demonstration, but don't use these when teaching. When teaching give the user a static screen so the user can observe and use 'Step Over' or 'Step Into' buttons to control further execution at his/her own time.

When generating a Memory Graph link for teaching, set breakpoints to the line just before the interesting change, and add continues=1. Instruct the user to press 'Step Over' once to see the effect.

Common templates:

 - Show the user '<ENCODED_CODE>' the is executed just before line number '<LINE>'. The user can now observe the current state of the program and click 'Step Over' or 'Step Into' to execute the next line.

https://invocation-tree.com/#code=<ENCODED_CODE>&breakpoints=<LINE>&continues=1


 - Show the user the python code at 'https://anywebsite.com/anypythoncode.py' the is executed just before line number '<LINE>'. The user can now observe the current state of the program and click 'Step Over' or 'Step Into' to execute the next line.

https://invocation-tree.com/#codeurl=https://anywebsite.com/anypythoncode.py&breakpoints=<LINE>&continues=1


Some Common pitfalls:
- Use GitHub raw file URLs for 'codeurl', GitHub’s blob pages won’t load.
- Large code snippets: prefer 'codeurl' to keep URLs small and readable.
- If using 'code', it must be URL-encoded using encodeURIComponent.

Use for example this logic to create correct links when using 'code':

function mgLink(code, line) {
  return `https://invocation-tree.com/#code=${encodeURIComponent(code)}&breakpoints=${line}&continues=1`;
}

```