Problem Statement🔒

In today's information-rich world, keeping track of ideas is tough. People struggle to:

Organize complex thoughts clearly
Collaborate on interconnected concepts
Create visual maps quickly and easily

Traditional note-taking feels clunky. We need a smarter way to capture and connect ideas that's simple, intuitive, and actually helps how we think.

Solution🗝

MindMap AI provides an effective solution for organizing complex ideas through:

1. Easy Mind Mapping: Users can quickly create mind maps by inputting topics or pasting content, transforming them into clear visuals.

2. AI Insights: The platform analyzes input to highlight key concepts and relationships, enhancing understanding.

3. Interactive Features: Users can dynamically adjust and explore their mind maps in real-time.

4. Collaboration: Mind maps can be easily shared and exported in various formats, including interactive SVGs.

5. PDF Integration: Users can upload PDFs to extract text and incorporate it into their mind maps.

6. User-Friendly Design: The intuitive interface ensures accessibility for all skill levels.

7. Intelligent Resource Discovery: Automatically generate relevant links, blogs, and research resources for each mind map node, enriching your content with credible, contextual information from across the web.

MindMap AI simplifies the process of visualizing thoughts, making it efficient and enjoyable.

Example Mindmap:

Sample Mindmap

MindMap AI: A Comprehensive Overview of Features and Functionality

Backend Functionality

Backend Repository

At the heart of MindMap AI's backend is the ability to generate mindmaps from user queries. The process is streamlined and efficient, ensuring that users can quickly visualize their thoughts. Here’s how it works:

1. User Input: Users submit a query or request for a mindmap.

2. OpenAI API Call: The backend constructs a prompt and sends it to the OpenAI API.

3. Response Handling: The response from OpenAI is parsed, and the mindmap content is extracted.

4. Database Storage: The generated mindmap is stored in a PostgreSQL database for future retrieval.

Development with Modus

Modus simplifies the development of AssemblyScript applications, making it easy to build high-performance apps. It streamlines API requests and database management, accelerating the development process.

Key Code Snippet for Modus Configuration

{
  "$schema": "https://schema.hypermode.com/modus.json",
  "endpoints": {
    "default": {
      "type": "graphql",
      "path": "/graphql",
      "auth": "bearer-token"
    }
  },
  "connections": {
    "openai": {
      "type": "http",
      "endpoint": "https://api.openai.com/v1/chat/completions",
      "headers": {
        "Authorization": "Bearer {{API_KEY}}"
      }
    },
    "db": {
      "type": "postgresql",
      "connString": "postgresql://{{USER}}:{{PASSWORD}}@{{HOST}}:{{PORT}}/{{DATABASE}}?sslmode=require"
    }
  }
}

Frontend Functionality

Frontend Repository

The frontend of MindMap AI is designed to provide a user-friendly interface that enhances the mind mapping experience. Key features include:

1. Mindmap Generation: Users can input topics or paste content, and the application generates mindmaps based on their queries.

2. PDF Upload: Users can upload PDF files, and the application extracts text to incorporate into mindmaps, enriching the content.

3. Interactive Mindmaps: The generated mindmaps are interactive, allowing users to explore and adjust their ideas dynamically.

4. Add Links Feature: The application allows users to include hyperlinks in their mind maps, providing additional resources and references. This feature is toggled via a switch, enhancing the interactivity of the mind maps.

5. Download Functionality: Users can download their mindmaps as SVG files, preserving interactivity and links.

Key Code Snippets 📱

Mindmap Generation: The component responsible for generating mindmaps captures user input and triggers the generation process:

const handleGenerateMindmap = useCallback(async () => {

  const combinedText = pdfText ? PDF Content: ${pdfText}\n\nUser Prompt: ${userPrompt} : userPrompt;

  if (!combinedText.trim()) return;

  const result = await fetchGraphQL(queries.GENERATE_MINDMAP, { userAsk: combinedText }, initialToken);

  if (result.data?.generateMindmap?.content) {

    setMindmapContent(result.data.generateMindmap.content);

  }

}, [initialToken, pdfText, userPrompt]);

PDF Upload: The application allows users to upload PDF files and extract text for mindmap generation:

const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {

  const file = event.target.files?.[0];

  if (file && file.type === "application/pdf") {

    const text = await extractTextFromPDF(file);

    setPdfText(text);

  }

};

Technologies Used⚙️

AssemblyScript: A TypeScript-like language that compiles to WebAssembly, providing performance benefits.
OpenAI API: Used for generating mindmap content based on user queries.
PostgreSQL: A powerful relational database for storing generated mindmaps.
Hypermode SDK: A framework that simplifies the development of AssemblyScript applications.
React: For building the user interface and managing state.
Next.js: For server-side rendering and routing.

MindMap AI - Unlock Your Creativity with Intelligent Mind Mapping!

Table of contents