# Firecrawl Power App > Powerful web UI for Firecrawl API + MCP Server docs. Scrape, Crawl, Map, Search, Extract & AI Agent. Built with React 18 + Vite + Claude Code. - **Type:** MCP server - **Install:** `agentstack add mcp-fracabu-firecrawl-power-app` - **Verified:** Yes โ€” security-reviewed for prompt injection and unsafe behavior - **Seller:** [fracabu](https://agentstack.voostack.com/s/fracabu) - **Installs:** 0 - **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [fracabu](https://github.com/fracabu) - **Source:** https://github.com/fracabu/firecrawl-power-app - **Website:** https://firecrawl-power-app.vercel.app ## Install ```sh agentstack add mcp-fracabu-firecrawl-power-app ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About ๐Ÿ”ฅ Firecrawl Power App โ–ถ๏ธ Click to watch demo video A sleek, powerful UI to harness the full potential of Firecrawl API Features โ€ข Demo โ€ข Quick Start โ€ข Deployment โ€ข Italiano --- ## โœจ Features | Feature | Description | Plan | |---------|-------------|------| | ๐Ÿ“„ **Scrape** | Extract content from any webpage (Markdown, HTML, Screenshots) | Free | | ๐Ÿ—บ๏ธ **Map** | Discover all URLs on a website | Free | | ๐Ÿ•ท๏ธ **Crawl** | Crawl entire websites with depth control | Free | | ๐Ÿ” **Search** | Search the web with advanced operators | PRO | | ๐Ÿ“Š **Extract** | Extract structured data using AI and JSON schemas | PRO | | ๐Ÿค– **Agent** | Autonomous AI agent for complex data gathering | 5/day free | | ๐ŸŒ™ **Dark Mode** | Beautiful dark/light theme toggle | Free | | ๐Ÿ”‘ **BYOK** | Bring Your Own Key - use your personal Firecrawl API key | Free | > **Note:** PRO features require a [paid Firecrawl plan](https://firecrawl.dev/pricing). Free tier includes 500 credits (one-time). --- ## ๐ŸŽจ Design Built with the official **Firecrawl design system**: ```css --primary: #FF4C00; /* Firecrawl Orange */ --background: #F9F9F9; /* Light mode */ --surface: #1A1A1A; /* Dark mode */ ``` --- ## ๐Ÿš€ Quick Start ### Prerequisites - [Node.js](https://nodejs.org/) 18+ - [Firecrawl API Key](https://firecrawl.dev) (free tier available) ### Installation ```bash # Clone the repository git clone https://github.com/fracabu/firecrawl-power-app.git cd firecrawl-power-app # Install dependencies npm install # Start the app npm run dev ``` ### First Launch 1. Open `http://localhost:5173` in your browser 2. Enter your Firecrawl API key in the modal 3. Start scraping! ๐Ÿ”ฅ --- ## ๐Ÿ”‘ API Key Configuration ### Option 1: In-App (Recommended for users) Simply click the **"API Key"** button in the header and enter your key. It's stored locally in your browser. ### Option 2: Environment Variable (For developers) ```bash # Create .env file cp .env.example .env # Add your API key FIRECRAWL_API_KEY=fc-your-api-key-here ``` --- ## ๐Ÿ“ฆ Project Structure ``` firecrawl-power-app/ โ”œโ”€โ”€ api/ # Vercel serverless functions โ”‚ โ”œโ”€โ”€ scrape.js โ”‚ โ”œโ”€โ”€ map.js โ”‚ โ”œโ”€โ”€ search.js โ”‚ โ”œโ”€โ”€ crawl.js โ”‚ โ”œโ”€โ”€ extract.js โ”‚ โ””โ”€โ”€ agent.js โ”œโ”€โ”€ server/ โ”‚ โ””โ”€โ”€ api.js # Express server (local dev) โ”œโ”€โ”€ src/ โ”‚ โ”œโ”€โ”€ components/ โ”‚ โ”‚ โ”œโ”€โ”€ Header.jsx โ”‚ โ”‚ โ”œโ”€โ”€ Sidebar.jsx โ”‚ โ”‚ โ”œโ”€โ”€ ToolPanel.jsx โ”‚ โ”‚ โ”œโ”€โ”€ ResultDisplay.jsx โ”‚ โ”‚ โ”œโ”€โ”€ ApiKeyModal.jsx โ”‚ โ”‚ โ””โ”€โ”€ tools/ โ”‚ โ”‚ โ”œโ”€โ”€ ScrapeForm.jsx โ”‚ โ”‚ โ”œโ”€โ”€ MapForm.jsx โ”‚ โ”‚ โ”œโ”€โ”€ SearchForm.jsx โ”‚ โ”‚ โ”œโ”€โ”€ CrawlForm.jsx โ”‚ โ”‚ โ”œโ”€โ”€ ExtractForm.jsx โ”‚ โ”‚ โ””โ”€โ”€ AgentForm.jsx โ”‚ โ”œโ”€โ”€ App.jsx โ”‚ โ”œโ”€โ”€ App.css โ”‚ โ””โ”€โ”€ main.jsx โ”œโ”€โ”€ index.html โ”œโ”€โ”€ package.json โ”œโ”€โ”€ vite.config.js โ””โ”€โ”€ vercel.json ``` --- ## โ˜๏ธ Deployment ### Deploy to Vercel [](https://vercel.com/new/clone?repository-url=https://github.com/fracabu/firecrawl-power-app) Or manually: ```bash # Install Vercel CLI npm i -g vercel # Deploy vercel ``` > **Note:** Users will enter their own API keys in the app. No server-side key required! ### Deploy to Other Platforms The app can be deployed to any platform supporting Node.js: - **Netlify** - Add `netlify.toml` configuration - **Railway** - Connect GitHub repo - **Render** - Create a new Web Service --- ## ๐Ÿ› ๏ธ Available Scripts | Command | Description | |---------|-------------| | `npm run dev` | Start development server (Vite + Express) | | `npm run build` | Build for production | | `npm run preview` | Preview production build | --- ## ๐Ÿค Contributing Contributions are welcome! Please feel free to submit a Pull Request. 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/AmazingFeature`) 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`) 4. Push to the branch (`git push origin feature/AmazingFeature`) 5. Open a Pull Request --- ## ๐Ÿ“„ License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. --- ## ๐Ÿ™ Acknowledgments - [Firecrawl](https://firecrawl.dev) - The powerful web scraping API - [Firecrawl MCP](https://docs.firecrawl.dev/mcp-server) - Model Context Protocol server - [Claude Opus 4.5](https://claude.ai/code) - AI assistant (claude-opus-4-5-20251101) - [React](https://react.dev) - UI library - [Vite](https://vitejs.dev) - Build tool --- ๐Ÿ‡ฎ๐Ÿ‡น Italiano Un'interfaccia elegante e potente per sfruttare tutto il potenziale delle API Firecrawl --- ## โœจ Funzionalitร  | Funzione | Descrizione | Piano | |----------|-------------|-------| | ๐Ÿ“„ **Scrape** | Estrai contenuti da qualsiasi pagina web (Markdown, HTML, Screenshot) | Free | | ๐Ÿ—บ๏ธ **Map** | Scopri tutti gli URL di un sito web | Free | | ๐Ÿ•ท๏ธ **Crawl** | Scansiona interi siti web con controllo della profonditร  | Free | | ๐Ÿ” **Search** | Cerca nel web con operatori avanzati | PRO | | ๐Ÿ“Š **Extract** | Estrai dati strutturati usando AI e schemi JSON | PRO | | ๐Ÿค– **Agent** | Agente AI autonomo per raccolta dati complessa | 5/day free | | ๐ŸŒ™ **Dark Mode** | Bellissimo toggle tema chiaro/scuro | Free | | ๐Ÿ”‘ **BYOK** | Porta la Tua Chiave - usa la tua API key Firecrawl personale | Free | > **Nota:** Le funzionalitร  PRO richiedono un [piano Firecrawl a pagamento](https://firecrawl.dev/pricing). Il piano gratuito include 500 crediti (una tantum). --- ## ๐Ÿš€ Avvio Rapido ### Prerequisiti - [Node.js](https://nodejs.org/) 18+ - [Chiave API Firecrawl](https://firecrawl.dev) (piano gratuito disponibile) ### Installazione ```bash # Clona il repository git clone https://github.com/fracabu/firecrawl-power-app.git cd firecrawl-power-app # Installa le dipendenze npm install # Avvia l'app npm run dev ``` ### Primo Avvio 1. Apri `http://localhost:5173` nel browser 2. Inserisci la tua chiave API Firecrawl nel modal 3. Inizia a fare scraping! ๐Ÿ”ฅ --- ## ๐Ÿ”‘ Configurazione API Key ### Opzione 1: Nell'App (Consigliato per gli utenti) Clicca semplicemente il pulsante **"API Key"** nell'header e inserisci la tua chiave. Viene salvata localmente nel tuo browser. ### Opzione 2: Variabile d'Ambiente (Per sviluppatori) ```bash # Crea il file .env cp .env.example .env # Aggiungi la tua API key FIRECRAWL_API_KEY=fc-la-tua-api-key ``` --- ## โ˜๏ธ Deploy ### Deploy su Vercel [](https://vercel.com/new/clone?repository-url=https://github.com/fracabu/firecrawl-power-app) > **Nota:** Gli utenti inseriranno le proprie API key nell'app. Non รจ richiesta nessuna chiave lato server! --- ## ๐Ÿ› ๏ธ Script Disponibili | Comando | Descrizione | |---------|-------------| | `npm run dev` | Avvia il server di sviluppo (Vite + Express) | | `npm run build` | Build per produzione | | `npm run preview` | Anteprima build di produzione | --- ## ๐Ÿค Contribuire I contributi sono benvenuti! Sentiti libero di aprire una Pull Request. 1. Fai un fork del repository 2. Crea il tuo branch (`git checkout -b feature/NuovaFunzionalita`) 3. Committa le modifiche (`git commit -m 'Aggiunta NuovaFunzionalita'`) 4. Pusha il branch (`git push origin feature/NuovaFunzionalita`) 5. Apri una Pull Request --- Made with ๐Ÿ”ฅ and โค๏ธ ## Source & license This open-source MCP server is cataloged on AgentStack and links to its original source โ€” we do not rehost the code. - **Author:** [fracabu](https://github.com/fracabu) - **Source:** [fracabu/firecrawl-power-app](https://github.com/fracabu/firecrawl-power-app) - **License:** MIT - **Homepage:** https://firecrawl-power-app.vercel.app Install and usage instructions live in the source repository linked above. ## Pricing - **Free** โ€” Free ## Security capabilities Automated source analysis of v0.1.0 โ€” what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** yes - **Dynamic code execution:** no *"Yes" means the capability is present in the source โ€” more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** โ€” security scan: passed โ€” Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/mcp-fracabu-firecrawl-power-app - Seller: https://agentstack.voostack.com/s/fracabu - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack โ€” the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.