DEV Community: Nithish Koriyar

🚀 I Built AI Filler: A Chrome Extension That Uses ChatGPT Projects to Fill Job Application Forms (No API Required)

Nithish Koriyar — Tue, 21 Jul 2026 05:41:00 +0000

Filling out the same information for every job application quickly became repetitive.

Almost every company asks for the same details:

Name
Email
Phone Number
Experience
Skills
Resume
Portfolio
Salary Expectations
Notice Period
LinkedIn
GitHub

Instead of manually filling these details every single time, I decided to automate the repetitive part.

The result is AI Filler, a Chrome Extension that works alongside ChatGPT Projects to intelligently understand job application forms and populate them with your own information.

No API Keys.

No Backend.

No Paid Integrations.

Just ChatGPT running in your browser and a Chrome extension.

📌 Quick Navigation

🎥 Demo
✨ Features
🏗️ How It Works
🧠 Why ChatGPT Projects?
📥 Direct Installation & Setup
🚀 Step-by-Step Usage
🔒 Security & Privacy
🛠️ Troubleshooting

🎥 Demo

Check out the live video demo, full overview, and GitHub repository:

👉 Watch AI Filler Video Demo | 🐙 GitHub Repository

✨ Features

Automatically extracts the structure of any job application form.
Understands labels, placeholders, field names, and input types.
Sends only the page structure to ChatGPT.
Uses your ChatGPT Project as the knowledge source.
Returns structured JSON.
Automatically fills matching form fields.
Supports most common job application portals.
Works without OpenAI API keys.
No backend server required.

🏗️ How It Works

The workflow is simple.

Job Application Page
        │
        ▼
Extract & Send Page Data
        │
        ▼
ChatGPT Project
        │
        ▼
Structured JSON Response
        │
        ▼
AutoFill Web Page
        │
        ▼
Review
        │
        ▼
Submit

🧠 Setting Up Your ChatGPT Project Sources

Instead of maintaining a backend database or integrating paid APIs, AI Filler leverages ChatGPT Projects.

Your project sources should contain two key pieces of information:

📄 Your Resume / CV (resume.pdf or resume.md)
📝 Your Personal Career & Application Context (career_context.md)

💡 How to Generate Your `career_context.md` using Claude

To generate a complete, interactive career_context.md file tailored to your background:

Open Claude.
Upload your latest Resume (resume.pdf or DOCX) along with the included prompt file CAREER_KB_BUILDER_PROMPT_ENHANCED.md (View on GitHub).
Claude will automatically:
- Extract your contact details, work history, projects, and skills.
- Identify missing job-application gaps (salary expectations, notice period, relocation, work mode, key strengths).
- Ask interactive questions to fill in the missing details.
- Generate a single, clean Markdown file titled career_context.md.
Save or copy the generated career_context.md file.

📁 Adding Sources to Your ChatGPT Project

Open ChatGPT and create a new Project (e.g. named Job Helper).
Click on Sources inside the Project interface.
You can add your information in any format:
- Upload your resume.pdf and career_context.md files.
- Copy and paste the text directly into Sources.
- Or link documents via Google Drive / Cloud files.
Now whenever you click Extract & Send Page Data ✦, ChatGPT uses your exact Project Sources to generate 100% accurate, tailored form responses!

📋 Prerequisites

Before using the extension, ensure you have:

Google Chrome or any Chromium-based browser
A ChatGPT account
A ChatGPT Project containing your professional information

📥 Installation

Installing the extension is simple and takes less than a minute.

Step 1: Download the Extension Files

You can get the project files in either of two ways:

Download ZIP: Click Download ZIP (or click Code ➔ Download ZIP on GitHub). Then extract/unzip the downloaded file on your computer.
Clone Repository:

  git clone https://github.com/NithishKoriyar/ai_form_filler.git

Step 2: Load into Chrome

Open Google Chrome and navigate to chrome://extensions in the address bar (or go to Menu ➔ Extensions ➔ Manage Extensions).
Toggle ON Developer Mode in the top right corner.
Click the Load unpacked button in the top left.
Select the extracted ai_form_filler project folder.

Step 3: Pin for Quick Access

Click the Extensions (Puzzle Piece) icon in Chrome's top toolbar.
Click the Pin icon next to AI Filler to keep it accessible in your toolbar.

🚀 Usage

Step 1

Open any job application page.

Examples include:

Greenhouse
Lever
Workday
Ashby
Custom application portals

Step 2

Click the AI Filler extension.

ChatGPT opens in the browser sidebar.

Step 3

Open your ChatGPT Project.

Example:

Job Helper

This project should already contain your:

Resume
Skills
Projects
Experience
Additional reference documents

