What is GitHub Copilot according to the lesson?

An AI extension that suggests and autocompletes code in the editor

A version control system that replaces git

A database server for applications

Which rule for working with AI does the lesson emphasize as the most important?

Always review the code generated by AI

Never read AI code, trust it completely

Write prompts as general as possible

Vibe coding with AI course · Module 10: TikTok Clone

AI Code Assistant - Cursor/Copilot Integration

1 min read

In this lesson3

Using AI in development.

GitHub Copilot

Install the Copilot extension in VS Code/Cursor.

Usage examples:

Function autocomplete:

// Type a comment and Copilot suggests code
// Function to validate email
function validateEmail
// Copilot will suggest the entire implementation!

Test generation:

// Generate unit tests for validateEmail function
// Copilot will generate the tests!

Cursor AI Chat

In Cursor you can:

Cmd+K: Inline editing
Cmd+L: Chat
@-mentions: file references

Example prompts:

"Add error handling to this API route"
"Refactor this component to use TypeScript"
"Explain what this regex does"
"Convert this to use Tailwind CSS"

Best Practices

Review AI code - always check what AI generated
Specific prompts - the more specific the prompt, the better the code
Iterate - improve the prompt if the result isn't ideal
Learn from AI - see how AI solves problems

See you soon!

Code for this lesson: App.jsx

// Duet Recorder
import { useState } from 'react';

export default function App() {
  const [layout, setLayout] = useState('side-by-side');
  const [isRecording, setIsRecording] = useState(false);

  return (
    <div className="h-screen bg-black flex flex-col">
      {/* Layout Selector */}
      <div className="bg-gray-900 p-3 flex gap-2">
        <button
          onClick={() => setLayout('side-by-side')}
          className={`px-4 py-2 rounded ${
            layout === 'side-by-side' ? 'bg-white text-black' : 'bg-gray-700 text-white'
          }`}
        >
          Side by Side
        </button>
        <button
          onClick={() => setLayout('top-bottom')}
          className={`px-4 py-2 rounded ${
            layout === 'top-bottom' ? 'bg-white text-black' : 'bg-gray-700 text-white'
          }`}
        >
          Top & Bottom
        </button>
      </div>

      {/* Video Preview */}
      <div className={`flex-1 flex ${layout === 'side-by-side' ? 'flex-row' : 'flex-col'}`}>
        {/* Original Video */}
        <div className="flex-1 relative bg-gradient-to-br from-blue-900 to-purple-900 flex items-center justify-center">
          <div className="text-6xl">◆</div>
          <div className="absolute top-4 left-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm">
            Original
          </div>
        </div>

        {/* User Video */}
        <div className={`flex-1 relative bg-gradient-to-br from-purple-900 to-pink-900 flex items-center justify-center ${
          layout === 'side-by-side' ? 'border-l-2' : 'border-t-2'
        } border-white`}>
          <div className="text-6xl">◆</div>
          <div className="absolute top-4 right-4 bg-black/50 px-3 py-2 rounded-full text-white text-sm">
            You
          </div>

          {isRecording && (
            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
              <div className="w-16 h-16 border-4 border-red-500 rounded-full animate-pulse"></div>
            </div>
          )}
        </div>
      </div>

      {/* Controls */}
      <div className="bg-black p-6">
        <div className="flex justify-center">
          <button
            onClick={() => setIsRecording(!isRecording)}
            className={`w-20 h-20 rounded-full border-4 border-white flex items-center justify-center ${
              isRecording ? 'bg-red-500' : 'bg-transparent'
            }`}
          >
            {isRecording && <div className="w-8 h-8 bg-white rounded"></div>}
          </button>
        </div>
      </div>
    </div>
  );
}

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

1. What is GitHub Copilot according to the lesson?
2. Which rule for working with AI does the lesson emphasize as the most important?

Hands-on tasks in the game

Vertical ordering
Order the Cursor capabilities as listed in the lesson (top to bottom):