AI Hakeem Assistant - VS Code Extension

An agentic coding assistant extension for VS Code, powered by a C# backend.

Architecture

The extension uses stdio JSON-RPC for communication with the C# backend:

1. VS Code Extension (TypeScript/Node.js) – Provides the UI (webview chat panel)
2. C# Host Process – Console app that wraps your backend DLL and speaks JSON-RPC over stdin/stdout
3. Your Backend DLL – The core AI/agentic logic

Quick Start

1. Set Up Node Dependencies

cd d:\MyFiles\Projects\alhakeem-vs-code-extension
npm install

2. Build the Extension

npm run build

This compiles TypeScript to JavaScript in dist/extension.js.

3. Set Up the C# Host

The C# host template is in csharp-host/:

cd csharp-host
dotnet new console -f net8.0 -n AlhakeemHost --force

Then update csharp-host/Program.cs to integrate your backend DLL:

// In Program.cs, HandleChat method:
var backendService = new YourBackendService();
var response = await backendService.ProcessMessageAsync(userMessage);
return new { reply = response.text };

4. Build the C# Host

cd csharp-host
dotnet publish -c Release

The executable will be in csharp-host/bin/Release/net8.0/publish/.

5. Configure the Extension

Open VS Code settings and configure:

{
  "alhakeem.useStdio": true,
  "alhakeem.backendPath": "D:\\path\\to\\csharp-host\\bin\\Release\\net8.0\\publish\\AlhakeemHost.exe"
}

6. Run the Extension

In VS Code (Extension Development Host):

1. Open this folder in VS Code
2. Press Ctrl+Shift+D to open the debug panel
3. Click "Run Extension"

The extension will launch in a new VS Code window. The chat panel should appear on the right side.

Project Structure

alhakeem-vs-code-extension/
├── src/
│   ├── extension.ts          # Main extension entry point
│   ├── backend/
│   │   └── connection.ts      # JSON-RPC stdio client
│   └── panels/
│       └── chatPanel.ts       # Webview panel logic
├── media/
│   ├── chat.css              # Webview styles (blue/dark theme)
│   ├── chat.js               # Webview client-side logic
│   └── icon.svg              # Extension icon
├── csharp-host/
│   ├── Host.csproj           # C# project file
│   └── Program.cs            # JSON-RPC host implementation
├── package.json              # NPM dependencies and scripts
├── tsconfig.json             # TypeScript config
└── README.md

JSON-RPC Protocol

The extension and backend communicate via line-delimited JSON-RPC 2.0:

Request (Extension → Backend)

{"jsonrpc":"2.0","method":"chat","params":{"message":"Hello","history":[...]},"id":"uuid-here"}

Response (Backend → Extension)

{"jsonrpc":"2.0","result":{"reply":"Response text"},"id":"uuid-here"}

Notification (one-way, no id field)

{"jsonrpc":"2.0","method":"log","params":{"level":"info","text":"Status update"}}

Supported Methods

chat (Request)

Params:

• message (string) – User query
• history (ChatMessage[]) – Conversation history

Response:

• reply (string) – Assistant response
• (add other fields as needed)

ping (Request)

Response:

• pong

UI Design

The extension provides a webview chat panel with:

• Blue user messages (accent: #0d47a1)
• Dark assistant responses (#2a2a2a)
• Responsive input field at the bottom
• Auto-scroll on new messages
• Timestamps for each message

The design matches the provided screenshot.

Debugging

Extension Debugging

Press F5 in VS Code to start the extension in debug mode. The extension host window will open.

Backend Debugging

Attach a debugger to the C# process:

1. Run the C# host with debugger support
2. Use Visual Studio or VS Code's C# extension to attach

Or print logs to stderr:

Console.Error.WriteLine($"[Debug] {message}");

These will appear in the "Debug Console" of the extension host.

Configuration

Extending the Extension

Add New RPC Methods

1. In C# Host (csharp-host/Program.cs):

case "your_method":
    result = await HandleYourMethod(request);
    break;

2. In TypeScript (src/extension.ts or panels/chatPanel.ts):

const response = await backendConnection.request('your_method', { param1: 'value' });

Add UI Features

Edit media/chat.js and media/chat.css to add new UI elements. Messages are sent to the extension via:

vscode.postMessage({
  type: 'your_event_type',
  payload: { /* data */ }
});

Troubleshooting

Backend won't start

1. Verify the executable path in settings
2. Check that the .NET runtime is installed: dotnet --version
3. Check stderr output in VS Code debug console

Messages not sent

1. Check browser console (F12 in webview) for JS errors
2. Verify stdin/stdout connection in backend

Extension not appearing

1. Ensure npm install completed successfully
2. Run npm run build to compile TypeScript
3. Restart the extension host (Ctrl+R)

License

[Your License]