Chatbot Website: Customizable AI Chat Platform

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

One-liner summary:
Isang interactive, extensible na chatbot interface para sa mga modernong website, binuo gamit ang Next.js 14 App Router, TypeScript, Tailwind CSS, at Shadcn UI. Nag-i-integrate ng maraming LLM provider at may modular, production-ready na arkitektura.

Tagal ng Pagbuo: Kasalukuyang ginagawa (2025)

(Mga) Paalala:

• Disclaimer sa hosting/code availability:
  Ang demo ay naka-host sa chatbot.franzdomingo.tech gamit ang isang proprietary API. Ang source code ay hindi publiko; kontakin ang may-akda para sa mga detalye.
• Kontakin para sa karagdagang impormasyon o mga demo:
  Makipag-ugnayan kay Franz Phillip G. Domingo sa pamamagitan ng franzdomingo.tech.
• Paalala sa pag-navigate:
  Ang chatbot web app ay mapupuntahan sa pamamagitan ng live demo link sa itaas.

---

Mga Tampok (Features)

• Custom LLM integration (OpenAI, Gemini, Ollama, xAI, at custom APIs)
• Real-time na chat na may responsive na UI
• Modular, component-driven na arkitektura
• Production-ready styling (Tailwind CSS, Shadcn UI, Radix UI)
• Artifacts system: code, images, spreadsheets, notes na may 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)

---

Aking mga Kontribusyon (Tungkulin at Responsibilidad)

Integrasyon at Deployment:

• I-deploy at ni-configure ang open-source AI Chatbot ng Vercel sa isang dedikadong environment para sa live demonstration.

Backend Connectivity:

• Ikinonekta sa isang proprietary backend API upang i-simulate ang multi-model support.

Architecture Exploration:

• Ginalugad ang AI SDK architecture at mga LLM extensibility pattern.

UI/UX at Scalability:

• Sinuri ang UI/UX scalability at nagplano ng mga component override para sa mga darating na enhancement.

Mga Nakaplanong Enhancement:

• Palawakin ang suporta para sa Gemini, Ollama, at mga custom endpoint
• Redesign ng UI/UX para sa mga workflow na tinukoy ng user
• Middleware layer para sa user-specific prompt engineering

---

Mga Hamon na Kinaharap

• Provider extensibility:
  Pagdidisenyo ng isang flexible na arkitektura para sa paglipat sa pagitan ng mga LLM provider at mga custom endpoint.

• Performance:
  Pag-optimize ng server streaming, lazy loading, at artifact handling para sa real-time na chat.

• Authentication at Persistence:
  Pag-integrate ng Auth.js at serverless storage para sa ligtas at scalable na pamamahala ng data.

• UI/UX:
  Pagsisiguro ng accessibility at responsive na disenyo sa lahat ng device.

---

Arkitektura ng Proyekto

• Estilo ng Arkitektura:
  Modular Next.js 14 App Router na may React Server Components.

• Organisasyon ng Component:

  • app/: Mga route ng Next.js (chat, auth, layout)
  • components/: Mga reusable na UI at logic-driven na component
  • lib/ai/: Mga LLM config, prompt logic, provider registry
  • artifacts/: Artifact handler logic (text, images, code, atbp.)
  • hooks/: Mga custom React hook para sa chat, state, UI
  • tests/: Mga E2E test at test helper

• State Management:
  React Context, Server Actions

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

---

Demo Preview

• Mga Screenshot/Video:
  Maaari mong makita ang live demo sa chatbot.franzdomingo.tech. Lahat ng tampok at UI ay maaaring subukan nang direkta.

• Mga Platform View:
  Web (responsive, mobile-first)

• Ipinapakitang Functionality:

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

• Mga Instruksyon para sa Demo:
  Bisitahin ang chatbot.franzdomingo.tech upang gamitin ang chatbot web app.

---

Mga Resource sa Pagbuo

• Mga Gabay/Dokumentasyon:
  • Dokumentasyon ng Next.js, Vercel AI SDK, Tailwind CSS, Shadcn UI, Radix UI

---

Developer: Franz Phillip G. Domingo
Huling Na-update: 2025-07-11

---

Binuo sa ibabaw ng open-source chatbot ng Vercel (MIT licensed). Ginawa para sa personal na paggamit at integrasyon.