Firecrawl Power App

🔥 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. Free tier includes 500 credits (one-time).

---

🎨 Design

Built with the official Firecrawl design system:

--primary: #FF4C00;      /* Firecrawl Orange */
--background: #F9F9F9;   /* Light mode */
--surface: #1A1A1A;      /* Dark mode */

---

🚀 Quick Start

Prerequisites

• Node.js 18+
• Firecrawl API Key (free tier available)

Installation

# 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)

# 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:

# 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 - The powerful web scraping API
• Firecrawl MCP - Model Context Protocol server
• Claude Opus 4.5 - AI assistant (claude-opus-4-5-20251101)
• React - UI library
• Vite - 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. Il piano gratuito include 500 crediti (una tantum).

---

🚀 Avvio Rapido

Prerequisiti

• Node.js 18+
• Chiave API Firecrawl (piano gratuito disponibile)

Installazione

# 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)

# 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
• Source: fracabu/firecrawl-power-app
• License: MIT
• Homepage: https://firecrawl-power-app.vercel.app

Install and usage instructions live in the source repository linked above.