<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP Testing Suite</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f8f9fa;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/* Loading animation */
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-size: 1.2rem;
color: #007bff;
}
.loading::after {
content: '...';
animation: dots 1.5s steps(5, end) infinite;
}
@keyframes dots {
0%, 20% {
color: rgba(0,123,255,0);
text-shadow:
.25em 0 0 rgba(0,123,255,0),
.5em 0 0 rgba(0,123,255,0);
}
40% {
color: #007bff;
text-shadow:
.25em 0 0 rgba(0,123,255,0),
.5em 0 0 rgba(0,123,255,0);
}
60% {
text-shadow:
.25em 0 0 #007bff,
.5em 0 0 rgba(0,123,255,0);
}
80%, 100% {
text-shadow:
.25em 0 0 #007bff,
.5em 0 0 #007bff;
}
}
</style>
</head>
<body>
<div id="root">
<div class="loading">🔬 Loading MCP Testing Suite</div>
</div>
<!-- React Development Scripts -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your React App -->
<script type="text/babel" src="useMCP.js"></script>
<script type="text/babel" src="mcpService.js"></script>
<script type="text/babel" src="MasterTester.jsx"></script>
<script type="text/babel" src="Test.jsx"></script>
<script type="text/babel" src="MCPTestComponent.jsx"></script>
<script type="text/babel" src="StreamingChatTest.jsx"></script>
<script type="text/babel" src="MCPCapabilitiesComponent.jsx"></script>
<script type="text/babel" src="App.jsx"></script>
<script type="text/babel">
const { createRoot } = ReactDOM;
const root = createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>
