ContentPulse 🚀

AI-Powered Chatbot Platform for Contentstack Integration

ContentPulse is a plug-and-play chatbot platform that seamlessly integrates with Contentstack CMS and leverages advanced Large Language Models (LLMs) like Groq and OpenAI to deliver intelligent, context-aware responses based on your content.

Live Demo & Resources

Live Demo: https://contentpulse-contentpulse-contenpulse.eu-contentstackapps.com/
NPM Package: https://www.npmjs.com/settings/hemantkadam/packages
Demo Video: https://youtu.be/oL8AujXvVGY
GitHub Repository: https://github.com/hemant-i7/ContentPulse

🎯 Problem Statement

Create a chatbot that:

Integrates with Contentstack to fetch dynamic content
Uses LLMs (Groq/OpenAI) for intelligent responses
Can be easily embedded on any website
Provides real-time content-based answers to user queries

✨ Features

🆕 OAuth Authentication (New!)

🔐 Secure Contentstack Integration: OAuth 2.0 authentication with Contentstack
📚 Multi-Stack Support: Users can select from their available Contentstack stacks
🎯 Personalized Responses: Chatbot serves content from user's selected stack
🔄 Dynamic Stack Switching: Change active stack without re-authentication

Core Functionality

🔗 Contentstack Integration: Fetch products, articles, services, and any content type
🤖 AI-Powered Responses: Intelligent answers using Groq and OpenAI APIs
📱 Responsive Design: Works perfectly on desktop and mobile
🔌 Plug & Play: Easy integration with any website
🎨 Customizable UI: Light/dark themes and configurable appearance
💬 Real-time Chat: Instant responses with typing indicators
📊 Session Management: Maintain conversation context
🛡️ Error Handling: Graceful fallbacks when APIs are unavailable

🏗️ Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│                 │    │                 │    │                 │
│   Frontend      │───▶│   Backend       │───▶│  Contentstack   │
│   (Next.js)     │    │   (NestJS)      │    │     CMS         │
│                 │    │                 │    │                 │
└─────────────────┘    └─────────────────┘    └─────────────────┘
                              │
                              ▼
                       ┌─────────────────┐
                       │                 │
                       │   LLM APIs      │
                       │ (Groq/OpenAI)   │
                       │                 │
                       └─────────────────┘

🚀 Quick Start

Prerequisites

Node.js 18+ and npm
Contentstack account and API credentials
Groq API key or OpenAI API key

Installation

Clone the repository

git clone https://github.com/your-username/ContentPulse.git
cd ContentPulse

Install dependencies
```
npm install
```

Set up environment variables

Backend configuration:

cd apps/backend
cp .env.example .env

Edit apps/backend/.env with your credentials:

PORT=8000
CONTENTSTACK_API_KEY=your_api_key
CONTENTSTACK_ACCESS_TOKEN=your_access_token
CONTENTSTACK_ENVIRONMENT=development
GROQ_API_KEY=your_groq_key
OPENAI_API_KEY=your_openai_key

Frontend configuration:

cd ../frontend
cp .env.example .env.local

Edit apps/frontend/.env.local:

NEXT_PUBLIC_API_URL=http://localhost:8000

Start the development servers

Using Turborepo (recommended):

npm run dev

Or start individually:

# Terminal 1 - Backend
cd apps/backend
npm run dev

# Terminal 2 - Frontend
cd apps/frontend
npm run dev

Open your browser
- Frontend: http://localhost:3000
- Backend: http://localhost:8000

🔐 OAuth Integration Setup

New! ContentPulse now supports Contentstack OAuth authentication for secure, personalized chatbot experiences.

Quick OAuth Setup

Create OAuth App in Contentstack:
- Go to Contentstack Developer Settings
- Create new OAuth App with callback URL: http://localhost:8000/auth/contentstack/callback
- Copy Client ID and Client Secret

Update Backend Environment:

# Add to apps/backend/.env
CONTENTSTACK_CLIENT_ID=your-client-id
CONTENTSTACK_CLIENT_SECRET=your-client-secret
CONTENTSTACK_CALLBACK_URL=http://localhost:8000/auth/contentstack/callback
JWT_SECRET=your-secure-jwt-secret
FRONTEND_URL=http://localhost:3000

