d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-15 05:29:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add popular MCPs

Browse Source
This commit is contained in:
andrepimenta
2025-07-11 23:06:35 +01:00
parent 03b0eb96fe
commit cba6138828
2 changed files with 140 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/ui-styles.ts
View File

@@ -2473,6 +2473,71 @@ const styles = `
font-style: italic;
padding: 40px 20px;
}
/* Popular MCP Servers */
.mcp-popular-servers {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--vscode-panel-border);
}
.mcp-popular-servers h4 {
margin: 0 0 16px 0;
font-size: 14px;
font-weight: 600;
color: var(--vscode-foreground);
opacity: 0.9;
}
.popular-servers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
.popular-server-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.popular-server-item:hover {
border-color: var(--vscode-focusBorder);
background-color: var(--vscode-list-hoverBackground);
transform: translateY(-1px);
}
.popular-server-icon {
font-size: 24px;
flex-shrink: 0;
}
.popular-server-info {
flex: 1;
min-width: 0;
}
.popular-server-name {
font-weight: 600;
font-size: 13px;
color: var(--vscode-foreground);
margin-bottom: 2px;
}
.popular-server-desc {
font-size: 11px;
color: var(--vscode-descriptionForeground);
opacity: 0.8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>`
export default styles

80
src/ui.ts
View File

@@ -162,6 +162,53 @@ const html = `<!DOCTYPE html>
<div class="mcp-add-server">
<button class="btn outlined" onclick="showAddServerForm()" id="addServerBtn">+ Add MCP Server</button>
</div>
<div class="mcp-popular-servers" id="popularServers">
<h4>Popular MCP Servers</h4>
<div class="popular-servers-grid">
<div class="popular-server-item" onclick="addPopularServer('filesystem', { type: 'stdio', command: 'npx', args: ['-y', '@modelcontextprotocol/server-filesystem'] })">
<div class="popular-server-icon">📁</div>
<div class="popular-server-info">
<div class="popular-server-name">Filesystem</div>
<div class="popular-server-desc">File operations & management</div>
</div>
</div>
<div class="popular-server-item" onclick="addPopularServer('github', { type: 'stdio', command: 'npx', args: ['-y', '@modelcontextprotocol/server-github'] })">
<div class="popular-server-icon">🐙</div>
<div class="popular-server-info">
<div class="popular-server-name">GitHub</div>
<div class="popular-server-desc">Repository & issue management</div>
</div>
</div>
<div class="popular-server-item" onclick="addPopularServer('brave-search', { type: 'stdio', command: 'npx', args: ['-y', '@modelcontextprotocol/server-brave-search'] })">
<div class="popular-server-icon">🔍</div>
<div class="popular-server-info">
<div class="popular-server-name">Brave Search</div>
<div class="popular-server-desc">Web search capabilities</div>
</div>
</div>
<div class="popular-server-item" onclick="addPopularServer('memory', { type: 'stdio', command: 'npx', args: ['-y', '@modelcontextprotocol/server-memory'] })">
<div class="popular-server-icon">🧠</div>
<div class="popular-server-info">
<div class="popular-server-name">Memory</div>
<div class="popular-server-desc">Knowledge graph storage</div>
</div>
</div>
<div class="popular-server-item" onclick="addPopularServer('puppeteer', { type: 'stdio', command: 'npx', args: ['-y', '@modelcontextprotocol/server-puppeteer'] })">
<div class="popular-server-icon">🎭</div>
<div class="popular-server-info">
<div class="popular-server-name">Puppeteer</div>
<div class="popular-server-desc">Browser automation</div>
</div>
</div>
<div class="popular-server-item" onclick="addPopularServer('fetch', { type: 'stdio', command: 'npx', args: ['-y', '@modelcontextprotocol/server-fetch'] })">
<div class="popular-server-icon">🌐</div>
<div class="popular-server-info">
<div class="popular-server-name">Fetch</div>
<div class="popular-server-desc">HTTP requests & web scraping</div>
</div>
</div>
</div>
</div>
<div class="mcp-add-form" id="addServerForm" style="display: none;">
<div class="form-group">
<label for="serverName">Server Name:</label>
@@ -1597,11 +1644,13 @@ const html = `<!DOCTYPE html>
function showAddServerForm() {
document.getElementById('addServerBtn').style.display = 'none';
document.getElementById('popularServers').style.display = 'none';
document.getElementById('addServerForm').style.display = 'block';
}
function hideAddServerForm() {
document.getElementById('addServerBtn').style.display = 'block';
document.getElementById('popularServers').style.display = 'block';
document.getElementById('addServerForm').style.display = 'none';
// Clear form
document.getElementById('serverName').value = '';
@@ -1701,12 +1750,30 @@ const html = `<!DOCTYPE html>
}
function deleteMCPServer(serverName) {
if (confirm(\`Are you sure you want to delete the server "\${serverName}"?\`)) {
vscode.postMessage({
type: 'deleteMCPServer',
name: serverName
});
// Just delete without confirmation
vscode.postMessage({
type: 'deleteMCPServer',
name: serverName
});
}
function addPopularServer(name, config) {
// Check if server already exists
const serversList = document.getElementById('mcpServersList');
const existingServers = serversList.querySelectorAll('.server-name');
for (let server of existingServers) {
if (server.textContent === name) {
alert(\`Server "\${name}" already exists.\`);
return;
}
}
// Add the server
vscode.postMessage({
type: 'saveMCPServer',
name: name,
config: config
});
}
function displayMCPServers(servers) {
@@ -2329,6 +2396,9 @@ const html = `<!DOCTYPE html>
// Permission request functions
function addPermissionRequestMessage(data) {
const messagesDiv = document.getElementById('messages');
const shouldScroll = shouldAutoScroll(messagesDiv);
const messageDiv = document.createElement('div');
messageDiv.className = 'message permission-request';