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

> Discover the programming languages within learn-claude-code. Explore its Python agent logic, TypeScript Next.js interface, and supporting configuration files like JSON and YAML.

- Repository: [shareAI-Lab/learn-claude-code](https://github.com/shareAI-lab/learn-claude-code)
- Tags: getting-started
- Published: 2026-03-08

---

**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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/requirements.txt).

Key Python files include:

- [`agents/s01_agent_loop.py`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s01_agent_loop.py) – Entry point for the autonomous agent loop
- [`agents/s02_tool_use.py`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s02_tool_use.py) – Demonstrates external tool invocation patterns
- [`agents/s05_skill_loading.py`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s05_skill_loading.py) – Implements dynamic skill-loading architecture

The following example from [`agents/s01_agent_loop.py`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s01_agent_loop.py) illustrates a minimal self-contained agent that processes user input through a continuous loop:

```python

# 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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/src/types/agent-data.ts) and processes documentation through utility scripts like [`web/scripts/extract-content.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/scripts/extract-content.ts).

Critical TypeScript files include:

- [`web/src/types/agent-data.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/src/types/agent-data.ts) – Defines data contracts between backend and UI
- [`web/src/lib/utils.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/src/lib/utils.ts) – Helper utilities used across the web application
- [`web/scripts/extract-content.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/scripts/extract-content.ts) – Generates documentation data for static-site generation
- [`web/package.json`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/package.json) – Lists JavaScript and TypeScript dependencies for the Node.js ecosystem

The type definitions in [`web/src/types/agent-data.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/src/types/agent-data.ts) establish the shape of agent execution data rendered by React components:

```typescript
// 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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/scripts/extract-content.ts) demonstrates Node.js-based TypeScript interacting with the file system to feed the web application:

```typescript
// 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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/package.json) to declare Node.js dependencies and scripts, while **YAML** configures the continuous integration pipeline in [`.github/workflows/ci.yml`](https://github.com/shareAI-lab/learn-claude-code/blob/main/.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`](https://github.com/shareAI-lab/learn-claude-code/blob/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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s01_agent_loop.py)), tool use patterns ([`agents/s02_tool_use.py`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s02_tool_use.py)), and skill loading ([`agents/s05_skill_loading.py`](https://github.com/shareAI-lab/learn-claude-code/blob/main/agents/s05_skill_loading.py)).

- **TypeScript** drives the Next.js web interface, with type definitions in [`web/src/types/agent-data.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/src/types/agent-data.ts) and build utilities in [`web/scripts/extract-content.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/scripts/extract-content.ts).

- **JSON** and **YAML** handle dependency management and CI/CD configuration through [`web/package.json`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/package.json) and [`.github/workflows/ci.yml`](https://github.com/shareAI-lab/learn-claude-code/blob/main/.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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/package.json), with content extraction utilities like [`web/scripts/extract-content.ts`](https://github.com/shareAI-lab/learn-claude-code/blob/main/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`](https://github.com/shareAI-lab/learn-claude-code/blob/main/requirements.txt) file, while TypeScript and JavaScript packages are declared in [`web/package.json`](https://github.com/shareAI-lab/learn-claude-code/blob/main/web/package.json). The CI pipeline defined in [`.github/workflows/ci.yml`](https://github.com/shareAI-lab/learn-claude-code/blob/main/.github/workflows/ci.yml) validates both dependency sets during automated testing.