> For the complete documentation index, see [llms.txt](https://docs.codemate.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codemate.ai/dashboard.md).

# Dashboard

Dashboard provides browser-based access to CodeMate's core features from a single workspace. It allows you to start tasks, access your projects, navigate to Build and Work, and use other CodeMate capabilities without requiring a local installation.

It can be accessed through a web browser, making CodeMate available wherever you work. The current browser experience also keeps projects and conversations accessible across sessions.

### Setup

To access the Dashboard, navigate to the CodeMate application in your web browser and sign in with your CodeMate account at [app.codemate.ai/dashboard](https://app.codemate.ai/dashboard).

Upon successful sign-in, the Dashboard interface will become visible:

<img src="https://2395938751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ8BnJrGJwy0hT6DEkmb4%2Fuploads%2FI2rWIVrzbB3Ze2EKl9bw%2Funknown.png?alt=media&amp;token=fb2b7206-848a-48f2-a232-bcac06d68fc0" alt="" height="292" width="602">

### Usage

Dashboard comprises the following components:

### Overview:

The Overview serves as the central starting point for your CodeMate workspace. From here, you can start a task, access your projects, and navigate to different CodeMate features.

**Prompt Input**: Describe what you want to do in natural language. You can ask questions, explain code, brainstorm ideas, or start working on a development task.

**Quick Actions:** Use suggested prompts to quickly begin common tasks such as explaining a codebase, launching an application, creating a UI, or brainstorming architecture.

**Your Workspace:** View and access your Build projects directly from the Dashboard, making it easy to return to projects you have already created.

**Navigation:** Use the sidebar to move between the main CodeMate capabilities, including Build, Work, Analytics, and Help.

The Dashboard provides a central starting point for accessing CodeMate and moving between different parts of your development workflow. The current product manual similarly describes the browser home as containing the AI prompt input, quick actions, and a workspace containing recent Build projects.

### Build:

Build is CodeMate's browser-based AI workspace for turning an idea, requirement, design reference, or product brief into a working application. It helps you move from an initial concept to a functional application without manually setting up frameworks, folder structures, or project scaffolding.

### Key Features:

### Design Mode

Create and refine visual screens before building your application. Describe the experience you want to create, including the layout, visual style, content, and important UI components. Build generates design screens that can be reviewed and refined before moving into application development.

Once the visual direction is finalized, selected designs can be used as the starting point for prototyping.

### Prototype Mode

Turn a written requirement, product brief, or supporting references into a working application. Describe the application's users, pages, flows, and functionality, and Build generates a project plan before creating the application.

Follow-up prompts can then be used to add functionality, refine screens, update user flows, or modify the application's behavior without starting over.

### Figma to Code

Connect or provide an existing Figma design and use it as the visual foundation for a working application. This allows existing interface designs to be carried into the Build workflow. CodeMate-Build-User-Manual

### Files, Images & Screenshots

Add supporting context to your project through files, photos, screenshots, PRDs, requirements documents, design references, and other relevant material. This helps Build understand both the functional and visual requirements of the application. CodeMate-Build-User-Manual

### Live Preview & Iteration

Review the generated application through Live Preview and continue improving it using follow-up prompts. You can modify functionality, screens, layouts, and flows while continuing within the same project. CodeMate-Build-User-Manual

### Analyze & Fix Issues

During generation or deployment, Build can identify project issues such as build errors, unresolved imports, missing files, or other problems. The Analyze site option can be used to analyze and address these issues before rebuilding or deploying the application. CodeMate-Build-User-Manual

### Deploy & Export

Once your application is ready, preview it and use Go Live to publish it. You can also export the project as a ZIP file and continue development in VS Code with CORA. CodeMate-Build-User-Manual

### Accessing the Feature

You can launch Build directly by selecting Build from the Dashboard.\ <br>

<img src="https://2395938751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ8BnJrGJwy0hT6DEkmb4%2Fuploads%2FwSamzYIygKJwE9LE1Tha%2Funknown.png?alt=media&amp;token=c5e3184d-b300-474f-a11f-6f99d531cdb7" alt="" height="339" width="602">

### Work:

Work is CodeMate's AI-powered workspace for interacting with CodeMate through natural language. It can be used for coding assistance, understanding codebases, research, planning, brainstorming, and other technical or non-technical tasks.

Conversations in Work maintain context across interactions, allowing you to ask follow-up questions and continue working on a task without repeatedly providing the same information. The previous product manual documents this experience as persistent across visits.

<img src="https://2395938751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ8BnJrGJwy0hT6DEkmb4%2Fuploads%2FMuA8opp8zwdg9KPHRxPh%2Funknown.png?alt=media&amp;token=ee5735e6-22f5-4cbd-a86d-429fc96c9d95" alt="" height="255" width="602">

### 1. Generate High-Quality Code

Translate natural-language instructions into functional code. Work can assist with code generation, rapid prototyping, scaffolding, and routine programming tasks, helping reduce the manual effort required during development.

### 2. Ask Specific Questions About Your Code

Ask technical questions about your code, architecture, implementation, errors, or development decisions and receive context-aware responses.

You can also provide codebase context to help Work understand the actual project you are working with, making responses more relevant to your implementation.

### 3. Modify Existing Code

Provide existing code or project context and describe the changes you want to make. Work can assist with feature enhancements, bug fixes, optimization, refactoring, and other modifications while considering the existing implementation.

### Additional Capabilities

**Deep Research:** Go beyond a standard response for questions requiring broader or current information. Deep Research breaks a question into structured sub-questions, searches relevant sources, gathers evidence, and returns a comprehensive response. It can be used for technical research, technology evaluation, competitive research, regulations, and other research-intensive tasks. CodeMate-C0-Web-User-Manual

**@Codebase:** Reference a specific codebase to give Work project-specific context. This enables you to ask questions and receive responses grounded in the actual code you are working with.

**Connectors & MCP Servers:** Connect Work with supported external tools and services. Once connected, CodeMate can use the capabilities or information exposed by those services when completing relevant tasks. CodeMate-C0-Web-User-Manual

**Rulebooks:** Create reusable instructions that define how CodeMate should respond or generate output. Rulebooks can be used to apply coding standards, project requirements, formatting preferences, or other consistent guidelines without repeatedly writing the same instructions. CodeMate-C0-Web-User-Manual

**Remote File System (RFS):** Browse and manage files and folders stored in the remote file system. RFS provides a centralized interface for navigating folders, viewing files, creating folders, and uploading project-related files. CodeMate-C0-Web-User-Manual

**Multi-Modal Input:** Provide additional context through supported inputs such as text, voice, files, images, and other relevant material when working on a task.

### Analytics:

Analytics provides an overview of your CodeMate usage, productivity, and development activity. It helps you understand how CodeMate contributes to your workflow through metrics such as lines of code generated, time saved, efficiency, requests, token usage, and tool activity.

#### Key Metrics

**All-Time Shipped:** Shows the total lines of code shipped with CodeMate.

**Lifetime Time Saved:** Shows the total amount of development time saved through CodeMate.

**Career Efficiency:** Displays your efficiency compared to normal development speed.

**Requests:** Shows the total number of AI requests made.

**Tokens:** Displays the total number of tokens processed.

**Average Response:** Shows the average response time per request.

**Success Rate:** Displays the percentage of successful AI requests.

**Tool Calls:** Shows the total number of tool invocations made by CodeMate.

#### Productivity Overview

The Productivity Overview provides a time-based view of your CodeMate activity. You can select a period such as the current month or choose a custom date range to review your productivity metrics.

It highlights key metrics such as:

**Lines Generated:** The number of lines generated through CodeMate during the selected period.

**Time Saved:** The amount of development time saved during the selected period.

**Top Tool:** Identifies the CodeMate tool contributing the most to your activity during the selected period.

#### Daily Usage

The Daily Usage section provides a visual view of your CodeMate activity over the selected time period, helping you understand how your usage changes over time.

#### Tools Usage

The Tools Usage section breaks down activity across CodeMate tools, showing metrics such as the number of uses, lines generated or managed, and time saved for each tool.

<img src="https://2395938751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ8BnJrGJwy0hT6DEkmb4%2Fuploads%2FVWmSXOdVDCcokHtBoTd5%2Funknown.png?alt=media&amp;token=94db691b-09de-40cb-8607-5f9f7cf100f1" alt="" height="276" width="602">

### Support & Resources

**Docs & Guides:** Access CodeMate documentation for detailed product guides, feature walkthroughs, and learning resources.

**Help & Support:** Access help and support directly through the Dashboard when you need assistance with CodeMate.

**Support**: You can also reach the CodeMate support team at **<support@codemate.ai>**