Install Additional Dependencies (if not already done):
```
cd apps/backend
npm install
```
Test OAuth Flow:
- Visit http://localhost:3000
- Click "Login with Contentstack"
- Complete OAuth flow
- Select your Contentstack stack
- Start chatting with personalized content!

📚 For detailed setup instructions, see OAUTH_SETUP.md

🔧 Configuration

Contentstack Setup

Create Content Types in your Contentstack space:
- products (with fields: title, description, price, category)
- articles (with fields: title, content, summary)
- services (with fields: title, description, features)
- tours (with fields: title, description, duration, price)
Get API Credentials:
- API Key: Found in Settings > Stack > API Key
- Access Token: Create in Settings > Tokens
- Environment: Usually 'development' or 'production'

LLM API Setup

Option 1: Groq (Recommended for speed)

Sign up at https://groq.com
Get your API key from the dashboard
Add to GROQ_API_KEY in your .env file

Option 2: OpenAI

Sign up at https://openai.com
Get your API key from the dashboard
Add to OPENAI_API_KEY in your .env file

💻 Usage

Basic Integration

import Chatbot from '@/components/Chatbot';

function MyWebsite() {
  return (
    <div>
      <h1>My Website</h1>
      {/* Your content */}
      
      <Chatbot 
        theme="light"
        height="400px"
        welcomeMessage="Hi! How can I help you today?"
        apiBaseUrl="http://localhost:8000"
      />
    </div>
  );
}

Advanced Configuration

<Chatbot 
  theme="dark"
  height="500px"
  placeholder="Ask me about our products..."
  welcomeMessage="Welcome! I can help you find products, articles, and services."
  apiBaseUrl="https://your-api.com"
/>

API Endpoints

POST /api/chat - Send chat messages
GET /api/chat/health - Health check
GET /api/chat/content-types - Get available content types
POST /api/chat/search - Search specific content

🧪 Testing

Test the Chatbot

Try these example queries:

"Show me your products"
"What services do you offer?"
"Find articles about technology"
"I'm looking for tours under $500"
"Help me find information about..."

Health Check

curl http://localhost:8000/api/chat/health

Manual API Testing

curl -X POST http://localhost:8000/api/chat \
  -H "Content-Type: application/json" \
  -d '{"query": "Show me your products"}'

📦 Project Structure

ContentPulse/
├── apps/
│   ├── backend/                 # NestJS API server
│   │   ├── src/
│   │   │   ├── chatbot/        # Chatbot module
│   │   │   │   ├── chatbot.controller.ts
│   │   │   │   ├── chatbot.service.ts
│   │   │   │   └── chatbot.module.ts
│   │   │   ├── app.module.ts
│   │   │   └── main.ts
│   │   └── .env.example
│   └── frontend/               # Next.js web app
│       ├── src/
│       │   ├── app/
│       │   └── components/
│       │       └── Chatbot.tsx
│       └── .env.example
├── packages/
│   └── chatbot-sdk/           # Reusable SDK (future)
├── package.json
├── turbo.json
└── README.md

🚀 Deployment

Live Deployment

Production URL: https://contentpulse-contentpulse-contenpulse.eu-contentstackapps.com/

The application is currently deployed and running live! You can test all features including:

OAuth authentication with Contentstack
AI-powered chat responses
Real-time content integration
Responsive design across devices

Deployment Options

Frontend (Vercel)

Push to GitHub
Connect to Vercel
Set environment variables in Vercel dashboard
Deploy

Backend (Railway/Heroku)

Railway:

railway login
railway init
railway add
railway deploy

Heroku:

heroku create your-app-name
heroku config:set CONTENTSTACK_API_KEY=your_key
heroku config:set GROQ_API_KEY=your_key
git push heroku main

🎨 Customization

Theming

The chatbot supports light and dark themes:

<Chatbot theme="dark" />  // or "light"

Custom Styling

Override CSS classes for complete customization:

.chatbot-container {
  /* Your custom styles */
}

.chatbot-message {
  /* Message styling */
}

Content Types

Add new content types by:

Creating them in Contentstack
Adding them to determineContentType() in chatbot.service.ts
Testing with queries

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests if needed
Submit a pull request

📄 License

This project is licensed under the MIT License.

🆘 Support

If you encounter any issues:

