🤖

Assistly AI Chat Agent App - Full-Stack Build

Jul 21, 2024

Assistly AI Chat Agent App - Full-Stack Build

Key Technologies and Tools

  • Next.js: Full-stack framework
  • Tailwind CSS: For styling
  • Apollo Client: For interacting with GraphQL API
  • StepZen (IBM API Connect): Automatically generate GraphQL schema
  • Neon: Postgres SQL database
  • Clerk: Authentication service
  • OpenAI: For chatbot responses (GPT-4)
  • Vercel: Deployment platform
  • Shadcn/UI: UI components and icons
  • DaisyUI: Simplified Tailwind components
  • React Hot Toast: Notifications

Project Features

  1. User Authentication: Implemented using Clerk for Google login.
  2. Dynamic Dashboard: Manage chatbots, edit characteristics, and view sessions.
  3. Chatbot Creation and Management: Create new chatbots, customize its knowledge base, and delete chatbots as needed.
  4. Guest Sessions: Track sessions between users and the chatbot, view messages within each session.
  5. Responsive Design: Fully responsive layout ensuring good UX on all devices.
  6. OpenAI Integration: Leverage GPT-4 for intelligent chatbot responses based on customizable data provided to each bot.
  7. GraphQL Schema: Automatically generated using StepZen based on the Postgres database schema.
  8. Optimistic UI Updates: Immediate feedback in the UI when adding messages before server confirmation.
  9. Loading Indicators: Added loaders for better UX during data fetching processes.
  10. Deployment: Deployed on Vercel with environment configuration for production-ready setup.

Initial Setup and Environment

  1. Clerk Authentication Setup
    • Create an app in Clerk's dashboard
    • Configure authentication options
    • Add Clerk keys to .env.local
  2. Neon Database
    • Create a Neon Postgres database
    • Use provided SQL seed file to set up initial database schema and data
  3. StepZen Setup
    • Use CLI commands to introspect the Postgres database and generate GraphQL schema
    • Login to IBM API Connect dashboard
    • Configure the Apollo client to connect to the StepZen-generated GraphQL endpoint

Implementing Key Features

  1. Authentication
    • Used Clerk to handle sign-in and sign-out functionality, including multi-provider support
    • Added protected routes in the middleware and layout components to ensure user authentication
  2. Dashboard and Layout
    • Built core components like Header, Sidebar, and Layout with dynamic routing using Next.js
    • Used Tailwind CSS for styling the responsive UI components
  3. Creating Chatbot
    • Form to input chatbot name and characteristics
    • GraphQL mutation to save chatbot info to the database
    • Dynamic updates in UI upon creation
  4. Editing and Viewing Chatbots
    • Fetch chatbot details and allow editing of name and characteristics
    • GraphQL queries and mutations for data manipulation
  5. Guest Sessions and Messages
    • Feature to view all sessions associated with each chatbot
    • Utilized React components to dynamically display data
    • Incorporated real-time validation and state updates
  6. Chatbot Interface
    • Modal for user to initiate a chat session with their name and email
    • Integrated OpenAI to generate responses based on predefined characteristics
    • Implemented optimistic UI updates, so users see immediate feedback
  7. Deployment
    • Configured environment variables for production in Vercel
    • Set up Vercel for seamless deployment
    • Handle CORS and other deployment-related issues

Code Tips and Tricks

  • Handling API Endpoints: Proxy Apollo client to prevent exposing sensitive data on the client side
  • Resolvers and Type Definitions: Create robust type definitions for TypeScript to ensure predictable behavior
  • Advanced Tailwind Usage: Utilize Tailwind's utility-first classes to dynamically style components
  • Optimistic UI Updates: Use optimistic updates to enhance user experience by providing instant feedback when performing create/update/delete operations
  • Error Handling: Proper try-catch blocks and Toast notifications for both UX and debugging convenience

Final Notes

  • You can get the complete code from the GitHub repository (consider supporting for a detailed walkthrough)
  • Detailed implementation for an exemplary understanding of creating a SaaS product
  • Educational purpose with scalable deployment and real-world application scenario

This project is a great way to learn about full-stack development, leveraging modern technologies and best practices for creating dynamic, responsive, and fully-functional applications.

Full transcript