OpenKB

Next-Gen AI Agent Platform

View Repo • Live Demo

---

📖 Introduction

OpenKB is a modern, premium interface for designing, configuring, and deploying intelligent AI Agents. Built with a focus on aesthetics and usability, it features a "Glassmorphic" design system and a powerful node-based workflow editor.

✨ Key Features

� Intelligent Agent Orchestration

• Visual Workflow Editor: Drag-and-drop interface to design agent logic (Triggers -> Brain -> Actions).
• Custom Personas: detailed configuration for Agent Role, Description, and System Instructions.
• Multi-Model Support: Switch between advanced LLMs (Gemini, GPT-4o) per agent.
• Tool Integration: Seamlessly connect to Google Drive, Email, and Document Writers.

💎 Premium UX/UI Design

• Unified Glass System: A consistent, high-end "Glassmorphism" aesthetic across the entire app.
• Fluid Interactions: Micro-interactions, hover states, and smooth transitions.
• Adaptive Layouts: Responsive Grid and List views for managing large libraries of agents.
• Direct Chat: Integrated chat interface with rich message bubbling and streaming responses.

📚 Knowledge Management (RAG)

• Asset Library: Centralized table view for uploaded documents and text assets.
• Smart Indexing: (Planned) Automatic vectorization of knowledge assets for Agent context.

---

🏗️ Architecture Guide

OpenKB is built as a Single Page Application (SPA) using modern web technologies.

Technology Stack

• Frontend Framework: React 18
• Language: TypeScript (Strict Mode)
• Build Tool: Vite
• Styling:
  • Tailwind CSS for utility-first styling.
  • Custom Glass utility classes for backdrop-blur and transparency.
  • Lucide React for consistent iconography.
• Routing: React Router DOM
• State Management: React Context API (Provider Pattern)

Project Structure

� openkb
├── 📂 src
│   ├── 📂 components    # Shared UI atomic components (Button, Card, Modal)
│   ├── 📂 features      # Feature-specific logic (Agents, Chat, Knowledge)
│   │   └── 📂 agents    # Agent Workflow Editor & Graph Logic
│   ├── 📂 pages         # Route-level Page views (AgentsPage, SettingsPage)
│   ├── � hooks         # Custom React hooks (useTheme, useAgent)
│   ├── 📂 types         # Shared TypeScript interfaces
│   └── 📂 utils         # Helper functions

Core Concepts

1. Nodes & Edges: The workflow editor uses a custom graph implementation where Nodes (Triggers, Brains, Tools) are connected by Edges. State is managed via the AgentWorkflowEditor component.
2. Glass Theme: The application uses a global background wrapper with localized backdrop-blur overlays to create depth hierarchy (Background -> Card -> Floating Panel).

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/stephenkyaw/OpenKB.git
   cd OpenKB

2. Install dependencies

   npm install

3. Configure Environment Create a .env.local file in the root directory:

   VITE_GEMINI_API_KEY=your_api_key_here

4. Run Locally Start the development server:

   npm run dev

---

🤝 Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any enhancements.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License.