Skip to content

Sidebar UI

The DevFlow sidebar UI is your main interface for interacting with the extension. It features a modern, tabbed layout for easy access to all features.

Main Tabs & Screenshots

Getting Started

A welcoming panel that introduces DevFlow's features and helps you get started quickly.

Getting Started

Tabs Navigation

Switch between Search, Find Similar, Repository, Logs, and AI Settings using the tab bar at the top.

Tabs

Backend Controls

Start or stop the backend server directly from the UI.

Backend Controls

Search Tab

Search your codebase using natural language or keywords. Results are shown with context and file locations.

Search Tab

AI Answer

Ask questions about your codebase and get context-aware answers powered by AI.

AI Answer

Find Similar

Paste a code snippet to find similar patterns or functions in your project.

Find Similar

Repository Management

Index your codebase, view stats, clear the index, and check backend health.

Repository Management

Logs

View backend logs in real time for troubleshooting and monitoring.

Logs

AI Settings

Configure your OpenAI API key, model, and token limit.

AI Settings

User Experience Highlights

  • Responsive Design: Adapts to various screen sizes.
  • Keyboard Shortcuts: Quickly search (Ctrl/Cmd+Enter) or switch tabs (Ctrl/Cmd+1/2/3).
  • Confirmation Modals: Prevent accidental destructive actions.
  • Live Feedback: Loading indicators and real-time updates for actions.

For a full walkthrough, watch the Getting Started Video.