[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_408":409,"_410":411},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_110":88,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":123,"_124":125,"_126":25,"_127":128,"_129":59,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",600,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/ai/elements.ts","latestPath","fileId","1c34bd5a-42ef-11f0-92da-76b3cceeab13","name","elements.ts","fileType","script","content","import \"https://esm.town/v/wolf/StubFS@15-main/stubFs.ts\";\nimport { generateObject } from \"npm:ai\";\nimport { google } from \"npm:@ai-sdk/google\";\nimport { z } from \"npm:zod\";\nimport { Browser, Page } from \"npm:puppeteer-core\";\n\nclass Scraper {\n private page: Page;\n\n constructor(private url: string, private browser: Browser) { }\n\n public static of(url: string, browser: Browser): Scraper {\n return new Scraper(url, browser);\n }\n\n private async initialize(): Promise {\n this.page = await this.browser.newPage();\n await this.page.goto(this.url, {\n timeout: 10_000,\n waitUntil: \"domcontentloaded\",\n });\n }\n\n private async extractElements() {\n return await this.page.evaluate(() => {\n const selectors = [\n \"input\",\n \"button\",\n \"select\",\n \"textarea\",\n \"form\",\n \"table\",\n \"ul\",\n \"ol\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"pre\",\n \"article\",\n \"section\",\n ];\n\n return selectors.flatMap((selector) =>\n Array.from(document.querySelectorAll(selector)).map((el, i) => {\n // Add a unique ID to the element for reference\n const elementId = `element_${selector}_${i}`;\n el.setAttribute(\"data-element-id\", elementId);\n\n return {\n elementId,\n text: el.textContent?.trim().substring(0, 200) || \"\",\n type: el.tagName.toLowerCase(),\n };\n })\n ).filter((el) =>\n el.text.length > 5 ||\n [\"input\", \"button\", \"select\", \"textarea\"].includes(el.type)\n );\n });\n }\n\n public async findUsefulElements() {\n await this.initialize();\n const elements = await this.extractElements();\n\n const { object: usefulElements } = await generateObject({\n model: google(\"gemini-2.0-flash\"),\n schema: z.array(z.object({\n elementId: z.string().describe(\"The elementId from the provided elements list\"),\n importance: z.number().int().min(1).max(10),\n dataType: z.string(),\n reason: z.string(),\n })),\n prompt:\n `Analyze these webpage elements and identify the most useful ones for interaction or data extraction:\n\nURL: ${this.url}\n\nElements: ${JSON.stringify(elements)}\n\nFor each useful element, provide the exact elementId from the elements list above.\nFocus on interactive elements (inputs, buttons, forms) and elements with valuable data.\nRate importance 1-10.\n\nIMPORTANT: Only use elementId values that exist in the provided elements list. Do not create new IDs.`,\n });\n\n return usefulElements.map((useful) => {\n const originalElement = elements.find((el) =>\n el.elementId === useful.elementId\n );\n return {\n elementId: useful.elementId,\n type: originalElement?.type || \"unknown\",\n content: originalElement?.text || \"\",\n importance: useful.importance,\n dataType: useful.dataType,\n selectionCode: `[data-element-id=\"${useful.elementId}\"]`,\n reason: useful.reason,\n };\n }).filter(element => element.type !== \"unknown\"); // Filter out elements that weren't found\n }\n}\n\nexport async function getAllGoodElements(url: string, browser: Browser) {\n const scraper = Scraper.of(url, browser);\n return await scraper.findUsefulElements();\n}\n","import \"https://esm.town/v/wolf/StubFS@15-main/stubFs.ts\";\nimport { generateObject } from \"npm:ai\";\nimport { google } from \"npm:@ai-sdk/google\";\nimport { z } from \"npm:zod\";\nimport { Browser, Page } from \"npm:puppeteer-core\";\n\nclass Scraper {\n private page: Page;\n\n constructor(private url: string, private browser: Browser) { }\n\n public static of(url: string, browser: Browser): Scraper {\n return new Scraper(url, browser);\n }\n\n private async initialize(): Promise {\n this.page = await this.browser.newPage();\n await this.page.goto(this.url, {\n timeout: 10_000,\n waitUntil: \"domcontentloaded\",\n });\n }\n\n private async extractElements() {\n return await this.page.evaluate(() => {\n const selectors = [\n \"input\",\n \"button\",\n \"select\",\n \"textarea\",\n \"form\",\n \"table\",\n \"ul\",\n \"ol\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"pre\",\n \"article\",\n \"section\",\n ];\n\n return selectors.flatMap((selector) =>\n Array.from(document.querySelectorAll(selector)).map((el, i) => {\n // Add a unique ID to the element for reference\n const elementId = `element_${selector}_${i}`;\n el.setAttribute(\"data-element-id\", elementId);\n\n return {\n elementId,\n text: el.textContent?.trim().substring(0, 200) || \"\",\n type: el.tagName.toLowerCase(),\n };\n })\n ).filter((el) =>\n el.text.length > 5 ||\n [\"input\", \"button\", \"select\", \"textarea\"].includes(el.type)\n );\n });\n }\n\n public async findUsefulElements() {\n await this.initialize();\n const elements = await this.extractElements();\n\n const { object: usefulElements } = await generateObject({\n model: google(\"gemini-2.0-flash\"),\n schema: z.array(z.object({\n selectionCode: z.string(),\n importance: z.number().int().min(1).max(10),\n dataType: z.string(),\n reason: z.string(),\n })),\n prompt:\n `Analyze these webpage elements and identify the most useful ones for interaction or data extraction:\n\nURL: ${this.url}\n\nElements: ${JSON.stringify(elements)}\n\nFor each useful element, provide code for selecting the element.\nFocus on interactive elements (inputs, buttons, forms) and elements with valuable data.\nRate importance 1-10.`,\n });\n\n return usefulElements.map((useful) => {\n const originalElement = elements.find((el) =>\n useful.selectionCode.includes(el.elementId)\n );\n return {\n elementId: originalElement?.elementId || useful.selectionCode,\n type: originalElement?.type || \"unknown\",\n content: originalElement?.text || \"\",\n importance: useful.importance,\n dataType: useful.dataType,\n selectionCode: useful.selectionCode,\n reason: useful.reason,\n };\n });\n }\n}\n\nexport async function getAllGoodElements(url: string, browser: Browser) {\n const scraper = Scraper.of(url, browser);\n return await scraper.findUsefulElements();\n}\n","createdAt",["D",1749237874409],"branchVersion","branchId","2e2fb5a4-08c6-11f0-95cf-569c3dd06744","id","2e2c4c02-08c6-11f0-95cf-569c3dd06744","Apiify",["D",1742830771958],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","4555dd0e-707e-4444-acd3-049d206eb1db","pinnedFileId","76971c3b-c94e-4b49-b895-6b9840c6b2e4","pinPreview",true,"pinMigrated","screenshotVersion",601,"likeCount",0,"orgId","bced381e-9ab2-4b55-929d-e7c5064f7f38","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_102":101,"_109":105},"org",{"_102":101,"_103":-5,"_104":105,"_18":55,"_106":107,"_108":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":91,"_92":93,"_94":51,"_95":96,"_97":98,"_99":46,"_100":101},"isOwned",608,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",38,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","wolf","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":404,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":405,"_82":406,"_84":407,"_86":25},"tree",[207,223,228,229,230,231],"files",[207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231],"counts",{"_196":64,"_197":175,"_198":64,"_199":200,"_201":202},"contents",[146,147,148,149,150,151],"upstreamProject",{"_44":96,"_32":141,"_53":142,"_54":143,"_50":51,"_80":144},"upstreamBranch",{"_44":91,"_39":134,"_135":136,"_32":88,"_89":96,"_13":137,"_90":-5,"_92":-5,"_138":139,"_48":-5,"_86":25,"_50":51,"_100":140,"_65":98,"_99":141},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789563599&sig=c3b06339283e4bc07165fa54c09036aa25cea7ac6108dec2f68b1acc60fad95f",{"_102":140,"_109":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789563599&sig=a969511699ef574c42d646a130422bcd8ffa020e1e59bd8fb5bde6db2cea72c1",{"_44":191,"_32":192,"_30":193,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":194,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_27":195},{"_44":185,"_32":186,"_30":187,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":188,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_27":190},{"_44":178,"_32":179,"_30":180,"_155":-5,"_42":43,"_41":181,"_157":59,"_39":182,"_13":64,"_34":20,"_36":183,"_24":25,"_160":-5,"_27":184},{"_44":170,"_32":171,"_30":172,"_155":-5,"_42":43,"_41":173,"_157":25,"_39":174,"_13":175,"_34":20,"_36":176,"_24":25,"_160":-5,"_27":177},{"_44":162,"_32":163,"_30":164,"_155":-5,"_42":43,"_41":165,"_157":59,"_39":166,"_13":167,"_34":20,"_36":168,"_24":25,"_160":-5,"_27":169},{"_44":152,"_32":153,"_30":154,"_155":-5,"_42":43,"_41":156,"_157":59,"_39":158,"_13":64,"_34":20,"_36":159,"_24":25,"_160":-5,"_27":161},"37991c82-4306-11f0-9354-76b3cceeab13","versions.md","37991d72-4306-11f0-9354-76b3cceeab13","parentId",564,"latest",["D",1749235443007],"427","label",[153],"fa979388-4303-11f0-bbab-76b3cceeab13","deno.json","6d80bfb8-42dd-11f0-828a-76b3cceeab13",531,["D",1749234481656],1,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n",[163],"09291390-4309-11f0-b732-76b3cceeab13","README.md","b955ae38-8d6a-4999-885a-f02401a5a57c",594,["D",1749236653584],2,"# Website to API Generator\n\nThis application automatically converts any website into a RESTful API by analyzing the site's structure and generating endpoints for interacting with its elements.\n\n## Features\n\n- **Automatic Website Analysis**: Crawls websites to find useful links and interactive elements\n- **Smart Element Detection**: Uses AI to identify the most important elements (forms, buttons, inputs, etc.)\n- **API Generation**: Creates RESTful endpoints for each useful element\n- **Puppeteer Integration**: Generated APIs use Puppeteer for reliable browser automation\n- **Live Deployment**: APIs are automatically deployed and ready to use\n- **Complete Documentation**: Generates comprehensive API documentation\n\n## How It Works\n\n1. **Website Crawling**: Analyzes the target website to find all useful pages\n2. **Element Analysis**: Uses AI to identify interactive elements and their importance\n3. **Endpoint Generation**: Creates RESTful API endpoints for each element\n4. **Code Generation**: Generates complete Hono server code with Puppeteer automation\n5. **Deployment**: Automatically deploys the API to Val Town\n\n## API Endpoints\n\nThe generated APIs typically include endpoints like:\n- `GET /search-results?query=string` - Extract search results\n- `POST /search` - Perform a search\n- `POST /login` - Submit login form\n- `GET /product-info` - Extract product details\n- `POST /add-to-cart` - Add items to cart\n\n## Usage\n\n1. Enter a website URL\n2. Provide an API name\n3. Set the maximum number of pages to analyze\n4. Click \"Generate API\"\n5. Your API will be live at `https://your-api-name.val.run`\n\n## Technology Stack\n\n- **Frontend**: React + TypeScript + TailwindCSS\n- **Backend**: Hono + Puppeteer + AI (Google Gemini)\n- **Deployment**: Val Town\n- **Browser Automation**: Steel.dev (Puppeteer hosting)\n",[171],"6d774f0a-42dd-11f0-8567-76b3cceeab13",".vtignore","6d774fbe-42dd-11f0-8567-76b3cceeab13",397,["D",1749217924014],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[179],"2e31f134-08c6-11f0-95cf-569c3dd06744","frontend","ace2be34-3b25-41f0-98a9-deaf2a37046f",["D",1742830771958],"directory",[186],"2e31d258-08c6-11f0-95cf-569c3dd06744","backend","c42583f7-b9a9-4128-8e16-b83c81558d23",["D",1742830771958],[192],"pulls","branches","forks","envVars",{"_203":205,"_206":64},"connections",{"_203":64,"_204":64},"count","unfilledCount",3,"emptyCount",{"_44":191,"_32":192,"_30":193,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":401,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_233":402,"_27":403},{"_44":396,"_32":348,"_30":342,"_155":193,"_42":43,"_41":397,"_157":59,"_39":398,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_233":399,"_27":400},{"_44":388,"_32":389,"_30":390,"_155":342,"_42":43,"_41":391,"_157":25,"_39":392,"_13":64,"_34":35,"_36":393,"_24":25,"_160":-5,"_233":394,"_27":395},{"_44":379,"_32":380,"_30":381,"_155":342,"_42":43,"_41":382,"_157":59,"_39":383,"_13":384,"_34":35,"_36":385,"_24":25,"_160":-5,"_233":386,"_27":387},{"_44":375,"_32":33,"_30":31,"_155":342,"_42":43,"_41":14,"_157":59,"_39":376,"_13":362,"_34":35,"_36":38,"_24":25,"_160":-5,"_233":377,"_27":378},{"_44":366,"_32":367,"_30":368,"_155":342,"_42":43,"_41":369,"_157":59,"_39":370,"_13":371,"_34":35,"_36":372,"_24":25,"_160":-5,"_233":373,"_27":374},{"_44":357,"_32":358,"_30":359,"_155":342,"_42":43,"_41":360,"_157":25,"_39":361,"_13":362,"_34":35,"_36":363,"_24":25,"_160":-5,"_233":364,"_27":365},{"_44":349,"_32":350,"_30":351,"_155":342,"_42":43,"_41":352,"_157":59,"_39":353,"_13":64,"_34":35,"_36":354,"_24":25,"_160":-5,"_233":355,"_27":356},{"_44":339,"_32":340,"_30":341,"_155":342,"_42":43,"_41":343,"_157":25,"_39":344,"_13":167,"_34":35,"_36":345,"_24":25,"_160":-5,"_233":346,"_27":347},{"_44":334,"_32":316,"_30":310,"_155":193,"_42":43,"_41":335,"_157":59,"_39":336,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_233":337,"_27":338},{"_44":325,"_32":326,"_30":327,"_155":310,"_42":43,"_41":328,"_157":59,"_39":329,"_13":330,"_34":35,"_36":331,"_24":25,"_160":-5,"_233":332,"_27":333},{"_44":317,"_32":318,"_30":319,"_155":310,"_42":43,"_41":320,"_157":25,"_39":321,"_13":285,"_34":35,"_36":322,"_24":25,"_160":-5,"_233":323,"_27":324},{"_44":307,"_32":308,"_30":309,"_155":310,"_42":43,"_41":311,"_157":59,"_39":312,"_13":64,"_34":35,"_36":313,"_24":25,"_160":-5,"_233":314,"_27":315},{"_44":299,"_32":300,"_30":301,"_155":193,"_42":43,"_41":302,"_157":59,"_39":303,"_13":64,"_34":35,"_36":304,"_24":25,"_160":-5,"_233":305,"_27":306},{"_44":289,"_32":290,"_30":57,"_155":193,"_42":43,"_41":291,"_157":25,"_39":292,"_13":293,"_34":294,"_36":295,"_24":25,"_160":296,"_233":297,"_27":298},{"_44":280,"_32":281,"_30":282,"_155":193,"_42":43,"_41":283,"_157":59,"_39":284,"_13":285,"_34":35,"_36":286,"_24":25,"_160":-5,"_233":287,"_27":288},{"_44":185,"_32":186,"_30":187,"_155":-5,"_42":43,"_41":167,"_157":59,"_39":277,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_233":278,"_27":279},{"_44":273,"_32":272,"_30":265,"_155":187,"_42":43,"_41":167,"_157":59,"_39":274,"_13":64,"_34":189,"_36":-5,"_24":25,"_160":-5,"_233":275,"_27":276},{"_44":262,"_32":263,"_30":264,"_155":265,"_42":43,"_41":266,"_157":25,"_39":267,"_13":268,"_34":35,"_36":269,"_24":25,"_160":-5,"_233":270,"_27":271},{"_44":253,"_32":254,"_30":255,"_155":187,"_42":43,"_41":256,"_157":25,"_39":257,"_13":258,"_34":20,"_36":259,"_24":25,"_160":-5,"_233":260,"_27":261},{"_44":245,"_32":246,"_30":247,"_155":187,"_42":43,"_41":248,"_157":59,"_39":249,"_13":167,"_34":35,"_36":250,"_24":25,"_160":-5,"_233":251,"_27":252},{"_44":178,"_32":179,"_30":180,"_155":-5,"_42":43,"_41":181,"_157":59,"_39":242,"_13":64,"_34":20,"_36":183,"_24":25,"_160":-5,"_233":243,"_27":244},{"_44":170,"_32":171,"_30":172,"_155":-5,"_42":43,"_41":173,"_157":25,"_39":239,"_13":175,"_34":20,"_36":176,"_24":25,"_160":-5,"_233":240,"_27":241},{"_44":162,"_32":163,"_30":164,"_155":-5,"_42":43,"_41":165,"_157":59,"_39":236,"_13":167,"_34":20,"_36":168,"_24":25,"_160":-5,"_233":237,"_27":238},{"_44":152,"_32":153,"_30":154,"_155":-5,"_42":43,"_41":156,"_157":59,"_39":232,"_13":64,"_34":20,"_36":159,"_24":25,"_160":-5,"_233":234,"_27":235},["D",1749235443007],"children",[],[153],["D",1749234481656],[],[163],["D",1749236653584],[],[171],["D",1749217924014],[],[179],"fab66ede-4303-11f0-ae89-76b3cceeab13","index.tsx","74271529-7341-46c2-918a-f4b5c09c2d30",533,["D",1749234481508],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[186,246],"fec52498-4308-11f0-97a4-76b3cceeab13","index.html","6d659e0e-bf7f-4f2b-87cf-3df60d4105a6",593,["D",1749236636153],5,"\n\n \n \n \n Website to API Generator\n \n \n \n \n

\n \n \n \n\n",[],[186,254],"fc4fb778-4308-11f0-8cf3-76b3cceeab13","App.tsx","fec0ec8e-b4f4-4da7-884a-019af796678b","5258744f-43e2-420e-83ea-1ed323ddcf10",592,["D",1749236632025],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface APIEndpoint {\n path: string;\n method: string;\n description: string;\n parameters: Array<{\n name: string;\n type: string;\n required: boolean;\n description: string;\n }>;\n elementId: string;\n pageUrl: string;\n action: string;\n}\n\ninterface GeneratedAPI {\n baseUrl: string;\n endpoints: APIEndpoint[];\n serverCode: string;\n documentation: string;\n valId?: string;\n}\n\nexport function App() {\n const [url, setUrl] = useState(\"\");\n const [apiName, setApiName] = useState(\"\");\n const [maxPages, setMaxPages] = useState(5);\n const [loading, setLoading] = useState(false);\n const [generatedAPI, setGeneratedAPI] = useState(null);\n const [error, setError] = useState(null);\n const [activeTab, setActiveTab] = useState<'endpoints' | 'code' | 'docs'>('endpoints');\n\n const handleGenerateAPI = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!url || !apiName) return;\n\n setLoading(true);\n setError(null);\n setGeneratedAPI(null);\n\n try {\n const response = await fetch(\"/api/generate-api\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url, apiName, maxPages }),\n });\n\n const data = await response.json();\n \n if (data.success) {\n setGeneratedAPI(data.api);\n } else {\n setError(data.error);\n }\n } catch (err) {\n setError(\"Failed to generate API\");\n } finally {\n setLoading(false);\n }\n };\n\n const copyToClipboard = (text: string) => {\n navigator.clipboard.writeText(text);\n };\n\n const getMethodColor = (method: string) => {\n switch (method) {\n case 'GET': return 'bg-green-100 text-green-800';\n case 'POST': return 'bg-blue-100 text-blue-800';\n case 'PUT': return 'bg-yellow-100 text-yellow-800';\n case 'DELETE': return 'bg-red-100 text-red-800';\n default: return 'bg-gray-100 text-gray-800';\n }\n };\n\n return (\n

Website to API Generator

\n Transform any website into a RESTful API with automated browser interactions\n

\n\n

\n \n Website URL\n \n setUrl(e.target.value)}\n placeholder=\"https://example.com\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n />\n

\n \n

\n \n API Name\n \n setApiName(e.target.value)}\n placeholder=\"my-website-api\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n required\n />\n

