OpenBSP UI

Open-source WhatsApp Web interface

Self-hostable, multi-tenant, and AI-agent ready. Built for OpenBSP API.

       

demo.mp4

Features

UI

• Live updates via Supabase Realtime
• Responsive, mobile-first design
• Dark mode
• Spanish, English, and Portuguese
• Built with Vite, React, Tailwind CSS, Zustand, TanStack Query + Router

App

• Conversations — Real-time WhatsApp-style chat with media support (images, audio, documents), message status indicators, and inline template sending
• Contacts — Address book with phone validation
• AI Agents — Create and configure agents with any provider, set tools, and instructions
• Templates — WhatsApp message template builder with variable pills, formatting preview, and category management
• Integrations — WhatsApp Business account connection via Embedded Signup
• Settings — Organization management, team members with roles (owner/admin/member), API keys, webhooks
• Stats — Usage charts and billing quota dashboards
• Multi-org — Switch between organizations; invite and onboard team members

Deployment

Note

Deploy in under 5 minutes — no local environment required. This is an SPA that can be hosted on any static site hosting service.

Cloudflare Pages

1. Fork this repository (main branch)
2. Go to the Cloudflare Dashboard > Workers & Pages > Create application > Pages > Connect to Git
3. Select your fork and use these build settings:
   • Production branch: main
   • Framework preset: React (Vite)
   • Build command: npm run build
   • Build output directory: dist
4. Set environment variables:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
   • VITE_META_APP_ID — Optional. Needed for WhatsApp Embedded Signup.
   • VITE_FB_LOGIN_CONFIG_ID — Optional. Needed for Tech Provider flow.
5. Save and deploy

You are live! 🚀

Development

Local setup

You need a running OpenBSP API — either locally via npx supabase start or a hosted Supabase project.

npm install

Create a .env file:

VITE_SUPABASE_URL=http://localhost:54321     # or your Supabase project URL
VITE_SUPABASE_ANON_KEY=your-anon-key
# VITE_META_APP_ID=                          # optional, for WhatsApp Embedded Signup
# VITE_FB_LOGIN_CONFIG_ID=                   # optional, for Tech Provider flow

Start the dev server:

npm run dev

Open http://localhost:5173.

i18n (Internationalization)

The UI is written in Spanish (the default language) and supports English and Portuguese translations. All user-facing strings use the t() function from src/hooks/useTranslation.tsx, which returns the Spanish key as-is or looks up a translation from public/locales/{lang}.json.

Adding new strings: wrap any user-facing text with t("Texto en español"). The Spanish key is the source of truth — no entry in en.json/pt.json means the Spanish text is shown.

Adding translations: add the corresponding entries to public/locales/en.json and public/locales/pt.json.

Checking for drift: run the sync script to detect missing or stale keys:

./scripts/sync-translations.sh

Community

Questions, ideas, or feedback? Join our WhatsApp Community or open an issue. We'd love to hear from you.