<p><img src="https://media.daily.dev/image/upload/s--uo_vMc7W--/f_auto/v1747104175/ugc/content_f13520f4-ff8c-4f11-a6d1-0efab6904d67?_a=BAMClqUq0" alt="dark-maven-empty-chat"></p>
<p>As a developer, I’m excited to share Maven AI, an open-source project I built to streamline electronic product research using AI. This project showcases my skills in AI, software architecture, and full-stack development, and I’d love to hear feedback from the community. Below, I dive into the project’s purpose, technical details, and what I learned along the way.</p>
<h2>What is Maven AI?</h2>
<p>Maven AI is an intelligent assistant designed to simplify the process of researching electronic products. It helps users find, compare, and understand products through personalized recommendations, fast searches, and detailed insights. Built as a portfolio project, it demonstrates how AI can enhance user decision-making while reflecting my expertise in creating modular, user-centric applications.</p>
<h2>Key Features</h2>
<p>Maven AI offers a suite of tools tailored to product research:</p>
<p><img src="https://media.daily.dev/image/upload/s--ozBQquVc--/f_auto/v1747103532/ugc/content_45f9e09d-63c3-4aac-9b31-32c1d6d0e145?_a=BAMClqUq0" alt="dark-maven-recommendations"></p>
<h3>AI Product Picks:</h3>
<p>Generates personalized product recommendations based on user preferences, with explanatory insights to justify suggestions.
Find Products Fast: Quickly retrieves product details using partial or full names, leveraging web scraping and APIs for concise summaries.</p>
<p><img src="https://media.daily.dev/image/upload/s--YasOsUZe--/f_auto/v1747104286/ugc/content_33a42332-4475-4fec-a3e0-9298e69fe087?_a=BAMClqUq0" alt="dark-maven-details-result"></p>
<h3>Deep Product Insights:</h3>
<p>Aggregates comprehensive data from multiple sources, providing specifications and summaries for informed decisions.</p>
<p><img src="https://media.daily.dev/image/upload/s--eh-fAbeD--/f_auto/v1747104300/ugc/content_fd923aec-c01e-45f0-b8c8-f50b0e4fb548?_a=BAMClqUq0" alt="dark-maven-comparison"></p>
<h3>Compare Side-by-Side:</h3>
<p>Enables direct comparison of products, highlighting key differences and similarities with AI-generated insights.</p>
<p><img src="https://media.daily.dev/image/upload/s--xCoV2rrV--/f_auto/v1747104312/ugc/content_fdf0694c-21da-4dc1-a1e4-24781f1b7b1c?_a=BAMClqUq0" alt="dark-maven-inquiry"></p>
<h3>User Inquirer:</h3>
<p>Proactively asks clarifying questions to ensure results align with user needs, creating a personalized experience.</p>
<p>These features are designed to save time, reduce decision fatigue, and deliver actionable insights, making Maven AI a practical tool for tech enthusiasts and shoppers alike.</p>
<h2>Technical Architecture</h2>
<p>Maven AI’s architecture is one of the project’s highlights, showcasing a modular, orchestrator-driven workflow. Here’s a breakdown of the key components:</p>
<h3>Orchestrator</h3>
<p>The orchestrator is the central intelligence, responsible for:</p>
<ul>
<li>Message Unification: Converting user inputs (text, product attachments, or comparison requests) into a standardized format.</li>
<li>Intent Determination: Analyzing input to identify user goals (e.g., search, compare, recommend).</li>
<li>Tool Selection: Choosing the appropriate agent tool based on intent.</li>
<li>State Management: Updating the conversation history and AI state using a MutableAIState object.</li>
</ul>
<h2>Agent Tools</h2>
<p>Maven AI uses specialized tools, each designed for a specific task:</p>
<ul>
<li>Recommendator: Generates personalized recommendations using a recommendationSchema and streamObject.</li>
<li>Search Product: Retrieves product data via web scraping and APIs.</li>
<li>Get Product Details: Aggregates in-depth information from multiple sources.</li>
<li>Products Comparison: Compares products side-by-side, highlighting key metrics.</li>
<li>Inquire User: Prompts users for clarification to refine results.</li>
</ul>
<h3>TypeScript Definitions</h3>
<p>The project leverages TypeScript for type safety and maintainability. Examples include:</p>
<pre><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">PayloadData</span> = {
  <span class="hljs-attr">textInput</span>?: <span class="hljs-built_in">string</span>;
  <span class="hljs-attr">attachProduct</span>?: <span class="hljs-title class_">AttachProduct</span>;
  <span class="hljs-attr">productCompare</span>?: <span class="hljs-title class_">ProductCompare</span>;
  <span class="hljs-attr">inquiryResponse</span>?: <span class="hljs-title class_">InquiryResponse</span>;
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">type</span> <span class="hljs-title class_">MutationPayload</span>&lt;<span class="hljs-variable constant_">ARGS</span>, <span class="hljs-variable constant_">DATA</span>&gt; = {
  <span class="hljs-attr">name</span>: <span class="hljs-title class_">AvailableTool</span>;
  <span class="hljs-attr">args</span>: <span class="hljs-variable constant_">ARGS</span>;
  <span class="hljs-attr">result</span>: <span class="hljs-variable constant_">DATA</span>;
  <span class="hljs-attr">overrideAssistant</span>?: { <span class="hljs-attr">content</span>: <span class="hljs-built_in">string</span> };
};
</code></pre>
<h2>UI and Streaming - it uses Vercel AI SDK RSC</h2>
<p>The front-end is built with React, rendering dynamic UI components (e.g., ProductSearch, ProductComparison) via a streamUI function. Results are streamed in real-time, providing an interactive experience without long loading times.</p>
<h2>Error Handling</h2>
<p>Robust error handling ensures reliability, addressing:</p>
<ul>
<li>Scraping errors (via handleScrapingWithCache)</li>
<li>API errors</li>
<li>LLM generation errors</li>
<li>Database errors</li>
<li>Input validation errors</li>
</ul>
<h2>Tech Stack</h2>
<ul>
<li>Google Gemini: For intent detection, insights generation, and user interaction.</li>
<li>TypeScript: For type-safe, maintainable code.</li>
<li>React: For a responsive, component-based UI.</li>
<li>Firecrawl for Web Scraping &amp; Tavilty APIs: For data aggregation from external sources.</li>
<li>Upstash Redis for caching, minimizing time to load a state</li>
<li>Neon postgre for database, storing shared artifacts, etc</li>
</ul>
<h3>What I Learned</h3>
<p>Building Maven AI was a deep dive into several areas:</p>
<ul>
<li>AI Workflow Design: Creating an orchestrator that intelligently manages tools and state was a complex but rewarding challenge.</li>
<li>User-Centric Development: Balancing technical complexity with an intuitive user experience taught me the importance of clear documentation (e.g., the /cookbook guide).</li>
<li>Scalability Considerations: Handling external data sources highlighted the need for robust error handling and caching.</li>
<li>Full-Stack Integration: Combining AI, back-end logic, and a React front-end reinforced my skills in end-to-end development.</li>
</ul>
<h1>Why Open-Source?, I chose to make Maven AI open-source to:</h1>
<p>Showcase my skills to potential employers and collaborators.
Invite community contributions to enhance features or fix bugs.
Share knowledge with other developers interested in AI-driven applications.</p>
<p>The project’s GitHub repository will include detailed contribution guidelines and a roadmap to encourage collaboration.</p>
<h3>Important Note</h3>
<p>This application primarily sources data from Tokopedia, which may result in missing information if a product, such as Product A, is unavailable on Tokopedia but present on other platforms. Expanding to multiple data sources would significantly enhance its capabilities.</p>
<h3>Future Improvements</h3>
<p>While Maven AI is a demo, there’s room to grow:</p>
<ul>
<li>Optimize scalability to handle larger user bases.</li>
<li>Integrate reliable APIs (e.g., Amazon Product Advertising API) to reduce reliance on web scraping.</li>
<li>Add multilingual support for broader accessibility.</li>
<li>Other features you can add?</li>
</ul>
<p>I’d love for the Daily Dev community to explore Maven AI and share feedback. Whether it’s thoughts on the architecture, suggestions for new features, or ideas for improving the user experience, your input would be invaluable. Check out the app at <a href="https://maven-ai-six.vercel.app/" target="_blank" rel="noopener nofollow">https://maven-ai-six.vercel.app/</a> and let me know what you think!</p>
<p>#AI #SoftwareDevelopment #OpenSource #TechPortfolio #ProductResearch</p>

