Brew

AI-powered commonplace book for your notes

Brew is a PWA (Progressive Web App) that helps you capture, organize, and evolve your ideas through AI-assisted "brewing" of notes. Think of it as a modern commonplace book where your notes are analyzed, connected, and enhanced by AI.

Features

Core Concepts

• Notes - Your original thoughts and ideas
• Projects - Folders to organize related notes
• Brews - AI-powered processing rules that analyze and enhance your notes

Key Features

• Smart Brewing - AI analyzes your notes to provide suggestions, connections, and insights
• Context-Aware Chat - Chat with AI about specific notes or entire projects
• Stumble/Explore - Discover content suggestions based on your interests
• 15 Default Brews - Pre-configured brewing rules for various use cases:
  • Deep Research
  • Planner
  • Learner
  • Ideation
  • Brainstorming
  • Business Ideas
  • Summarizer
  • Critic
  • Connector
  • Writer
  • Action Items
  • Questions
  • Storyteller
  • Devil's Advocate
  • Simplifier

Navigation

• Home - Featured projects, AI suggestions, and recent notes in Pinterest-style layout
• Combucha - Browse all projects, notes, and brews with category tabs
• Add - Create new notes, projects, or custom brews
• Chat - AI assistant with context selector for notes/projects
• Stumble - Story-style content discovery based on your interests

Tech Stack

• Frontend: React + TypeScript + Vite
• Styling: CSS with CSS Variables for theming
• State: React Context + localStorage persistence
• Routing: React Router v6
• Icons: Lucide React
• PWA: vite-plugin-pwa
• API: Vercel Serverless Functions

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Install dependencies
npm install

# Start development server
npm run dev

Environment Variables

For Vercel deployment, add this environment variable in your Vercel dashboard:

OPENAI_API_KEY=your-api-key-here

Important: The API key is NEVER exposed to the client. All AI requests go through secure serverless functions.

Deployment to Vercel

1. Push your code to GitHub
2. Import the project in Vercel
3. Add OPENAI_API_KEY to Environment Variables
4. Deploy!

The app uses Vercel Serverless Functions for API routes (/api/*).

Project Structure

brew-app/
├── api/                    # Vercel serverless functions
│   ├── chat.ts            # Main chat endpoint
│   ├── brew.ts            # Note brewing endpoint
│   └── stumble.ts         # Content discovery endpoint
├── public/
│   ├── manifest.json      # PWA manifest
│   └── brew-icon.svg      # App icon
├── src/
│   ├── components/
│   │   ├── common/        # Shared components (cards, search)
│   │   └── layout/        # Layout components (nav, menu)
│   ├── pages/             # Route pages
│   ├── stores/            # React Context state
│   ├── styles/            # Global CSS
│   ├── types/             # TypeScript types
│   └── utils/             # Utilities and default brews
├── index.html
├── vite.config.ts
└── vercel.json

Security

• API keys are stored only in Vercel environment variables
• All AI requests are proxied through serverless functions
• No secrets in client-side code
• XSS and content security headers configured

Customization

Creating Custom Brews

1. Go to Add > Brew
2. Give your brew a name and description
3. Select a category
4. Write a prompt that describes how to process notes
5. Save and apply to any note

Dark Mode

Toggle dark mode from the floating menu (top-left hamburger icon).

License

MIT