Modular plugins to switch backends?

[jtpio]

Thanks for working on this extension and sharing it!

Over on https://github.com/jupyterlite/ai we are currently exploring ways to enable frontend-driven AI features and were thinking it would be great if this extension could also be use there.

The idea would be to be able to reuse some of the plugins, such as the diff viewer and the wand cell toolbar icon, but using a different backend for the AI part (in browser or remote).

Currently it looks the jupyterlab-magic-wand extension relies on a server extension, for example for generating the diff with nbdime:

https://github.com/Zsailer/jupyterlab-magic-wand/blob/027bee2b40aeb9ed58d8866a2526c0ddfa9b82dc/jupyterlab_magic_wand/agents/lab_commands/show_diff.py#L4

Since there is no server in the case of JupyterLite, maybe one approach could be to move features to separate plugins, so they could be swapped by other implementations if desired. For example one could use the diff JavaScript library instead of nbdime running on the server.

[jtpio]

Oh, just realized some of the components are already available as separate extensions, which is nice!

• https://github.com/Zsailer/jupyterlab-cell-diff
• https://github.com/Zsailer/jupyterlab-cell-input-footer

Will have a closer look to learn more on how they all fit together.

[Zsailer]

Hey @jtpio! Absolutely! I'd love to remove the round trip to the server for diffing. There are likely many client-side only tools for this, but I haven't had the chance to dive in. nbdime was just the easiest route for me in the near term :)

[Zsailer]

Also, "pending" buttons in JupyterLab toolbars is another thing I worked out as part of this work: #3

This might be worth upstreaming somewhere too.

[jtpio]

So #5 should already help isolate the part making the request to the server extension.

This allows replacing the jupyterlab_magic_wand:magic-provider plugin by another implementation, in a different extension.

As an example, a custom plugin that would always suggest the print('Hello, World!') same content:

const magicProviderPlugin: JupyterFrontEndPlugin<IMagicProvider> = {
  id: 'custom-magic-provider',
  autoStart: true,
  provides: IMagicProvider,
  activate: (app: JupyterFrontEnd): IMagicProvider => {
    console.log('@jupyterlite/ai magic provider plugin activated');
    const events = app.serviceManager.events;

    return {
      magic: async (
        cellId: string,
        codeInput: string,
        content: PartialJSONValue | undefined
      ) => {
        const tmpCode = "print('Hello, World!')";

        events.emit({
          schema_id: 'https://events.jupyter.org/jupyter_ai/magic_button/v1',
          version: '1',
          data: {
            agent: 'Magic Button Agent',
            input: codeInput,
            // @ts-expect-error: TODO
            context: {
              cell_id: cellId,
              content
            },
            messages: [tmpCode],
            commands: [
              {
                name: 'update-cell-source',
                args: {
                  cell_id: cellId,
                  cell_type: 'code',
                  source: tmpCode
                }
              }
            ]
          }
        });
      }
    };
  }
};

jupyterlab-magic-wand-custom-magic-provider.mov

[jtpio]

For the diff, it may be a bit more challenging to get it to work in the browser without the round-trip to the nbdime server extension, since jupyterlab-cell-diff expects a IDiffEntry here: https://github.com/Zsailer/jupyterlab-cell-diff/blob/03cbfe4a4df252521814fbe7053a8ce42224beef/src/command.ts#L12

Or the in-browser differ would need to produce a diff in the same format as nbdime.