GitHub Copilot instructions for building Telegram Web Apps (Mini Apps) using Vite, React, and TypeScript with Telegram WebApp API integration
Provides context-aware GitHub Copilot suggestions for building Telegram Web Apps (Mini Apps) using Vite, React, and TypeScript with proper Telegram WebApp API integration.
This skill configures GitHub Copilot to understand your Telegram Mini App project structure and provide relevant code suggestions for:
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
When a developer types code related to Telegram functionality, Copilot will suggest:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/telegram-mini-app-with-vite-react-typescript/raw