Building a Proactive AI Assistant with TypeScript

Tutorial
Intermediate
⏱ 45 min read
© Gate of AI 2026-05-13

Learn how to build a proactive AI assistant using TypeScript, enhancing developer productivity with intelligent code suggestions and interactions.

Prerequisites

Node.js version 16 or higher
An OpenAI API key
Intermediate knowledge of TypeScript and JavaScript

What We’re Building

In this tutorial, we will build a proactive AI assistant integrated into a development environment using TypeScript. This assistant will provide intelligent code suggestions, help with debugging, and offer proactive assistance based on the developer’s activity. The AI will be capable of understanding the context of the current code and suggest improvements or corrections in real-time.

The finished project will be a TypeScript-based application that listens for changes in the code editor, analyzes the code, and uses AI to provide helpful suggestions and corrections. This will significantly enhance developer productivity by reducing the time spent on finding errors and improving code quality.

Setup and Installation

To begin, we need to set up a TypeScript environment and install necessary packages. We will be using Node.js for our server-side logic and OpenAI’s API for AI functionalities.

npm init -y
npm install typescript ts-node @types/node express openai dotenv

Next, we need to configure our environment variables to securely store our OpenAI API key. Create a new file named .env in the root directory of your project.

OPENAI_API_KEY=your-openai-api-key-here

Step 1: Setting Up the Server

In this step, we will set up a basic Express server to handle our AI requests. This server will receive code snippets from the client, process them, and return AI-generated suggestions.

import express from 'express';
import OpenAI from 'openai';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
const port = 3000;

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.use(express.json());

app.post('/suggest', async (req, res) => {
  try {
    const { code } = req.body;
    const response = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        { role: "system", content: "You are a helpful coding assistant." },
        { role: "user", content: `Improve the following TypeScript code:\n\n${code}` }
      ],
      max_tokens: 150,
    });

    res.json({ suggestion: response.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

This code sets up an Express server that listens on port 3000. It includes a POST endpoint /suggest which takes TypeScript code as input and returns AI-generated suggestions. The OpenAI API is used to create these suggestions.

Step 2: Integrating AI Suggestions in the Editor

In this step, we will integrate our server with a code editor. We will use a simple HTML and JavaScript front-end to send code to our server and display the AI’s suggestions.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Code Assistant</title>
</head>
<body>
    <textarea id="code-editor" rows="10" cols="50"></textarea>
    <button id="get-suggestion">Get Suggestion</button>
    <pre id="suggestion-output"></pre>

    <script>
        document.getElementById('get-suggestion').addEventListener('click', async () => {
            const code = document.getElementById('code-editor').value;
            const response = await fetch('http://localhost:3000/suggest', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ code })
            });

            const data = await response.json();
            document.getElementById('suggestion-output').textContent = data.suggestion;
        });
    </script>
</body>
</html>

This HTML file creates a simple interface with a text area for code input and a button to fetch suggestions. When the button is clicked, it sends the code to the server and displays the returned suggestion in a pre element.

Step 3: Enhancing AI Interactions

Now, let’s enhance our AI assistant by adding more context-aware interactions. We can modify the prompt sent to the AI to include details about the coding style or specific libraries being used.

app.post('/suggest', async (req, res) => {
  try {
    const { code, context } = req.body;
    
    const response = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        { role: "system", content: "You are a helpful coding assistant." },
        { role: "user", content: `Consider the following TypeScript code with the context: "${context}". Improve and suggest corrections:\n\n${code}` }
      ],
      max_tokens: 150,
    });

    res.json({ suggestion: response.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

By adding a context field to the request body, we can tailor the AI’s suggestions to be more relevant to the developer’s specific needs or project requirements.

⚠️ Common Mistake: Ensure that the OpenAI API key is correctly set in your environment variables, as a missing or incorrect key will cause authentication errors.

Testing Your Implementation

To verify that everything is working correctly, start your server and open the HTML file in a browser. Enter some TypeScript code into the text area and click the “Get Suggestion” button. You should see an AI-generated suggestion appear below.

node ./server.js

Expected output should display AI suggestions based on the code provided. If there are errors, ensure the server is running and check the console for any issues.

What to Build Next

Integrate the AI assistant with a popular code editor like VSCode for seamless interaction.
Add a feature to automatically apply AI suggestions to the code editor.
Extend the AI’s capabilities to include real-time error detection and debugging tips.

Trending Searches