Learn Modern AI-Powered Application with Spring AI and React

Explore Spring AI, a set of tools to simplify integrating AI into Java applications, enabling seamless integration with Spring projects and support for multiple models.

Understand how large language models use neural networks and deep learning to understand and generate language via input, hidden, and output layers trained on vast data.

OpenAI is an AI research organization that aims to develop and promote friendly AI for humanity, and it owns language models like GPT and ChatGPT accessed via API keys.

Learn how to set up an OpenAI account, obtain API keys, and choose suitable models for tasks like chat, image processing, and embeddings, with pricing notes.

Generate a brand new spring boot project using the spring initializer, set up maven with Java 21, and add spring web and OpenAI dependencies for spring ai models.

Create an OpenAI account, generate an API key, and set it as an environment variable in IntelliJ to configure and run the project.

Configure a rest controller test that injects a chat client, wire a Lombok-enabled bean, and define a system and user prompt to drive AI responses.

Demonstrate testing ai interaction by running the app and issuing a request to port 1990 charts with a message in Postman, receiving a hello, how can I assist you today.

Configure chat options to specify a task model, using the default model if none is set, and adjust max tokens and temperature (e.g., GPT4 zero).

Set the model, mask token length, and temperature to control response length and creativity, while noting per token charges.

Explore the Spring AI documentation, learning how Spring AI streamlines integrating AI into Java Spring applications with models like chat completion, embeddings, text to image, and audio transcription.

Learn to build an image-to-text chat endpoint that accepts text and image as multipart input, uses a system and user prompt, and tests with Postman.

Explore building audio-to-text chat in a Spring AI and React customer support app: upload audio, set a professional audio translator prompt, and transcribe speech with a specialized model.

Explore spring ai integration with Java applications and master prompt engineering to craft prompts for desired llm responses. Build an ai-powered customer support web app.

Kick off your final AI customer support project by integrating Spring AI into a Spring Boot app, moving from back end to front end step by step.

Generate a new spring boot project with spring initializer, choosing java 21, maven, and dependencies web, jpa, mysql, and open ai, and use the bom to manage versions.

Create user, conversation, and ticket entities with lombok and jakarta persistence, map one-to-many users to conversations and one-to-one conversation to ticket, using a ticket status enum open and reserved.

Test run the project to verify the user, conversation, and ticket entity mappings and the generated schema, and configure the OpenAI API key in the properties file.

Visit the OpenAI site to create or retrieve an API key for your AI support project. Copy the key and set OPENAI_API_KEY as an environment variable, with $5 funding.

Test run shows configuring the api key, rerunning the project, and debugging entity mapping to fix a failed conversation and ticket table creation in MySQL Workbench and IntelliJ.

Create a test chat controller in Spring to test ai interactions by wiring a chat client, defining a system prompt and user message, and exposing a /chart endpoint.

Test controller to verify ai interactivity using postman and api v1 chart endpoint, validating responses to questions like what is java and how can I learn java via system prompt.

Explore prompt engineering as a plain-text programming language to communicate with llms. Learn zero-shot, few-shot, chain-of-thought, and rule-based prompts, plus techniques like clarity, contextualization, and iterative refinement.

Develop prompt engineering by creating a prompt template in a utils package, implementing a chat message DTO with session tracking, and wiring prompts to the conversation service.

Create the ai support service class and move related code into a dedicated ticket package, separating the prompt template from service logic using reactive mono messaging with history.

Run and test the ai customer support service class by wiring prompt templates, using a dto with section id and message, and validating the postman endpoint outputs an ai response.

Understand how the AI support service uses a mono from project reactor to wrap blocking AI calls on a dedicated I/O thread pool for non-blocking, asynchronous chat.

Understand how system, user, and assistant rows in prompt engineering guide AI behavior and responses, shaping the chat history for customer support.

Craft and apply system prompts to shape AI behavior. Test and refine prompts to assign roles, such as a medical doctor, and guide polite, concise responses.

