How I Built a Teen Slang Translator with GitHub Copilot and Claude 3.7 Sonnet

Andrea Liliana Griffiths - Feb 25 - - Dev Community

While everyone else is building revolutionary AI systems to solve humanity's greatest challenges, I decided the real problem worth solving was understanding why my teenage son keeps telling me my jokes are "mid." Enter my masterpiece: a slang translator built with the help of GitHub Copilot and Claude 3.7 Sonnet.

The Inspiration

Communication with Gen Z has become increasingly complex. One day you're having a normal conversation, and the next they're telling you something is "bussin fr fr no cap" and you're left wondering if they're having a stroke or insulting your cooking.

Technical Overview

The solution? A simple Node.js application that leverages AI to translate between plain English and current teen slang. Here's how I built it in just a few hours with GitHub Copilot + Claude 3.7 Sonnet:

Stack

  • Node.js
  • GitHub Models
  • dotenv for environment management
  • GitHub Copilot + Claude 3.7 for pair programming

Implementation Steps

  1. Project Setup: Created a basic Node.js project with npm.
  2. Dependencies: Added GitHub Models integration, dotenv for environment variables.
  3. Environment: Set up a .env file to store API keys and endpoints.
  4. Core Logic: Built a translation function using AI models.
  5. CLI Interface: Added a simple command-line interface for easy testing.

Code Walkthrough

The heart of the application is surprisingly simple. I've included the full code below, which shows how straightforward it is to build this with GitHub's models:

import OpenAI from "openai";
import { fileURLToPath } from "url";
import dotenv from "dotenv";

// Load environment variables from .env file
dotenv.config();

const token = process.env["GITHUB_TOKEN"];
const endpoint = "https://models.inference.ai.azure.com";
const modelName = "o3-mini";

/**
 * Translates text between plain English and kid slang
 * @param {string} text - Text to translate
 * @param {boolean} toSlang - If true, translates from plain to slang; otherwise slang to plain
 * @returns {Promise<string>} - Translated text
 */
export async function translateWithAI(text, toSlang = true) {
  try {
    const client = new OpenAI({ baseURL: endpoint, apiKey: token });

    const direction = toSlang ? 
      "Translate this plain English to modern kid slang/Gen Z language" : 
      "Translate this kid slang/Gen Z language to plain English";

    const response = await client.chat.completions.create({
      messages: [
        { role: "developer", content: "You are a translator between plain English and modern kid slang/Gen Z language." },
        { role: "user", content: direction + ": " + text }
      ],
      model: modelName
    });

    return response.choices[0].message.content;
  } catch (error) {
    console.error("Translation error:", error);
    return `Error translating: ${error.message}`;
  }
}

// Command-line interface
export async function main() {
  const textToTranslate = process.argv[2] || "This is really cool and I am very excited about it.";
  const toSlang = process.argv[3] !== "false"; // Default to translating to slang

  console.log(`Original: ${textToTranslate}`);

  try {
    const result = await translateWithAI(textToTranslate, toSlang);
    console.log(`Translated (${toSlang ? 'to slang' : 'to plain'}): ${result}`);
  } catch (error) {
    console.error("Error:", error);
    console.log("Make sure your GitHub token is set correctly as an environment variable");
  }
}

// Run if this file is executed directly
if (import.meta.url === `file://${process.argv[1]}`) {
  main().catch((err) => {
    console.error("The application encountered an error:", err);
  });
}
Enter fullscreen mode Exit fullscreen mode

How GitHub Copilot + Claude 3.7 Sonnet Helped

This is where the real magic happened. Having early access to GitHub Copilot with Claude 3.7 Sonnet integration was a game-changer for building this project:

  1. Prompt Engineering: Claude helped craft the perfect system prompt to get authentic-sounding slang without going overboard.

  2. Error Handling: As I started typing basic error handling, Claude suggested comprehensive error checking that I wouldn't have thought to include.

  3. Documentation: The JSDoc comments were mostly written by Copilot after seeing my coding patterns.

  4. Edge Cases: Claude suggested handling different translation directions and maintaining original meaning.

What would have taken me a day of researching current slang terms and API documentation took only a couple hours with AI assistance.

Challenges

The biggest challenge was tuning the prompts to get authentic-sounding slang rather than exaggerated stereotypical "how do you do, fellow kids" language. Early versions had the AI adding "yeet" to literally every sentence. Not bussin, fr fr.

Results

The final product works shockingly well. Feed it a boring business sentence like "GitHub Copilot and Claude 3.7 are amazing together, wow what a time to be alive" and get back "Yo, GitHub Copilot and Claude 3.7 are straight fire together—no cap! We're living in such lit times, fr!"

What's Next?

I'm considering expanding this into a proper web app or maybe a chat bot. Or maybe I'll use my AI access for something actually useful... but where's the fun in that?


Have you built something completely unnecessary but fun with GitHub Copilot? Let me know in the comments!

Note: Claude 3.7 Sonnet is now available to all customers on GitHub Copilot Pro, Business, and Enterprise. You can access it via the model selector in VS Code and on GitHub, with support for VS and JetBrains IDE coming soon.

. . . . . . . . . . . . . . . . . . . . . .