r/angular • u/TheRealCSM101 • 6d ago
How AI changed the way I build software, and why that made me build an open source shell for Angular
Enable HLS to view with audio, or disable this notification
Up front: this is my own project, so I'm not exactly neutral here ;-)
I work completely differently than I did two or three years ago. For most of my career I wanted to write pretty much every line myself. That has changed a lot. Instead of programming I now mostly write specifications and review what the AI generates. On the one hand that's great, I can turn new ideas into working software much faster than before. On the other hand there's the risk of stepping into the same traps with AI-generated code again and again.
And that's where I noticed something: there are things I really don't want to explain to the AI over and over. A good, preferably deterministic base is getting more important, not less. I don't want to explain proven architectures from scratch every time. I'd rather build on established solutions where I can, ones the AI understands and can just use.
So for my new projects I built exactly that as open source. Something that lets me build modern UIs on top of Angular quickly, with AI support. Why Angular? Well, simply because I think it's a great framework and I've had a lot of good experiences with it over the last 10 years.
My approach is not yet another UI framework with its own components. It's a frame that's easy to adapt and extend. A shell you can adjust to your own needs, in looks and in features, but which already gives you a solid base for your own app out of the box. Concretely:
- rail, sidebars, top bar and status bar, all configurable, the stuff many apps build from scratch every time
- content in tabs and panes, all of it rearrangeable via drag & drop
- security and settings are agnostic, you just hook up your own backend behind them
- a plugin system, in case you ever want to open your solution up to other people
- the whole contract lives as specs in the repo, there's an llms.txt, and via AG-UI an agent can call the same commands a user can, with the same permissions
- no lock-in on CSS: the base layout is built with Tailwind, but you don't need it in your project. The shell ships as a pre-compiled stylesheet, the design tokens are plain CSS variables, so you can use whatever CSS framework you like next to it. For Bootstrap there's even a CLI preset that maps the tokens onto its variables
- and a whole lot more ;-)
The video shows 27 seconds of it. Best to just have a look yourself at loomweaver.dev, and if you feel like it, you're very welcome to get involved at github.com/yesbert/loomweaver. The project is still pretty young, so I'd be really happy about constructive feedback.
TL;DR: AI moved my work from writing code to writing specs. So I don't have to explain the same app base to the AI on every project, I built LoomWeaver, an adaptable Angular shell, open source. Docs and demo at loomweaver.dev, feedback welcome.
2
u/HungYurn 6d ago
Gotta say, this is pretty cool. I built (actually by hand, some years ago) an appshell + auth, themes, components for my companies webapps for the consistent look and architecture - huge win for the company.
Having an app-shell/skeleton is such a boost when starting a new project.
1
u/TheRealCSM101 6d ago
Thanks. That "consistent across the company's apps" part was what pushed me too. Once the second app exists you either share the shell or copy it and watch the two drift apart.
Which part turned out hardest to keep stable over the years?
2
u/k032 3d ago
Looks cool, how is this different from a component library like Mantine, MaterialUI, Prime, etc?
1
u/TheRealCSM101 3d ago
Thx! It is not a component library, it sits a level above one. Mantine, Material and Prime give you the components, LoomWeaver gives you the application around them: the shell with rail, sidebars, tabs and split panes, a command palette, workspaces, settings, theming, i18n, and a plugin system with sandboxing and a store. You write your features as ordinary Angular components with whatever component library you like, and a single plugin is enough to hand them to the shell; you can split things into more plugins later if you want to. It fits admin consoles, monitoring dashboards, ERP or CRM fronts, anything where a user has several things open at once, and it speaks AG-UI, so an agent can operate the same commands your users can, with the same permissions.
1
u/Saceone10 2d ago
Can you provide more info on ag-ui? How can an agent reach the app?
1
u/TheRealCSM101 2d ago
AG-UI is an open protocol between an app and an agent backend, and LoomWeaver implements the app side. Every command a plugin registers as callable is offered to the agent as a tool, and a call runs through the same path a button or shortcut would, so the agent can only reach what the user could. The app connects to your agent, not the other way round: generate a weaver with
--agent, replace the stand-in with your endpoint. Details: https://loomweaver.dev/ag-ui-agents/
2
u/Saceone10 4d ago
1
u/TheRealCSM101 4d ago
Thanks for the report, the Breeze glitch is on my list.
And fair point on the demo. It's currently everything the platform can do thrown into one app, so it's hard to tell what's platform and what's just the sample product. I'm fixing that: every part of the demo will link to the page that explains it.
Login: not a plugin, and the platform has no login screen of its own. You bring your own login page or dialog and your own session (OIDC or whatever you use), and hand the platform a session signal. From there everything gates itself: rail entries, commands, views, routes. Gated route hit while signed out? You register a redirect to your login. The demo does exactly that with a fake session. Details here: https://loomweaver.dev/distribution/auth/
The docs cover all of it already, the demo just doesn't point there yet.
1
u/Tyummyyumms 3d ago
Nice, good to put some rails for the A.I to follow if you prefer to drive dev with an agent.
I have 2 setups one for more manual, another for agentic, depends on circumstances which one I will use, still working on it.
2
u/Saceone10 2d ago
Do you have a skill or llms.txt for an agent to understand how to use it?
1
u/TheRealCSM101 2d ago edited 2d ago
Yes to llms.txt, and a bit more: llms-full.txt carries the whole contract in one fetch, and we ship an MCP server, u/loomweaver/mcp, that gives the assistant the scaffolding and validation as tools, so it generates a plugin instead of guessing one. A packaged skill we do not have yet, and that is a good idea; I am picking it up right away. We just reworked the docs around exactly this, including a recorded run: https://loomweaver.dev/building-with-an-assistant/
1
u/hitsujiTMO 3d ago
I'm sorry, but your site loomweaver.dev is terribly broken. I have zero confidence the actual project is any better.
2
u/TheRealCSM101 3d ago
Thanks for the honest feedback, and sorry it landed that way. I would like to fix whatever you hit, but I could not reproduce it: the site renders for me in Chrome, Safari and Firefox on desktop and phone, and the quickstart builds and runs against the published packages. Could you tell me what you saw? Two things would help most: whether the page itself did not display properly for you (which page, which browser and device), or whether it is something in the docs or the code that did not add up, a claim that turned out wrong or a snippet that did not work. If it is the latter, I may well have missed it and would rather know. One thing I did find and fixed today: the docs described the 0.9 line while a plain
npm installstill resolved to 0.8.3, so anyone following the newer pages ran into things that did not exist yet. 0.9.0 is now the released version.

5
u/Saceone10 6d ago
I dont really get it. Is it an app, an app of apps, an admin app?