Check the Issues page
Create a new issue with:
- Environment details
- Error messages
- Steps to reproduce

🎯 Roadmap

Built with ❤️ for the developer community

ContentPulse

A modern monorepo for ContentPulse applications, built with Next.js (frontend), NestJS (backend), and a reusable chatbot SDK.

🏗️ Project Structure

ContentPulse/
├── apps/
│   ├── frontend/          # Next.js application
│   └── backend/           # NestJS API server
├── packages/
│   └── chatbot-sdk/       # Reusable chatbot SDK
├── package.json           # Root workspace configuration
├── turbo.json            # Turborepo configuration
└── .gitignore            # Git ignore rules

🚀 Quick Start

Prerequisites

Node.js (v18 or higher)
npm or yarn

Installation

Clone the repository:

git clone <your-repo-url>
cd ContentPulse

Install dependencies for all packages:

npm install

Development

Start all applications in development mode:

npm run dev

This will start:

Frontend (Next.js) on http://localhost:3000
Backend (NestJS) on http://localhost:8000

Build

Build all applications:

npm run build

Available Scripts

npm run dev - Start all apps in development mode
npm run build - Build all applications
npm run start - Start all applications in production mode
npm run lint - Lint all packages
npm run test - Run tests for all packages

📦 Packages

Frontend (`apps/frontend`)

Tech Stack: Next.js, TypeScript, Tailwind CSS
Dependencies: axios, @tanstack/react-query
Port: 3000

Backend (`apps/backend`)

Tech Stack: NestJS, TypeScript
Dependencies: axios
Port: 8000

Chatbot SDK (`packages/chatbot-sdk`)

Tech Stack: TypeScript
Purpose: Reusable chatbot functionality across applications
Export: ES modules with TypeScript definitions

🛠️ Tech Stack

Monorepo Management: Turborepo + npm workspaces
Frontend: Next.js 15 with TypeScript and Tailwind CSS
Backend: NestJS with TypeScript
Package Manager: npm
Build System: Turborepo for parallel builds and caching

🔧 Configuration

Turborepo

The project uses Turborepo for efficient build caching and parallel execution. Configuration is in turbo.json.

Workspaces

npm workspaces are configured in the root package.json to manage dependencies across all packages.

📝 Development Guidelines

Code Style: Follow TypeScript and ESLint rules
Commits: Use conventional commit messages
Dependencies: Add shared dependencies at the workspace level when possible

🚀 Deployment

Each application can be deployed independently:

Frontend: Deploy to Vercel, Netlify, or any static hosting
Backend: Deploy to Railway, Render, or any Node.js hosting
SDK: Publish to npm registry for reuse

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Run tests and linting
Submit a pull request

📄 License

[Add your license here]

Name		Name	Last commit message	Last commit date
Latest commit History 60 Commits
apps		apps
packages/contentpulse-sdk		packages/contentpulse-sdk
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
turbo.json		turbo.json

Folders and files

Latest commit

History

Repository files navigation

ContentPulse 🚀

Live Demo & Resources

🎯 Problem Statement

✨ Features

🆕 OAuth Authentication (New!)

Core Functionality

🏗️ Architecture

🚀 Quick Start

Prerequisites

Installation

🔐 OAuth Integration Setup

Quick OAuth Setup

🔧 Configuration

Contentstack Setup

LLM API Setup

💻 Usage

Basic Integration

Advanced Configuration

API Endpoints

🧪 Testing

Test the Chatbot

Health Check

Manual API Testing

📦 Project Structure

🚀 Deployment

Live Deployment

Deployment Options

Frontend (Vercel)

Backend (Railway/Heroku)

🎨 Customization

Theming

Custom Styling

Content Types

🤝 Contributing

📄 License

🆘 Support

🎯 Roadmap

ContentPulse

🏗️ Project Structure

🚀 Quick Start

Prerequisites

Installation

Development

Build

Available Scripts

📦 Packages

Frontend (apps/frontend)

Backend (apps/backend)

Chatbot SDK (packages/chatbot-sdk)

🛠️ Tech Stack

🔧 Configuration

Turborepo

Workspaces

📝 Development Guidelines

🚀 Deployment

🤝 Contributing

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Frontend (`apps/frontend`)

Backend (`apps/backend`)

Chatbot SDK (`packages/chatbot-sdk`)

Packages