Please help with assessing if Eclipse Theia would be suitable platform to build a diagram from code generator tool with AI assistant.

[SimplyProgrammer]

Hello

I am a part of a small group and we are choosing an framework/platform for our Web IDE project. I would appreciate if some that knows the Theia platform well could help with evaluating if it would be suitable for something like this. What we would like to achieve is:

• Web IDE hosted in cloud (remote or on premise) that would act as almost perfect substitute for a standalone installed IDE. This means that is should be capable of storing the project in cloud or cloning it from git. Subsequently setting it up, for example npm i and npm run dev should be all performed on a server. In run dev case it should also be able to start the developed web app on the server and expose it on a served port (Like when I go to IP:Port, I should see the served web app). All of this would likely be self hosted in a lightweight standalone containers/VMs.
• It should provide a toolkit/mechanism for rendering/generating diagrams (preferably apparatus with capabilities comparable to React Flow, or similar library) from a TSX/JSX React code.
  Our particular use case is visualizing/documenting states of React components with the state diagrams. Allow me to explain it on a example:
  Picture that we have a React component that looks like this, simple form with couple state variables (useStates) which is what we want to visualize.
  The resulting diagram could look something like this:

(^ this is highly conceptual but hopefully it presents the point)

• It should provide a solid AI integration apparatus (preferably of comparable strength to AI SDK), preferably with ability to integrate any existing model. Crucially, it should have an access to the code itself and most importantly to the generated state diagram as well. It should be able to analyze it, evaluate it, explain what each part is and does, and also suggest possible improvements that could be performed (if the model should take both diagram and the code as an input/source of information is yet to be decided but possibility for both would be great.)
  

Eclipse Theia seem really promising for something like this, it is open-source modern, actively developed with growing community, seemingly well established editor that is aiming directly for the future. On top of that, it already comes with many things we like (monaco editor, working code editing, git integration etc.)
I have watched many of your yt vids and based on them it looks like all what I have mentioned should be supported exactly as needed as Theia seems to be cloud and AI centric. AI integration is supported with Theia AI integration and diagraming with GLSP right? However devil is in the details and I would love someone to provide me help if something like this would be really possible with Theia, I would also really like to have some guiding materials explaining how something like this could be implemented. Some more detailed explanation about how components like GLSP or Theia AI work, are implemented and could be used (docs on main page for Eclipse Theia goes over these concepts a bit too high level...)?

I am using Eclipse Theia Guide GPT and he also tells me that much of what I want should be possible. Question is, how much is his info is up to date and how much I can trust him?

I would appreciate any form of constructive help.
Thank you!

[planger]

Hi,

from what you describe, Theia seems like a great fit for your use case. Below, I'll map your requirements to what Theia (and friends) already gives you in more detail.

As a general overview of how Theia can be adopted for similar requirements (diagrams, AI, models), there was also a great, recent TheiaCon talk by CrossBreeze, showing an AI-powered modeling tool built on Theia, integrating textual + graphical views and AI assistance.

Web IDE in the cloud with “real IDE” behavior

Yes, Theia supports exactly this kind of setup. A Theia app can be packaged as a browser IDE or an Electron desktop IDE with basically the same codebase, the difference is only packaging. In the web setup, the UI runs in the browser, while all workspace access and tools (npm/yarn/pnpm, git ops, language servers, compilers, parsers, etc.) run on the backend server. So cloning repos, running npm i, starting npm run dev, and exposing a port from that backend is the normal model.

If you want managed cloud workspaces (per user, per repo, ephemeral, etc.) on Kubernetes, you can have a look at Theia Cloud as a base framework. It handles orchestration and lifecycle of Theia backends/containers for users.

Diagram editor

You’ve got two good paths, and Theia doesn’t force your hand:

• Custom editor from scratch: Theia lets you build arbitrary custom editors. So you can embed something like React Flow directly and own the whole rendering and interaction model inside a Theia widget/editor. This is straightforward if you want maximum freedom, but you need to implement the whole solution end-to-end from scratch, including rendering, diagram editor interaction (e.g. undo/redo, save), frontend/backend communication, backend logic, etc.

• Eclipse GLSP: If you want a diagram editing framework that already provides more basic diagram editor capabilities and matches Theia’s client/server architecture, GLSP is a very natural fit. GLSP has native Theia integration, so you get already a native Theia diagram editor base, an extensible default protocol, diagram editor UI interactions, command stack, etc. Where needed, you can implement your custom SVG rendering on the client, and your diagram logic + model generation on the server. See the GLSP website for more information. There is also a project template for GLSP and Theia to get you started quickly.

AI integration that can work with your tool, including code and diagrams

Theia AI gives you a flexible platform for integrating AI natively into your custom IDE:

• reusable UI components, such as an extensible AI chat
• pluggable LLM providers (OpenAI, Anthropic, Azure OpenAI, self-hosted models, etc.),
• many extension points for custom rendering in chat responses, variables for context injection, prompt management,
• and an agent framework so you can build purpose-specific agents that tools you expose to interact with your IDE, its editors, etc. See the Theia AI documentation for more information.

Here is also a video on integrating Theia AI with custom editors, such as diagrams:
https://www.youtube.com/watch?v=BdYoBTd1bf0

I hope this helps as a starting point. Let us know if you have any questions!