Step 4

Click

Extract & Send Page Data

The extension will:

Analyze the current webpage
Detect forms
Read labels
Identify placeholders
Understand input fields
Build a structured representation
Automatically send it to ChatGPT

Step 5

Wait a few moments.

ChatGPT generates a structured JSON response containing the information required to complete the form.

Step 6

Click

AutoFill Web Page

The extension will:

Parse the JSON response
Match every field intelligently
Populate the corresponding inputs
Trigger the required browser events

Step 7

Review the generated information.

Make any necessary edits.

Submit the application manually.

The extension never submits forms automatically.

You remain in full control.

🔒 Security

This extension is designed for educational purposes and personal productivity.

It does not require:

API Keys
Backend Servers
Cloud Databases

However, browser extensions can access webpage content.

For your safety:

Install only from this GitHub repository.
Review the source code if desired.
Never install modified versions from unknown sources.
Do not upload confidential information you are uncomfortable sharing with ChatGPT.

🛠️ Troubleshooting

The extension does not appear.

Verify Developer Mode is enabled.
Reload the extension.
Ensure the selected folder contains manifest.json.

The sidebar does not open.

Refresh Chrome.
Reload the extension.
Restart the browser if necessary.

ChatGPT does not receive page data.

Ensure ChatGPT has finished loading.
Open a new chat.
Click Extract & Send Page Data again.

AutoFill does not work.

Wait until ChatGPT finishes generating the JSON.
Click AutoFill Web Page only after the response is complete.
Ensure the original webpage is still the active tab.

Some fields are not filled.

Not every website follows the same HTML structure.

The extension attempts to match fields using:

Labels
Placeholder text
Input names
IDs
ARIA attributes
Field types

If a field cannot be matched confidently, it is skipped instead of filling incorrect information.

⚠️ Limitations

Requires a ChatGPT account.
Requires a ChatGPT Project.
Not published on the Chrome Web Store.
Some highly customized websites may require manual review.
File upload fields may require manual interaction due to browser security restrictions.
AI-generated responses should always be reviewed before submission.

🗺️ Roadmap

Future improvements include:

Better field matching
Multiple user profiles
Support for additional application portals
Custom prompt templates
AI confidence scoring
Manual review mode
Support for additional AI providers
Improved extraction engine

🤝 Contributing

Contributions are welcome.

If you find a bug or have an idea for improvement:

Open an Issue
Submit a Pull Request
Share feedback

📜 Disclaimer

This project is intended for:

Educational purposes
Learning browser extension development
Improving personal productivity

It is not intended to:

Bypass hiring processes
Fabricate information
Automatically submit applications
Misrepresent a candidate's qualifications

Always review the generated information before submitting any application.

💻 Source Code

GitHub Repository:

https://github.com/NithishKoriyar/ai_form_filler

💬 Feedback

If you found this project useful, consider:

⭐ Starring the repository

🐛 Reporting bugs

💡 Suggesting improvements

🤝 Contributing to the project

Your feedback helps make the project better for everyone.

🙌 Final Thoughts

This project started as a way to eliminate repetitive data entry while applying for jobs.

Along the way, it became a great learning experience in:

Chrome Extension Development
DOM Analysis
Content Scripts
Browser Messaging
ChatGPT Projects
Intelligent Form Mapping
Browser Automation

If it saves you even a few minutes on every application, then it has achieved its goal.

Happy coding! 🚀

Push Notifications with Socket.IO in Expo, React Native Web, and Mobile

Nithish Koriyar — Mon, 31 Mar 2025 16:26:34 +0000

Push Notifications with Socket.IO in Expo React Native (Web and Mobile)

⚠️ Important Warning

This project implements push notifications using Socket.IO and local push notifications. It is important to note:

Notifications work when the app is running in the background or when the device is in sleep mode (as long as the app remains open in the background).
It does not work if the app is completely closed or not running.
If this limitation does not fit your needs, you may consider using Firebase Cloud Messaging (FCM) or other push notification services.

📌 Overview

This project allows sending notifications between devices using Node.js, Socket.IO, and Expo React Native for both mobile and web notifications. Since Socket.IO cannot trigger actual push notifications, we use local push notifications, ensuring that:

A standard push notification popup appears.
Notifications work when the app is in the background or the device is asleep (but the app must be running in the background).
Works for both mobile and web.

🛎️ When to Use In-App Notifications Without FCM

Here are some examples where in-app notifications should be available only when the user is active in the app:

