Telegram Mini App with Vite React TypeScript

Provides context-aware GitHub Copilot suggestions for building Telegram Web Apps (Mini Apps) using Vite, React, and TypeScript with proper Telegram WebApp API integration.

What This Skill Does

This skill configures GitHub Copilot to understand your Telegram Mini App project structure and provide relevant code suggestions for:

Instructions for the AI Agent

When working on this project, follow these guidelines:

1. **Project Stack Recognition**

- This is a Vite + React + TypeScript project

- The application is a Telegram Web App (Mini App)

- All Telegram-specific functionality uses the Telegram WebApp API

- Assume `window.Telegram.WebApp` is available globally

2. **Telegram WebApp API Integration**

- Always use the official Telegram WebApp API for bot communication

- Access user information via `window.Telegram.WebApp.initDataUnsafe`

- Send data to the bot using `window.Telegram.WebApp.sendData()`

- Include proper TypeScript typings for Telegram objects

3. **Code Examples to Provide**

**Getting User Information:**

```typescript

const tg = window.Telegram.WebApp;

const user = tg.initDataUnsafe.user;

if (user) {

console.log('User ID:', user.id);

console.log('First Name:', user.first_name);

console.log('Username:', user.username);

}

```

**Sending Data to Bot:**

```typescript

const tg = window.Telegram.WebApp;

const sendDataToBot = (data: any) => {

tg.sendData(JSON.stringify(data));

};

// Example usage

sendDataToBot({ action: 'submit', value: 42 });

```

**TypeScript Declarations:**

```typescript

declare global {

interface Window {

Telegram: {

WebApp: {

initDataUnsafe: {

user?: {

id: number;

first_name: string;

last_name?: string;

username?: string;

language_code?: string;

};

};

sendData: (data: string) => void;

ready: () => void;

close: () => void;

};

};

}

}

```

4. **Component Patterns**

- Suggest React hooks for Telegram WebApp initialization

- Provide examples of `useEffect` for WebApp.ready() calls

- Include error handling for missing Telegram context

- Show proper cleanup patterns for Mini App lifecycle

5. **Best Practices**

- Always call `Telegram.WebApp.ready()` when the app mounts

- Handle cases where the app is opened outside Telegram

- Validate `initDataUnsafe` data on the backend

- Use environment variables for bot tokens and API endpoints

- Implement proper loading states during Telegram data initialization

6. **Vite Configuration Considerations**

- Suggest proper base path configuration for Telegram hosting

- Include HTTPS requirements for production Mini Apps

- Provide build optimization tips for faster Mini App loading

Example Usage

When a developer types code related to Telegram functionality, Copilot will suggest:

Important Notes