Configure AI to answer questions by field using system prompts, then choose between a default chat model or a specified model per request or per bin, adjusting temperature and tokens.

Centralize the AI model for your chat client by configuring a shared model, API key from the environment, and options in a bin, enabling consistent requests.

Define a system prompt and prompts for a customer support AI, collect complaint details, and implement the conversation service to create tickets and email notifications.

Refine the conversation service with a user confirmation prompt template, generate a confirmation message, and update history before creating the support ticket.

Extract the customer's phone number and email from the chat history, then look up the user in the database and, if found, create a ticket using AI.

Learn to extract customer email and phone from chat history by building two helper methods, refactoring regex patterns, and streaming history to return user info.

extracts the user email and phone from chat history using regex, then fetches the user via a repository and finalizes by creating a ticket from memory storage.

Fetches customer information from the database to finalize the AI customer conversation and create a support ticket, using in-memory conversation storage and session IDs.

Debugging chat history extraction, logging customer information, and refining a restricted phone number regex with mandatory country code to distinguish phones from order numbers, tested via postman.

Test the fixed regex to validate phone numbers with whitespace, brackets, and hyphens, then use postman to simulate chats, confirm user data, and handle not-found errors with clear messages.

Add the WebSocket dependency in the POM file and configure the WebSocket service to push system messages to the chat UI, enabling real-time AI responses.

Configure spring websocket messaging by enabling the websocket message broker and registering a chat endpoint with sockjs. Use a simple in-memory broker with app destination prefix to route messages.

Finalize the AI customer conversation by sending error messages via WebSocket to the chat UI when user data is incorrect, then summarize the history and generate a title.

Learn to summarize customer conversations with a dedicated prompt, generate titles from summaries, and save conversations before ticket creation in a Spring AI and React workflow.

Implement a ticket service for conversations by defining a service interface and implementation, creating a ticket DTO, and wiring a repository, with optional product order number extracted from chat history.

Implement a ticket service that converts tickets to data transfer objects, fetches tickets, throws entity not found exceptions, and creates tickets with open status and an alphanumeric reference.

Create the ticket for a conversation, update the conversation status, notify the customer by email, and finalize the process by clearing memory and signaling via WebSocket.

Test the ticket creation flow by running the project and recreating the ticket table. Validate the ref number naming, and use Postman to create a user, conversation, and ticket records.

Refine AI prompts to produce concise, relevant summaries and clear titles for customer support conversations, focusing on the wrong shoe size and the requested exchange with the order number.

Refine prompts through iterative prompt engineering to improve ai summaries of customer conversations, focusing on specific issues, relevant background, and exact customer requests.

Complete assignment 1 in the course 'build ai customer support with spring ai and react' to apply ai-powered customer support concepts using spring ai and react.

Fine-tune the conversation summary prompt to include the order number and exclude customer emails and phone numbers, test with postman, and configure the email server to send live ticket emails.

Set up the email sender service by configuring JavaMailSender with Gmail SMTP and app password, add the Spring Boot starter mail dependency, and define a mail bean with Lombok annotations.

Implement an email notification service in Spring AI and React, wire annotations and the image service, and build an HTML body with a ticket and conversation summary for customers.

Implement the customer service class by creating the customer interface, wiring repository methods (find by id and by email), and integrating with the email notification service and ticket event listener.

Create a ticket creation event and an event listener in Spring, wire the email notification service as a dependency, and trigger a ticket notification when the event fires.

Test run the email creation demonstrates sending a customer support email after retrieving the user by email address. The video covers debugging the find-by-email method and publishing the ticket event.

Create a customized html email template for customer support, with interpolated fields (customer name, email, phone, ticket details) loaded from a class path resource and tested via a test run.

Wrap up covers final integration checks, verifies WebSocket messaging, and instructs extracting the order number from chat history to save with tickets while renaming the po number to order number.

