BotClienty
Modern web client for Discord bots. Connect with your bot token, browse servers and channels, view messages with embeds and attachments, and send messages directly. Clean UI inspired by the official Discord app.
Install / Use
/learn @aMathyzinn/BotClientyREADME
✨ Features
<div align="center"> <table> <tr> <td align="center" width="33%"> <img width="48" height="48" src="https://img.icons8.com/?size=100&id=Kp3rKjBdoB5B&format=png&color=228BE6" alt="Security"/> <br/> <b>🔐 Secure Authentication</b><br/> <sub>Connect with bot token without third-party data sharing</sub> </td> <td align="center" width="33%"> <img width="48" height="48" src="https://img.icons8.com/fluency/48/1E3A8A/lightning-bolt.png" alt="Real-time"/> <br/> <b>⚡ Real-time Updates</b><br/> <sub>Messages and sending with instant updates</sub> </td> <td align="center" width="33%"> <img width="48" height="48" src="https://img.icons8.com/fluency/48/1E3A8A/layers.png" alt="UI"/> <br/> <b>🎨 Discord-inspired UI</b><br/> <sub>Dark, responsive and modern layout</sub> </td> </tr> </table> </div>🌟 Core Capabilities
<div align="center">| Feature | Description | Status | |---------|-------------|--------| | 🔐 Token Authentication | Securely connect to your bot | ✅ Ready | | 📱 Responsive Layout | Desktop / Tablet / Mobile support | ✅ Ready | | 🎨 Modern Dark Theme | Refined dark visual experience | ✅ Ready | | ⚡ Real-time Updates | View and send messages instantly | ✅ Ready | | 🖼️ Rich Content Support | Embeds, attachments and media | ✅ Ready | | 🚀 Next.js Performance | Optimized build and static export | ✅ Ready |
</div>🎬 Preview
<div align="center">🔑 Authentication Screen
<img src="./public/screenshot-token.png" alt="Login Screen" width="100%">Clean and straightforward bot token authentication
💬 Chat Interface
<img src="./public/screenshot-chats.png" alt="Chat Interface" width="100%">Navigate guild tree, view embeds and attachments in real-time
📱 Responsive Design
<img src="https://via.placeholder.com/800x200/0F172A/1E3A8A?text=Mobile+%7C+Tablet+%7C+Desktop" alt="Responsive Design" width="100%"> </div>Adaptive UI with consistent typography and spacing
🚀 Quick Start
<div align="center">Prerequisites
<img src="https://img.shields.io/badge/Node.js-18+-1E3A8A?style=for-the-badge&logo=nodedotjs&logoColor=white&labelColor=0F172A" alt="Node.js 18+"> <img src="https://img.shields.io/badge/npm-8+-1E3A8A?style=for-the-badge&logo=npm&logoColor=white&labelColor=0F172A" alt="npm 8+"> </div># Check your versions
node --version # 18.x or higher
npm --version # 8.x or higher
Installation & Setup
# 1️⃣ Clone the repository
git clone https://github.com/amathyzinn/botclienty.git
cd botclienty
# 2️⃣ Install dependencies
npm install
# 3️⃣ Start development server
npm run dev
# 4️⃣ Open in browser
# http://localhost:3000
🏗️ Production Build
# Build for production
npm run build
# Artifacts in ./out ready for static hosting
npm run export
📖 Usage Guide
<div align="center">Getting Your Bot Token
</div>- Visit the Discord Developer Portal
- Create a new application or select an existing one
- Navigate to the Bot section
- Generate or copy your bot token
- ⚠️ Never share your token publicly
Application Flow
graph TD
A[Enter Bot Token] --> B[Authenticate]
B --> C[Load Servers]
C --> D[Select Server]
D --> E[Choose Channel]
E --> F[View Messages]
F --> G[Send Messages]
G --> H[View Embeds & Media]
🔒 Security Best Practices
| ✅ Do | ❌ Don't | |-------|----------| | Store tokens locally only | Share tokens publicly | | Use environment variables | Commit tokens to git | | Regenerate if compromised | Use tokens in client-side code | | Follow Discord ToS | Abuse rate limits |
</div>🛠️ Tech Stack
<div align="center"> <table> <tr> <td align="center"> <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white" alt="Next.js"> <br><sub>React Framework</sub> </td> <td align="center"> <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=0b0b0b" alt="React"> <br><sub>UI Library</sub> </td> <td align="center"> <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"> <br><sub>Type Safety</sub> </td> <td align="center"> <img src="https://img.shields.io/badge/Discord_API-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord API"> <br><sub>Bot Integration</sub> </td> </tr> </table> </div>Architecture Overview
Frontend (Next.js + React + TypeScript)
↓
Discord API Integration
↓
Real-time Message Handling
↓
Responsive UI Components
📁 Project Structure
botclienty/
├── 📁 app/ # Next.js App Router
│ ├── 🎨 globals.css # Global styles & theme
│ ├── 📄 layout.tsx # Root layout component
│ ├── 🏠 page.tsx # Main page component
│ └── 📁 api/ # API routes
│ └── 📁 discord/ # Discord API integration
├── 📁 public/ # Static assets
│ └── 🖼️ logo.webp # Application logo
├── ⚙️ next.config.js # Next.js configuration
├── 📦 package.json # Dependencies & scripts
├── 🔧 tsconfig.json # TypeScript configuration
└── 📖 README.md # This file
🎨 Design System
<div align="center">🎭 Color Palette
</div>/* Dark Blue Theme */
:root {
--primary-bg: #0F172A; /* Main background */
--secondary-bg: #1E293B; /* Cards/panels */
--accent-blue: #1E3A8A; /* Primary accent */
--accent-light: #3B82F6; /* Light blue accent */
--accent-dark: #1E40AF; /* Dark blue accent */
--text-primary: #F8FAFC; /* Primary text */
--text-secondary: #CBD5E1; /* Secondary text */
--hover-bg: #334155; /* Hover states */
--border-color: #475569; /* Borders */
--success-color: #10B981; /* Success states */
--error-color: #EF4444; /* Error states */
--warning-color: #F59E0B; /* Warning states */
}
🔤 Typography Scale
/* Inter Font Family */
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Type Scale */
--text-xs: 0.75rem; /* 12px - Small labels */
--text-sm: 0.875rem; /* 14px - Body small */
--text-base: 1rem; /* 16px - Body */
--text-lg: 1.125rem; /* 18px - Large body */
--text-xl: 1.25rem; /* 20px - Small headings */
--text-2xl: 1.5rem; /* 24px - Medium headings */
--text-3xl: 1.875rem; /* 30px - Large headings */
--text-4xl: 2.25rem; /* 36px - Extra large */
🔒 Security & Privacy
<div align="center">| Security Feature | Implementation | |------------------|----------------| | 🔐 Local Token Storage | Tokens stored locally, no third-party sharing | | 🌐 HTTPS Only | All API calls use secure HTTPS connections | | 🚫 No Data Collection | No external data collection or analytics | | 💾 Client-side Only | All data remains on your device | | 🔄 Token Rotation | Support for easy token regeneration |
</div>Privacy Commitment
- ✅ No tracking - We don't track your usage
- ✅ No analytics - No third-party analytics services
- ✅ No data sharing - Your bot data stays with you
- ✅ Open source - Full transparency in our code
🧩 Customization
Theme Customization
// theme.config.ts
export const customTheme = {
colors: {
primary: '#1E3A8A',
secondary: '#3B82F6',
background: '#0F172A',
surface: '#1E293B',
},
borderRadius: {
sm: '0.375rem',
md: '0.5
Related Skills
imsg
339.5kiMessage/SMS CLI for listing chats, history, and sending messages via Messages.app.
node-connect
339.5kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
83.9kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
discord
339.5kDiscord ops via the message tool (channel=discord).
