It all started from a simple frustration: every time I needed to ask an AI something quickly, I had to stop what I was doing and open a browser tab. It might not sound like much, but those little context switches kept breaking my flow.
At first, I built something just with Copilot. But I soon realized my day-to-day needs were more diverse, I use Claude for programming, Perplexity for search, and sometimes I just want a quick translator. That’s when I decided to turn this into a multi-agent desktop app, built to work the way I do.
Why Electron?
I primarily work on Windows, though I also use Linux, so I needed a cross-platform solution. I chose Electron for its flexibility and paired it with Svelte, TailwindCSS, and Vite-Electron. Vite made dev setup fast and clean, which I really appreciated.
I already had experience with Svelte, though I was a bit unsure about how well it would pair with Electron. Thankfully, the integration was smooth, Svelte’s reactivity made it easy to handle UI updates based on the main process events without any extra hassle. That said, communicating between the system process and renderer is still a bit tedious, but doable with some IPC.
WebViews vs BrowserViews
I started out with BrowserWindow, it's very powerful to handle on the main process, but its limitations in layout flexibility pushed me toward WebView. With WebView, you could inject content and more important layer UI elements, and modify details for each request like the User Agent (That turned out to be crucial getting through Google Auth or dealing with Cloudflare’s CAPTCHA headaches wasn’t easy.)
<webview
use:webviewRef={chat.url}
src={chat.url}
nodeintegration
allowpopups
webpreferences="spellcheck=1, contextIsolation=1"
style="background-color: {$appConfig.darkTheme ? chat.bgColorDark : chat.bgColor};">
</webview>
Cross-platform builds
To generate builds for Windows, Linux, and macOS, I used GitHub Actions. Automating the compilation helped me focus more on coding and less on wrangling environments. Electron might get some flak, but for this kind of desktop app where native integration needs were minimal, it worked great.
That said, features like System Tray support and custom window animations were a bit tricky to get right, especially because behavior differs across operating systems and desktops. Sadly, all this "cross-platform" stuff sounds goods on papers, but you end at making a lot of tweaks for each target operating system.
AI Providers Integration
The other core idea behind the app was avoiding third-party AI service APIs. I wanted users to log in with their own accounts directly, with no middleware server in between. That way, there’d be no usage limits from my end, and I wouldn’t have to manage backend infrastructure.
I also wanted the app to work with local AI assistants. While I could have built a custom interface and connected via an API, for this first version it felt more practical to keep the current implementation and integrate tools like Open WebUI or LibreChat. These already offer a polished interface and robust support for local models, many of which now handle images, multi-agent logic, and advanced workflows out of the box.
Pricing and maintenance
At first, I considered making SidekickBar open source. But over time, I’ve learned how challenging it can be to maintain open projects as they grow, especially in your free time. So with this one, I decided to try a freemium approach: the app is completely free to use with up to two simultaneous assistants and 15 AI providers. To unlock unlimited assistants and full access to all current and future AI providers, there’s a one-time license.
I truly hope SidekickBar proves useful and helps you stay in the zone, working without interruptions. Also, if this post served as motivation for you to build your next project with Svelte or Electron, I am more than happy.
Here I share the link to the application so you can take a look at it. Feel free to try it out, share your feedback, or suggest new ideas.
See you in the next one.
Top comments (0)