Vibebox

Your inbox + vibes.

System Overview

Architecture

Backend stack

• Node.js
• Express
• TBD KV store (via express-session compatible API)

Frontend stack

• Next.js
• React
• Tailwind CSS

User flow

Client UI

Setup

Prerequisites

• Node.js v20+
• npm v10+
• Nylas account
• OpenAI account
• Hugging Face account
• Ollama installed and running locally

Setup steps

1. Clone the repository

git clone git@github.com:nylas-samples/vibebox.git

2. Setup server

Install server dependencies:

cd backend
npm install

Write the following environment variables to a .env file in the backend directory:

# .env
NODE_ENV=dev
CORS_ORIGIN=http://localhost:3001
APP_DOMAIN_DEV=http://localhost:3001
APP_DOMAIN_PROD= # Not needed for local development
APP_NAME=Vibebox
NYLAS_CLIENT_ID= # Get from dashboard-v3.nylas.com
NYLAS_API_KEY= # Get from dashboard-v3.nylas.com
NYLAS_API_URI=https://api.us.nylas.com
OPENAI_API_KEY= # Get from OpenAI
HUGGINGFACE_API_KEY= # Get from Hugging Face
EXPRESS_SESSION_SECRET=

Start the server:

npm start

Serves on http://localhost:3000.

3. Setup client

Install client dependencies:

cd frontend
npm install

Start the client:

npm run dev

Serves on http://localhost:3001.

Resources for further learning

• Syntax FM: Local AI Models in JavaScript - Machine Learning Deep Dive with Xenova
  A podcast episode that delves into using local AI models with JavaScript, featuring a deep dive into machine learning with Xenova.

• Nylas Fireside Chat with OpenAI
  Insights and discussions on AI advancements and applications with Open AI's Evan Morikawa and Nylas Co-Founder & CTO Christine Spang.

• Stack Overflow Blog: Building GenAI Features in Practice with Intuit Mailchimp
  A podcast discussing practical experiences in building generative AI features.

• Nylas: Developer's Guide to Generative AI
  A guide for developers on the implementation and integration of generative AI.

• Coding with Nylas: AI-related video
  Nylas Developer Advocates Ram and Blag talk about how to use AI to generate email responses using open-source models from Hugging Face.

• Ash Ryan: Experimenting with AI in DevRel
  A framework for exploring AI in Developer Relations.

• Ash Ryan: DevRel & AI as Department Lead
  A DevRel lead's self report card on a year of using AI in Developer Relations.