Chatbot Website: Customizable AI Chat Platform

Customizable AI Chatbot / Web App / Next.js 14 Project

One-liner summary:
An interactive, extensible chatbot interface for modern websites, built with Next.js 14 App Router, TypeScript, Tailwind CSS, and Shadcn UI. Integrates multiple LLM providers and features a modular, production-ready architecture.

Development Duration: Ongoing (2025)

Note(s):

• Hosting/code availability disclaimer:
  Demo is hosted at chatbot.franzdomingo.tech using a proprietary API. Source code is not public; contact author for details.
• Contact for more info or demos:
  Reach out to Franz Phillip G. Domingo via franzdomingo.tech.
• Navigation note:
  The chatbot web app is accessible via the live demo link above.

---

Features

• Custom LLM integration (OpenAI, Gemini, Ollama, xAI, and custom APIs)
• Real-time chat with responsive UI
• Modular, component-driven architecture
• Production-ready styling (Tailwind CSS, Shadcn UI, Radix UI)
• Artifacts system: code, images, spreadsheets, notes with live updates
• Authentication (Auth.js)
• Data persistence (Neon Serverless Postgres, Vercel Blob)
• Performance optimizations: streaming, lazy loading, image compression
• Extensible provider configuration
• End-to-end testing (Playwright)

---

My Contributions (Role & Responsibilities)

Integration & Deployment:

• Deployed and configured Vercel’s open-source AI Chatbot in a dedicated environment for live demonstration.

Backend Connectivity:

• Connected to a proprietary backend API to simulate multi-model support.

Architecture Exploration:

• Explored AI SDK architecture and LLM extensibility patterns.

UI/UX & Scalability:

• Investigated UI/UX scalability and planned component overrides for future enhancements.

Planned Enhancements:

• Extend support for Gemini, Ollama, and custom endpoints
• UI/UX redesign for user-defined workflows
• Middleware layer for user-specific prompt engineering

---

Challenges Faced

• Provider extensibility:
  Designing a flexible architecture for switching between LLM providers and custom endpoints.

• Performance:
  Optimizing server streaming, lazy loading, and artifact handling for real-time chat.

• Authentication & Persistence:
  Integrating Auth.js and serverless storage for secure, scalable data management.

• UI/UX:
  Ensuring accessibility and responsive design across devices.

---

Project Architecture

• Architecture Style:
  Modular Next.js 14 App Router with React Server Components.

• Component Organization:

  • app/: Next.js routes (chat, auth, layout)
  • components/: Reusable UI and logic-driven components
  • lib/ai/: LLM configs, prompt logic, provider registry
  • artifacts/: Artifact handler logic (text, images, code, etc.)
  • hooks/: Custom React hooks for chat, state, UI
  • tests/: E2E tests and test helpers

• State Management:
  React Context, Server Actions

• Integrations:
  Vercel AI SDK, Auth.js, Neon Serverless Postgres, Vercel Blob

---

Demo Preview

• Screenshots/Video:
  You can view the live demo at chatbot.franzdomingo.tech. All features and UI are available to explore directly.

• Platform Views:
  Web (responsive, mobile-first)

• Functionality Shown:

  • Real-time chat
  • LLM provider switching
  • Artifacts system (code, images, notes)
  • Authentication and data persistence
  • Modular, production-ready UI

• Demo Instructions:
  Visit chatbot.franzdomingo.tech to interact with the chatbot web app.

---

Development Resources

• Guides/Docs:
  • Next.js, Vercel AI SDK, Tailwind CSS, Shadcn UI, Radix UI documentation

---

Developer: Franz Phillip G. Domingo
Last Updated: 2025-07-11

---

Built on top of Vercel’s open-source chatbot (MIT licensed). Customized for personal use and integration.