← Back to Documentation

Getting Started•5 min read

The Work Item Workbench

Master the Workbench interface - your central hub for AI-powered code generation with four customizable panels.

The Work Item Workbench

The Workbench is where you interact with AI to generate and review code. This guide explains each panel and how to use them effectively.

Overview

The Workbench has a four-panel layout that you can resize by dragging the panel borders:

Panel	Position	Purpose
Chat Panel	Left	Write prompts and view conversation history
Changes Panel	Left-middle	Browse generated files
Code Viewer	Center	Review and edit code
Context Panel	Right	Select files and knowledge for context

Chat Panel

The Chat Panel is your main interface for communicating with AI.

Writing Prompts

Type your request in the message input at the bottom. Be specific about what you want:

Good: "Create a UserService class with methods for getUserById, createUser, and deleteUser that connects to the PostgreSQL database"
Less effective: "Make a user service"

Conversation History

Previous messages appear above the input. Each iteration shows:

Your prompt
Generation status (processing, completed, or failed)
Number of files generated
Timestamp

AI Model Selection

Click the model dropdown to choose which AI model generates your code. Different models have different capabilities and speeds.

Personality Selection

Select a Personality to tune AI behavior. Personalities act as system prompts that guide the AI's approach to your request.

Iteration Selector

Switch between iterations to compare different versions of generated code. Earlier iterations remain available for reference or reversion.

Keyboard Shortcuts

Ctrl/Cmd + Enter: Send message
Drag files: Drop files from the Context Panel into the message input to reference them

Changes Panel

The Changes Panel shows files created or modified by the AI.

File Tree

Files are organized by type:

Code: Source code files (.ts, .js, .py, etc.)
Docs: Documentation files (.md)
Knowledge: Knowledge Base articles
Personalities: AI Personality definitions
Meetings: Meeting transcript references

File Status Indicators

New file: File does not exist in your project
Modified: File exists and has changes
Deleted: File marked for removal

Selecting Files

Click a file to view it in the Code Viewer. Selected files highlight in the tree.

Collapsing the Panel

Click the collapse button to hide the Changes Panel and give more space to the Code Viewer.

Code Viewer

The Code Viewer displays file contents with syntax highlighting.

Viewing Code

Select a file from the Changes Panel to display its contents. The viewer supports:

Syntax highlighting for most programming languages
Line numbers
Code folding

Diff View

Toggle Diff View to see a side-by-side comparison:

Left side: Original file from your project (or empty for new files)
Right side: AI-generated version
Green lines: Additions
Red lines: Deletions

Tip: Always use Diff View before applying changes to understand exactly what the AI modified.

Editing Code

Click Edit in the toolbar
Make changes directly in the editor
Click Save to update the generated file, or Cancel to discard edits

Edited files update in the current iteration. Your edits persist when you apply changes.

Plan View

When you generate a Plan (instead of code), the viewer shows the execution plan in markdown format. Review the plan before generating actual code.

Markdown Preview

For markdown files, toggle between Source and Preview modes to see rendered content.

Terminal (Desktop Only)

The bottom of the Code Viewer includes an integrated terminal. Click the terminal icon to expand it.

Use the terminal to:

Run build commands
Execute tests
Check file contents
Run any command in your project directory

Note: The terminal is only available in the AngenAI desktop application.

Context Panel

The Context Panel lets you select what information the AI receives when generating code.

Source Files

Browse your project's file tree and select relevant files:

Expand folders to find files
Check the box next to files to include them
Use the search box to filter by filename

Tip: Select only files relevant to your task. Including too many files can reduce AI accuracy and slow generation.

Knowledge Base

Attach Knowledge articles to provide documentation context:

Expand the Knowledge section
Browse Organization-wide or Project-scoped articles
Check articles to include them
Click the preview icon to read an article before selecting

Media Library

Include images for visual context:

Expand the Media section
Browse uploaded images
Select images to include (e.g., UI mockups, error screenshots)

Meetings

Attach meeting transcripts for context:

Expand the Meetings section
Select relevant meeting notes
Transcripts help AI understand requirements discussed in meetings

Collapsing the Panel

Click the collapse button to hide the Context Panel. Useful when focusing on code review.

Resizing Panels

Drag the borders between panels to adjust their width:

Drag left border of Changes Panel to resize Chat Panel
Drag right border of Changes Panel to resize Code Viewer
Drag left border of Context Panel to resize Code Viewer

AngenAI remembers your panel sizes for each Work Item.

What's Next?

Work Items Workflow - Complete generation workflow
Knowledge Base - Create reusable documentation
Personalities - Configure AI behavior