A full-stack, open-source chatbot application that combines the power of Spring AI (backend) with React (frontend) to deliver intelligent chat completions and AI-powered image generation in a seamless, user-friendly experience.

This project demonstrates a modern full-stack architecture for building AI-powered applications. It serves as:

• A learning resource for developers interested in integrating OpenAI APIs with Spring Boot and React
• A production-ready foundation for building custom chatbot applications
• A best-practices example for handling user API credentials securely on the client side (localstorage)
• A template for extending with additional AI features and integrations

• Real-time conversational UI with smooth message streaming
• Multi-session history that persists across browser sessions using localStorage
• Responsive sidebar with conversation switching and management
• Built with React and optimized for all screen sizes

• DALL·E 3 integration for high-quality AI image generation
• Dedicated image tab with preview and download capabilities
• History tracking of generated images within your session

• Client-side API key storage in localStorage (never sent to backend unless needed)
• Modal-based configuration for easy setup and key management
• User control over credentials without server-side storage

• Spring AI integration for OpenAI chat completions and image generation
• REST API endpoints with proper error handling and validation
• CORS configuration for secure frontend-backend communication
• Docker support for containerized deployment

Before getting started, ensure you have the following installed:

• Node.js ≥ 20.x
• Maven ≥ 3.9
• JDK 21 or later
• OpenAI API key with access to:
  • GPT-4o model (for chat completions)
  • DALL·E-3 model (for image generation)

git clone https://github.com/shihabhasan0161/react-spring-chatbot.git
cd react-spring-chatbot

Backend Configuration - Edit backend/src/main/resources/application.properties:

# OpenAI Model Configuration
spring.ai.openai.chat.options.model=gpt-4o
spring.ai.openai.api-key=

# Note: Leave the API key empty here - it will be passed at runtime from the frontend

Frontend Configuration - Create frontend/.env:

VITE_BACKEND_URL=http://localhost:8080/

cd backend
mvn spring-boot:run

The Spring Boot server will start on http://localhost:8080.

In a new terminal window:

cd frontend
npm install
npm run dev

The React development server will start on http://localhost:5173.

1. Open your browser to http://localhost:5173
2. Click the "Set API Key" button in the top-right corner
3. Enter your OpenAI API key
4. Start chatting or generating images!

User Input (Frontend)
    ↓
React Chat Component
    ↓
Axios HTTP Request → Backend REST API
    ↓
Spring AI Service Layer
    ↓
OpenAI API (with user's API key)
    ↓
Response → React Component
    ↓
Browser LocalStorage (for persistence)

POST /api/chat

Request payload:

{
  "prompt": "What is machine learning?",
  "apiKey": "sk-..."
}

Response:

{
  "response": "Machine learning is...",
  "timestamp": "2025-11-17T10:30:00Z"
}

POST /api/generate-image

Request payload:

{
  "prompt": "A futuristic city at sunset",
  "apiKey": "sk-..."
}

Response:

{
  "imageUrl": "https://...",
  "timestamp": "2025-11-17T10:30:00Z"
}

react-spring-chatbot/
├── backend/                           # Spring Boot application
│   ├── src/main/java/com/chatbot/
│   │   ├── controller/               # REST API controllers
│   │   ├── service/                  # Business logic layer
│   │   ├── model/                    # Data models
│   │   └── config/                   # Configuration classes
│   ├── pom.xml                       # Maven dependencies
│   └── Dockerfile                    # Container configuration
│
├── frontend/                          # React application
│   ├── src/
│   │   ├── components/               # React components
│   │   ├── utils/                    # Helper functions
│   │   ├── App.jsx                   # Main app component
│   │   └── main.jsx                  # Entry point
│   ├── package.json                  # NPM dependencies
│   └── vite.config.js               # Vite configuration
│
├── README.md                          # This file
├── LEARN.md                          # Deep dive into architecture
├── CONTRIBUTING.md                   # Contribution guidelines
└── LICENSE.md                        # MIT License

• LEARN.md — Detailed architectural documentation, design patterns, and extension ideas
• CONTRIBUTING.md — Guidelines for contributing, development workflow, and code standards

This project is licensed under the MIT License - see the LICENSE.md file for details.

Feel free to use this project for learning, development, and as a foundation for your own applications.

• Check LEARN.md for architectural deep-dives
• Review CONTRIBUTING.md for development setup
• Open an issue on GitHub for bugs or feature requests
• Refer to the official Spring AI documentation

Happy coding! 🎉