Klok VS Code Plugin

A VS Code extension that provides AI-powered coding assistance through a gRPC-based architecture.

Features

• AI-powered code suggestions and assistance
• gRPC communication with backend services
• React-based webview UI
• Support for multiple AI providers
• Code generation and modification capabilities

Architecture

This extension uses a multi-layered architecture:

• Extension Host (src/extension.ts) - VS Code extension entry point
• Webview Provider (src/hosts/vscode/VscodeWebviewProvider.ts) - Manages the sidebar UI
• gRPC Client (src/generated/grpc-go/) - Generated Go client for backend communication
• Webview UI (webview-ui/) - React-based user interface

Development

Prerequisites

• Node.js 18 or higher
• Go 1.21 or higher
• VS Code

Setup

# Install dependencies
npm install

# Build the extension
npm run build

# Build protobuf definitions
npm run proto:build

Running Locally

# Open in VS Code
code .

# Press F5 to launch Extension Development Host

Build Scripts

• npm run build - Build extension and webview
• npm run proto:build - Generate gRPC code from proto files
• npm run proto:build:go - Generate Go gRPC client
• npm run watch - Watch mode for development
• npm run test - Run tests

Publishing

Manual Publishing

# Package the extension
npm run package

# Publish to marketplace
npm run publish:marketplace

Nightly Builds

Nightly builds are automatically published via CI/CD:

npm run publish:nightly

Project Structure

klok-vscode-plugin/
├── src/
│   ├── extension.ts              # Extension entry point
│   ├── hosts/vscode/             # VS Code host implementation
│   ├── generated/                # Generated gRPC code
│   └── ...
├── webview-ui/                   # React webview UI
│   ├── src/
│   └── public/
├── proto/                        # Protocol buffer definitions
├── scripts/                      # Build and publish scripts
│   ├── build-go-proto.mjs       # Go protobuf generator
│   ├── publish-nightly.mjs      # Nightly publish automation
│   └── esbuild.mjs              # Build configuration
├── package.json                  # Extension manifest
└── .vscodeignore                # Files excluded from package

Configuration

The extension can be configured through VS Code settings. See package.json for available configuration options.

gRPC Services

The extension communicates with backend services via gRPC. Protocol buffer definitions are in the proto/ directory.

To regenerate gRPC code:

npm run proto:build

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests: npm test
5. Submit a pull request

License

See LICENSE file for details.

Support

For issues and questions, please open an issue on the GitHub repository.