\n \n \n \n",[18,91],"a259f26c-39b4-11f1-b5ef-42b51c65c3df",["D",1776358340560],"",[18,98],"1d1f520e-39b4-11f1-90cb-42b51c65c3df",["D",1776358116966],[18,104],"pulls","branches","forks","envVars",{"_99":42,"_231":26},"connections",{"_99":26,"_230":26},"unfilledCount","emptyCount",{"_35":325,"_13":317,"_77":311,"_45":-5,"_37":38,"_198":312,"_199":24,"_39":326,"_41":26,"_80":105,"_201":-5,"_82":30,"_202":-5,"_252":327,"_17":328},{"_35":318,"_13":319,"_77":320,"_45":311,"_37":38,"_198":162,"_199":24,"_39":321,"_41":42,"_80":81,"_201":322,"_82":30,"_202":-5,"_252":323,"_17":324},{"_35":308,"_13":309,"_77":310,"_45":311,"_37":38,"_198":312,"_199":24,"_39":313,"_41":26,"_80":81,"_201":314,"_82":30,"_202":-5,"_252":315,"_17":316},{"_35":197,"_13":18,"_77":126,"_45":-5,"_37":38,"_198":42,"_199":24,"_39":305,"_41":26,"_80":105,"_201":-5,"_82":30,"_202":-5,"_252":306,"_17":307},{"_35":220,"_13":104,"_77":103,"_45":126,"_37":38,"_198":42,"_199":24,"_39":302,"_41":26,"_80":105,"_201":-5,"_82":30,"_202":-5,"_252":303,"_17":304},{"_35":294,"_13":295,"_77":296,"_45":103,"_37":38,"_198":297,"_199":24,"_39":298,"_41":42,"_80":81,"_201":299,"_82":30,"_202":-5,"_252":300,"_17":301},{"_35":287,"_13":288,"_77":289,"_45":103,"_37":38,"_198":42,"_199":24,"_39":290,"_41":26,"_80":81,"_201":291,"_82":30,"_202":-5,"_252":292,"_17":293},{"_35":280,"_13":281,"_77":282,"_45":103,"_37":38,"_198":100,"_199":24,"_39":283,"_41":26,"_80":81,"_201":284,"_82":30,"_202":-5,"_252":285,"_17":286},{"_35":272,"_13":273,"_77":274,"_45":103,"_37":38,"_198":275,"_199":24,"_39":276,"_41":26,"_80":81,"_201":277,"_82":30,"_202":-5,"_252":278,"_17":279},{"_35":216,"_13":98,"_77":97,"_45":126,"_37":38,"_198":120,"_199":24,"_39":269,"_41":42,"_80":21,"_201":218,"_82":30,"_202":-5,"_252":270,"_17":271},{"_35":212,"_13":91,"_77":90,"_45":126,"_37":38,"_198":108,"_199":24,"_39":266,"_41":42,"_80":21,"_201":214,"_82":30,"_202":-5,"_252":267,"_17":268},{"_35":208,"_13":79,"_77":78,"_45":126,"_37":38,"_198":42,"_199":24,"_39":263,"_41":26,"_80":81,"_201":210,"_82":30,"_202":-5,"_252":264,"_17":265},{"_35":255,"_13":256,"_77":257,"_45":-5,"_37":38,"_198":258,"_199":24,"_39":259,"_41":42,"_80":21,"_201":260,"_82":30,"_202":-5,"_252":261,"_17":262},{"_35":246,"_13":247,"_77":138,"_45":-5,"_37":38,"_198":248,"_199":24,"_39":249,"_41":42,"_80":250,"_201":251,"_82":30,"_202":-5,"_252":253,"_17":254},"9b5cd0f6-39b4-11f1-b6fc-42b51c65c3df","index.ts",8,["D",1776358328810],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { extractLeads } from \"./backend/agent.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Lead extraction API\napp.post(\"/api/extract\", async (c) => {\n const { url } = await c.req.json<{ url: string }>();\n\n if (!url) {\n return c.json({ error: \"URL is required\" }, 400);\n }\n\n // Basic URL validation\n try {\n new URL(url);\n } catch {\n return c.json({ error: \"Invalid URL format\" }, 400);\n }\n\n try {\n const result = await extractLeads(url);\n return c.json(result);\n } catch (e: any) {\n console.error(\"Extraction error:\", e);\n return c.json({ error: e.message || \"Extraction failed\" }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;\n","children",[],[247],"ad46eb94-39b4-11f1-b5ef-42b51c65c3df","README.md","019d9731-ceb7-76bd-9726-c9eff147349f",10,["D",1776358358901],"# 🔍 Lead Extraction Tool\n\nAn AI-powered lead extractor that scans websites to find email addresses and contact information.\n\n## How it works\n\n```mermaid\nflowchart LR\n A[Enter URL] --> B[AI Agent]\n B -->|scrape_url tool| C[Fetch & Parse HTML]\n C -->|emails + links| B\n B -->|picks next page| C\n B --> D[Structured leads JSON]\n D --> E[Results table]\n```\n\n1. You enter a website URL in the form\n2. An **OpenAI Agent** (GPT-4o-mini) receives the URL and uses a `scrape_url` tool\n3. The agent strategically crawls the site — prioritizing about/team/contact pages\n4. Emails are extracted from `mailto:` links and page text via regex\n5. The agent returns structured lead data (email, name, role, source page)\n6. Results are displayed in a table with a \"copy all emails\" button\n\n## Setup\n\n1. Set the `OPENAI_API_KEY` environment variable → [Get your key](https://platform.openai.com/api-keys)\n\n## Tech Stack\n\n- **Frontend**: React + Twind (Tailwind)\n- **Backend**: Hono API on Val Town\n- **AI**: OpenAI Agents SDK (`@openai/agents`)\n- **Scraping**: Cheerio HTML parser\n",[],[256],["D",1776358116966],[],[18,79],["D",1776358215373],[],[18,91],["D",1776358340560],[],[18,98],"6be35c6e-39b4-11f1-8360-42b51c65c3df","LeadResults.tsx","6be35d0e-39b4-11f1-8360-42b51c65c3df",5,["D",1776358249208],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ExtractionResult, Lead } from \"./App.tsx\";\n\ninterface LeadResultsProps {\n result: ExtractionResult;\n}\n\nexport function LeadResults({ result }: LeadResultsProps) {\n const { leads, summary, pagesScanned } = result;\n\n return (\n

