<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: KEI</title>
    <description>The latest articles on DEV Community by KEI (@finn001023cpu).</description>
    <link>https://dev.to/finn001023cpu</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3731290%2F7e6caf57-88df-4dff-8794-cf09ed9aae6c.jpeg</url>
      <title>DEV Community: KEI</title>
      <link>https://dev.to/finn001023cpu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/finn001023cpu"/>
    <language>en</language>
    <item>
      <title>I built a GUI Client for Discord Bots using Electron &amp; React (Open Source)</title>
      <dc:creator>KEI</dc:creator>
      <pubDate>Sun, 25 Jan 2026 11:39:46 +0000</pubDate>
      <link>https://dev.to/finn001023cpu/i-built-a-gui-client-for-discord-bots-using-electron-react-open-source-i8d</link>
      <guid>https://dev.to/finn001023cpu/i-built-a-gui-client-for-discord-bots-using-electron-react-open-source-i8d</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcfi3u0546v4btc4fbujy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcfi3u0546v4btc4fbujy.png" alt=" " width="800" height="467"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hey developers! &lt;/p&gt;

&lt;p&gt;If you code Discord bots, you've probably faced this annoyance:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"I just want to check if my bot can see this channel." "I want to test how this Embed looks without writing a temporary script." "I want to send a message as my bot manually."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The official Discord client doesn't allow you to log in with a Bot Token. For years, we've had to write throwaway scripts just to perform simple interactions as our bots.&lt;/p&gt;

&lt;p&gt;So, I decided to build a solution.&lt;br&gt;
 Introducing OpenBotClient&lt;/p&gt;

&lt;p&gt;OpenBotClient is a desktop application that mimics the Discord UI but authenticates using a Bot Token. It allows you to "log in" as your bot and interact with servers, channels, and users visually.&lt;/p&gt;

&lt;p&gt;It’s open-source, built with Electron + React, and designed to be a lightweight debugger for your bot development workflow.&lt;/p&gt;

&lt;p&gt;Key Features&lt;/p&gt;

&lt;p&gt;I focused on making it feel familiar and safe:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;GUI Login: Just paste your Bot Token (stored securely in memory).

Real-time Messaging: View channels and send messages/embeds as your bot.

Markdown Support: Full rendering for bold, italic, code blocks, and links.

Multi-Server Navigation: Easily switch between all the Guilds your bot is in.

Zero Setup: No Python scripts, no config files. It's a standalone app.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The Tech Stack&lt;/p&gt;

&lt;p&gt;I built this to practice modern desktop development. Here's what's under the hood:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Runtime: Electron (Main/Renderer process architecture)

Frontend: React + TypeScript

State Management: Zustand (for handling messages and user state)

Styling: TailwindCSS (to replicate the dark mode UI)

Build Tool: Vite
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Security First&lt;/p&gt;

&lt;p&gt;One of the biggest concerns with third-party clients is token safety. OpenBotClient is designed with security in mind:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Local Only: Your token never leaves your machine. It is stored in the app's volatile memory.

Open Source: You can audit the code yourself on GitHub to see exactly how the token is handled.

IPC Bridge: I used Electron's contextBridge to securely communicate between the Node.js backend and the React frontend.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Try it out&lt;/p&gt;

&lt;p&gt;I just released v0.1.2, which adds a smoother login flow and multi-language support (English/Chinese).&lt;/p&gt;

&lt;p&gt;You can grab the latest release or check out the source code here:&lt;/p&gt;

&lt;p&gt;GitHub Repository: &lt;a href="https://github.com/finn001023-cpu/-OpenBotClient-" rel="noopener noreferrer"&gt;https://github.com/finn001023-cpu/-OpenBotClient-&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I'd love to hear your feedback! If you find any bugs or have feature requests, feel free to open an issue or drop a comment below.&lt;/p&gt;

&lt;p&gt;Happy coding! &lt;/p&gt;

</description>
      <category>discord</category>
      <category>electron</category>
      <category>react</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
