Asnoai

An advanced, local-first Notion clone and AI workspace with collaborative tools.

Asnoai is a powerful, local-first, AI-driven Notion alternative designed for personal knowledge management, canvas-based visual thinking, and smart automation. Built entirely with React 19, TypeScript, and Vite, it combines the ease of document editing with structural databases, interactive custom widgets, and native AI integration.

🇬🇧 English • 🇪🇸 Español • 🇨🇳 中文 • 🇯🇵 日本語


---

📖 Table of Contents

• About Asnoai
• Key Features
• Tech Stack
• Directory Architecture
• Quick Start
• License

---

🔍 About Asnoai

Asnoai is a powerful, local-first, AI-driven Notion alternative designed for personal knowledge management, canvas-based visual thinking, and smart automation. Built entirely with React 19, TypeScript, and Vite, it combines the ease of document editing with structural databases, interactive custom widgets, and native AI integration.

All your notes, databases, whiteboards, and tasks are saved directly on your local system using IndexedDB, guaranteeing maximum privacy, offline support, and speed.

---

🚀 Key Features

• 📝 Immersive Notion-like Editor:
  • Infinite Nesting: Nest pages within pages infinitely to construct a rich workspace hierarchy.
  • Slash Commands (/): Create blocks instantly by typing / to open the block-selector popup menu.
  • Rich Block Ecosystem:
    • Basic Content: Headers (H1–H4), Todo Lists, Quotes, Bulleted/Numbered Lists, Toggle Accordions, and Dividers.
    • Interactive Badges: Custom status tags, date pickers, time clocks, user mentions, page links, and inline emojis.
    • Callout Alerts: Informational Callout (Tip), Warning, Danger, and Success boxes to highlight metadata.
    • Advanced Views: In-editor HTML preview sandboxes, case converters, and JSON formatters.
• 🗄️ Structural Interactive Databases:
  • Table View: A spreadsheet-style grid containing custom property fields (Text, Select options, Status, etc.).
  • Kanban Board: Drag-and-drop cards between different progress columns (To-do, In Progress, Complete).
  • Calendar View: Visualize event schedules, milestones, and planning blocks on an interactive calendar matrix.
• 🎨 CanvasFlow Visual Whiteboard:
  • Go beyond text with a full visual design space.
  • Create sticky notes, draw geometric shapes, add text nodes, and connect elements with dynamic lines.
  • Excellent for mind-mapping, system design, brain-dumping, and flowcharts.
• 📊 ChartForge (Data Visualization):
  • Build complex charts directly from your workspace pages.
  • Supports over 50+ chart types including vertical/horizontal Bar charts, line graphs, sparklines, pie charts, doughnut/gauge rings, and multi-variable radar spider-webs.
  • Dynamically configure metrics, datasets, colors, and layout properties.
• 🤖 Intelligent AI Sidebar & Agent Integrations (Asno AI):
  • Integrated Multi-LLM Chat: Connects to OpenAI, Anthropic, and Google Gemini APIs.
  • Context-Aware Assistant: Prompt the AI helper to read your active page content, summarize documents, generate list items, check grammar, or translate text.
  • Composio Integration: Execute workflows with 200+ external tools (Gmail, GitHub, Slack, Airtable, Google Calendar) directly from your workspace.

---

🛠️ Tech Stack

• Framework: React 19
• Language: TypeScript
• Build Tool: Vite 8
• Styling: Vanilla CSS (highly tailored, responsive layout with Nord presets)
• AI Engine: Vercel AI SDK (with OpenAI, Google, Anthropic connectors)
• State & Storage: Custom Context API synced with IndexedDB (Dexie.js / Local Storage)
• Visual Charts: Chart.js (react-chartjs-2)
• Icons: Lucide React

---

🏗️ Directory Architecture

asno/
├── public/              # Static public assets (Favicon, Logo)
├── src/
│   ├── assets/          # Project SVG/PNG image assets
│   ├── components/      # UI components (Whiteboard, Databases, AI, Editor)
│   ├── lib/             # API client wrappers, agent configs, and tool helpers
│   ├── App.tsx          # Primary application layout routing
│   ├── AppContext.tsx   # Global state provider & storage synchronization
│   ├── main.tsx         # App entry point
│   ├── types.ts         # TypeScript interfaces & types definitions
│   └── db.ts            # IndexedDB local storage setup (Dexie hooks)
├── index.html           # HTML document entry
├── vite.config.ts       # Vite bundler configuration
└── package.json         # Scripts and project dependencies

---

⚡ Quick Start

Prerequisites

Make sure you have Node.js installed (v18 or higher recommended).

1. Clone & Navigate

git clone https://github.com/Asno-dev/asno-ai.git
cd asno-ai

2. Install Dependencies

npm install

3. Run Development Server

Start the local server with hot module reloading (HMR):

npm run dev

Open your browser and navigate to http://localhost:5173.

4. Build for Production

Create an optimized production build:

npm run build

Run npm run preview to locally test the production bundle.

---

License

This project is licensed under the MIT License - see the LICENSE file for details.