The official daily.dev AI community. Led by thought leaders and AI experts. Stay tuned for insights, news and discussions. 

Maven AI is an open-source project created to streamline electronic product research with AI. It offers features like personalized recommendations, fast product searches, deep insights, and side-by-side comparisons to enhance user decision-making. The project utilizes a modular architecture with an orchestrator and agent tools, leveraging TypeScript and React for type-safety and a responsive UI. To handle data, it uses web scraping, APIs, and various technologies like Google Gemini, Firecrawl, and Upstash Redis. The project is open-source for community collaboration and future scalability improvements.

Maven AI: Building an AI-Powered Product Research Assistant

<p>I really like how the overall product looks but as a frontend developer, i must say that there is one problem… all the parts of your website have different themes, colors, styles which tricks everyone’s brain all these pages are DIFFERENT websites… but keep it up the product is really good.</p>


<p>Yea dude - I stumbled across your work a little while ago. I also LOVE your lexical-app. Excellent job. Would love to pick your brain some time. Keep it up</p>


<p>Incredible work man, this has definetely inspired me</p>


<p>The App just got update!</p>
<p>See the changelog at: <a href="https://github.com/rizzzky78/market-maven/releases" target="_blank" rel="noopener nofollow">https://github.com/rizzzky78/market-maven/releases</a></p>
<p><img src="https://media.daily.dev/image/upload/s--iGJOygRw--/f_auto/v1750683137/ugc/content_e4fc08a4-946f-4d95-8f66-01117346717c?_a=BAMClqZW0" alt="snapshot-mobile-product-details"></p>


<p>Can you make an article of sorts going about how you created it? I’m in the process of setting up my first llm too and I’m running into the big hurdle of data sourcing and preprocessing. Really cool stuff</p>
