<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThoughtSpot MCP Server</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
}
.logo {
text-align: center;
margin-bottom: 20px;
}
.logo img {
width: 120px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.badges {
text-align: center;
margin-bottom: 30px;
}
.badge {
margin: 0 5px;
}
h2 {
border-bottom: 1px solid #eaecef;
padding-bottom: 0.3em;
margin-top: 24px;
}
code {
background-color: #f6f8fa;
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
pre {
background-color: #f6f8fa;
padding: 16px;
border-radius: 6px;
overflow: auto;
}
pre code {
background-color: transparent;
padding: 0;
}
a {
color: #0366d6;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.toc {
background-color: #f6f8fa;
padding: 16px;
border-radius: 6px;
margin: 20px 0;
}
.toc ul {
list-style-type: none;
padding-left: 20px;
}
.toc li {
margin: 5px 0;
}
footer {
margin-top: 40px;
text-align: center;
color: #666;
}
#loading {
text-align: center;
padding: 20px;
font-size: 1.2em;
color: #666;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#error {
color: #dc3545;
text-align: center;
padding: 20px;
font-size: 1.2em;
}
.markdown-content img.badge {
margin: 0 5px;
}
.header {
display: flex;
justify-content: flex-end;
padding: 10px 0;
margin-bottom: 20px;
}
.header a {
color: #333;
font-size: 24px;
margin-left: 20px;
transition: color 0.3s ease;
}
.header a:hover {
color: #0366d6;
}
</style>
</head>
<body>
<div id="root">
<div id="loading">Loading documentation...</div>
</div>
<script type="text/babel">
// Configure marked options
marked.setOptions({
breaks: true,
gfm: true,
headerIds: true,
mangle: false
});
// Custom renderer for images to handle badges
const renderer = new marked.Renderer();
const originalImageRenderer = renderer.image.bind(renderer);
renderer.image = (href, title, text) => {
if (text && text.includes('badge')) {
return `<img src="${href}" alt="${text}" class="badge" title="${title || ''}" />`;
}
return originalImageRenderer(href, title, text);
};
async function initApp() {
try {
const { useState, useEffect } = React;
function App() {
const [content, setContent] = useState('');
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('https://raw.githubusercontent.com/thoughtspot/mcp-server/main/README.md')
.then(response => {
if (!response.ok) {
throw new Error('Failed to load README.md');
}
return response.text();
})
.then(text => {
setContent(text);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []);
if (loading) {
return <div id="loading">Loading documentation...</div>;
}
if (error) {
return <div id="error">Error: {error}</div>;
}
return (
<React.Fragment>
<header className="header">
<a href="https://github.com/thoughtspot/mcp-server" target="_blank" rel="noopener noreferrer" title="GitHub Repository">
<i className="fab fa-github"></i>
</a>
<a href="https://www.developers.thoughtspot.com" target="_blank" rel="noopener noreferrer" title="ThoughtSpot Website"
style={{ display: 'flex', alignItems: 'center', fontSize: '12px' }}>
Thoughtspot for Developers
</a>
</header>
<div
className="markdown-content"
dangerouslySetInnerHTML={{ __html: marked.parse(content, { renderer }) }}
/>
</React.Fragment>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
} catch (error) {
document.getElementById('root').innerHTML = `
<div id="error">
Error: Failed to initialize application. Please refresh the page.
<br>
Details: ${error.message}
</div>
`;
}
}
initApp();
</script>
</body>
</html>
