airagnextjsopenai

AskTaylor AI Assistant

By Taylor Segell
Picture of the author
Published on
Duration
2 weeks
Role
Full-Stack Developer
Atmosphere
Innovative and User-Focused
Technology
React, Next.js, OpenAI API, RAG
AskTaylor Chat Widget Interface

AskTaylor: AI-Powered Professional Assistant

Welcome to AskTaylor, an intelligent chat assistant that brings Taylor Segell's professional expertise to life through conversational AI. Built as a floating chat widget that integrates seamlessly into this portfolio site, AskTaylor provides visitors with instant access to accurate information about Taylor's background, skills, projects, and experience in AI and data science.

AskTaylor Demo
AskTaylor Demo

Challenge

Portfolio websites typically present information in static formats, making it difficult for visitors to quickly find specific details about a person's background, skills, or experience. The challenge was to create an interactive, conversational interface that could:

  1. Provide accurate, context-aware responses about Taylor's professional background
  2. Integrate seamlessly with the existing portfolio design
  3. Maintain conversation history and context
  4. Work efficiently with large amounts of professional data

Solution

The solution was to build a Retrieval-Augmented Generation (RAG) powered chat assistant that:

  • Uses Taylor's complete professional data as context
  • Provides a modern, floating chat widget interface
  • Integrates with OpenAI's GPT models for intelligent responses
  • Maintains conversation history in localStorage
  • Offers a clean, professional user experience

Implementation

Here's how the AskTaylor assistant was brought to life:

  1. Data Integration: Structured Taylor's complete professional information (resume, skills, experience, projects, research) into a comprehensive context system for the AI model.

  2. RAG Architecture: Implemented a Retrieval-Augmented Generation system where the AI has access to Taylor's actual data and uses it to provide accurate, contextual responses.

  3. Floating Widget Design: Created a modern chat interface that appears as a floating button in the bottom-right corner and expands into a full chat widget when clicked.

  4. OpenAI Integration: Connected to OpenAI's API with custom prompts that ensure responses are based on Taylor's actual professional background and experiences.

  5. State Management: Implemented localStorage-based conversation history so users can maintain context across sessions.

Key Features

Accurate Information Retrieval

  • AI assistant has access to Taylor's complete professional data
  • Responses are based on actual skills, experience, and achievements
  • Context-aware answers that reference specific projects and accomplishments

Conversational Interface

  • Natural language processing for professional inquiries
  • Context retention across conversation turns
  • Professional yet approachable tone

Modern UI/UX

  • Floating chat widget that doesn't interfere with site navigation
  • Responsive design that works on all devices
  • Dark mode support and smooth animations
  • Clean, professional styling that matches the portfolio theme

Technical Excellence

  • Built with Next.js and React for optimal performance
  • Pure JavaScript implementation (no TypeScript dependencies)
  • Efficient API integration with error handling
  • localStorage-based conversation persistence

Results

The AskTaylor assistant transforms static portfolio information into an interactive, conversational experience. Visitors can now:

  • Ask specific questions about Taylor's AI/ML experience
  • Learn about projects like AskSales, SkillZone, and the Diabetes Prediction Accelerator
  • Understand technical skills and proficiency levels
  • Explore career progression and achievements at IBM
  • Get real-time insights without navigating through static pages

Technical Impact

  • Enhanced User Engagement: Visitors spend more time exploring Taylor's background through natural conversation
  • Improved Information Discovery: Complex professional information becomes easily accessible through simple questions
  • Professional Showcase: Demonstrates technical expertise in AI, RAG systems, and modern web development

Try It Out

The AskTaylor assistant is live and ready to help! Look for the chat button in the bottom-right corner of this site. Feel free to ask questions like:

  • "What are Taylor's main AI skills?"
  • "Tell me about his AskSales project"
  • "What experience does he have at IBM?"
  • "What's his expertise in RAG and generative AI?"

This project showcases the perfect blend of AI technology and user experience design, making professional information more accessible and engaging than ever before.

Live Demo

The AskTaylor assistant is integrated throughout this portfolio site. Click the chat button in the bottom-right corner to start a conversation!

STAY TUNED

Are you on a mission to become a Bad Man or Women in Tech?
The best articles, links and news related to web development delivered once a week to your inbox.