What Programming Languages Are Used in pi-web? A Complete Technical Breakdown

Pi-web is a TypeScript-centric Next.js application that uses TypeScript/TSX for core code, JavaScript (ESM) for testing, and CSS/Tailwind for styling.

The pi-web repository is a modern web application built on the Next.js React framework. Understanding its language stack helps developers contribute effectively or evaluate the project for their own use. This guide examines each programming language used in pi-web, with specific file references from the agegr/pi-web source code.

Primary Language: TypeScript

TypeScript dominates the pi-web codebase, appearing in .ts and .tsx files throughout the project.

Why TypeScript Was Chosen

• Static typing catches errors at compile time
• Modern ES2022 features with backward compatibility
• Seamless Next.js integration with first-class framework support

Key TypeScript Files in pi-web

File	Purpose
tsconfig.json	Compiler configuration and strictness settings
next.config.ts	Custom Next.js server configuration
tailwind.config.ts	Tailwind CSS setup with CSS variable theming
components/AppShell.tsx	Core React component structure
lib/*.ts	Business logic, RPC handling, file utilities

The tsconfig.json file controls module resolution and type checking across the entire project. For example, next.config.ts extends this configuration to customize server behavior while maintaining full type safety.

TypeScript Component Example

// components/MessageView.tsx
import React from 'react';
import { Message } from '@/lib/pi-types';

interface Props {
  message: Message;
}

export const MessageView: React.FC<Props> = ({ message }) => (
  <div className="p-2 rounded-md bg-user-bg">
    <p>{message.content}</p>
  </div>
);

This component demonstrates strict prop typing via the Props interface and integration with Tailwind utility classes.

Secondary Language: JavaScript (ESM)

JavaScript appears selectively in .js and .mjs files, primarily for testing and utility scripts.

JavaScript Usage Pattern

The project uses ESM format (.mjs) for test files to keep them lightweight and fast-running in Node environments. This avoids the overhead of TypeScript compilation during test execution.

JavaScript Test Example

// lib/rpc-manager.test.mjs
import { test, expect } from 'bun:test';
import { startRpcSession } from './rpc-manager.js';

test('creates a new AgentSession', async () => {
  const session = await startRpcSession({ cwd: '/tmp' });
  expect(session).toBeDefined();
  expect(session.id).toBeTruthy();
});

This test file imports from bun:test and validates the startRpcSession function from the TypeScript-based rpc-manager.js module. The .mjs extension ensures Node treats it as ES modules without additional configuration.

Styling: CSS with Tailwind Configuration

While not a programming language, CSS plays a critical role in pi-web's presentation layer.

Tailwind + CSS Variables Architecture

Technology	File	Role
Tailwind config (TypeScript)	tailwind.config.ts	Design system definition
CSS variables	app/globals.css	Theme tokens (colors, spacing)
Utility classes	Inline in TSX	Component-specific styling

The tailwind.config.ts file extends Tailwind's theme with custom CSS variables:

// tailwind.config.ts
import type { Config } from 'tailwindcss';
export default {
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        bg: 'var(--bg)',
        accent: 'var(--accent)',
      },
    },
  },
  plugins: [],
} satisfies Config;

This TypeScript configuration generates CSS utility classes that reference variables defined in app/globals.css, enabling dynamic theming without JavaScript runtime overhead.

Configuration: JSON

JSON files support tooling and dependency management without executing logic:

• package.json — Dependency declarations (React, Next.js, TypeScript) and npm scripts
• tsconfig.json — TypeScript compiler options
• Lockfiles and metadata

Language Distribution Summary

Language	Extension	Approximate Usage	Location Pattern
TypeScript	.ts, .tsx	~90% production code	components/, lib/, app/
JavaScript	.mjs	~5% test code	*.test.mjs
CSS	.css	~4% styling	app/globals.css
JSON	.json	~1% configuration	Root config files

Summary

• TypeScript/TSX powers the entire application layer in pi-web, from React components to server configuration
• JavaScript (ESM) handles testing with minimal overhead via .mjs files
• CSS with Tailwind provides type-safe, variable-driven styling configured in TypeScript
• JSON manages package dependencies and compiler settings

This stack delivers a type-safe, component-driven frontend with typed backend logic while keeping test tooling lightweight and fast.

Frequently Asked Questions

Is pi-web a pure TypeScript project?

No. While approximately 90% of the codebase uses TypeScript, pi-web deliberately uses JavaScript (ESM) for test files. The lib/rpc-manager.test.mjs pattern keeps tests fast by avoiding TypeScript compilation overhead during test runs.

Why does pi-web use .mjs instead of .ts for tests?

The .mjs extension forces Node.js to treat files as ES modules without transpilation. This reduces test startup time and eliminates build-step dependencies for the testing workflow. Tests import compiled JavaScript from the TypeScript source.

Can I contribute to pi-web without knowing TypeScript?

Basic JavaScript knowledge suffices for small contributions, but TypeScript proficiency is essential for feature development. The tsconfig.json enforces strict type checking, so untyped code will fail compilation.

How does Tailwind configuration work in a TypeScript project?

Tailwind supports TypeScript configuration natively. In tailwind.config.ts, the satisfies Config syntax provides type checking against Tailwind's schema while preserving the config object for runtime use.

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