Val Town Code SearchReturn to Val Town

9}
10
11interface MCPContextAPI {
12  // Tool operations
13  listTools: () => Promise<any[]>;
37 * - Renders HTML in a secure iframe
38 * - Provides fullscreen enter/exit affordances
39 * - Exposes MCP context API to iframe content
40 * - Handles iframe communication via postMessage
41 */
47  console.log("[MCP/Browser Renderer] HTMLRenderer: Rendering HTML:", { mcpClients });
48
49  // Create MCP context API that will be exposed to iframe
50  const createMCPContext = useCallback((): MCPContextAPI => {
51    const findClientByName = (serverName: string) => {
52      console.log("[MCP/Browser Renderer] Finding client by name:", serverName, mcpClients);
177      const { type, id, method, args } = event.data;
178
179      if (type !== "mcp-api-call") {
180        return;
181      }
186
187        if (typeof methodFunc !== "function") {
188          throw new Error(`Unknown MCP API method: ${method}`);
189        }
190
192
193        iframe.contentWindow?.postMessage({
194          type: "mcp-api-response",
195          id,
196          success: true,
199      } catch (error) {
200        iframe.contentWindow?.postMessage({
201          type: "mcp-api-response",
202          id,
203          success: false,
222    </script>
223      <script>
224        // MCP Context API for iframe content
225        window.mcpContext = {
226          // Async wrapper for postMessage communication
227          async callAPI(method, ...args) {
228            return new Promise((resolve, reject) => {
229              const id = Math.random().toString(36).substr(2, 9);
230              
231              const handleResponse = (event) => {
232                if (event.data.type === 'mcp-api-response' && event.data.id === id) {
233                  window.removeEventListener('message', handleResponse);
234                  if (event.data.success) {
243              
244              window.parent.postMessage({
245                type: 'mcp-api-call',
246                id,
247                method,
252              setTimeout(() => {
253                window.removeEventListener('message', handleResponse);
254                reject(new Error('MCP API call timeout'));
255              }, 30000);
256            });
258          
259          // Convenience methods
260          async listTools() { return this.callAPI('listTools'); },
261          async callTool(serverName, toolName, args) { return this.callAPI('callTool', serverName, toolName, args); },
262          async listPrompts() { return this.callAPI('listPrompts'); },
263          async getPrompt(serverName, promptName, args) { return this.callAPI('getPrompt', serverName, promptName, args); },
264          async listResources() { return this.callAPI('listResources'); },
265          async readResource(serverName, uri) { return this.callAPI('readResource', serverName, uri); },
266          log(level, message, data) { this.callAPI('log', level, message, data); },
267          requestFullscreen() { this.callAPI('requestFullscreen'); },
268          exitFullscreen() { this.callAPI('exitFullscreen'); },
269          async isFullscreen() { return this.callAPI('isFullscreen'); }
270        };
271        

1import { getArticle, getAuthor } from "./_api.ts";
2import { createServer } from "./_server.ts";
3