🚖 Active Driver Notifications – Notify drivers about new ride requests or ride status updates while they are actively using the app.
💬 Chat Messages in a Support App – Notify users about new incoming messages only when they have the support chat screen open.
🏦 Real-Time Auction Updates – Notify users about new bids or auction closing times when they are viewing the auction screen.
📈 Stock Market Price Alerts – Notify users about stock price changes when they are actively monitoring stocks in the app.
⚽ Live Sports Score Updates – Notify users about real-time match score changes when they are on the live match screen.
🛠️ Admin Panel Notifications – Notify admins about new user reports, verification requests, or support tickets when they are logged into the admin dashboard.
🎮 Gaming Matchmaking Alerts – Notify players when they are matched with an opponent only when they are on the matchmaking screen.
📝 Collaborative Document Editing – Notify users when a teammate edits a document while they are working on it.

🛠️ Technologies Used

Node.js (Backend Server)
MongoDB (To store user socketId with username for targeted notifications)
Socket.IO (Real-time communication)
Expo React Native (Frontend for mobile and web)
Expo Notifications (For triggering local push notifications)

🚀 Features

Send notifications to specific users using stored socketId in MongoDB.
Standard push notification popup using local notifications.
Works in the background and sleep mode (as long as the app is open in the background).
Supports both mobile and web notifications.

Got it! Here's how you can structure it with a concise message:

🔗 Get Full Source Code

🌟 If you find this project helpful or interesting, please consider giving it a star! 🌟

📂 Project Structure

lpn-api/                    # Backend (Node.js + Socket.IO + MongoDB)
├── node_modules/
├── package-lock.json
├── package.json
├── server.js               # Main backend server (Handles socket connections, stores user socketId in MongoDB)

lpn-app/                    # Frontend (Expo React Native)
├── .expo/
├── app/
│   ├── _layout.tsx
│   ├── index.tsx
│   ├── notificationService.js  # Main file containing notification logic
├── assets/
├── node_modules/
├── .gitignore
├── app.json
├── expo-env.d.ts
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json

🔧 Installation & Setup

1️⃣ Backend Setup (Node.js + MongoDB + Socket.IO)

Navigate to the backend folder:

   cd lpn-api

Install dependencies:

   npm install

Start the server:

   node server.js

2️⃣ Frontend Setup (Expo React Native)

Navigate to the frontend folder:

   cd lpn-app

Install dependencies:

   npm install

Start the app:

   npm start

📲 How It Works

The backend (Node.js with Socket.IO) listens for notification events and stores user socketId with username in MongoDB.
When a message is sent from one device, the Socket.IO server retrieves the target user's socketId and emits the notification only to that user.
The React Native frontend listens for notifications in notificationService.js and triggers local push notifications.
A push notification popup appears on the device.

🎯 Example Usage

Storing User `socketId` in MongoDB (Backend - `server.js`)

// backend/server.js
import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
import cors from 'cors';
import mongoose from 'mongoose';

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:8081',
    methods: ['GET', 'POST'],
  },
});

app.use(cors());
app.use(express.json());

// Connect to MongoDB
mongoose.connect('mongodb://localhost:27017/lpn_socket', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

// Define User Schema and Model
const userSchema = new mongoose.Schema({
  username: String,
  socketId: String,
});

const User = mongoose.model('User', userSchema);

io.on('connection', (socket) => {
  console.log('New client connected');

  socket.on('register', async (username) => {
    await User.create({ username, socketId: socket.id });
    const users = await User.find({}, 'username');
    io.emit('userList', users.map(user => user.username));
  });


  socket.on('sendNotification', async ({ recipient, title, body }) => {
    const user = await User.findOne({ username: recipient });
    if (user) {
      io.to(user.socketId).emit('notification', { title, body });
      console.log(`Message sent to ${recipient}`);
    } else {
      console.log(`Recipient ${recipient} not found`);
    }
  });




  socket.on('disconnect', async () => {
    await User.deleteOne({ socketId: socket.id });
    const users = await User.find({}, 'username');
    io.emit('userList', users.map(user => user.username));
    console.log('Client disconnected');
  });
});

server.listen(4000, () => {
  console.log('Server is running on port 4000');
});

Handling Notifications in React Native (`notificationService.js`)

import * as Notifications from 'expo-notifications';
import { Platform } from 'react-native';

// Check if the app is running on the web
const isWeb = Platform.OS === 'web';

// Configure notification handler (only for mobile)
if (!isWeb) {
  Notifications.setNotificationHandler({
    handleNotification: async () => ({
      shouldShowAlert: true,
      shouldPlaySound: false,
      shouldSetBadge: false,
    }),
  });
}

// Function to request notification permissions for mobile
async function requestMobileNotificationPermissions() {
  const { status: existingStatus } = await Notifications.getPermissionsAsync();
  let finalStatus = existingStatus;

  if (existingStatus !== 'granted') {
    const { status } = await Notifications.requestPermissionsAsync();
    finalStatus = status;
  }

  if (finalStatus !== 'granted') {
    alert('Failed to get push token for notifications!');
    return;
  }

  const token = (await Notifications.getExpoPushTokenAsync()).data;
  console.log('Expo Push Token:', token);
  return token;
}

// Function to request notification permissions for web
async function requestWebNotificationPermissions() {
  if (!('Notification' in window)) {
    alert('This browser does not support notifications.');
    return;
  }

  if (Notification.permission === 'granted') {
    console.log('Notification permission already granted');
  } else if (Notification.permission !== 'denied') {
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') {
      alert('Notification permission denied.');
    }
  }
}

