MCP Tools
- mcp-tools
- public
index.html•29.9 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Word文档处理工具 - AI专用</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
:root {
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--card-shadow: 0 15px 35px rgba(0,0,0,0.1);
--text-primary: #2d3748;
--text-secondary: #4a5568;
--border-radius: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--primary-gradient);
min-height: 100vh;
padding: 20px;
color: var(--text-primary);
overflow-x: hidden;
}
/* 动态背景装饰 */
.bg-decoration {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.floating-shape {
position: absolute;
background: rgba(255,255,255,0.1);
border-radius: 50%;
animation: float 20s infinite linear;
}
.shape-1 { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
.shape-2 { width: 120px; height: 120px; top: 60%; left: 80%; animation-delay: 7s; }
.shape-3 { width: 60px; height: 60px; top: 80%; left: 20%; animation-delay: 14s; }
@keyframes float {
0% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-30px) rotate(180deg); }
100% { transform: translateY(0) rotate(360deg); }
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 350px;
gap: 25px;
min-height: calc(100vh - 40px);
}
/* 主内容区域 */
.main-panel {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--border-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.header {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
padding: 25px 30px;
position: relative;
}
.header::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/><path d="M30 50 L45 65 L70 35" stroke="rgba(255,255,255,0.3)" stroke-width="3" fill="none"/></svg>') no-repeat center;
opacity: 0.3;
}
.header h1 {
font-size: 2.2em;
margin-bottom: 8px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}
.header p {
font-size: 1.1em;
opacity: 0.9;
font-weight: 300;
}
.api-info {
background: rgba(255,255,255,0.1);
padding: 15px;
border-radius: 10px;
margin-top: 15px;
font-family: 'Courier New', monospace;
}
.tools-grid {
padding: 30px;
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
align-content: start;
}
.function-card {
background: white;
border-radius: var(--border-radius);
padding: 25px;
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.05);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.function-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: var(--transition);
}
.function-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.function-card:hover::before {
transform: scaleX(1);
}
.function-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.function-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.icon-create { background: linear-gradient(135deg, #667eea, #764ba2); }
.icon-read { background: linear-gradient(135deg, #f093fb, #f5576c); }
.icon-replace { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.icon-format { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.icon-table { background: linear-gradient(135deg, #fa709a, #fee140); }
.function-title {
font-size: 1.4em;
font-weight: 600;
color: var(--text-primary);
}
.function-description {
color: var(--text-secondary);
margin-bottom: 20px;
line-height: 1.6;
}
.api-endpoint {
background: #f8fafc;
padding: 15px;
border-radius: 8px;
border-left: 4px solid #667eea;
margin-bottom: 15px;
}
.endpoint-method {
font-weight: 600;
color: #667eea;
font-family: 'Courier New', monospace;
}
.endpoint-url {
font-family: 'Courier New', monospace;
color: var(--text-primary);
margin-top: 5px;
}
.parameters {
margin-top: 15px;
}
.parameter-title {
font-weight: 600;
margin-bottom: 10px;
color: var(--text-primary);
}
.parameter-item {
background: #f1f5f9;
padding: 10px;
border-radius: 6px;
margin-bottom: 8px;
font-size: 0.9em;
}
.param-name {
font-weight: 600;
color: #4f46e5;
font-family: 'Courier New', monospace;
}
.param-type {
color: #059669;
font-size: 0.8em;
margin-left: 8px;
}
.param-desc {
color: var(--text-secondary);
margin-top: 3px;
}
/* 侧边栏 */
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--border-radius);
box-shadow: var(--card-shadow);
overflow: hidden;
}
.sidebar-header {
padding: 20px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-content {
padding: 20px;
}
/* 状态指示器 */
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 8px;
margin-bottom: 15px;
font-size: 14px;
font-weight: 500;
}
.status-connected {
background: rgba(34, 197, 94, 0.1);
color: #15803d;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.status-disconnected {
background: rgba(239, 68, 68, 0.1);
color: #dc2626;
border: 1px solid rgba(239, 68, 68, 0.2);
}
/* 统计卡片 */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.stat-card {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
padding: 15px;
border-radius: 10px;
text-align: center;
}
.stat-number {
font-size: 1.8em;
font-weight: 700;
color: var(--text-primary);
}
.stat-label {
font-size: 0.9em;
color: var(--text-secondary);
margin-top: 5px;
}
.api-summary {
background: #f8fafc;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.api-summary h3 {
color: var(--text-primary);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.api-list {
list-style: none;
}
.api-list li {
padding: 8px 0;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.api-list li:last-child {
border-bottom: none;
}
.api-name {
font-family: 'Courier New', monospace;
color: #4f46e5;
font-weight: 600;
}
.api-method {
background: #667eea;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8em;
font-weight: 600;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr;
gap: 20px;
}
.tools-grid {
grid-template-columns: 1fr;
}
}
.mcp-info {
background: rgba(255,255,255,0.1);
padding: 15px;
border-radius: 10px;
margin-top: 15px;
}
.mcp-protocol {
font-size: 0.9em;
color: rgba(255,255,255,0.9);
margin-bottom: 10px;
}
.usage-example {
background: #f1f5f9;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
color: var(--text-secondary);
border: 1px solid #e2e8f0;
}
</style>
</head>
<body>
<!-- 动态背景装饰 -->
<div class="bg-decoration">
<div class="floating-shape shape-1"></div>
<div class="floating-shape shape-2"></div>
<div class="floating-shape shape-3"></div>
</div>
<div class="container">
<!-- 主面板 -->
<div class="main-panel">
<div class="header">
<h1><i class="fas fa-robot"></i> MCP Word文档处理工具</h1>
<p>专为AI设计的Microsoft Word文档处理服务 - MCP协议兼容</p>
<div class="api-info">
<div class="mcp-protocol">
<i class="fas fa-link"></i> MCP协议服务器 | 端口: 3500 | 协议版本: 2024-11-05
</div>
<div style="font-size: 0.85em; opacity: 0.9;">
Base URL: http://localhost:3500 | Content-Type: application/json
</div>
</div>
</div>
<div class="tools-grid">
<!-- 创建文档功能 -->
<div class="function-card">
<div class="function-header">
<div class="function-icon icon-create">
<i class="fas fa-plus-circle"></i>
</div>
<div class="function-title">创建文档</div>
</div>
<div class="function-description">
创建新的Word文档，支持多段落内容、自动换行处理和中文字符。
</div>
<div class="api-endpoint">
<div class="endpoint-method">POST</div>
<div class="endpoint-url">/create-document</div>
</div>
<div class="parameters">
<div class="parameter-title">请求参数:</div>
<div class="parameter-item">
<span class="param-name">fileName</span>
<span class="param-type">string</span>
<div class="param-desc">文档文件名（不含扩展名）</div>
</div>
<div class="parameter-item">
<span class="param-name">title</span>
<span class="param-type">string</span>
<div class="param-desc">文档标题</div>
</div>
<div class="parameter-item">
<span class="param-name">content</span>
<span class="param-type">string</span>
<div class="param-desc">文档内容，支持多行和段落</div>
</div>
</div>
<div class="usage-example">
{
"fileName": "示例文档",
"title": "文档标题",
"content": "第一段内容\n\n第二段内容"
}
</div>
</div>
<!-- 读取文档功能 -->
<div class="function-card">
<div class="function-header">
<div class="function-icon icon-read">
<i class="fas fa-book-open"></i>
</div>
<div class="function-title">读取文档</div>
</div>
<div class="function-description">
读取Word文档内容，支持多种格式输出：纯文本、HTML、Markdown。
</div>
<div class="api-endpoint">
<div class="endpoint-method">POST</div>
<div class="endpoint-url">/read-document</div>
</div>
<div class="parameters">
<div class="parameter-title">请求参数:</div>
<div class="parameter-item">
<span class="param-name">filePath</span>
<span class="param-type">string</span>
<div class="param-desc">文档文件路径</div>
</div>
<div class="parameter-item">
<span class="param-name">format</span>
<span class="param-type">string</span>
<div class="param-desc">输出格式: text | html | markdown</div>
</div>
</div>
<div class="usage-example">
{
"filePath": "output/示例文档.docx",
"format": "text"
}
</div>
</div>
<!-- 文本替换功能 -->
<div class="function-card">
<div class="function-header">
<div class="function-icon icon-replace">
<i class="fas fa-exchange-alt"></i>
</div>
<div class="function-title">文本替换</div>
</div>
<div class="function-description">
在现有文档中查找并替换指定文本，生成新的文档文件。
</div>
<div class="api-endpoint">
<div class="endpoint-method">POST</div>
<div class="endpoint-url">/replace-text</div>
</div>
<div class="parameters">
<div class="parameter-title">请求参数:</div>
<div class="parameter-item">
<span class="param-name">filePath</span>
<span class="param-type">string</span>
<div class="param-desc">源文档路径</div>
</div>
<div class="parameter-item">
<span class="param-name">searchText</span>
<span class="param-type">string</span>
<div class="param-desc">要查找的文本</div>
</div>
<div class="parameter-item">
<span class="param-name">replaceText</span>
<span class="param-type">string</span>
<div class="param-desc">替换文本</div>
</div>
<div class="parameter-item">
<span class="param-name">outputFileName</span>
<span class="param-type">string</span>
<div class="param-desc">输出文件名</div>
</div>
</div>
<div class="usage-example">
{
"filePath": "output/原文档.docx",
"searchText": "旧文本",
"replaceText": "新文本",
"outputFileName": "更新后文档"
}
</div>
</div>
<!-- 格式化文档功能 -->
<div class="function-card">
<div class="function-header">
<div class="function-icon icon-format">
<i class="fas fa-palette"></i>
</div>
<div class="function-title">格式化文档</div>
</div>
<div class="function-description">
创建具有丰富格式的文档，支持字体样式、大小、颜色等多种格式设置。
</div>
<div class="api-endpoint">
<div class="endpoint-method">POST</div>
<div class="endpoint-url">/create-formatted-document</div>
</div>
<div class="parameters">
<div class="parameter-title">请求参数:</div>
<div class="parameter-item">
<span class="param-name">fileName</span>
<span class="param-type">string</span>
<div class="param-desc">文档文件名</div>
</div>
<div class="parameter-item">
<span class="param-name">title</span>
<span class="param-type">string</span>
<div class="param-desc">文档标题</div>
</div>
<div class="parameter-item">
<span class="param-name">contentArray</span>
<span class="param-type">array</span>
<div class="param-desc">格式化内容数组，包含文本和样式</div>
</div>
</div>
<div class="usage-example">
{
"fileName": "格式化文档",
"title": "报告标题",
"contentArray": [
{"text": "标题", "bold": true, "fontSize": 16},
{"text": "正文内容", "color": "blue"}
]
}
</div>
</div>
<!-- 表格文档功能 -->
<div class="function-card">
<div class="function-header">
<div class="function-icon icon-table">
<i class="fas fa-table"></i>
</div>
<div class="function-title">表格文档</div>
</div>
<div class="function-description">
创建包含表格的Word文档，支持自定义表头和数据行，自动格式化。
</div>
<div class="api-endpoint">
<div class="endpoint-method">POST</div>
<div class="endpoint-url">/create-table-document</div>
</div>
<div class="parameters">
<div class="parameter-title">请求参数:</div>
<div class="parameter-item">
<span class="param-name">fileName</span>
<span class="param-type">string</span>
<div class="param-desc">文档文件名</div>
</div>
<div class="parameter-item">
<span class="param-name">title</span>
<span class="param-type">string</span>
<div class="param-desc">文档标题</div>
</div>
<div class="parameter-item">
<span class="param-name">tableData</span>
<span class="param-type">object</span>
<div class="param-desc">表格数据，包含headers和rows</div>
</div>
</div>
<div class="usage-example">
{
"fileName": "数据表格",
"title": "统计报告",
"tableData": {
"headers": ["项目", "数值", "状态"],
"rows": [
["项目A", "100", "完成"],
["项目B", "85", "进行中"]
]
}
}
</div>
</div>
</div>
</div>
<!-- 侧边栏 -->
<div class="sidebar">
<!-- 服务状态 -->
<div class="sidebar-card">
<div class="sidebar-header">
<i class="fas fa-server"></i>
<span>服务状态</span>
</div>
<div class="sidebar-content">
<div class="status-indicator" id="connectionStatus">
<i class="fas fa-circle"></i>
<span>检查连接中...</span>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number">5</div>
<div class="stat-label">API端点</div>
</div>
<div class="stat-card">
<div class="stat-number">100%</div>
<div class="stat-label">可用性</div>
</div>
</div>
</div>
</div>
<!-- API总览 -->
<div class="sidebar-card">
<div class="sidebar-header">
<i class="fas fa-code"></i>
<span>API总览</span>
</div>
<div class="sidebar-content">
<div class="api-summary">
<h3><i class="fas fa-list"></i> 可用端点</h3>
<ul class="api-list">
<li>
<span class="api-name">/create-document</span>
<span class="api-method">POST</span>
</li>
<li>
<span class="api-name">/read-document</span>
<span class="api-method">POST</span>
</li>
<li>
<span class="api-name">/replace-text</span>
<span class="api-method">POST</span>
</li>
<li>
<span class="api-name">/create-formatted-document</span>
<span class="api-method">POST</span>
</li>
<li>
<span class="api-name">/create-table-document</span>
<span class="api-method">POST</span>
</li>
</ul>
</div>
<div style="font-size: 0.9em; color: #6b7280; text-align: center; padding: 15px; background: #f8fafc; border-radius: 8px;">
<i class="fas fa-robot"></i><br>
<strong>AI专用工具</strong><br>
所有功能通过MCP协议调用<br>
支持批量处理和自动化
</div>
</div>
</div>
<!-- 技术规格 -->
<div class="sidebar-card">
<div class="sidebar-header">
<i class="fas fa-cog"></i>
<span>技术规格</span>
</div>
<div class="sidebar-content">
<div style="font-size: 0.9em; line-height: 1.6;">
<div style="margin-bottom: 15px;">
<strong>支持的格式:</strong><br>
• Word文档 (.docx)<br>
• 文本输出 (text, html, markdown)
</div>
<div style="margin-bottom: 15px;">
<strong>特性支持:</strong><br>
• 多段落处理<br>
• 中文字符支持<br>
• 富文本格式<br>
• 表格创建<br>
• 文本查找替换
</div>
<div>
<strong>协议兼容:</strong><br>
• MCP (Model Context Protocol)<br>
• RESTful API<br>
• JSON数据格式
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 页面加载时检查服务器状态
document.addEventListener('DOMContentLoaded', function() {
checkServerStatus();
// 每30秒检查一次服务器状态
setInterval(checkServerStatus, 30000);
});
// 检查服务器状态
async function checkServerStatus() {
try {
const response = await fetch('http://localhost:3500/health');
const isConnected = response.ok;
updateConnectionStatus(isConnected);
} catch (error) {
updateConnectionStatus(false);
}
}
// 更新连接状态
function updateConnectionStatus(connected) {
const statusElement = document.getElementById('connectionStatus');
if (connected) {
statusElement.className = 'status-indicator status-connected';
statusElement.innerHTML = '<i class="fas fa-circle"></i><span>MCP服务器在线</span>';
} else {
statusElement.className = 'status-indicator status-disconnected';
statusElement.innerHTML = '<i class="fas fa-circle"></i><span>MCP服务器离线</span>';
}
}
// 动态添加一些装饰效果
document.querySelectorAll('.function-card').forEach((card, index) => {
card.style.animationDelay = `${index * 0.1}s`;
card.style.animation = 'fadeInUp 0.6s ease-out forwards';
});
// 添加淡入动画
const style = document.createElement('style');
style.textContent = `
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
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/starzzzzzzzzzzzzzz/mcp-tools'
If you have feedback or need assistance with the MCP directory API, please join our Discord server