Smart Contact System — When AI Starts Managing Your Inbox

Here's a simple but powerful example of how AI can read, sort, and reply to messages on your website.

Yes, there are plenty of expensive CRM and chatbot platforms that promise the same, but in reality, it's surprisingly easy to build your own — with just a few API calls and a few hundred lines of real, production-grade code.

We wanted something that works like a real assistant:
when someone writes through the website, it understands the message, replies politely, and sends it to the right place.
No dashboards, no long setup. Just a system that runs quietly in the background and does the work for you.

AI can already do much more than just answer questions — it can quietly manage communication across all your channels.
It can read an incoming message, understand what it's about, label it as a lead, question, or feedback, write a short human-like reply, and deliver it wherever you work — to a private Discord channel, a Slack workspace, your email inbox, or even a Telegram chat.
That entire workflow happens automatically, without plugins or complex setup.

This project shows that kind of intelligence doesn't need a full SaaS platform.
If your website already uses a modern stack (Next.js, Supabase, OpenAI), you can integrate it in an afternoon and it will behave like a personal AI-powered inbox.
Later, you can easily expand it — connect email, Slack, or analytics dashboards — because everything is modular and API-driven.

How We Made It

The system runs on Next.js, Supabase, OpenAI, and a private Discord inbox.
Below is the high-level flow we built and where the key fixes were applied.

1. Frontend Form (SmartContact.tsx)

A simple form component handles input and submission:

<form onSubmit={handleSubmit}>
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required />
  <button type="submit">Send</button>
</form>

It sends data to /api/inbox.
The problem we solved early was reliability — the API must respond within two seconds and never hang.
We added precise loading states and a graceful fallback message if the API fails.

2. Categorization API

The /api/inbox route handles everything: AI classification, database insert, Discord notification, and user reply.

The first call to OpenAI detects message intent:

const categorize = await openai.chat.completions.create({
  model: "gpt-4o-mini",
  messages: [
    { role: "system", content: "Categorize the message as Lead, Question, Feedback, or General." },
    { role: "user", content: message },
  ],
});

Earlier versions used keyword matching and failed on short messages like "test."
Switching to OpenAI categorization fixed that and gave consistent accuracy across all message types.

3. Natural AI Reply

After categorization, we ask OpenAI again to generate a short, friendly response:

const prompt = `
You are an assistant replying to contact form messages.
Reply in one short, friendly sentence (max 15 words).
User: "${message}"
Detected category: ${category}
`;

The API returns a simple human-like confirmation that we display on the website.
This replaced the previous static text "We'll get back to you soon," which made even test messages look robotic.

4. Supabase Storage and Discord Notification

Each message is saved in a contact_messages table:

CREATE TABLE contact_messages (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT,
  email TEXT,
  message TEXT,
  category TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Then it's sent to Discord through a webhook.
A fix here was environment handling — Next.js API routes didn't see .env.local by default, so we created load-env.mjs to merge .env.supabase, .env.openai, and .env.discord before launching the dev server.
That change made local and production behavior identical.

The notification itself is a simple JSON post:

await fetch(process.env.DISCORD_WEBHOOK_URL, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ content: formattedMessage }),
});

Now every new contact shows up instantly in my private Discord channel.

What's Possible Next

Once messages are sorted and labeled automatically, a lot of doors open.
Here are the next steps planned for this system.

1. Auto-reply Email Layer

Send a real email reply containing the AI's message and your contact info.
It feels personal, even though it's automatic.

2. Smart Analytics View

Add a small /inbox dashboard showing messages by category, sentiment, or date.
You could see that 60% of your messages are leads or that most questions come after blog posts.

3. Contextual Memory

Keep conversation threads.
If the same person writes again, the AI continues with awareness of past context — "Thanks for following up about your project."

4. Custom Tone Profiles

Adjust the AI's communication style per section of the site:
friendly on the blog, concise on documentation pages, and professional on client forms.

You Can Try It

This system is live on the site and working right now. The Smart Contact Form you see at the bottom of this article is powered by the exact system described above.