AI Imam: Fatwas and Guidance from Imam Ai-Ali Katib

• 

  Technical Figure 1

• 

Ah, salaam and wel-e-cum, haha :)! As the dev behind this little project, I'd be happy to walk you through the inner workings of our digital Imam.

---

Inspiration

Honestly? I saw all these AI "experts" popping up, but none had the gravitas, the vibe, of a classical scholar. I wanted to build an AI that wasn't just a chatbot, but a "distinguished and learned Imam". It felt like a meaningful way to bridge ancient wisdom with cutting-edge tech.

Plus, let's be real, I was tired of Googling "Is music permissible in Islam?" and getting ten different answers from random, anonymous forums. I wanted a single, scholarly, and well-reasoned response.

---

What it does

This is your direct line to a personal AI jurist, "Imam Ai-Kitab".

It's simple: You pose a question on Islamic jurisprudence (Fiqh). The AI, acting as a scholar, provides a formal, balanced, and compassionate ruling.

The key features are:

• Bilingual Rulings: You don't just get an answer; you get the fatwa in two languages: formal, scholarly English and classical, vocalized Arabic.
• Thematic Loading: While you wait, you're not staring at a boring spinner. You get to see the Imam 'pondering' your question with a series of loading messages, from "Consulting the sacred texts: Qur'an and Sunnah..." to "Applying principles of analogical reasoning (Qiyas)...". It turns waiting into part of the experience.
• Clear Disclaimers: This is a tool, not a replacement for human scholarship. The footer makes it crystal clear: "This tool uses generative AI. ... Not a substitute for a qualified Islamic scholar".

---

How we built it

This is a lean, modern, and—if I do say so myself—rather clever stack.

1. Frontend: It's a straightforward React app built with Vite. All the logic you see for handling state (like isLoading, fatwa, error) and rendering components is in App.tsx.
2. The "Brain": The real magic is in how we call the Google Gemini API (specifically gemini-2.5-pro). We don't just ask it the user's question. That would be chaotic.
3. The Persona (The systemInstruction): We force the AI into its role using a powerful systemInstruction. We explicitly command it: "You are a distinguished and learned Imam..." and set the rules: "Start each response with 'In the name of Allah...'" and "end with 'And Allah knows best.'"
4. The Secret Weapon (The fatwaSchema): This is the part I'm proudest of. Getting consistent, usable data from an LLM is hard. So, we don't! We force the model to return structured JSON by passing it a responseSchema. We tell it, "I don't care what you want to say; you will give me a JSON object with exactly two keys: englishFatwa and arabicFatwa." This makes the frontend job trivial.

---

Challenges we ran into

Oh, the challenges.

• Taming the AI: Getting an AI to consistently act like a "distinguished and learned Imam" and not a peppy, helpful, "As a large language model..." chatbot was tough. The systemInstruction went through so many drafts. At one point, the Imam sounded more like a 1920s detective. We fixed that.
• API Key Security (The Big One): This repo is in a bit of a "dev vs. prod" pickle.
  • The services/geminiService.ts file is designed to be called by the client (App.tsx imports it). If you follow the README and put your key in .env.local, that key gets bundled into the client-side JavaScript. This is a massive security nightmare in production.
  • The correct way is the serverless function in api/generate.ts. This acts as a secure proxy: the client asks our server, and our server (with its hidden API key) asks Google.
  • The challenge? Wiring the app to always use the api/ proxy. Right now, it's set up for the easy (and leaky) local dev method.

---

Accomplishments that we're proud of

1. The JSON Schema Enforcement. Hands down. Getting perfectly structured JSON from an LLM every single time is a game-changer. It's clean, reliable, and makes the frontend stateless and simple.
2. The Loading Experience. I love those loading messages. It's such a simple array in App.tsx, but it turns a boring 10-second API wait into an immersive, thematic moment. It feels like the Imam is actually working for you.
3. The Persona: The dual-language output, the "In the name of Allah..." intro, the "And Allah knows best..." sign-off—it's all enforced by the prompt, and it just works. It feels respectful and authentic.

---

What we learned

1. Never trust an LLM to be consistent without constraints. A strong systemInstruction is your rudder, and a responseSchema is your anchor. Without them, you're just hoping for the best.
2. User experience isn't just about speed; it's about feel. The LOADING_MESSAGES prove that a "slow" response can feel engaging and premium if you frame it right.
3. SECURE YOUR API KEYS, FOLKS. Seriously. That api/generate.ts proxy isn't just for show. Don't be the dev who leaks their entire project's budget because you put a key in a client-side component.

---

What's next for AI Imam: Fatwas and Guidance from Imam Ai-Ali Katib

First off, I love the new name—"Imam Ai-Ali Katib" has a fantastic ring to it! We might have to update the H1 tag in App.tsx.

As for what's next:

1. Refactor API Calls (Priority #1): Deprecate that leaky services/geminiService.ts immediately. The app must exclusively use the secure api/generate.ts proxy. That's non-negotiable.
2. Conversation History: Right now, every fatwa is a one-shot deal. It would be incredible to allow follow-up questions. "Imam, you said X, but what about in this other context?" That requires state, history, and a more complex context window.
3. Source Attribution (The Holy Grail): The Imam is "Consulting the sacred texts", but what if he could show you? The ultimate next step is integrating RAG (Retrieval-Augmented Generation). We'd feed the AI a library of trusted Islamic texts (Qur'an, Hadith, scholarly works) and have it provide actual citations in its fatwas.

That would make "Imam Ai-Kitab" (Imam of the AI-Book) truly live up to his name.

Built With

• aistudio
• typescript