Complete assignment 2 for building ai customer support with spring ai and react, applying practical workflows and frameworks to design responsive, scalable chat support solutions.

Walk through backend changes for the ticket system, including converting product id to string, adding order number handling in customer info, and returning the ticket for frontend use.

Perform a development environment check to verify tools, dependencies, and configurations for building AI customer support with Spring AI and React.

Open your editor, create the project directory, generate a brand new React JavaScript front-end with Veet, install dependencies, and run npm run dev to view the sample.

Set up the project by cleaning the starter React app, structuring the root app component, consolidating styles into index.css, and organizing assets in an images folder.

Install the initial dependencies for the app, distinguishing production from development dependencies, and install bootstrap, react bootstrap, and react router dom using the terminal.

Set up the project structure by creating a component and layout folder, building a root layout component, and configuring a main wrapper with header, outlet from react-router-dom, and footer.

Set up the project's basic router by importing bootstrap CSS, configuring router provider with create browser router, and wrapping routes in a root layout for development readiness.

Deliver a home page overview by composing six components—header, navbar, welcome section, hero with logo and animation, team slider, and footer—organized in a VS Code project.

Implement the home page component by generating and rendering the support team component, applying classes from the index.css, and setting the inner div to display flex.

Create the logo-anim component for a hero section using inline styles and flex layout, with an h1 welcome, and a react router dom link to start chatting.

Implement the header by integrating the hero logo and an animated hero name within a centered inline-styled container, and build the navbar component inside the layout.

Implement a React navbar by tracking the active item through the location path, rendering nav items for home, chat, and tickets, and applying an active class via CSS.

Implement a hero animation component by installing and importing the react slick slider, importing banner images, and configuring a looping, fading, autoplay slider with dot navigation.

Implement the support team component by building a team folder, importing carousel assets, integrating team data and images, and refining reusable settings for the slick carousel.

Put together all components, resolve import conflicts by renaming to team data, install slick carousel, and configure app routing with a header and footer to render the home page.

Install and configure essential dependencies for the AI customer support chat, including react icons, sock-js client, and stomp-js, to enable WebSocket communication with the backend.

Implements a custom web socket hook using the storm protocol over SockJS to connect with the back end via section ID, subscribe to topic message, and stream AI assistant messages.

Build the chat component with a websocket hook to receive messages, create a persistent section id in local storage using crypto, and handle sending user messages and awaiting ai replies.

Implement enter-key handling to send messages, prevent page reload, and manage chat scrolling with an end-of-message ref, while showing a typing indicator as the AI prepares a reply.

Implement a chat interface for customer support by building the chat body, auto-scrolling on new messages, showing typing indicators, and handling enter and shift+enter to send.

Implement a chat UI by wiring a React component to a backend chat endpoint, configure environment variables, create an Axios API service, and route the chat page for testing.

Test run the project and fix console and config issues. Verify frontend-backend communication via WebSocket and ensure chat interactions trigger email notifications for tickets.

Build real-time customer support feedback by debugging WebSocket messaging, sending email notifications, and updating chat history with AI-generated feedback, ensuring the front end displays ticket actions.

Learn how to keep prompting a user to update incorrect information until the system finds the user in the database, using a loop to retry validation and complete ticket creation.

flag when users enter wrong information, keep waiting for information true until correction, then extract the new contact with a helper that filters history and replaces the first matching contact.

Implement a helper to extract the most current user information from history, update existing customer details when content matches a pattern, or add a new entry.

Extract and centralize error messages and finalization logic, enforce corrected information flow in the chat history, and guide the customer to update incorrect contact details.

Introduce a central message utils class to centralize strings and reuse them across services. Then log customer workflow steps to troubleshoot wrong numbers and websocket message delivery.

Wraps up with debugging a looping input issue in a ai-driven customer support flow, validating phone numbers and emails, updating data, and confirming ticket creation and email notification.