\n\n

\n \n Max Pages to Analyze\n \n setMaxPages(parseInt(e.target.value) || 5)}\n min=\"1\"\n max=\"20\"\n className=\"w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n

\n\n \n {loading ? \"Generating API...\" : \"Generate API\"}\n \n \n

\n\n {error && (\n

\n Error: {error}\n

\n )}\n\n {generatedAPI && (\n

\n {/* Success Banner */}\n

API Generated Successfully!

Your API is ready and deployed

\n {generatedAPI.valId && (\n \n View Live API\n \n )}\n

\n\n {/* Tab Navigation */}\n

\n {[\n { id: 'endpoints', label: `Endpoints (${generatedAPI.endpoints.length})` },\n { id: 'code', label: 'Server Code' },\n { id: 'docs', label: 'Documentation' },\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n >\n {tab.label}\n \n ))}\n

\n\n

\n {activeTab === 'endpoints' && (\n

API Endpoints

\n Base URL: https://{apiName}.val.run\n

\n \n {generatedAPI.endpoints.map((endpoint, index) => (\n

\n \n {endpoint.method}\n \n {endpoint.path}\n

\n \n

{endpoint.description}

\n \n {endpoint.parameters.length > 0 && (\n

Parameters:

\n {endpoint.parameters.map((param, paramIndex) => (\n

\n {param.name}\n ({param.type})\n {param.required && required}\n - {param.description}\n

\n ))}\n

\n )}\n \n

\n Action: {endpoint.action}\n Element: {endpoint.elementId}\n

\n ))}\n

\n )}\n\n {activeTab === 'code' && (\n

Generated Server Code

\n copyToClipboard(generatedAPI.serverCode)}\n className=\"bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium\"\n >\n Copy Code\n \n

\n                    {generatedAPI.serverCode}\n

\n )}\n\n {activeTab === 'docs' && (\n

API Documentation

\n copyToClipboard(generatedAPI.documentation)}\n className=\"bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md text-sm font-medium\"\n >\n Copy Documentation\n \n

\n                      {generatedAPI.documentation}\n

\n )}\n

