🧠 CntxtJS: Minify Your Codebase Context for LLMs

🤯 75% Token Reduction In Context Window Usage!

Why CntxtJS?

• Boosts precision: Maps relationships and dependencies for clear analysis.
• Eliminates noise: Focuses LLMs on key code insights.
• Supports analysis: Reveals architecture for smarter LLM insights.
• Speeds solutions: Helps LLMs trace workflows and logic faster.
• Improves recommendations: Gives LLMs detailed metadata for better suggestions.
• Optimized prompts: Provides structured context for better LLM responses.
• Streamlines collaboration: Helps LLMs explain and document code easily.

Supercharge your LLM's understanding of JavaScript/TypeScript codebases. CntxtJS generates comprehensive knowledge graphs that help LLMs navigate and comprehend your code structure with ease.

It's like handing your LLM the cliff notes instead of a novel.

Active Enhancement Notice

• CntxtJS is actively being enhanced at high velocity with improvements every day. Thank you for your contributions! 🙌

✨ Features

• 🔍 Deep analysis of JavaScript/TypeScript codebases
• 📊 Generates detailed knowledge graphs of:
  • File relationships and dependencies
  • Class hierarchies and methods
  • Function signatures and parameters
  • React components and hooks
  • Import/export relationships
  • Package dependencies
• 🎯 Specially designed for LLM context windows
• 📈 Built-in visualization capabilities of your projects knowledge graph
• 🚀 Support for a large number of modern JS frameworks and patterns

🚀 Quick Start

# Clone the repository
git clone https://github.com/brandondocusen/CntxtJS.git

# Navigate to the directory
cd CntxtJS

# Install required packages
pip install networkx matplotlib

# Run the analyzer
python CntxtJS.py

When prompted, enter the path to your JavaScript/TypeScript codebase. The tool will generate a code_knowledge_graph.json file and offer to visualize the relationships.

💡 Example Usage with LLMs

The LLM can now provide detailed insights about your codebase's implementations, understanding the relationships between components, functions, and files! After generating your knowledge graph, you can upload it as a single file to give LLMs deep context about your codebase. Here's a powerful example prompt:

Based on the knowledge graph, explain how the authentication flow works in this application, 
including which components and functions are involved in the process.

Based on the knowledge graph, map out the core user experience flow - starting from the landing page through to the core-experience components and their interactions.

Using the knowledge graph, analyze the state management approach in this application. Which stores exist, what do they manage, and how do they interact with components?

From the knowledge graph data, break down this application's UI component hierarchy, focusing on reusable elements and their implementation patterns.

According to the knowledge graph, identify all error handling patterns in this codebase - where are errors caught, how are they processed, and how are they displayed to users?

Based on the knowledge graph's dependency analysis, outline the key third-party libraries this project relies on and their primary use cases in the application.

Using the knowledge graph's function analysis, explain how the application handles data fetching and caching patterns across different components.

📊 Output Format

The tool generates two main outputs:

1. A JSON knowledge graph (js_code_knowledge_graph.json)
2. Optional visualization using matplotlib

The knowledge graph includes:

• Detailed metadata about your codebase
• Node and edge relationships
• Function parameters and return types
• Component hierarchies
• Import/export mappings

🤝 Contributing

We love contributions! Whether it's:

• 🐛 Bug fixes
• ✨ New features
• 📚 Documentation improvements
• 🎨 Visualization enhancements

Just fork, make your changes, and submit a PR. Check out our contribution guidelines for more details.

🎯 Future Goals

• Deeper support for additional frameworks (Vue, Svelte)
• Enhanced TypeScript type analysis
• Interactive web-based visualizations
• Custom graph export formats
• Integration with popular IDEs

📝 License

MIT License - feel free to use this in your own projects!

🌟 Show Your Support

If you find CntxtJS helpful, give it a star! ⭐️

---

Made with ❤️ for the LLM and JavaScript communities