What Programming Languages Does Pi-Web Use? A Complete Technical Breakdown

Pi-Web is a TypeScript-centric Next.js application that uses TypeScript for core logic and React components, JavaScript (ESM) for testing, and CSS with Tailwind for styling.

The agegr/pi-web repository is a modern web application built on the Next.js framework. Understanding what programming languages Pi-Web uses reveals a carefully chosen stack optimized for type safety, developer experience, and performance. The codebase demonstrates a clear separation between strongly typed production code and lightweight scripting for validation.

TypeScript: The Core Language

Pi-Web is fundamentally a TypeScript application. Every production file—from React components to server configuration—uses TypeScript (.ts) or TSX (.tsx) extensions to enforce static typing and leverage modern ES2022 features.

React Components in TSX

The user interface layer relies on TSX files that combine React with TypeScript interfaces. In components/MessageView.tsx, the code defines strict props interfaces to ensure component contracts remain valid.

// 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 pattern appears throughout the components/ directory, including components/AppShell.tsx, providing compile-time guarantees for UI consistency.

Server and Configuration Logic

Beyond the frontend, TypeScript powers the entire application infrastructure. The next.config.ts file contains custom Next.js server configuration written in TypeScript, while tsconfig.json controls compilation strictness and module resolution. Business logic in lib/*.ts files—including RPC handling and file access utilities—also uses TypeScript to maintain type safety across the full stack.

JavaScript: Lightweight Testing and Scripts

While TypeScript dominates production code, Pi-Web uses JavaScript (specifically ES Modules with .mjs extensions) for test suites and utility scripts. This approach keeps test execution fast and simple without requiring compilation steps.

The test suite in lib/rpc-manager.test.mjs demonstrates this pattern:

// 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();
});

Using ESM (.mjs) ensures compatibility with modern Node.js tooling while avoiding the overhead of TypeScript compilation during test runs.

CSS and Tailwind: Styling Infrastructure

Styling in Pi-Web utilizes CSS processed through Tailwind CSS. While the configuration is TypeScript-based, the runtime styling relies on CSS variables and utility classes defined in standard CSS files.

The Tailwind configuration in tailwind.config.ts extends the 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;

Global styles and CSS variables reside in app/globals.css, providing the design foundation that Tailwind utilities reference throughout the TypeScript components.

JSON: Configuration and Dependencies

Though not a programming language, JSON plays a critical supporting role in Pi-Web. The package.json file declares all dependencies (React, Next.js, TypeScript) and build scripts, while tsconfig.json governs the TypeScript compiler's behavior. These files enable the tooling ecosystem that makes the TypeScript-centric development workflow possible.

Summary

• TypeScript (.ts, .tsx) powers all production code, including React components, server logic, and configuration files in agegr/pi-web.
• JavaScript (.mjs) handles testing and lightweight scripting using ES Modules for fast execution without compilation.
• CSS provides styling through Tailwind CSS integration, with global variables defined in app/globals.css.
• JSON manages dependencies and compiler settings essential to the project infrastructure.

Frequently Asked Questions

Is Pi-web built entirely with TypeScript?

No, while Pi-Web is TypeScript-centric for production code, it strategically uses JavaScript (ESM) for test files to avoid compilation overhead. The core application logic in lib/*.ts and components in components/*.tsx are strictly TypeScript, but tests in lib/rpc-manager.test.mjs use JavaScript for speed and simplicity.

Why does Pi-web use JavaScript for tests instead of TypeScript?

The project uses JavaScript with ES Modules (.mjs) for testing to eliminate the TypeScript compilation step during test execution. This results in faster test runs while still allowing the tests to import and validate TypeScript modules from the main codebase, as seen in the bun:test implementation.

What CSS framework does Pi-web use?

Pi-Web uses Tailwind CSS configured via TypeScript in tailwind.config.ts. The setup leverages CSS variables defined in app/globals.css for theming, allowing the TypeScript components to apply utility classes that reference these variables for consistent styling across the application.

Does Pi-web use any other programming languages?

No, Pi-Web relies exclusively on TypeScript, JavaScript, and CSS for its implementation. There are no backend languages like Python or Go in the repository; the "backend" logic runs within the Next.js framework using TypeScript server components and API routes, all contained within the JavaScript/TypeScript ecosystem.

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