🏏 Building a Real-Time AI Cricket Commentary System using Spring AI, Ollama, WebSockets & STOMP

Modern applications are moving beyond traditional request-response systems.

Platforms like Cricbuzz, Cricinfo, trading dashboards, and live analytics tools require:

• real-time communication
• event-driven architecture
• AI-generated insights
• low-latency updates

To understand these concepts deeply, I built a real-time AI-powered cricket commentary system using:

• Spring Boot
• Spring AI
• Ollama
• WebSockets
• STOMP
• SockJS

👉 GitHub Repository: https://github.com/hykuBipin/live-cricket-spring-ai

🚀 What This Project Does

This project simulates a Cricbuzz/Cricinfo-style live score platform where:

✅ Live scores are pushed instantly ✅ AI generates cricket commentary dynamically ✅ Frontend updates without refresh ✅ Multiple users can receive updates simultaneously ✅ Local LLMs run using Ollama

{
  "team":"CSK",
  "runs":145,
  "wickets":2,
  "overs":"15.0"
}

Generated AI Commentary:

“Dhoni launches it over long-on! CSK accelerating brilliantly in the death overs.”

🧠 Tech Stack Used

TechnologyPurposeJava 17Backend developmentSpring BootCore application frameworkSpring AIAI integration layerOllamaRunning local LLMsWebSocketsReal-time communicationSTOMPMessaging protocolSockJSBrowser compatibilityMavenBuild managementHTML/CSS/JavaScriptFrontend

Traditional REST APIs work like this:

Client → Request → Server → Response

But live applications need:

• instant updates
• persistent connections
• server push architecture

Polling repeatedly every few seconds is inefficient.

WebSockets solve this problem by creating a persistent full-duplex connection between browser and server.

🔌 Understanding WebSockets + STOMP

One of the biggest learnings from this project was understanding the difference between:

• WebSockets
• STOMP
• SockJS

WebSocket creates the persistent connection between frontend and backend.

Example:

const socket = new SockJS('/ws');

This connects to:

/ws

But this endpoint is NOT a normal REST API endpoint.

It is only used for WebSocket handshake and persistent communication.

STOMP

STOMP is a messaging protocol that runs on top of WebSockets.

Instead of manually handling raw socket frames, STOMP provides:

• subscriptions
• topics
• broadcasting
• structured messaging

Frontend subscribes like this:

stompClient.subscribe('/topic/live', function(message) {
   console.log(message.body);
});

Meaning:

“Whenever backend broadcasts messages to /topic/live, deliver them instantly to this client.”

SockJS

SockJS acts as a fallback mechanism for browsers that may not fully support WebSockets.

It improves compatibility and connection reliability.

🏗️ System Architecture

Step-by-Step Flow

1️⃣ REST API receives score updates

POST /score

Payload:

{
  "team":"CSK",
  "runs":145,
  "wickets":2,
  "overs":"15.0"
}

2️⃣ Spring AI generates commentary

The backend sends score details to Spring AI.

return chatClient.prompt()
        .user(prompt)
        .call()
        .content();

Spring AI simplifies AI integration significantly.

Without Spring AI, we would need:

• manual HTTP integrations
• API management
• request handling
• response parsing

Spring AI abstracts all of that cleanly.

🤖 Why Ollama?

Instead of using paid APIs like OpenAI, I used Ollama to run Llama3 locally.

Benefits:

• local inference
• privacy
• no API cost
• offline execution
• faster experimentation

Start Ollama:

ollama serve

Pull model:

ollama pull llama3

🧠 Prompt Engineering

Initially, the AI generated very large paragraphs.

To make commentary more realistic, I optimized the prompt:

Generate ONE short professional live cricket commentary line.

Style:
- Like Cricbuzz or Cricinfo
- Maximum 20 words
- Exciting
- Realistic

This dramatically improved the output quality.

📡 Broadcasting Live Updates

Once commentary is generated, backend broadcasts updates using:

template.convertAndSend("/topic/live", response);

All connected users instantly receive updates.

No refresh needed.

This is how many real-time systems internally work.

🖥️ Frontend Real-Time Updates

Frontend subscribes to:

/topic/live

Important:

/topic/live is NOT a browser URL.

It is a STOMP subscription topic.

This was an important concept I learned while building the project.

WebSocketConfig

Responsible for:

• enabling STOMP
• WebSocket endpoint registration
• broker configuration

CommentaryService

Responsible for:

• prompt engineering
• AI communication
• commentary generation

ScoreController

Responsible for:

• receiving scores
• invoking AI
• broadcasting events

OUTPUT:

✅ Event-driven architecture ✅ Real-time communication ✅ WebSocket internals ✅ STOMP protocol ✅ Spring AI integration ✅ Local LLM execution ✅ Prompt engineering ✅ Backend broadcasting systems

🔥 Future Enhancements

Planning to add:

• live scorecards
• match analytics
• AI win prediction
• React frontend
• Docker deployment
• Kubernetes support
• voice commentary
• streaming AI responses

👨‍💻 GitHub Repository

https://github.com/hykuBipin/live-cricket-spring-ai

🎯 Final Thoughts

This project was a great hands-on experience in combining:

• AI
• real-time systems
• event-driven architecture
• Spring ecosystem

Building practical systems like this helps understand how modern scalable applications work internally.

If you are exploring:

• Spring AI
• WebSockets
• Generative AI
• Real-time architecture

I highly recommend building something similar.

Thanks for reading 🚀