\n );\n}\n",[],[186,272,263],"components","2e31d64a-08c6-11f0-95cf-569c3dd06744",["D",1742830771958],[225],[186,272],["D",1742830771958],[224,226,227],[186],"3d1a37fc-4303-11f0-a4f6-76b3cceeab13","types.ts","e475d958-4302-11f0-9eda-76b3cceeab13",514,["D",1749234163748],4,"export type ValItemType =\n | \"script\"\n | \"http\"\n | \"email\"\n | \"interval\"\n | \"file\"\n | \"directory\";\n\nexport type ValFileType = Exclude;\n",[],[192,281],"573967ce-4309-11f0-be11-76b3cceeab13","index.ts",599,["D",1749236784554],52,"http","export default async function(req: Request): Promise {\n const url = new URL(req.url);\n \n if (url.pathname === \"/\") {\n return new Response(`\n\n\n \n \n \n Website to API Generator\n \n \n \n

Website to API Generator

\n Transform any website into a RESTful API with automated browser interactions\n

\n\n

\n \n Website URL\n \n \n

\n \n

\n \n API Name\n \n \n

\n\n \n Generate API\n \n

\n\n

\n\n \n \n\n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n }\n \n if (url.pathname === \"/api/generate\" && req.method === \"POST\") {\n try {\n const body = await req.json();\n const { url: targetUrl, apiName } = body;\n \n // For now, return a success response\n // In the full implementation, this would call the API generation logic\n return new Response(JSON.stringify({\n success: true,\n message: \"API generation started\",\n endpoints: \"Search, Extract Data, Form Submission\"\n }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({\n success: false,\n error: error.message\n }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n \n return new Response(\"Not Found\", { status: 404 });\n}","apiify",[],[192,290],"6d7babae-42dd-11f0-93ea-76b3cceeab13","env.ts","6d7bac76-42dd-11f0-93ea-76b3cceeab13",398,["D",1749217924020],"import { envsafe, str } from \"npm:envsafe\";\n\nexport const env = envsafe({\n STEEL_API_KEY: str({}),\n});\n",[],[192,300],"6aec3818-4300-11f0-b8ae-76b3cceeab13","utils.ts","6aec38d6-4300-11f0-b8ae-76b3cceeab13","69f3ef5a-4300-11f0-b5f6-76b3cceeab13",495,["D",1749232952135],"import ValTown from \"jsr:@valtown/sdk\";\nimport { vt } from \"./sdk.ts\";\n\n/**\n * Lists all branches for a given project and finds the ID of the specified branch name.\n *\n * @param {string} projectId - The ID of the project to search branches within.\n * @param {string} branchName - The name of the branch to find.\n * @returns {Promise} - The ID of the specified branch.\n * @throws {Deno.errors.NotFound} If the branch with the specified name is not found.\n */\nexport async function branchIdToBranch(\n projectId: string,\n branchName: string,\n): Promise {\n for await (\n const branch of vt.projects.branches.list(projectId, {\n limit: 100,\n offset: 0,\n })\n ) if (branch.name === branchName) return branch;\n throw new Deno.errors.NotFound(`Branch '${branchName}' not found`);\n}\n\n/**\n * Forks a new branch from a specified source branch within a project.\n *\n * @param {string} projectId - The ID of the project where the branch will be created.\n * @param {string} newBranchName - The name of the new branch to create.\n * @param {string} sourceBranchId - The ID of the branch to fork from.\n * @returns {Promise

Diff · v600