index.html•13.9 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>VeChain MCP Server</title>
<meta name="description"
content="This page documents and helps you configure an MCP server exposing VeChain Docs search plus Thorest API tools for accounts, transactions, blocks and fee suggestions." />
<link rel="icon" href="favicon.ico" />
<style>
:root {
--bg: #0b0d10;
--panel: #0f1318;
--muted: #9aa4b2;
--text: #e6edf3;
--brand: #21d0b2;
--brand-2: #7c6cf5;
--ring: 0 0 0 3px rgba(33, 208, 178, .35);
--radius: 12px;
--code-bg: #0a0d12;
--border: #1c232d;
--shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: light) {
:root {
--bg: #f7fafc;
--panel: #ffffff;
--text: #0b1020;
--muted: #5b6777;
--border: #e8eef5;
--code-bg: #0b1020;
}
.code pre {
background: #0b1020;
color: #e6edf3;
}
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font: 16px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Inter, system-ui, Arial;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--brand);
text-decoration: none;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 24px;
}
header.nav {
position: sticky;
top: 0;
z-index: 50;
backdrop-filter: saturate(120%) blur(10px);
background: color-mix(in oklab, var(--bg), transparent 60%);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 24px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
letter-spacing: .2px;
}
.logo {
width: 60px;
height: 60px;
display: grid;
place-items: center;
border-radius: 8px;
}
.tabs {
margin-left: auto;
display: flex;
gap: 6px;
background: var(--panel);
padding: 6px;
border-radius: 999px;
border: 1px solid var(--border);
}
.tab {
border: 0;
padding: 8px 14px;
border-radius: 999px;
color: var(--muted);
background: transparent;
cursor: pointer;
font-weight: 600;
}
.tab.active {
color: #0b0f14;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow: var(--shadow);
}
.hero {
padding: 40px 0 16px;
}
.hero h1 {
font-size: clamp(28px, 4vw, 40px);
margin: 4px 0;
}
.tagline {
color: var(--muted);
max-width: 60ch;
}
.pill {
border: 1px solid var(--border);
padding: 6px 10px;
border-radius: 999px;
background: color-mix(in oklab, var(--panel), transparent 20%);
display: inline-flex;
align-items: center;
gap: 8px;
}
.section {
margin: 28px 0;
}
.muted {
color: var(--muted);
}
.code {
position: relative;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
background: color-mix(in oklab, var(--panel), transparent 0%);
}
.code .bar {
display: flex;
gap: 8px;
padding: 10px 12px;
align-items: center;
background: color-mix(in oklab, var(--panel), transparent 6%);
border-bottom: 1px solid var(--border);
}
.dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #ff5f57;
}
.dot:nth-child(2) {
background: #ffbd2e;
}
.dot:nth-child(3) {
background: #28c840;
}
pre {
margin: 0;
padding: 16px;
overflow: auto;
font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
background: var(--code-bg);
color: #cde3ff;
}
code {
font-family: inherit;
}
.copy {
position: absolute;
top: 8px;
right: 8px;
border: 1px solid var(--border);
background: color-mix(in oklab, var(--panel), transparent 10%);
color: var(--muted);
padding: 6px 10px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
}
.copy:focus {
outline: none;
box-shadow: var(--ring);
}
.kbd {
border: 1px solid #1f2937;
padding: 2px 6px;
border-radius: 6px;
background: #0e1621;
color: #d1e5ff;
font: 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.input,
select {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: color-mix(in oklab, var(--panel), transparent 10%);
color: var(--text);
}
.row {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 12px;
align-items: center;
}
@media (max-width: 720px) {
.row {
grid-template-columns: 1fr;
}
}
.btn {
appearance: none;
border: 0;
padding: 10px 14px;
border-radius: 10px;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #0b0f14;
font-weight: 700;
cursor: pointer;
}
.btn.secondary {
background: color-mix(in oklab, var(--panel), transparent 10%);
color: var(--text);
border: 1px solid var(--border);
}
details {
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
background: color-mix(in oklab, var(--panel), transparent 10%);
}
summary {
cursor: pointer;
font-weight: 700;
}
footer {
padding: 40px 24px;
color: var(--muted);
}
#playground section {
margin-top: 14px;
}
#playground ul {
margin: 8px 0 0 60px;
padding: 0;
}
#playground code {
background: rgba(0, 0, 0, 0.12);
padding: 2px 6px;
border-radius: 6px;
font-size: 0.95em;
color: var(--text);
}
#playground h4 {
margin-left: 20px;
}
</style>
</head>
<body>
<header class="nav">
<div class="nav-inner container">
<div class="brand">
<img src="./images/isotipo.png" alt="VeChain logo" class="logo" />
<div>VeChain MCP Server</div>
</div>
<nav class="tabs" role="tablist" aria-label="Primary">
<button class="tab active" data-tab="docs" role="tab" aria-selected="true">Docs</button>
</nav>
</div>
</header>
<main class="container">
<section class="hero">
<p class="pill">MCP • Model Context Protocol <span class="muted">for VeChain</span></p>
<h1>VeChain MCP Server</h1>
<p class="tagline">This page documents and helps you configure an MCP server exposing VeChain Docs search
plus Thorest API tools for accounts, transactions, blocks and fee suggestions.</p>
<a href="https://github.com/leandrogavidia/vechain-mcp-server" target="_blank"
rel="noopener noreferrer">GitHub Repository</a>
</section>
<div id="tab-docs" role="tabpanel">
<div id="integration" class="section">
<h2>Integrations</h2>
<p class="muted">Register the server in your MCP-aware host configuration.</p>
<div class="code" data-copy>
<div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
<pre><code class="language-json">{
"mcpServers": {
"vechainMcp": {
"url": "https://server.smithery.ai/@leandrogavidia/vechain-mcp-server/mcp",
"type": "streamable-http"
}
}
}</code></pre>
<button class="copy" title="Copy">Copy</button>
</div>
</div>
<div class="section" id="playground">
<h2>Tool list</h2>
<p class="muted">
A read-only list of the available tools. Use these names when constructing MCP requests.
</p>
<section>
<h3>Vechain Docs</h3>
<ul>
<li><code>search_documentation</code> — Search VeChain Documentation.</li>
</ul>
</section>
<section>
<h3>Thorest API</h3>
<h4>Accounts</h4>
<ul>
<li><code>get_account</code> — Retrieve account details.</li>
</ul>
<h4>Transactions</h4>
<ul>
<li><code>get_transaction</code> — Retrieve a transaction by ID.</li>
</ul>
<h4>Blocks</h4>
<ul>
<li><code>get_block</code> — Get a VeChain block.</li>
</ul>
<h4>Fees</h4>
<ul>
<li><code>get_priority_fee</code> — Suggest a priority fee.</li>
</ul>
</section>
<section>
<h3>Wallet & signatures</h3>
<h4>Wallet</h4>
<ul>
<li><code>create_wallet</code> — Create a VeChain wallet (mnemonic + keys).</li>
</ul>
<h4>Signatures</h4>
<ul>
<li><code>sign_certificate</code> — Create and sign a canonical certificate.</li>
<li><code>sign_raw_transaction</code> — Sign raw transaction.</li>
</ul>
</section>
<section>
<h3>Goat SDK (VeChain Tools)</h3>
<ul>
<li><code>get_address</code> — Get the address of the wallet</li>
<li><code>get_chain</code> — Get the chain of the wallet</li>
<li><code>sign_message</code> — Sign a message with the wallet</li>
<li><code>get_balance</code> — Get the balance for native currency or a specific token</li>
<li><code>get_token_info_by_ticker</code> — Get token info (contract, decimals) by ticker</li>
<li><code>convert_to_base_units</code> — Convert a token amount to base units (e.g., wei)</li>
<li><code>convert_from_base_units</code> — Convert from base units to readable units</li>
<li><code>sign_typed_data_evm</code> — Sign EIP-712 typed data (EVM)</li>
<li><code>get_token_allowance_evm</code> — Get ERC20 allowance (base units)</li>
<li><code>send_token</code> — Send native currency or ERC20 token (base units)</li>
<li><code>approve_token_evm</code> — Approve ERC20 token allowance (base units)</li>
<li><code>revoke_token_approval_evm</code> — Revoke ERC20 token approval (set allowance to 0)
</li>
</ul>
</section>
</div>
</div>
</main>
<script>
document.querySelectorAll('[data-copy] .copy').forEach(btn => {
btn.addEventListener('click', async () => {
try {
const pre = btn.parentElement.querySelector('pre');
if (!pre) return;
const text = pre.innerText || pre.textContent || '';
await navigator.clipboard.writeText(text);
const prev = btn.textContent;
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = prev || 'Copy', 1600);
} catch {
}
});
});
</script>
</body>
</html>