Confluence

Multiple views are available for code, agent, and split, depending on wether you want to interact with the query document directly.

Front end is developed using Next, mostly for SSR on initial load, the application is primarily a client side React application.

The code document is powered with CodeMirror (what repl.it uses), but is running a custom syntax language. The syntax is defined using the lezer grammar and lezer parser in order to enable syntax highlighting and language features.

There is a custom agent with functions to interface with the document, look up query syntax in the autocomplete lib, and access data from the database directly. This empowers the agent to perform complex natural language queries like, "show me items like this item", or "improve my query by omitting items like this that don't belong."