Bexalo: Your AI Buddy
An intelligent workspace for chat, creation, and collaboration.
Case Study: Bexalo
Project Overview
Bexalo is a next-generation AI workspace that unifies chat, document creation, code editing, and image generation into a single seamless platform.
Powered by Next.js, TypeScript, and AI SDK integrations (Gemini, xAI, OpenAI), Bexalo allows users to create, iterate, and collaborate on multiple content types through an intelligent, visually refined interface.
Whether you're crafting articles, generating visuals, experimenting with code, or chatting with AI, Bexalo acts as your personal AI companion — fast, context-aware, and extensible.
The Challenge
Modern AI tools are often fragmented — separate interfaces for chat, image generation, and coding assistance.
Users face challenges such as:
- Context Switching: Managing multiple AI tools and sessions for different tasks.
- Lack of Persistence: Losing chat history, document versions, or generated content.
- Poor Integration: Few platforms combine text, code, and media workflows in one UI.
- Limited Control: Most AI apps lack model flexibility or extensibility for developers.
The goal was to build a unified AI workspace that bridges creativity, productivity, and engineering power — all in a sleek and reliable environment.
The Solution
Bexalo brings together chat, artifact editing, and AI orchestration into a single cohesive system.
Key features include:
- Interactive Chat – Rich, multi-turn AI conversations with context memory.
- Artifacts System – Editable outputs for text, code, images, and spreadsheets.
- Version History – Auto-saving and version tracking for every artifact.
- Model Flexibility – Dynamically switch between Gemini, xAI, and other AI providers.
- Authentication – Secure sessions with NextAuth (guest and OAuth modes).
- Persistent Storage – PostgreSQL, Redis, and Vercel Blob for structured + vector data.
- Modern UI – Shadcn UI and Tailwind CSS for a clean, accessible experience.
This architecture transforms Bexalo into a creative operating system for AI, designed for builders, creators, and curious minds.
My Role & Process
As the sole developer and designer, I built Bexalo from concept to production — including system architecture, model integration, UI, and deployment.
1. Research & Planning
- Defined the concept of “AI artifacts” — persistent, editable objects produced by models.
- Researched SDKs like
@ai-sdk/react,@ai-sdk/google, and@ai-sdk/xaifor modular integration. - Designed the data schema for PostgreSQL + Drizzle ORM to store conversations and versions.
2. Development
- Built a Next.js full-stack app with hybrid routes for chat and file handling.
- Implemented real-time chat with streaming responses and session memory.
- Added artifact editing using CodeMirror (for code/text) and integrated Markdown rendering.
- Integrated AI model switching, allowing users to select from Google Gemini, xAI, and others.
- Connected Vercel Blob for artifact uploads and Redis for fast caching.
- Added NextAuth.js for authentication and Playwright for end-to-end tests.
3. Testing & Optimization
- Ensured artifact versioning worked seamlessly under concurrent edits.
- Benchmarked AI response speeds and optimized token streaming.
- Hardened authentication and API routes for rate limiting and data safety.
4. Launch
- Deployed to Vercel, leveraging serverless scaling and Blob storage integration.
- Configured CI/CD, migrations via Drizzle, and environment management for all API keys.
Technical Stack
| Category | Technology | Description |
|---|---|---|
| Frontend | Next.js, TypeScript | Modern React framework with full-stack capabilities. |
| UI Components | Shadcn UI, Tailwind CSS | Accessible primitives and elegant responsive styling. |
| AI SDKs | @ai-sdk/react, @ai-sdk/google, @ai-sdk/xai | Unified model orchestration and streaming interfaces. |
| Authentication | NextAuth.js | Secure authentication with guest and provider logins. |
| Database | PostgreSQL + Drizzle ORM | Strongly typed relational schema management. |
| Caching | Redis | High-performance session and response caching. |
| File Storage | Vercel Blob | Scalable storage for AI-generated files and media. |
| Code Editing | CodeMirror | Versatile in-browser code editor. |
| Testing | Playwright | End-to-end and UI interaction testing. |
| Deployment | Vercel | Serverless hosting with CI/CD and environment isolation. |
Results & Impact
- Unified Workspace: Combined chat, code, and creative tools into one system.
- Persistent Intelligence: Every chat and artifact maintains full version history.
- Model Extensibility: Easily integrate new models through the shared SDK architecture.
- Fast and Lightweight: Sub-2s average response latency under load.
- Secure Architecture: Protected API keys, session data, and artifact files.
Bexalo reimagines how users interact with AI — not as isolated tools, but as a single, evolving workspace for creation and problem-solving.
Key Takeaways
- Composability Wins: Building on modular SDKs accelerates cross-model integration.
- AI as a Platform: Treating outputs as first-class entities (“artifacts”) unlocks new workflows.
- Developer UX Matters: Seamless UI and state persistence drastically improve usability.
- Scaling with Serverless: Vercel’s runtime model fits perfectly for on-demand AI workloads.
Try It Out
Visit the live app: Bexalo
Conclusion
Bexalo demonstrates my expertise in designing and deploying full-stack AI systems — bridging chat, creativity, and computation in a modern workspace.
Through thoughtful architecture and UI design, it showcases how Next.js + AI SDKs + serverless infra can create a powerful, extensible foundation for the future of human-AI interaction.