AI-Powered MCP Server
by larryfang
- sms-mcp
- public
chat.html•5.81 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>📱 GPT SMS Assistant</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 2rem;
background: #f5f5f5;
}
#chat-box {
max-width: 1000px;
margin: auto;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.message {
margin: 1rem 0;
}
.user {
color: #333;
font-weight: bold;
}
.assistant {
color: #0070f3;
}
.meta,
.context-block {
font-size: 0.9rem;
background: #f9f9f9;
padding: 8px;
margin-top: 6px;
border-left: 4px solid #0070f3;
white-space: pre-wrap;
}
.context-label {
font-weight: bold;
margin-bottom: 4px;
cursor: pointer;
}
input,
button,
select {
font-size: 1rem;
padding: 0.5rem;
}
input[type="text"] {
width: 70%;
margin-top: 1rem;
}
button {
margin-left: 10px;
}
select {
margin-left: 10px;
}
.timeline {
margin-top: 10px;
border-top: 1px solid #ddd;
padding-top: 8px;
}
.timeline-item {
margin: 6px 0;
padding: 6px;
border-left: 3px solid #ccc;
padding-left: 12px;
}
.reply {
border-color: #2b9af3;
}
.delivery {
border-color: #3ccf64;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="chat-box">
<h2>🧠 GPT SMS Assistant</h2>
<form id="chat-form">
<input type="text" id="user-input" placeholder="Ask about SMS history or send a message..." />
<button type="submit">Send</button>
</form>
<div id="messages"></div>
</div>
<!-- Replace this part -->
<!-- Embedded Report Chart in chat.html -->
<div id="report-chart" class="hidden" style="margin-top: 40px;">
<h3>📈 SMS Report Summary</h3>
<iframe id="report-iframe" src="" style="width: 100%; height: 500px; border: none;"></iframe>
</div>
<script>
const form = document.getElementById("chat-form");
const input = document.getElementById("user-input");
const messages = document.getElementById("messages");
form.addEventListener("submit", async (e) => {
e.preventDefault();
const userMsg = input.value.trim();
if (!userMsg) return;
appendMessage("You", userMsg, "user");
input.value = "";
try {
const response = await fetch("http://localhost:4000/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userMsg })
});
const data = await response.json();
appendMessage("Assistant", data.reply, "assistant");
if (data.action === "get_sms_context" && data.data?.context) {
renderContext(data.data.context);
}
// Trigger embedded report if action is show_sms_report
if (data.action === "show_sms_report" && data.data?.phone_number) {
showReportFor(data.data.phone_number);
}
} catch (err) {
appendMessage("Assistant", "❌ Error: " + err.message, "assistant");
}
});
function appendMessage(sender, text, cssClass) {
const div = document.createElement("div");
div.className = "message " + cssClass;
div.innerHTML = `<strong>${sender}:</strong> ${text}`;
messages.appendChild(div);
messages.scrollTop = messages.scrollHeight;
}
function renderContext(contextBlocks) {
const combined = [];
contextBlocks.forEach(block => {
const label = block.label.toLowerCase();
const type = label.includes("reply") ? "reply" : "delivery";
(block.value || []).forEach(entry => {
const content = entry.content || entry.reply_content || entry.status || "[no content]";
const timestamp = entry.date_received || entry.timestamp || "N/A";
const id = entry.message_id || "";
combined.push({
type,
content,
timestamp,
id
});
});
});
combined.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
const wrapper = document.createElement("div");
wrapper.className = "context-block";
const toggle = document.createElement("div");
toggle.className = "context-label";
toggle.textContent = "📅 Timeline ▼";
toggle.style.cursor = "pointer";
const timeline = document.createElement("div");
timeline.className = "timeline";
combined.forEach(item => {
const line = document.createElement("div");
line.className = `timeline-item ${item.type}`;
line.textContent = `[${item.timestamp}] (${item.type}) → ${item.content}`;
if (item.id) line.textContent += ` | ID: ${item.id}`;
timeline.appendChild(line);
});
toggle.addEventListener("click", () => {
timeline.classList.toggle("hidden");
toggle.textContent = timeline.classList.contains("hidden") ? "📅 Timeline ▶" : "📅 Timeline ▼";
});
wrapper.appendChild(toggle);
wrapper.appendChild(timeline);
messages.appendChild(wrapper);
messages.scrollTop = messages.scrollHeight;
}
function showReportFor(phoneNumber) {
const reportContainer = document.getElementById("report-chart");
const iframe = document.getElementById("report-iframe");
// Dynamically update iframe src
iframe.src = `/sms_report_live_dashboard.html?phone=${encodeURIComponent(phoneNumber)}`;
// Unhide chart section
reportContainer.classList.remove("hidden");
}
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
- Model Context Protocol Proxies: Enabling Enterprise Control with Virtual MCPsBy Om-Shree-0709 on .AI SecurityVirtual MCPKubernetes Operator
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/larryfang/sms-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server