What Programming Languages Power the learn-claude-code Repository?

The learn-claude-code repository is a multi-language codebase that combines Python for autonomous agent logic with TypeScript for its Next.js web interface, supported by JSON, YAML, and Markdown configuration files.

The learn-claude-code project from shareAI-lab demonstrates Claude Code usage through a dual-architecture design. It integrates a self-contained Python backend capable of running autonomous agents directly from the command line with a React-based TypeScript frontend that visualizes agent execution flows in real time.

Python: The Autonomous Agent Core

Python serves as the primary executable language for the backend, implementing the autonomous agent framework, skill loading mechanisms, and CLI utilities. The core logic resides in the agents/ directory, where each script is designed to run independently using dependencies listed in requirements.txt.

Key Python files include:

• agents/s01_agent_loop.py – Entry point for the autonomous agent loop
• agents/s02_tool_use.py – Demonstrates external tool invocation patterns
• agents/s05_skill_loading.py – Implements dynamic skill-loading architecture

The following example from agents/s01_agent_loop.py illustrates a minimal self-contained agent that processes user input through a continuous loop:

# agents/s01_agent_loop.py

# The Agent Loop – entry point for a self‑contained Claude‑based agent

import json
from pathlib import Path

def main():
    # Load the agent's configuration

    cfg = json.loads(Path("config.json").read_text())
    # Simple loop that processes a single user request

    while True:
        user_input = input(">>> ")
        if user_input.lower() in {"exit", "quit"}:
            break
        # Here the Claude model would be invoked (omitted for brevity)

        print(f"Agent response to: {user_input}")

if __name__ == "__main__":
    main()

This implementation uses only standard library modules (json, pathlib) and executes directly via python agents/s01_agent_loop.py, making it portable across environments without complex setup.

TypeScript: The Interactive Web Interface

TypeScript powers the frontend visualization layer built on Next.js, providing static typing for React components that render agent execution data. The web interface consumes data structures defined in web/src/types/agent-data.ts and processes documentation through utility scripts like web/scripts/extract-content.ts.

Critical TypeScript files include:

• web/src/types/agent-data.ts – Defines data contracts between backend and UI
• web/src/lib/utils.ts – Helper utilities used across the web application
• web/scripts/extract-content.ts – Generates documentation data for static-site generation
• web/package.json – Lists JavaScript and TypeScript dependencies for the Node.js ecosystem

The type definitions in web/src/types/agent-data.ts establish the shape of agent execution data rendered by React components:

// web/src/types/agent-data.ts
export interface AgentStep {
  id: string;
  title: string;
  status: "pending" | "running" | "completed" | "failed";
  output?: string;
}

/**
 * Full execution flow for a single agent run.
 * Rendered by the React components in the UI.
 */
export interface AgentExecution {
  agentName: string;
  steps: AgentStep[];
  startedAt: string;
  finishedAt?: string;
}

Additionally, the content extraction utility in web/scripts/extract-content.ts demonstrates Node.js-based TypeScript interacting with the file system to feed the web application:

// web/scripts/extract-content.ts
import fs from "fs";
import path from "path";

const docsDir = path.resolve(__dirname, "..", "src", "docs");

/**
 * Reads all Markdown files under `src/docs` and returns a map of
 * file name → raw content. Used to power the docs sidebar.
 */
export function extractDocs(): Record<string, string> {
  const result: Record<string, string> = {};
  const files = fs.readdirSync(docsDir);
  for (const file of files) {
    if (file.endsWith(".md")) {
      const content = fs.readFileSync(path.join(docsDir, file), "utf‑8");
      result[file] = content;
    }
  }
  return result;
}

Configuration and Documentation Languages

While not executable programming languages, JSON, YAML, and Markdown form essential infrastructure components within the repository.

JSON and YAML

JSON manifests in web/package.json to declare Node.js dependencies and scripts, while YAML configures the continuous integration pipeline in .github/workflows/ci.yml. These formats manage dependency resolution, build commands, and automated testing workflows for both the Python and TypeScript codebases.

Markdown

Markdown files provide the repository's knowledge base, including the main README.md and tutorial documentation stored in src/docs/. The TypeScript frontend dynamically consumes these Markdown files to render documentation sidebars and tutorial content, bridging static documentation with the interactive UI.

Summary

• Python implements the autonomous agent core, including the main loop (agents/s01_agent_loop.py), tool use patterns (agents/s02_tool_use.py), and skill loading (agents/s05_skill_loading.py).

• TypeScript drives the Next.js web interface, with type definitions in web/src/types/agent-data.ts and build utilities in web/scripts/extract-content.ts.

• JSON and YAML handle dependency management and CI/CD configuration through web/package.json and .github/workflows/ci.yml.

• Markdown stores documentation and tutorials, parsed by TypeScript utilities to populate the web interface.

Frequently Asked Questions

Is learn-claude-code primarily a Python or TypeScript project?

The repository maintains equal emphasis on both languages. Python handles the executable autonomous agent logic that can run independently via CLI, while TypeScript manages the optional web visualization layer. Users can execute Python agents directly without building the TypeScript frontend.

Can I run the Python agents without installing Node.js or TypeScript dependencies?

Yes. The Python agents in the agents/ directory are self-contained scripts that require only Python 3.x and dependencies listed in requirements.txt. The TypeScript web interface is optional and only needed if you want to visualize agent execution flows in a browser.

What build system does the TypeScript frontend use?

The web interface uses Next.js compiled from TypeScript sources. The build process relies on Node.js and npm/yarn as specified in web/package.json, with content extraction utilities like web/scripts/extract-content.ts running during static-site generation to process Markdown documentation.

Where are the programming language dependencies defined?

Python dependencies are enumerated in the root-level requirements.txt file, while TypeScript and JavaScript packages are declared in web/package.json. The CI pipeline defined in .github/workflows/ci.yml validates both dependency sets during automated testing.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}