🤖 Build a Full-Stack AI App with React, Node.js & Azure OpenAI

PromptPilot/
├── README.md
├── client/
│   ├── .env
│   ├── .gitignore
│   ├── package.json
│   ├── README.md
│   ├── tsconfig.json
│   ├── public/
│   │   ├── favicon.ico
│   │   ├── index.html
│   │   ├── manifest.json
│   │   └── robots.txt
│   └── src/
│       ├── App.css
│       ├── App.test.tsx
│       ├── App.tsx
│       ├── index.css
│       ├── index.tsx
│       ├── logo.svg
│       ├── react-app-env.d.ts
│       ├── reportWebVitals.ts
│       ├── setupTests.ts
│       └── components/
│           ├── ChatBox.css
│           └── ChatBox.tsx
├── server/
│   ├── .env
│   ├── .gitignore
│   ├── package.json
│   ├── tsconfig.json
│   └── src/
│       └── index.ts

import React, { useState, useEffect, useRef } from 'react';
import './ChatBox.css';
import axios from "axios";

const apiBaseUrl = process.env.REACT_APP_API_URL;

interface Message {
  role: "user" | "assistant";
  content: string;
}

const ChatBox: React.FC = () => {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState<Message[]>([]);
  const [isTyping, setIsTyping] = useState(false);
  const chatLogRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chatLogRef.current) {
      chatLogRef.current.scrollTop = chatLogRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSend = async () => {
    if (!input.trim()) return;

    const userMessage: Message = { role: "user", content: input };
    const updatedMessages = [...messages, userMessage];
    setMessages([...updatedMessages, { role: "assistant", content: "Analyzing..." }]);
    setInput("");
    setIsTyping(true);

    try {
      const response = await axios.post(`${apiBaseUrl}/chat`, {
        messages: updatedMessages,
      });

      const assistantReply: Message = {
        role: "assistant",
        content: response.data.content,
      };

      setMessages((prev) => [...prev.slice(0, -1), assistantReply]);
    } catch (err) {
      console.error("Error:", err);
      setMessages((prev) => [...prev.slice(0, -1), { role: "assistant", content: "Something went wrong." }]);
    } finally {
      setIsTyping(false);
    }
  };

  return (
    <div className="chat-form-container">
      <div className="chat-form-card">
        <div className="chat-form-header">
          Prompt pilot: Let's chat? - Online with AI
        </div>
        <div className="chat-form">
          <div className="chat-log" ref={chatLogRef}>
            {messages.map((msg, i) => (
              <div key={i} className={`chat-bubble ${msg.role === "user" ? "chat-user" : "chat-assistant"}`}>
                <b>{msg.role === "user" ? "You" : "AI"}:</b> {msg.content}
              </div>
            ))}
            {isTyping && <div className="typing-indicator">AI is typing...</div>}
          </div>

          <div className="input-area">
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && handleSend()}
              placeholder="Type your message..."
            />
            <button onClick={handleSend}>Send</button>
          </div>
        </div>
      </div>
      <div className="love-label">❤️ with JT</div>
    </div>
  );
};

export default ChatBox;

REACT_APP_API_URL=http://localhost:3000

import express from "express";
import cors from "cors";
import dotenv from "dotenv";
import axios from "axios";

dotenv.config();

const app = express();
app.use(cors());
app.use(express.json());

const AZURE_OPENAI_ENDPOINT = process.env.AZURE_OPENAI_ENDPOINT;
const AZURE_OPENAI_API_KEY = process.env.AZURE_OPENAI_API_KEY;
const AZURE_DEPLOYMENT_NAME = process.env.AZURE_OPENAI_DEPLOYMENT || "gpt-35-turbo";

// ✅ GET endpoint for health check
app.get("/", (req, res) => {
  res.send("👋 Welcome to the Azure OpenAI Chat Server!");
});

// ✅ POST /chat for chat requests
app.post("/chat", async (req, res) => {
  const { messages } = req.body;

  try {
    const response = await axios.post(
      `${AZURE_OPENAI_ENDPOINT}/openai/deployments/${AZURE_DEPLOYMENT_NAME}/chat/completions?api-version=2024-02-15-preview`,
      {
        messages: messages || [{ role: "user", content: "Hello!" }],
        temperature: 0.7,
        max_tokens: 1000,
        top_p: 0.95,
        frequency_penalty: 0,
        presence_penalty: 0
      },
      {
        headers: {
          "api-key": AZURE_OPENAI_API_KEY || "",
          "Content-Type": "application/json"
        }
      }
    );

    const reply = response.data.choices[0].message;
    res.json(reply);
  } catch (error: any) {
    console.error("Azure OpenAI error:", error?.response?.data || error.message);
    res.status(500).json({ error: "Failed to get response from Azure OpenAI" });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`🚀 Azure OpenAI Server running at http://localhost:${PORT}`);
});

AZURE_OPENAI_ENDPOINT=<Your Azure Open AI End Point> //https://xyz.openai.azure.com
AZURE_OPENAI_API_KEY= <Your Azure Open API Key>
AZURE_OPENAI_DEPLOYMENT=gpt-4
PORT=3000