How can i add auto completion to a browser based editor using monaco

Monaco supports registering an own completion provider. This is a per-language registration, but applies to all editor instances. Call languages.registerCompletionItemProvider with an instance of your provider.

The provider class itself is pretty simply. Something like:

export class CodeCompletionProvider implements languages.CompletionItemProvider {

    public readonly triggerCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ.\\@(".split("");

    public provideCompletionItems(model: ITextModel, position: Position, context: CompletionContext,
        token: CancellationToken): ProviderResult<CompletionList> {

            return {
                incomplete: false,
                suggestions: this.createInternalCompletionItems(replaceRange, model.editorMode),
            };
        }

        return services.getCodeCompletionItems(sourceContext, position);
    }

    public resolveCompletionItem(item: CompletionItem, token: CancellationToken): ProviderResult<CompletionItem> {

        return item;
    }

}

The real work is to generate the completion items. One way is to use my antlr4-c3 code completion core and amend that with logic to create and use a symbol table to provide symbol information.

Highly recommend Mike Lischke's C3 Code completion

Also, see Strumenta Tutorial on using C3 Code completion

There's a bit more to the details than can easily be contained in a StackOverflow answer, but the tutorial is good.

Monaco works with LSP (Language Server Protocol). It should not be hard to find instructions on how to tie an LSP plugin into Monaco. So far as how to do Code completion in a LSP plugin, this tutorial (once again on the Strumenta site) (specifically the “The Basics” section, covers how to tie in to the LSP code completion hooks).