Agent & Model Context Protocol (MCP) Integration: Demonstration Guide
Drishti implements a Dual-Engine Model Context Protocol (MCP) architecture supporting both the official OpenAI Model Context Protocol specification (2024-11-05) and the in-browser W3C WebMCP standard.
You can test and verify this integration through three distinct methods:
Step 1: In-App Protocol Inspector & Interactive Tool Tester ** Open the application and click the green "MCP & WebMCP Active • 6 tools" badge in the header or bottom-right Agent Workspace. ** In the modal, review the live endpoints: ** Streamable HTTP POST: /api/mcp ** Server-Sent Events (SSE): /api/mcp/sse ** OpenAI Function Calling Schema: /api/openai-tools ** Scroll to the Live Remote MCP Tester section: ** Select tools/list and click Execute via MCP to verify that all 6 tools (analyze_space, get_accessibility_summary, get_barrier_details, focus_barrier, get_recommendations, generate_accessibility_report) are served with strict JSON-RPC 2.0 schemas. ** Select tools/call: get_accessibility_summary and click Execute via MCP to view real-time scorecard data returned over the protocol.
Step 2: Terminal / cURL Protocol Handshake & Tool Calls Run these standard JSON-RPC 2.0 requests directly from any terminal to verify server compliance:
Protocol Handshake (initialize): curl -X POST "https://ais-dev-ejabumwxqy4fmoysj3clcy-357655249965.europe-west2.run.app/api/mcp" \ -H "Content-Type: application/json" \ -d '{"jsonrpc":"2.0","id":1,"method":"initialize"}'
Inspect Registered Tool Schemas (tools/list): curl -X POST "https://ais-dev-ejabumwxqy4fmoysj3clcy-357655249965.europe-west2.run.app/api/mcp" \ -H "Content-Type: application/json" \ -d '{"jsonrpc":"2.0","id":2,"method":"tools/list"}'
Query Accessibility Summary (tools/call): curl -X POST "https://ais-dev-ejabumwxqy4fmoysj3clcy-357655249965.europe-west2.run.app/api/mcp" \ -H "Content-Type: application/json" \ -d '{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"get_accessibility_summary","arguments":{}}}'
Step 3: Real-Time Human-Agent Co-Presence Test Demonstrates an external agent controlling the live human visual workspace via MCP:
- Keep the Drishti web application open in your browser window.
In a terminal, send this MCP command instructing the agent to focus Barrier #3: curl -X POST "https://ais-dev-ejabumwxqy4fmoysj3clcy-357655249965.europe-west2.run.app/api/mcp" \ -H "Content-Type: application/json" \ -d '{ "jsonrpc": "2.0", "id": 101, "method": "tools/call", "params": { "name": "focus_barrier", "arguments": { "barrier_id": 3 } } }'
Result: Within 1–2 seconds, Barrier Pin #3 ("Low Contrast Step Edging") on the human browser canvas automatically illuminates, pulses, and scrolls into view—proving seamless bidirectional co-presence between the external AI agent and the human inspector. Step 4: External Client Integration (ChatGPT / Claude / Python SDK) To connect Drishti as a live tool server in external agent runners:
Claude Desktop / ChatGPT Desktop (claude_desktop_config.json or mcp_servers.json): { "mcpServers": { "drishti-accessibility": { "url": "https://ais-dev-ejabumwxqy4fmoysj3clcy-357655249965.europe-west2.run.app/api/mcp/sse", "transport": "sse" } } }
Python openai-agents SDK: from agents import Agent, Runner from agents.mcp import MCPServerStreamableHttp
async with MCPServerStreamableHttp( url="https://ais-dev-ejabumwxqy4fmoysj3clcy-357655249965.europe-west2.run.app/api/mcp" ) as server: agent = Agent(name="AccessibilityAuditor", mcp_servers=[server]) result = await Runner.run(agent, "Summarize the major physical barriers in this space.") print(result.final_output)
Log in or sign up for Devpost to join the conversation.