// Function to request notification permissions
export async function requestNotificationPermissions() {
  if (isWeb) {
    await requestWebNotificationPermissions();
  } else {
    await requestMobileNotificationPermissions();
  }
}

function handleWebNotification(title, body) {
    if (!('Notification' in window)) {
      alert('This browser does not support notifications.');
      return;
    }

    if (Notification.permission === 'granted') {
      new Notification(title, {
        body: body,
      });
    } else if (Notification.permission !== 'denied') {
      Notification.requestPermission().then((permission) => {
        if (permission === 'granted') {
          new Notification(title, {
            body: body,
          });
        }
      });
    }
  }

  async function handleMobileNotification(title, body) {
    try {
      await Notifications.scheduleNotificationAsync({
        content: {
          title: title,
          body: body,
          data: { data: 'goes here' },
        },
        trigger: { seconds: 1 },
      });
    } catch (error) {
      console.error('Failed to schedule mobile notification:', error);
    }
  }



// Function to schedule a local notification
export async function triggerLocalNotification(title, body) {
    if (isWeb) {
      handleWebNotification(title, body);
    } else {
      await handleMobileNotification(title, body);
    }
  }

Handling Notifications in React Native (`index.jsx or index.tsx`)

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import io from 'socket.io-client';
import { requestNotificationPermissions, triggerLocalNotification } from './notificationService'; // Adjust the import path as necessary

const socket = io('http://localhost:4000');

const App = () => {
  const [username, setUsername] = useState('');
  const [users, setUsers] = useState([]);
  const [recipient, setRecipient] = useState('');
  const [title, setTitle] = useState('');
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Request notification permissions when the component mounts
    requestNotificationPermissions();
  }, []);

  useEffect(() => {
    socket.on('userList', (userList) => {
      setUsers(userList);
    });

    socket.on('notification', ({ title, body }) => {
      console.log("Notification received:", { title, body });
      triggerLocalNotification(title, body);
    });

    return () => {
      socket.off('userList');
      socket.off('notification');
    };
  }, []);

  const registerUser = () => {
    socket.emit('register', username);
  };

  const sendNotification = () => {
    socket.emit('sendNotification', { recipient, title, body: message });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Notification App</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Username"
          value={username}
          onChangeText={setUsername}
        />
        <Button title="Register" onPress={registerUser} />
      </View>
      <View style={styles.userList}>
        <Text style={styles.subtitle}>Click on a user below to send them a notification</Text>
        <FlatList
          data={users}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => setRecipient(item)}>
              <Text style={styles.userItem}>{item}</Text>
            </TouchableOpacity>
          )}
        />

      </View>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Title"
          value={title}
          onChangeText={setTitle}
        />
        <TextInput
          style={styles.input}
          placeholder="Message"
          value={message}
          onChangeText={setMessage}
        />
        <Button title="Send Notification" onPress={sendNotification} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
  subtitle: {
    fontSize: 18,
    marginBottom: 10,
  },
  inputContainer: {
    marginBottom: 20,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
  },
  userList: {
    marginBottom: 20,
  },
  userItem: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  instruction: {
    fontSize: 14,
    color: 'gray',
    marginTop: 10,
  },
});

export default App;

🔥 Limitations

The app must be running in the background to receive notifications.
Does not work when the app is completely closed.
It is not a substitute for actual push notifications (like Firebase Cloud Messaging or OneSignal).

📝 Conclusion

This project provides a simple and effective way to send notifications using Socket.IO and local push notifications in Expo React Native for both web and mobile. The backend stores socketId in MongoDB to target specific users, ensuring personalized notifications. However, for production apps requiring notifications when the app is completely closed, consider using Firebase Cloud Messaging (FCM) or similar services.

📌 Future Enhancements

📈 Improve scalability to handle a large number of users efficiently.
⚡ Enhance performance for real-time notifications with minimal latency.
🔄 Optimize system architecture for better handling of concurrent users.

💡 Feel free to contribute or modify the project as needed! 🚀