INTEGRATION.md•5.19 kB
# MCP Login Server Integration Example
This example shows how to use the MCP Login Server with the Playwright MCP server for complete browser automation.
## Prerequisites
1. MCP Login Server (this project) - running
2. Playwright MCP Server - running
3. MCP client (like Claude for Desktop) - configured
## Integration Steps
### 1. Start Both MCP Servers
First, ensure both servers are running:
```bash
# Terminal 1 - Start the login server
cd /path/to/mcp-login-server
npm start
# Terminal 2 - Start the playwright server
cd /path/to/playwright-mcp-server
npm start
```
### 2. Configure MCP Client
Add both servers to your MCP client configuration:
```json
{
"mcpServers": {
"login-server": {
"command": "node",
"args": ["C:\\Dev\\mcp\\custom\\build\\index.js"]
},
"playwright": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-playwright"]
}
}
}
```
### 3. Usage Examples
#### Basic Login Workflow
```typescript
// 1. Test connection to target URL
const connectionTest = await mcp.callTool("test_connection", {});
// 2. Get login credentials
const credentials = await mcp.callTool("get_login_credentials", {});
// 3. Get login instructions
const loginInstructions = await mcp.callTool("perform_login", {
url: "http://localhost"
});
// 4. Execute browser automation using Playwright MCP
await mcp.callTool("playwright_navigate", {
url: "http://localhost"
});
await mcp.callTool("playwright_type", {
selector: 'input[name="username"]',
text: "admin"
});
await mcp.callTool("playwright_type", {
selector: 'input[name="password"]',
text: "AIWorkshopJuly!25"
});
await mcp.callTool("playwright_click", {
selector: 'button[type="submit"]'
});
```
#### Advanced Usage with Error Handling
```typescript
async function performAutomatedLogin() {
try {
// Step 1: Verify connection
const connectionResult = await mcp.callTool("test_connection", {});
if (!connectionResult.success) {
throw new Error("Target URL is not accessible");
}
// Step 2: Get login instructions
const loginData = await mcp.callTool("perform_login", {
url: "http://localhost"
});
// Step 3: Execute browser automation
await mcp.callTool("playwright_navigate", {
url: "http://localhost"
});
// Wait for page to load
await mcp.callTool("playwright_wait_for_selector", {
selector: 'input[name="username"]',
timeout: 5000
});
// Fill username
await mcp.callTool("playwright_type", {
selector: 'input[name="username"]',
text: "admin"
});
// Fill password
await mcp.callTool("playwright_type", {
selector: 'input[name="password"]',
text: "AIWorkshopJuly!25"
});
// Click login button
await mcp.callTool("playwright_click", {
selector: 'button[type="submit"]'
});
// Wait for successful login
await mcp.callTool("playwright_wait_for_url", {
url: "**/dashboard**",
timeout: 10000
});
console.log("Login successful!");
return { success: true, message: "Login completed successfully" };
} catch (error) {
console.error("Login failed:", error);
return { success: false, error: error.message };
}
}
```
## Tool Descriptions
### Login Server Tools
- **perform_login**: Provides login instructions and credentials
- **get_login_credentials**: Returns credential information for verification
- **test_connection**: Tests if the target URL is accessible
### Playwright Server Tools (examples)
- **playwright_navigate**: Navigate to a URL
- **playwright_type**: Type text into an input field
- **playwright_click**: Click on an element
- **playwright_wait_for_selector**: Wait for an element to appear
- **playwright_wait_for_url**: Wait for URL to match a pattern
- **playwright_screenshot**: Take a screenshot
- **playwright_get_text**: Get text content from an element
## Benefits of Integration
1. **Separation of Concerns**: Login logic is separate from browser automation
2. **Reusability**: Login credentials can be used across different automation workflows
3. **Error Handling**: Connection testing before attempting automation
4. **Modularity**: Each server can be developed and maintained independently
5. **Scalability**: Easy to add more specialized servers for different tasks
## Best Practices
1. **Always test connection** before starting automation
2. **Handle errors gracefully** in both servers
3. **Use appropriate timeouts** for browser operations
4. **Validate credentials** before use
5. **Log operations** for debugging
6. **Clean up resources** after automation
## Troubleshooting
### Common Issues
1. **Connection failed**: Check if localhost server is running
2. **Login failed**: Verify credentials are correct
3. **Elements not found**: Check selector accuracy
4. **Timeouts**: Increase timeout values for slow pages
### Debug Commands
```bash
# Test login server
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list"}' | node build/index.js
# Test connection
echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": {"name": "test_connection", "arguments": {}}}' | node build/index.js
```