Wraiter

A full-stack BHVR AI assisted writing app.

Try the live demo here..
Also, Check out my dev log here to know how it was designed, and for a detailed documentation.

Why bhvr?

While there are plenty of existing app building stacks out there, many of them are either bloated, outdated, or have too much of a vendor lock-in. bhvr is built with the opinion that you should be able to deploy your client or server in any environment while also keeping type saftey. Also, I just wanted to try using hono for backend rather than following the MERN conventions which feels a bit restrictive, along with avoiding the few drawbacks that come with using npm.

Features

• Rich text editor - one that provides various styling options for your notes.
• Save/delete - save/delete your notes across sessions.
• AI - with the ollama model from meta, get the cutting edge help you need with your content.
• pass context - pass your written text as context by including @writer in your prompt.

Project Structure

.
├── client/               # React frontend
├── server/               # Hono backend
├── shared/               # Shared TypeScript definitions
│   └── src/types/        # Type definitions used by both client and server
└── package.json          # Root package.json with workspaces

graph TB
A[React Frontend] ----> B[AI Chat Interface]
A ----> C[Text Editor]
A ----> D[Side Bar]
B <----> E[Hono Backend]
C <----> E
D <----> E
E <----> F[Cloudflare Agents]
F <----> G[Cloudflare AI]
E <----> H[Cloudflare D1]
A --hosted using--> I(Cloudflare Pages)
E --hosted using--> J(Cloudflare Workers)

Loading

Server

bhvr uses Hono as a backend API for it's simplicity and massive ecosystem of plugins. If you have ever used Express then it might feel familiar. Declaring routes and returning data is easy.

server
├── bun.lock
├── package.json
├── README.md
├── src
│   └── index.ts
└── tsconfig.json

Client

Uses some components from shadcn, and a few other self-defined styles. Uses the React + vite framework

Getting Started

Installation

# Install dependencies for all workspaces
bun install

Development

# Run shared types in watch mode, server, and client all at once
bun run dev

bun run dev:server  # Run the Hono backend
bun run dev:client  # Run the Vite dev server for React

Building

# Build everything
bun run build

# Or build individual parts
bun run build:shared  # Build the shared types package
bun run build:client  # Build the React frontend