Frontend Context

A VSCode extension that revolutionizes frontend development by providing real-time context through direct UI element interaction.

Pick elements directly from the browser, then send to Cursor to generate code, by this way, you can generate code faster and more accurate.

Why Frontend Context?

Enhanced Developer Experience: Directly select and interact with UI elements in your application while coding
Rich Context for AI: Provides AI with comprehensive context about selected elements, resulting in more accurate suggestions and solutions
Streamlined Workflow: Significantly reduces the need to switch between code and browser, making development faster and more intuitive

Features

Real-time UI element selection and inspection
Interactive chat interface with AI-powered assistance
Comprehensive context gathering for better code suggestions

You select the element that you see in the browser

Cursor will automatically generate the code for you with rich context

Getting Started

Installation

Install from VS Code Marketplace
Reload VSCode
Access Frontend Context from the activity bar icon

Setup

Open the Frontend Context panel from the VSCode activity bar
Click "Start Server" to initialize the development server
Use "Auto Integrate" command to seamlessly connect your frontend application
Start the chat interface to begin receiving AI-powered assistance

Integration with Your Frontend

After running the "Auto Integrate" command, Frontend Context will automatically inject the necessary code into your frontend application. This enables the extension to interact with your UI elements.

Supported Frameworks

Framework	Element Detection	Component Info	Properties	Text	Structure
Vue	✅	✅ (file path)	✅	✅	✅
React	✅	❌	✅	✅	✅
Angular	✅	❌	✅	✅	✅
Svelte	✅	❌	✅	✅	✅
Vanilla	✅	❌	✅	✅	✅

Commands

Command	Title
`frontend-context.startChat`	Frontend Context: Start Chat
`frontend-context.startServer`	Frontend Context: Start Server
`frontend-context.stopServer`	Frontend Context: Stop Server
`frontend-context.openDocs`	Frontend Context: Open Documentation
`frontend-context.autoIntegrate`	Frontend Context: Auto Integrate

Frontend Context - Pick elements and chat with AI

aiocean