code_analysis Svelte Themes

Code_analysis

Analyze code and send it to LLM, track requests with a svelte interface

Code Analysis Tool

An intelligent code analysis tool that uses LLMs to explain and document your codebase. It analyzes function dependencies, builds a call tree, and provides detailed explanations using AI.

Features

  • šŸ” Function Discovery: Automatically finds and extracts functions from TypeScript, JavaScript, and Python files
  • 🌲 Dependency Tree: Builds and visualizes function call relationships
  • šŸ¤– LLM Analysis: Uses AI models to provide detailed code explanations
  • šŸ“ Markdown Output: Generates comprehensive documentation with code snippets
  • šŸ“Š History Viewer: Web UI to browse and review all LLM analyses
  • ⚔ Multi-Model Support: Query multiple LLM models simultaneously via OpenRouter

Setup

1. Install Dependencies

bun install

2. Configure API Key

Set your OpenRouter API key as an environment variable:

export OPENROUTER_API_KEY=your_api_key_here

3. Install UI Dependencies (Optional)

If you want to use the web viewer:

cd ui
bun install

Usage

Analyze a Function

Run the main script with a function name to analyze:

bun run main.ts <functionName>

Example:

bun run main.ts analyzeCode

This will:

  1. Search for the function in your codebase
  2. Build a recursive tree of all subfunctions it calls
  3. Display the dependency tree
  4. Ask if you want LLM analysis
  5. Generate a markdown file with all related functions
  6. Use LLM to explain the code
  7. Save results as markdown and JSON

View Analysis History

To view past analyses in the web UI:

# Step 1: Aggregate history files
bun run aggregate-history.ts

# Step 2: Start the web viewer
cd ui
bun run dev

Then open your browser to http://localhost:5173 to browse all your code analyses.

Project Structure

code_analysis/
ā”œā”€ā”€ main.ts                     # Main analysis script
ā”œā”€ā”€ utils.ts                    # Code parsing and analysis functions
ā”œā”€ā”€ llmcalls.ts                 # LLM API integration
ā”œā”€ā”€ aggregate-history.ts        # History aggregation utility
ā”œā”€ā”€ ui/                         # Web viewer (Svelte)
│   ā”œā”€ā”€ src/
│   │   ā”œā”€ā”€ routes/
│   │   │   └── +page.svelte   # Main viewer page
│   │   └── lib/
│   │       └── components/    # UI components
│   ā”œā”€ā”€ static/
│   │   └── history/           # JSON history files
│   ā”œā”€ā”€ package.json
│   └── vite.config.ts
└── package.json

How It Works

  1. Function Extraction: The tool scans your codebase for function definitions in .ts, .tsx, .js, .jsx, and .py files
  2. Dependency Analysis: It identifies which functions call which other functions
  3. Tree Building: Creates a complete call tree showing all relationships
  4. LLM Query: Sends the code to LLM models for detailed explanation
  5. Result Storage: Saves both markdown documentation and JSON metadata
  6. History Tracking: All LLM responses are logged with metrics (tokens, speed, etc.)

Configuration

The tool uses OpenRouter to access various LLM models. Default models are configured in main.ts:

const models = ["deepseek/deepseek-chat-v3.1:free", "z-ai/glm-4.5-air:free"];
const temperature = 1.0;

You can modify these to use different models available on OpenRouter.

Web Viewer

The web viewer provides:

  • List of all code analysis requests
  • Full markdown rendering of LLM responses
  • Metrics for each request (tokens, speed, temperature)
  • Timestamp and model information
  • Clean, responsive UI

Development

To build the web viewer for production:

cd ui
bun run build

The built files will be in ui/.svelte-kit/ and can be deployed to any static hosting service.

Top categories

Loading Svelte Themes