\n {/* Summary */}\n

📋 Summary

{summary}

\n\n {/* Leads Table */}\n {leads.length > 0 ? (\n

\n 🎯 Found {leads.length} lead{leads.length !== 1 ? \"s\" : \"\"}\n

\n copyToClipboard(leads)}\n className=\"text-sm px-3 py-1 bg-white border border-gray-300 rounded-md\n hover:bg-gray-50 transition-colors text-gray-600\"\n >\n 📋 Copy all emails\n \n

\n \n \n \n \n \n \n \n \n \n \n {leads.map((lead, i) => (\n \n \n \n \n \n \n ))}\n \n

Email	Name	Role	Source
\n \n {lead.email}\n \n	{lead.name \|\| \"—\"}	{lead.role \|\| \"—\"}	{lead.source \|\| \"—\"}

\n ) : (\n

\n No email leads found on this website. Try a different URL, like a company's\n \"About\" or \"Contact\" page.\n

\n )}\n\n {/* Pages Scanned */}\n {pagesScanned.length > 0 && (\n

\n Pages scanned ({pagesScanned.length})\n

\n \n {page}\n \n

\n )}\n

\n );\n}\n\nfunction copyToClipboard(leads: Lead[]) {\n const emails = leads.map((l) => l.email).join(\"\\n\");\n navigator.clipboard.writeText(emails).then(() => {\n alert(`Copied ${leads.length} email(s) to clipboard!`);\n });\n}",[],[18,104,273],"6504cbc6-39b4-11f1-8360-42b51c65c3df","LeadForm.tsx","6504cc5c-39b4-11f1-8360-42b51c65c3df",["D",1776358237679],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface LeadFormProps {\n onSubmit: (url: string) => void;\n loading: boolean;\n}\n\nexport function LeadForm({ onSubmit, loading }: LeadFormProps) {\n const [url, setUrl] = useState(\"\");\n\n function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n const trimmed = url.trim();\n if (!trimmed) return;\n\n // Add https:// if no protocol\n const finalUrl = trimmed.match(/^https?:\\/\\//) ? trimmed : `https://${trimmed}`;\n onSubmit(finalUrl);\n }\n\n return (\n

\n setUrl(e.target.value)}\n placeholder=\"e.g. example.com or https://example.com/about\"\n disabled={loading}\n className=\"flex-1 px-4 py-3 border border-gray-300 rounded-lg text-lg\n focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\n disabled:bg-gray-100 disabled:text-gray-400\n placeholder-gray-400\"\n />\n \n {loading ? \"Scanning...\" : \"Extract Leads\"}\n \n \n );\n}",[],[18,104,281],"1d1f4a48-39b4-11f1-90cb-42b51c65c3df","Counter.tsx","019d9731-ceb7-76bd-9726-b3a0f7e0dc0f",["D",1776358116966],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[18,104,288],"5fb93134-39b4-11f1-8701-42b51c65c3df","App.tsx","019d9731-ceb7-76bd-9726-ad7554057fa1",3,["D",1776358228786],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { LeadForm } from \"./LeadForm.tsx\";\nimport { LeadResults } from \"./LeadResults.tsx\";\n\nexport interface Lead {\n name?: string;\n email: string;\n role?: string;\n source?: string;\n}\n\nexport interface ExtractionResult {\n leads: Lead[];\n summary: string;\n pagesScanned: string[];\n}\n\nexport function App() {\n const [loading, setLoading] = useState(false);\n const [result, setResult] = useState(null);\n const [error, setError] = useState(null);\n\n async function handleExtract(url: string) {\n setLoading(true);\n setError(null);\n setResult(null);\n\n try {\n const res = await fetch(\"/api/extract\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url }),\n });\n\n if (!res.ok) {\n const errData = await res.json().catch(() => ({ error: \"Extraction failed\" }));\n throw new Error(errData.error || `HTTP ${res.status}`);\n }\n\n const data: ExtractionResult = await res.json();\n setResult(data);\n } catch (e: any) {\n setError(e.message || \"Something went wrong\");\n } finally {\n setLoading(false);\n }\n }\n\n return (\n

\n 🔍 Lead Extractor\n

\n Enter a website URL and our AI agent will scan it for contact information\n

\n\n \n\n {error && (\n

\n ⚠️ {error}\n

\n )}\n\n {loading && (\n

\n AI agent is scanning the website for leads... this may take a minute.\n

\n )}\n\n {result && !loading && }\n\n \n

\n );\n}",[],[18,104,295],["D",1776358116966],[237,238,239,240],[18,104],["D",1776358116966],[236,241,242,243],[18],"7e310cc2-39b4-11f1-b6fc-42b51c65c3df","scraper.ts","7e310d80-39b4-11f1-b6fc-42b51c65c3df","4345b1fc-5211-45ab-9c7d-c98189ce527e",6,["D",1776358279913],"import { load } from \"npm:cheerio\";\n\n/** Fetch a page and extract all email addresses + internal links */\nexport async function scrapePage(url: string): Promise<{\n emails: string[];\n links: string[];\n text: string;\n}> {\n const res = await fetch(url, {\n headers: {\n \"User-Agent\":\n \"Mozilla/5.0 (compatible; LeadExtractorBot/1.0; +https://val.town)\",\n Accept: \"text/html,application/xhtml+xml\",\n },\n redirect: \"follow\",\n });\n\n if (!res.ok) {\n throw new Error(`Failed to fetch ${url}: ${res.status}`);\n }\n\n const contentType = res.headers.get(\"content-type\") || \"\";\n if (!contentType.includes(\"text/html\")) {\n return { emails: [], links: [], text: \"\" };\n }\n\n const html = await res.text();\n const $ = load(html);\n\n // Extract emails from mailto links\n const emails = new Set();\n $(\"a[href^='mailto:']\").each((_, el) => {\n const href = $(el).attr(\"href\") || \"\";\n const email = href.replace(\"mailto:\", \"\").split(\"?\")[0].toLowerCase().trim();\n if (email && isValidEmail(email)) {\n emails.add(email);\n }\n });\n\n // Extract emails from visible text using regex\n const bodyText = $(\"body\").text();\n const emailRegex = /[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}/g;\n const textEmails = bodyText.match(emailRegex) || [];\n for (const e of textEmails) {\n const clean = e.toLowerCase().trim();\n if (isValidEmail(clean)) {\n emails.add(clean);\n }\n }\n\n // Also check href attributes and other common places\n $(\"a[href]\").each((_, el) => {\n const href = $(el).attr(\"href\") || \"\";\n const hrefEmails = href.match(emailRegex) || [];\n for (const e of hrefEmails) {\n if (isValidEmail(e.toLowerCase())) emails.add(e.toLowerCase());\n }\n });\n\n // Extract internal links for further crawling\n const baseUrl = new URL(url);\n const internalLinks = new Set();\n\n $(\"a[href]\").each((_, el) => {\n const href = $(el).attr(\"href\") || \"\";\n try {\n const resolved = new URL(href, url);\n if (resolved.hostname === baseUrl.hostname && resolved.protocol.startsWith(\"http\")) {\n // Clean the URL (remove hash, normalize)\n resolved.hash = \"\";\n internalLinks.add(resolved.toString());\n }\n } catch {\n // ignore invalid URLs\n }\n });\n\n // Get useful text context (truncated)\n const pageText = $(\"body\").text().replace(/\\s+/g, \" \").trim().slice(0, 3000);\n\n return {\n emails: Array.from(emails),\n links: Array.from(internalLinks),\n text: pageText,\n };\n}\n\nfunction isValidEmail(email: string): boolean {\n // Basic validation — exclude common false positives\n if (email.length > 254) return false;\n if (email.endsWith(\".png\") || email.endsWith(\".jpg\") || email.endsWith(\".gif\")) return false;\n if (email.includes(\"@example.\") || email.includes(\"@test.\")) return false;\n if (email.startsWith(\"@\") || email.endsWith(\"@\")) return false;\n return /^[a-zA-Z0-9._%+\\-]+@[a-zA-Z0-9.\\-]+\\.[a-zA-Z]{2,}$/.test(email);\n}\n",[],[317,309],"backend","0d2af582-39b5-11f1-b31d-42b51c65c3df","agent.ts","90cb1760-39b4-11f1-b5ef-42b51c65c3df",["D",1776358519783],"import { Agent, run, tool } from \"npm:@openai/agents@0.7\";\nimport { z } from \"npm:zod\";\nimport { scrapePage } from \"./scraper.ts\";\n\n/** Tool: scrape a URL for emails and links */\nconst scrapeUrl = tool({\n name: \"scrape_url\",\n description:\n \"Fetch a web page and extract all email addresses and internal links found on it. \" +\n \"Use this to scan pages for lead information. Returns emails found, internal links to explore, \" +\n \"and a snippet of the page text.\",\n parameters: z.object({\n url: z.string().describe(\"The full URL to scrape, e.g. https://example.com\"),\n }),\n async execute({ url }) {\n try {\n const result = await scrapePage(url);\n return JSON.stringify(result);\n } catch (e: any) {\n return JSON.stringify({ error: e.message, emails: [], links: [], text: \"\" });\n }\n },\n});\n\nconst leadExtractorAgent = new Agent({\n name: \"Lead Extractor\",\n model: \"gpt-4o-mini\",\n instructions: `You are a lead extraction agent. Given a website URL, your job is to find email addresses \nand contact information of people who work at or are associated with that website.\n\nStrategy:\n1. Start by scraping the given URL.\n2. Look at the internal links found and prioritize pages likely to contain contact info:\n - \"about\", \"team\", \"contact\", \"people\", \"staff\", \"leadership\", \"our-team\"\n - Footer links, \"get in touch\", etc.\n3. Scrape up to 5-6 of the most promising pages (don't go overboard).\n4. For each email you find, try to identify the person's name and role from the surrounding context.\n\nIMPORTANT: When you're done, respond with ONLY a valid JSON object (no markdown, no backticks) in this exact format:\n{\n \"leads\": [\n {\n \"email\": \"person@company.com\",\n \"name\": \"John Smith\",\n \"role\": \"CEO\",\n \"source\": \"https://example.com/about\"\n }\n ],\n \"summary\": \"A brief summary of what you found\",\n \"pagesScanned\": [\"https://example.com\", \"https://example.com/about\"]\n}\n\nIf name or role aren't available, use null for those fields. Always include the source URL where each email was found.`,\n tools: [scrapeUrl],\n});\n\nexport async function extractLeads(url: string) {\n const result = await run(\n leadExtractorAgent,\n `Extract leads from this website: ${url}`,\n { maxTurns: 10 },\n );\n\n // Parse the agent's JSON output\n try {\n const output = result.finalOutput.trim();\n // Try to extract JSON if agent wrapped it in markdown\n const jsonMatch = output.match(/```(?:json)?\\s*([\\s\\S]*?)```/) || [null, output];\n return JSON.parse(jsonMatch[1]!.trim());\n } catch {\n // Fallback if parsing fails\n return {\n leads: [],\n summary: result.finalOutput,\n pagesScanned: [],\n };\n }\n}\n",[],[317,319],"7e313ff8-39b4-11f1-b6fc-42b51c65c3df",["D",1776358279913],[233,234],[317],["D",1776358116966],{"_11":12,"_175":84},{"_11":12,"_171":-5,"_83":84,"_31":-5,"_172":173,"_174":24},{"_41":162,"_13":16,"_35":38,"_163":128,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":14,"_170":12},"ctx",{"_54":-5,"_194":366,"_367":368,"_369":370,"_371":30,"_372":30,"_373":30,"_374":24,"_375":-5,"_376":-7,"_377":-7,"_378":26,"_379":30,"_380":30,"_381":-5,"_382":30,"_383":30,"_384":30,"_385":-5},"ENV",{"_337":338,"_339":340,"_341":16,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361,"_362":363,"_364":365},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend