Shutter MCP
Official- ShutterMCP
- src
- static
index.html•8.98 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>shutter-mcp-server</title>
<style>
body { font-family: sans-serif; margin: 20px; }
.section { margin-bottom: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
h2 { margin-top: 0; }
label { display: inline-block; width: 80px; margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="number"] { margin-bottom: 10px; padding: 5px; width: 200px; }
button { padding: 8px 15px; margin-right: 10px; cursor: pointer; }
pre { background-color: #f4f4f4; padding: 10px; border: 1px solid #ddd; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; }
</style>
</head>
<body>
<h1>User API Test</h1>
<!-- Get All Users -->
<div class="section">
<h2>Get All Users (GET /users)</h2>
<button onclick="getUsers()">Get Users</button>
<pre id="get-users-result"></pre>
</div>
<!-- Create User -->
<div class="section">
<h2>Create User (POST /users)</h2>
<label for="create-username">Username:</label>
<input type="text" id="create-username" name="username"><br>
<label for="create-email">Email:</label>
<input type="email" id="create-email" name="email"><br>
<button onclick="createUser()">Create User</button>
<pre id="create-user-result"></pre>
</div>
<!-- Get Single User -->
<div class="section">
<h2>Get Single User (GET /users/<id>)</h2>
<label for="get-user-id">User ID:</label>
<input type="number" id="get-user-id" name="user_id"><br>
<button onclick="getUser()">Get User</button>
<pre id="get-user-result"></pre>
</div>
<!-- Update User -->
<div class="section">
<h2>Update User (PUT /users/<id>)</h2>
<label for="update-user-id">User ID:</label>
<input type="number" id="update-user-id" name="user_id"><br>
<label for="update-username">New Username:</label>
<input type="text" id="update-username" name="username"><br>
<label for="update-email">New Email:</label>
<input type="email" id="update-email" name="email"><br>
<button onclick="updateUser()">Update User</button>
<pre id="update-user-result"></pre>
</div>
<!-- Delete User -->
<div class="section">
<h2>Delete User (DELETE /users/<id>)</h2>
<label for="delete-user-id">User ID:</label>
<input type="number" id="delete-user-id" name="user_id"><br>
<button onclick="deleteUser()">Delete User</button>
<pre id="delete-user-result"></pre>
</div>
<script>
const API_BASE_URL = '/api/users';
// Helper function to display results
function displayResult(elementId, data) {
document.getElementById(elementId).textContent = JSON.stringify(data, null, 2);
}
// Helper function to display errors
function displayError(elementId, error) {
document.getElementById(elementId).textContent = `Error: ${error.message || error}`;
}
// GET /users
async function getUsers() {
const resultElementId = 'get-users-result';
try {
const response = await fetch(API_BASE_URL);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
displayResult(resultElementId, data);
} catch (error) {
displayError(resultElementId, error);
}
}
// POST /users
async function createUser() {
const resultElementId = 'create-user-result';
const username = document.getElementById('create-username').value;
const email = document.getElementById('create-email').value;
if (!username || !email) {
displayError(resultElementId, 'Username and email cannot be empty');
return;
}
try {
const response = await fetch(API_BASE_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, email })
});
const data = await response.json();
if (!response.ok) throw new Error(data.message || `HTTP error! status: ${response.status}`);
displayResult(resultElementId, data);
// 清空输入框
document.getElementById('create-username').value = '';
document.getElementById('create-email').value = '';
} catch (error) {
displayError(resultElementId, error);
}
}
// GET /users/<id>
async function getUser() {
const resultElementId = 'get-user-result';
const userId = document.getElementById('get-user-id').value;
if (!userId) {
displayError(resultElementId, 'User ID cannot be empty');
return;
}
try {
const response = await fetch(`${API_BASE_URL}/${userId}`);
if (response.status === 404) throw new Error('User not found');
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
displayResult(resultElementId, data);
} catch (error) {
displayError(resultElementId, error);
}
}
// PUT /users/<id>
async function updateUser() {
const resultElementId = 'update-user-result';
const userId = document.getElementById('update-user-id').value;
const username = document.getElementById('update-username').value;
const email = document.getElementById('update-email').value;
if (!userId) {
displayError(resultElementId, 'User ID cannot be empty');
return;
}
const updateData = {};
if (username) updateData.username = username;
if (email) updateData.email = email;
if (Object.keys(updateData).length === 0) {
displayError(resultElementId, 'Please enter a username or email to update');
return;
}
try {
const response = await fetch(`${API_BASE_URL}/${userId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(updateData)
});
if (response.status === 404) throw new Error('User not found');
const data = await response.json();
if (!response.ok) throw new Error(data.message || `HTTP error! status: ${response.status}`);
displayResult(resultElementId, data);
// Clear input fields
document.getElementById('update-username').value = '';
document.getElementById('update-email').value = '';
} catch (error) {
displayError(resultElementId, error);
}
}
// DELETE /users/<id>
async function deleteUser() {
const resultElementId = 'delete-user-result';
const userId = document.getElementById('delete-user-id').value;
if (!userId) {
displayError(resultElementId, 'User ID cannot be empty');
return;
}
try {
const response = await fetch(`${API_BASE_URL}/${userId}`, {
method: 'DELETE'
});
if (response.status === 404) throw new Error('User not found');
if (!response.ok && response.status !== 204) throw new Error(`HTTP error! status: ${response.status}`); // Allow 204
// 204 No Content indicates success
if (response.status === 204) {
displayResult(resultElementId, { message: `User ID ${userId} has been successfully deleted` });
} else {
// Try to read potential error message even on success-like status if not 204
const data = await response.text();
displayResult(resultElementId, data || { message: `Deletion successful, status code: ${response.status}` });
}
// Clear input field
document.getElementById('delete-user-id').value = '';
} catch (error) {
displayError(resultElementId, error);
}
}
</script>
</body>
</html>
Latest Blog Posts
- 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/shutter-network/ShutterMCP'
If you have feedback or need assistance with the MCP directory API, please join our Discord server