+
## 2. Organization
- View organization name and organization ID
- Share the organization ID with your admins when requesting access or support
-
+
## 3. Credits
diff --git a/code-studio/enterprise-server/userandteams.md b/code-studio/enterprise-server/userandteams.md
index ff71151..acdaa56 100644
--- a/code-studio/enterprise-server/userandteams.md
+++ b/code-studio/enterprise-server/userandteams.md
@@ -90,11 +90,11 @@ Use the context menu to:
Accessible via the context menu (three-dot icon):
- **Rename Team** – Update the team name.
- 
+
- **Set Team Owner** – Assign ownership.
- 
+
- **Delete Team** – Remove the team.
@@ -102,7 +102,7 @@ Accessible via the context menu (three-dot icon):
- **Change Team** – Move a user from one team to another.
- 
+
- **Remove Memeber** – Remove user from selected Team.
@@ -119,7 +119,7 @@ Accessible via the context menu (three-dot icon):
- **Invite New Users:** Send an invite link through email to new users.
- 
+ 
## 4. Best Practices
- **Maintain Clear Roles:** Assign roles based on responsibilities.
diff --git a/code-studio/features/add-context.md b/code-studio/features/add-context.md
index e098bae..8803c9a 100644
--- a/code-studio/features/add-context.md
+++ b/code-studio/features/add-context.md
@@ -13,12 +13,27 @@ Code Studio includes an AI powered chat that can help you understand your projec
This document explains:
+- Use cases
- What “Context” means
- Different types of contexts (files, folders, screenshots, problems, symbols, tools)
- How to add context to the chat
- How to use `@` and `#` to attach context
-## What “Context” Means (and Why It Matters)
+## Use cases
+
+1. Attaching Exact Code for a Specific Question
+2. Understanding Project Structure or Dependencies
+3. Debugging Terminal or CLI Issues
+4. Asking About Editor Settings or VS Code Features
+5. Full Project Wide Questions
+6. Fixing UI or Styling Issues
+7. Solving Errors from the Problems Panel
+
+## Prerequisites
+
+- Syncfusion Code Studio installed and configured on your system. If you have not yet downloaded Code Studio, please refer to this link [Install and Configure](/code-studio/getting-started/install-and-configuration) for step-by-step instructions on downloading and configuring Code Studio.
+
+## What “Context” Means
**Context** is the extra information you attach to your chat message—such as a file, an error, a screenshot, or a terminal log—so the AI analyzes the **right** thing and responds precisely. You’ll get **better answers** when Chat can look at **the specific code**, **the exact error,** or **the UI you’re seeing**
Examples
@@ -31,9 +46,6 @@ Examples
- Seeing a build error? → Attach **the Problems item** or **terminal output**
- Confused by the UI? → Attach **a screenshot**
-> **Note — Privacy & scope**
-> Chat only sees what you explicitly include (plus what’s implicitly added from your active editor).
-> If a file is **not** attached or implicitly included, Chat won’t analyze it.
## Types of Context in Code Studio
@@ -102,7 +114,7 @@ The selected screenshot/image will be added as context.
----
+
### 4. Problems Context
@@ -168,3 +180,8 @@ To use a chat participant, simply type **@** in the chat input box. Code Studio
Selecting one routes your request to that domain expert.
+
+
+## Releted Features
+ - [Inline Chat](/code-studio/features/inlinechat) Inline Chat in Syncfusion Code Studio lets you talk to AI directly inside your code or terminal without switching screens.
+ - [Generate Code](/code-studio/features/generatecode) The Generate Code feature speeds up development by automatically handling repetitive tasks and giving instant AI-powered help right inside your editor.
\ No newline at end of file
diff --git a/code-studio/features/agent.md b/code-studio/features/agent.md
index ffc6d24..0bb1813 100644
--- a/code-studio/features/agent.md
+++ b/code-studio/features/agent.md
@@ -7,25 +7,24 @@ keywords: "code, IDE, AI, developer-tools, syncfusion, code-assistance, producti
# Agent
- Agents are intelligent, goal oriented AI assistants that can perform complex, multistep tasks across your project. Unlike simple prompt-based editing, agents can understand high-level instructions, analyze your codebase, and decide what actions need to be taken to achieve the desired outcome.
+## Overview
-## How are agents differ from custom agents?
+Agent Mode is an autonomous AI that plans and executes multi-step coding tasks across your project. It explores your codebase, makes changes with workspace tools, and adapts to errors—while you review and approve each step. Enable it in Settings > Agents, switch to Agent mode in chat, then describe your goal.
-Agents and Custom Agents both act as AI assistants that can perform coding tasks for you, but they differ mainly in how they behave and how much control you have over them.
+## Use Cases
-An **Agent** is a builtin, general-purpose assistant that works automatically. You give it a goal, and it figures out how to complete it by exploring your project, reading files, planning updates, and applying changes.
+- Scaffold new apps or components
+- Refactor across files (rename, move, split)
+- Generate or fix unit tests
+- Update docs and README from code
+- Configure scripts, tasks, and settings
+- Prototype simple UIs and pages
-A **Custom Agent**, however, is something you create with your own rules, instructions, or constraints—so it behaves exactly the way you want every time.
+## Prerequisites
-*Learn more about creating [custom agents](/code-studio/reference/configure-properties/custom-agents).*
-
-## Key benefits
-
-- Automates complex, cross-file tasks.
-
-- Speeds iterative development and scaffolding.
-
-- Review and approve changes at each step.
+- Syncfusion Code Studio is installed (see the [installation guide](/code-studio/getting-started/install-and-configuration)).
+- Open a project folder with write access.
+- At least one AI model configured ( BYOK, or local).
## Agent Capabilities
@@ -53,6 +52,7 @@ A **Custom Agent**, however, is something you create with your own rules, instru
**6.Task Complete** - Summarize what was changed, why, and how to reproduce or undo it; provide next steps or follow-ups if needed. Hand control back to the user for review or further instructions.
+
## How to Enable Agent mode?
**Step 1** : Open settings and select Code Studio settings.
@@ -79,7 +79,7 @@ Consider creating the ToDo application,
> **Note**: Make sure agents are enabled in your Code Studio settings.
- 
+
-
- Run your application in terminal; now you have a working ToDo app. By using an agent, you can interactively generate and refine your code in real-time.
-## Best Practices
+> **Note:** Projects created in Code Studio are compatible with other IDEs (for example, Visual Studio and VS Code), allowing you to open and work on the same project across different development environments.
+
+## Related Features
-1. **Give Clear, Goal-Focused Instructions** – Provide high-level objectives rather than step-by-step commands.
-2. **Break Large Tasks into Manageable Parts** – While the agent can handle multi-step workflows, extremely large tasks are easier to manage when divided into smaller, logical segments.
-3. **Review Each Action Before Approving** – Agent Mode provides step-by-step previews for every operation. Always review each action to confirm it matches your expectations.
-4. **Provide Additional Context When Needed** – If your goal involves interconnected modules, shared utilities, or cross-file dependencies, consider adding relevant files to the context.
+- [Custom Agent](/code-studio/reference/configure-properties/custom-agents): Define rules/instructions for consistent, constrained behavior.
\ No newline at end of file
diff --git a/code-studio/features/ask.md b/code-studio/features/ask.md
index d33c361..6ea4d5d 100644
--- a/code-studio/features/ask.md
+++ b/code-studio/features/ask.md
@@ -1,56 +1,78 @@
---
title: Syncfusion Code Studio Ask Mode
-description: Ask Mode in Code Studio IDE provides quick, AI‑powered explanations, examples, and best practices without altering your project files.
+description: Ask Mode in Code Studio provides AI-powered explanations, code examples, and best practices in a non-invasive conversational interface that does not modify workspace files.
platform: syncfusion-code-studio
keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation
---
-# Ask
-## Description
-Ask Mode in Code Studio IDE is a simple way to get quick help while coding. Instead of digging through long documentation or searching online, you can just ask questions directly in the IDE. Code Studio Chat will give you explanations, examples, or best practices based on what you ask—without touching your project files.
+# Ask
-## Purpose
-The purpose of Ask Mode is to make learning and problem solving easier.It helps new users understand coding concepts, see ready-to-use code snippets, and get clear guidance on how to apply patterns or practices—all in a fast, conversational way.
+## Overview
-## How to use ask mode in Code Studio
+Ask Mode is a conversational interface within Code Studio that provides immediate technical guidance without modifying your workspace. It delivers explanations, code examples, and best practice recommendations based on your queries, operating independently of your project files. This mode is designed for knowledge acquisition and exploration rather than direct code manipulation.
-### Step 1: Select Ask Mode
-- Launch Code Studio IDE.
-- Open the chat view of Code Studio, select **Ask** from the agents dropdown.
+## Use Cases
- 
+**Use Ask Mode when you need:**
-### Step 2: Ask Your Question
-- Type your question in plain language, no special format needed.
-- You can ask about coding concepts, request code snippets, or seek best practice guidance.
+- **Quick Technical Clarifications** - Resolve coding questions without external documentation searches
+- **Code Snippet Generation** - Obtain ready-to-use code examples for specific programming tasks
+- **Concept Explanations** - Understand design patterns, framework architectures, or language features through concise technical summaries
+- **Non-Invasive Exploration** - Test ideas and validate logic without workspace file modifications or context dependencies
-**Example:**
+## Prerequisites
-
+**Code Studio Installation** - Download and configure the IDE: [Install and Configuration](/code-studio/getting-started/install-and-configuration)
-**Response:**
+## How to Use Ask Mode in Code Studio
-
+### Step 1: Activate Ask Mode
-### Step 3: Get Instant Guidance
-- Code Studio Chat will respond with explanations, examples, or summaries.
-- The answers are conversational and easy to follow, like having a mentor guide you.
-- You don’t need to share your project files—Ask Mode works only with the context you provide.
+- Launch Code Studio IDE
+- Open the Code Studio chat panel
+- Select **Ask** from the agent dropdown menu
-### Step 4: Apply What You Learn
-- Copy code snippets directly into your project.
-- Use explanations to understand concepts before implementing them.
-- Refer back to Ask Mode whenever you need quick clarification.
+ 
-> **Note:** By default, only the premium autocomplete model is available. If you want to use other models for autocomplete, you must add them through BYOK (Bring Your Own Key). When configuring BYOK, ensure that the model is added with the Autocomplete model option enabled on the server. You can follow the instructions provided in the [BYOK help link](/code-studio/enterprise-server/providersandmodels) to complete this setup. Once a model is added via BYOK with autocomplete enabled, it will automatically appear in the Autocomplete model dropdown, allowing you to switch from the default premium model to another supported model.
+> **Note:** By default, only GPT-4.1 nano is available for autocomplete. If you want to use other models for autocomplete, you must add them through BYOK (Bring Your Own Key). When configuring BYOK, ensure that the model is added with the Autocomplete model option enabled on the server. You can follow the instructions provided in the [BYOK help link](/code-studio/enterprise-server/providersandmodels) to complete this setup. Once a model is added via BYOK with autocomplete enabled, it will automatically appear in the Autocomplete model dropdown, allowing you to switch from the default premium model to another supported model.
+
+> **Note**: Only the following models support autocomplete:
+>
+> 1. **OpenAI:** GPT-4.1 nano, GPT-5-nano
+> 2. **Open Router:** gemini-2.0-flash, x-ai/grok-4-fast, x-ai/grok-4.1-fast, GPT-4.1 nano, GPT-5-nano
## Best Practices
- **Write meaningful comments:** Better clarity leads to more accurate code generation.
@@ -144,5 +164,8 @@ Code Studio identifies when a variable has been renamed and suggests updating al
- **Make intentional edits:** When you rename, reorganize, or modify code with a clear purpose, Code Studio can more accurately infer your intent and provide aligned follow up suggestions.
- **Validate propagated changes:** Next Edit Suggestions may update related code across the file or project. Review these changes to ensure they match your design intent.
+## Releted Features
+ - [Inline Chat](/code-studio/features/inlinechat) Inline Chat in Syncfusion Code Studio lets you talk to AI directly inside your code or terminal without switching screens.
+ - [Generate Code](/code-studio/features/generatecode) The Generate Code feature speeds up development by automatically handling repetitive tasks and giving instant AI-powered help right inside your editor.
diff --git a/code-studio/features/checkpoints.md b/code-studio/features/checkpoints.md
index fb1d848..3528321 100644
--- a/code-studio/features/checkpoints.md
+++ b/code-studio/features/checkpoints.md
@@ -6,13 +6,24 @@ keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productiv
---
-# Checkpoints and Editing requests in Code Studio
+# Checkpoints and Editing requests
+
+## Overview
-## Description
The Checkpoints and Editing Requests features in Syncfusion Code Studio provide powerful tools for managing your development workflow. Checkpoints automatically record the state of your workspace at important moments, while Editing Requests allows you to revise previous chat instructions and revert the workspace to the state before those instructions were applied. Together, these features create a safe, traceable, and flexible environment that supports iterative development and experimentation.
-## Purpose
-The purpose of these features is to help developers maintain control over their workspace as they interact with AI-driven coding assistance. This Checkpoints and Editing Requests provides reliable history tracking, predictable behavior, and safer AI-assisted updates.
+
+## Use Cases
+
+- Save the current state so you can safely experiment with new features or code updates.
+
+- Roll back to a known state when trying different approaches without worrying about breaking the workspace.
+
+- Quickly restore to a safe state if AI-generated edits or manual changes don’t work as expected
+
+## Prerequisites
+
+- Syncfusion Code Studio installed and configured on your system. If you have not yet downloaded Code Studio, please refer to this link [Install and Configure](/code-studio/getting-started/install-and-configuration) for step-by-step instructions on downloading and configuring Code Studio.
## Editing a Previous Chat Request
Code Studio allows you to edit any previous chat request in your conversation history. When you modify an earlier request, Code Studio treats it as a new instruction and sends it again to the AI model. The workspace is then reverted to the state it was in before the original request—undoing any file changes made by that request and the requests that came after it.
@@ -52,6 +63,11 @@ After restoring the previous checkpoint, Code Studio allows you to redo the chan
+## How to Undo and Redo the Last Request
+Code Studio lets you quickly reverse or reapply your most recent action. Use Undo Last Request to roll back the workspace to the state before the change was applied. If you change your mind, select Redo Last Request to bring the workspace back to the state with those changes. This helps you stay flexible and in control while experimenting with edits.
+
+
+
## Best Practices
### 1. Review checkpoints before restoring
@@ -62,3 +78,6 @@ If an AI-generated update wasn't what you expected, modify the earlier request i
### 3. Restore and redo changes carefully
When restoring a checkpoint, verify the impact on recently edited files. If needed, use the **Redo** option to reapply reverted changes safely.
+
+## Releted Features
+- [Agent Mode](/code-studio/features/agent) - File changes can occur as the AI assists with coding tasks in agent mode. Checkpoints become especially useful here because they let you restore the workspace to a safe state if needed, or redo changes that were rolled back. This ensures you stay in control even when the agent is making edits.
\ No newline at end of file
diff --git a/code-studio/features/edit.md b/code-studio/features/edit.md
index 7342254..65cc910 100644
--- a/code-studio/features/edit.md
+++ b/code-studio/features/edit.md
@@ -5,19 +5,31 @@ platform: syncfusion-code-studio
keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation
---
-# Edit
+# Edit Mode
-Edit is an AI-powered feature, to help developers modify source code using prompts. It provides a consistent workflow where users can preview, keep, or undo each suggested change. This ensures high accuracy and full control over your codebase.
+## Overview
-## Key Benefits
+Edit Mode is an AI-powered feature in Syncfusion Code Studio that helps developers modify source code using natural language prompts. It enables targeted, bulk, or repetitive changes with a consistent workflow, allowing users to preview, keep, or undo each suggested change for maximum control and accuracy.
-• Faster edits, apply bulk or repetitive changes in seconds.
+## Use Cases
-• Precise control over changes we can Keep or Undo each modifications.
+- Refactoring code or optimizing logic across files
+- Applying repetitive changes (e.g., renaming variables, updating patterns)
+- Fixing bugs or updating documentation
+- Modifying shared components or helper functions
+- Bulk editing UI or business logic
-## How to use Edit mode?
+## Prerequisites
+- Syncfusion Code Studio installed and configured on your system. If you have not yet downloaded Code Studio, please refer to this link [Install and Configure](/code-studio/getting-started/install-and-configuration) for step-by-step instructions on downloading and configuring Code Studio.
+- Access to Syncfusion Code Studio with Edit Mode enabled
+- Appropriate permissions to modify files in the workspace
+- Recommended: Familiarity with the codebase for best results
-**Step 1** : Switch to Edit mode in chat panel.
+## How to Use the Edit mode
+
+**Step 1:** Open Syncfusion Code Studio in your machine.
+
+**Step 2:** Switch to **Edit** mode in the chat panel.
@@ -25,18 +37,18 @@ Edit is an AI-powered feature, to help developers modify source code using promp
-**Step 3** : Once you send the prompt, the AI interprets the instruction and applies the necessary changes to the currently active file in your editor.
+**Step 4** : Once you send the prompt, the AI interprets the instruction and applies the necessary changes to the currently active file in your editor.
> **Note:** Before entering a prompt in Edit Mode, make sure the correct file is selected and active in the editor.
-**Step 4** : If your instruction involves additional files – for example, editing helper functions, updating shared components, or modifying logic across modules—you can include those files by clicking “Add Context”. This option allows you to provide more context so the AI understands how different files relate to your request.
+**Step 5** : If your instruction involves additional files – for example, editing helper functions, updating shared components, or modifying logic across modules—you can include those files by clicking “Add Context”. This option allows you to provide more context so the AI understands how different files relate to your request.
-**Step 5** : After clicking “Add Context”, choose the files you want the AI to refer to or modify.
+**Step 6** : After clicking “Add Context”, choose the files you want the AI to refer to or modify.
-**Step 6** : Once the files are added, take a moment to confirm that the correct files appear in the chat panel.
+**Step 7** : Once the files are added, take a moment to confirm that the correct files appear in the chat panel.
@@ -51,6 +63,11 @@ Edit is an AI-powered feature, to help developers modify source code using promp
+## Related Features
+- [Add Context](/code-studio/features/add-context): Provide additional files for more accurate edits
+- [Quick Fix](/code-studio/how-to-guides/quick-fix-error): Instantly resolve detected issues
+- [Inline Chat](/code-studio/features/inlinechat): Get in-line code suggestions
+
## Best Practices
• **Write short, clear prompts** – Clear and concise prompts help the AI understand your exact intention, resulting in more accurate edits. Avoid long or vague instructions for better outcomes.
diff --git a/code-studio/features/feature-images/Gif/openineditor-planmode.gif b/code-studio/features/feature-images/Gif/openineditor-planmode.gif
new file mode 100644
index 0000000..eff15c6
Binary files /dev/null and b/code-studio/features/feature-images/Gif/openineditor-planmode.gif differ
diff --git a/code-studio/features/feature-images/Gif/planmode.gif b/code-studio/features/feature-images/Gif/planmode.gif
new file mode 100644
index 0000000..fcc4ed4
Binary files /dev/null and b/code-studio/features/feature-images/Gif/planmode.gif differ
diff --git a/code-studio/features/feature-images/auto-configure5.png b/code-studio/features/feature-images/auto-configure5.png
index 4600abf..833e05f 100644
Binary files a/code-studio/features/feature-images/auto-configure5.png and b/code-studio/features/feature-images/auto-configure5.png differ
diff --git a/code-studio/features/feature-images/checkpoint4.png b/code-studio/features/feature-images/checkpoint4.png
new file mode 100644
index 0000000..0f52882
Binary files /dev/null and b/code-studio/features/feature-images/checkpoint4.png differ
diff --git a/code-studio/features/feature-images/plan-implementation.png b/code-studio/features/feature-images/plan-implementation.png
new file mode 100644
index 0000000..dfae617
Binary files /dev/null and b/code-studio/features/feature-images/plan-implementation.png differ
diff --git a/code-studio/features/feature-images/planmode.png b/code-studio/features/feature-images/planmode.png
new file mode 100644
index 0000000..89e9b0b
Binary files /dev/null and b/code-studio/features/feature-images/planmode.png differ
diff --git a/code-studio/features/feature-images/proceedfrom-plan.png b/code-studio/features/feature-images/proceedfrom-plan.png
new file mode 100644
index 0000000..889f5d8
Binary files /dev/null and b/code-studio/features/feature-images/proceedfrom-plan.png differ
diff --git a/code-studio/features/feature-images/prompt-plan.png b/code-studio/features/feature-images/prompt-plan.png
new file mode 100644
index 0000000..b6cca9e
Binary files /dev/null and b/code-studio/features/feature-images/prompt-plan.png differ
diff --git a/code-studio/features/generatecode.md b/code-studio/features/generatecode.md
index 5c34fc2..864a486 100644
--- a/code-studio/features/generatecode.md
+++ b/code-studio/features/generatecode.md
@@ -7,10 +7,12 @@ keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productiv
# Generate Code
+## Overview
+
The **Generate Code** feature helps developers work faster by automating common coding tasks.
It reduces repetitive work, improves code quality, and provides instant AI assistance directly inside your editor.
-## Why Use Generate Code?
+## Use cases
- Speeds up development
- Improve code quality
@@ -20,6 +22,10 @@ It reduces repetitive work, improves code quality, and provides instant AI assis
It’s like having a **junior developer**, a **senior reviewer**, a **documentation writer**, and a **test engineer — all in one**.
+## Prerequisites
+
+- Syncfusion Code Studio installed and configured on your system. If you have not yet downloaded Code Studio, please refer to this link [Install and Configure](/code-studio/getting-started/install-and-configuration) for step-by-step instructions on downloading and configuring Code Studio.
+
## How to Use Generate Code
1. **Right‑click** on the code you want help with.
@@ -95,4 +101,8 @@ When you choose **Generate Code → Generate Tests**, the AI:
This saves time and helps ensure your application behaves as expected.
-
\ No newline at end of file
+
-7. Open a chat and send message.
+6. Open a chat and send message.
-8. The `agents.md` file will then be used as a reference.
+7. The `agents.md` file will then be used as a reference.
-## Validation
-- Verify **Agent Enabled** is enabled under Agents.
-- Verify **Use Agent MD File** is enabled under Agents.
-- Check that the file is named `agents.md` and placed in the project root.
-- Verify that Code Studio references `agents.md` when responding
-
-## Troubleshoot
-**`agents.md` file is not referenced.**
-- Ensure the file exists in the root directory and is not in a subfolder.
-- Confirm the extension is exactly .md.
-- Ensure the file name as agents.md.
-
-**Agent not Responding in Chat.**
-- Re-check that Agent Enabled and Use Agent MD File are toggled ON in Settings.
+## Related Features
-**Instruction Recognition Problems.**
-- Review the document for clear, AI parsable rules and Check clarity of rules.
+- [Custom Agent](/code-studio/reference/configure-properties/custom-agents) - Pre‑configured AI agents for specific tasks that follow fixed rules, tools, and behaviors—ensuring consistent, repeatable workflows across teams.
-**Slow suggestions.**
-- Ensure a stable network connection.
+- [Custom Prompt](/code-studio/reference/configure-properties/custom-prompt) - Prompt files are on‑demand, reusable Markdown prompts that standardize specific development tasks like code generation and reviews.
\ No newline at end of file
diff --git a/code-studio/features/inlinechat.md b/code-studio/features/inlinechat.md
index 76fdcf3..38cfd5c 100644
--- a/code-studio/features/inlinechat.md
+++ b/code-studio/features/inlinechat.md
@@ -7,22 +7,21 @@ keywords: inline-edit, right-click-actions, ai-assistance, contextual-editing, c
---
-# Inline Chat in Syncfusion Code Studio
+# Inline Chat
-Inline Chat in **Syncfusion Code Studio** allows you to request code generation and make inline edits directly inside the editor—without switching to the Chat panel. This keeps you focused and reduces context switching while working on your code.
+## Overview
+Inline Chat in Syncfusion Code Studio is designed to bring AI assistance directly into your workflow. Instead of switching panels or navigating away from your code, you can interact with AI right inside the editor or terminal. This seamless integration helps you stay focused, get context-aware suggestions, and streamline both coding and command-line tasks.
-Inline Chat works both in the editor and the integrated terminal, giving you quick access to AI assistance exactly where you need it.
+## Use Cases
+- Debugging Code Quickly – Use Inline Chat to identify errors and generate fixes directly in the editor without switching panels.
-## Purpose
-The purpose of Inline Chat is to provide an efficient, in-context way to work with AI assistance. Instead of navigating to a separate chat window, you can trigger AI guidance exactly where you need it. This ensures:
-- Speeding up coding and edits
-- Giving more accurate code suggestions
-- Helping with terminal commands instantly
-- Reducing interruptions while you work
+- Automating Terminal Workflows – Generate shell commands or scripts in the integrated terminal to speed up repetitive tasks.
-## Prerequisites
-1. **Create and sign in** to your Syncfusion Code Studio account, visit: [Syncfusion Code Studio](https://app.sfcodestudio.com)
-2. **Download and open Syncfusion Code Studio**, visit: [Install and Configuration](/code-studio/getting-started/install-and-configuration)
+- Refactoring Existing Code – Select a block of code and request improvements, optimizations.
+
+## Prerequisites
+
+- Syncfusion Code Studio installed and configured on your system. If you have not yet downloaded Code Studio, please refer to this link [Install and Configure](/code-studio/getting-started/install-and-configuration) for step-by-step instructions on downloading and configuring Code Studio.
## Using Inline Chat in the Editor
When you use Inline Chat inside the editor, Code Studio scopes your request to the content in the active file. It may also use related files in your workspace to provide more accurate suggestions.
@@ -69,10 +68,8 @@ After Code Studio generates a shell command:
-## Best Practices
-- Select a specific piece of code before opening Inline Chat to get more accurate suggestions.
-- Keep your prompts short and clear so the AI understands exactly what you need.
-- Always review the inline changes before accepting them to ensure they match your intention.
+## Releted Features
+- [Add context to your chat prompt](/code-studio/features/add-context) - Enhance your prompt by providing extra details. This helps Code Studio generate more accurate results and keeps your workspace aligned with your goals.
diff --git a/code-studio/features/plan.md b/code-studio/features/plan.md
index 81a590f..35a31ca 100644
--- a/code-studio/features/plan.md
+++ b/code-studio/features/plan.md
@@ -4,90 +4,101 @@ description: Plan Mode in Syncfusion Code Studio helps you design, review, and r
platform: syncfusion-code-studio
keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation
---
-# Plan
-## Description
-Plan Mode in Code Studio IDE is like a planning assistant that helps you prepare before writing any code.Instead of jumping straight into coding, it works with you to research the task, figure out what’s needed, and break the work into clear steps.
-It shows you a draft plan that you can review, edit, or approve. Nothing changes in your code until you decide the plan is ready.
+# Plan Mode
-## Purpose
-The purpose of Plan Mode is to make coding safer and more reliable by starting with a clear plan.It helps you cover all requirements, organize tasks into simple steps, and stay focused on your goals.By reviewing the plan first, you avoid mistakes, reduce confusion, and make it easier to handle larger or more complex projects.
+## Overview
-### The plan agent is designed to:
-- Investigate tasks in detail using read-only tools and codebase analysis to uncover requirements and constraints
-- Divide the work into clear, actionable steps while raising open questions for any unclear requirements
-- Provide a concise draft plan, following a standardized format, for your review and refinement
+The Plan Agent is a powerful feature in Syncfusion Code Studio that helps you create detailed implementation plans before writing code. It analyzes your task, breaks it down into clear steps, and identifies any questions that need clarification without making code changes until you approve.
-## How to plan a task?
+## Use Cases
-### Step 1: Open the Chat View
-- Open the Chat panel in Code Studio IDE.From the agents dropdown, select **Plan** to activate the plan agent.
+Use the Plan Agent when you need to:
+* Plan complex features or refactoring efforts
+* Understand a task thoroughly before implementing it
+* Break down large projects into actionable steps
+* Design architecture for new features or components
+* Validate requirements and identify potential issues early
- 
+## Prerequisites
-### Step 2: Enter a High-Level Task
-- Type in a task you want to plan, such as a new feature, a refactoring, or a bug fix.
-**Examples:**
+Before you start, make sure you have:
+* Syncfusion Code Studio is installed and configured on your system. If you have not yet downloaded Code Studio, refer to the [Syncfusion Code Studio Install and Configure](/code-studio/getting-started/install-and-configuration).
- - “Add automated integration tests for payment gateway workflows”
- - “Fix issue where session timeout does not redirect users to the login page”
- - “Optimize caching strategy to reduce response times for frequently accessed endpoints”
+## Getting Started with the Plan Feature
- 
+### Step 1: Open Chat
-### Step 3: Submit Your Task
-- After entering the task, submit it to the plan agent.
-- The agent will start preparing a draft plan based on your input.
+* Open the Chat view by pressing **Ctrl+Alt+I** and select **Plan** from the agent's dropdown.
-### Step 4: Preview the Draft Plan
-- Review the proposed plan draft. It will include:
- - A high-level summary of the task
- - A step-by-step breakdown of actions
- - Any open questions for clarification
-
- 
+ 
+### Step 2: Describe Your Task
-### Step 5: Finalize and Start Implementation
-- Once the plan is finalized, use the buttons to:
- - **Start Implementation** directly, or
- - **Open in Editor** for further review.
-
- 
+* Type a clear description of what you want to accomplish.
-- While the implementation is in progress, you can still provide clarifying directions such as:
- - “Focus on the UI first”
- - “Execute only step 1 and step 2”
+ **Example:**
+ ```
+ Create a dashboard project for stack analysis using python
+ ```
+ 
-## How to use?
+### Step 3: Review the Plan
-### Start Implementation
-- Select Start Implementation , it will appear in the chat box and execute that. After selection of start implementation , the mode will automatically switch to Agent Mode.
-
- 
+The Plan Agent will show you:
+* Summary of the task
+* Step-by-step breakdown
+* Questions that need answers
-- After execution of start implementation, it begins progressing through the planned steps. You can monitor the process using the todo list, where each step is marked as completed one by one according to the plan.
+### Step 4: Refine (Optional)
- 
+* Provide feedback or ask questions and adjust the plan until it meets your requirements.
-### Open in Editor
-- If you select **Open in Editor**, the plan details will appear in a new editor. There, you can review the plan, clarify details, iterate as needed, and finalize it for execution by typing **Start Implementation**. After selecting Open in Editor, the mode will automatically change to **Agent Mode**.
-
+ 
+
+### Step 5: Implement or Save the plan
+* Choose one of the following options:
-## Why use plan mode?
-- Helps you research tasks thoroughly and identify requirements or constraints before coding
-- Breaks complex work into manageable, actionable steps for easier execution
-- Highlights open questions early, reducing ambiguity and misunderstandings
-- Provides a standardized draft plan for review, iteration, and team alignment
-- Builds a solid foundation that minimizes risks before any code changes are introduced
+ 
+#### Option A: Start Implementation
-## Best Practices
-- Start with clear, high-level tasks so the agent understands your goal.
-- Review the draft plan carefully to ensure requirements and constraints are covered.
-- Refine and iterate on the plan before approving it for implementation.
-- Use the todo list to track progress and keep long tasks organized.
-- Give clarifying instructions during execution to guide the agent effectively.
+* Select **Start Implementation** button
+* The command will appear in the chat box and execute automatically
+* The mode will automatically switch to **Agent Mode** for execute your plan.
+
+ **Note:** For more information, refer to the [Syncfusion Code Studio Agent Mode](/code-studio/features/agent)
+
+ 
+
+#### Option B: Open in Editor
+
+* Select the Open in Editor button.
+* The plan details will open in a new editor window.
+
+* Review the plan, clarify details, and make iterations as needed.
+
+* Choose Save as Prompt File.
+
+* The file will be stored in your workspace or globally for future use.
+
+ 
+
+## Related Features
+
+### Agent Mode
+
+* Executes the approved plan with AI-powered code generation
+* Automatically activated after plan approval
+
+ **Note:** For more information on agent mode features, visit the [Syncfusion Code Studio Agent Mode](/code-studio/features/agent).
+
+### Ask Mode
+
+* Ask is optimized for answering questions about your codebase, coding, and general technology concepts
+* Use Ask when you want to understand how something works, explore ideas, or get help with coding tasks
+
+ **Note:** For more information on ask mode features, visit the [Syncfusion Code Studio Ask Mode](/code-studio/features/ask).
diff --git a/code-studio/features/quickfix.md b/code-studio/features/quickfix.md
deleted file mode 100644
index f0bf935..0000000
--- a/code-studio/features/quickfix.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Syncfusion Code Studio Quickfix
-description: Plan Mode in Syncfusion Code Studio helps you design, review, and refine your steps before moving into execution.
-platform: syncfusion-code-studio
-keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation
----
-
-# Quick Fix
-
-Quick Fix is an intelligent, AI‑assisted error‑resolution feature built directly into your code editor. Whenever your code contains an error, warning, or suggestion, Quick Fix helps you correct it instantly—without needing to search online, rewrite code manually, or understand every detail of the error yourself.
-
-
-## Why Quick Fix?
-
-- Quick Fix exists to help developers resolve coding errors **quickly, accurately,** and with **minimal interruption** to their workflow.
-- It is designed to make debugging faster, easier, and less disruptive by providing targeted, **context‑aware solutions** right where you need them.
-
-
-## Key Benefits
-
-**Instant Error Detection** - The moment an error appears, Quick Fix becomes available. No need to open logs or manually track down the issue.
-
-**Inline Fix Preview** - Quick Fix shows exactly what will change before updating your file—you stay in control.
-
-**Context‑Aware AI Suggestions** - It understands your current file, the surrounding code, and coding patterns to offer accurate, relevant fixes.
-
-
-## How Quick Fix Works
-
-Quick Fix can be triggered in two ways:
-
-**1. Hover** - Move your mouse over the error underline. A tooltip appears with the **“Quick Fix”** option.
-
-
-
-
-Click **Quick Fix** to open the context menu.
-
-
-
-**2. Shortcut** - Place your cursor on the error and press **"Ctrl + ."** (Control + Period)
-
-This instantly brings up the Quick Fix actions.
-
-
-
-## Use Context Options
-
-### **1. Fix**
-Use **Fix** when you want a quick, focused correction in place.
-
-
-
-**What happens on selecting Fix?**
-
-- An inline suggestion appears near the error, showing the **proposed code changes**.
-- You can review the changes before applying.
-
-
-
-#### Your choices:
-
-- ✔ **Apply** — Accept the suggestion and update your code immediately.
-- ✖ **Close** — Dismiss the suggestion (no changes applied).
-- **Give prompt** — Provide additional instructions (e.g., “keep variable names unchanged”, “use async/await”) to refine the fix.
-
-
-
-
-### **2. Expand**
-Use **Expand** when you want a deeper explanation or a more comprehensive fix.
-
-
-
-**What happens on selecting Expand?**
-
-The AI opens the chat panel, runs a prompt tailored to the error, and:
-
-- Explains the likely **root cause**
-- Shows a **corrected code snippet**
-- Describes why the fix works, including **trade‑offs or impacts**
-
-
-
-#### How to proceed?
-
-- Review the explanation and proposed code
-- Copy/paste or apply the recommended changes
-
-
-
-## Best Practices
-
-1. **Use Fix for small, quick errors** - If it’s a typo, missing import, or wrong parameter, use **Fix** to stay in flow.
-
-2. **Use Expand for learning or complex issues** - When the error is confusing or affects multiple files, choose **Expand** for a full explanation.
-
-3. **Always review the suggested diff** - Ensure the changes match your expectations—especially in collaborative or critical files.
-
diff --git a/code-studio/features/telemetry.md b/code-studio/features/telemetry.md
index 723add1..d3dd6ed 100644
--- a/code-studio/features/telemetry.md
+++ b/code-studio/features/telemetry.md
@@ -7,6 +7,7 @@ keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productiv
# Telemetry
+## Overview
Syncfusion Code Studio collects anonymous usage data to improve product quality and user experience. This data helps the development team understand feature usage, identify performance issues, and prioritize enhancements.
Telemetry collection is optional and can be disabled at any time by the user.
diff --git a/code-studio/getting-started/gettingstarted-images/overview-gif.gif b/code-studio/getting-started/gettingstarted-images/overview-gif.gif
new file mode 100644
index 0000000..45b8f60
Binary files /dev/null and b/code-studio/getting-started/gettingstarted-images/overview-gif.gif differ
diff --git a/code-studio/getting-started/install-and-configuration.md b/code-studio/getting-started/install-and-configuration.md
index 68ee9d4..e874f75 100644
--- a/code-studio/getting-started/install-and-configuration.md
+++ b/code-studio/getting-started/install-and-configuration.md
@@ -80,3 +80,11 @@ After installing Code Studio, you can start using it immediately.
- Choose the subscription plan you prefer.
To know more about the Code Studio Subscription plans, click on **View Subscription Options**.
+
+## Next Steps
+
+Once you have installed Syncfusion Code Studio, the following topics will help you explore its features and get the most out of your development workflow:
+
+[Generate you first code change using agent](/code-studio/tutorials/generate-your-first-code-using-agent)
+
+[Build your first UI using Syncfusion UI Builder](/code-studio/tutorials/build-ui-using-syncfusionui-builder)
\ No newline at end of file
diff --git a/code-studio/getting-started/feature-summary.md b/code-studio/getting-started/overview.md
similarity index 68%
rename from code-studio/getting-started/feature-summary.md
rename to code-studio/getting-started/overview.md
index 4c6b0d0..bd69e92 100644
--- a/code-studio/getting-started/feature-summary.md
+++ b/code-studio/getting-started/overview.md
@@ -1,22 +1,37 @@
---
-title: Code Studio Features
+title: Code Studio Overview
description: Learn about all key features of Syncfusion Code Studio including Autocomplete, Ask, Edit, Agent, Plan, Generate Code, Quick Fix, UI Builder, and Custom Agents.
platform: syncfusion-code-studio
keywords: "syncfusion code studio features, ai powered ide, code generation, ai agents, quick fix, autocomplete, plan mode"
---
-# Code Studio Features
+# Welcome to Syncfusion Code Studio
-Syncfusion Code Studio is a next‑generation AI‑powered Integrated Development Environment (IDE), designed to supercharge developer productivity. With built‑in AI assistance, Syncfusion Code Studio understands your codebase, provides context‑aware suggestions, and automates tasks such as UI generation, bug fixing, and documentation — all while keeping developers in control.
+## Overview
-Deeply integrated with Syncfusion’s rich component library, Syncfusion Code Studio empowers teams to build robust, scalable applications with speed and precision.
+- Syncfusion Code Studio is an AI-powered integrated development environment (IDE) with built-in assistance to support modern software development workflows. It understands your codebase and provides context-aware suggestions to help you design, implement, and refine features—while keeping developers in control.
+
+- Deeply integrated with Syncfusion’s component library, Code Studio helps teams build robust, scalable applications by automating common tasks such as UI generation, bug fixing, and documentation.
+
+
+
+## What can you do with Code Studio
+
+- **Generate code:** Drafts code snippets and scaffolding to reduce repetitive work.
+- **Implement features:** Turn ideas into complete, working solutions with AI‑assisted development.
+- **Find and fix errors:** Detects common issues and proposes fixes to help you resolve problems quickly.
+- **Explain code:** Breaks down code line by line or function by function to improve understanding and maintainability.
+
+By combining these capabilities, Code Studio helps you write cleaner, more accurate code while staying focused and productive.
## Key Features
+Working with Code Studio will give you hands-on experience in the following areas:
+
- **Autocomplete Mode**: AI‑powered code suggestions as you type, based on your current project.
Learn more on the [Autocomplete](/code-studio/features/autocomplete) page.
-- **Ask Mode**: Get quick answers, explanations, and readytouse code snippets through simple questions in the IDE—no project files required.
+- **Ask Mode**: Get quick answers, explanations, and ready-to-use code snippets through simple questions in the IDE—no project files required.
Learn more on the [Ask](/code-studio/features/ask) page.
- **Edit Mode**: Use AI prompts to modify source code with previewed changes, letting you keep or undo each edit for precise control and high accuracy.
@@ -43,8 +58,8 @@ See [Tools](/code-studio/reference/configure-properties/toolssupport).
- **Checkpoints**: Automatically capture, compare, and restore your workspace state to track changes and recover easily.
Learn more in [Checkpoints](/code-studio/features/checkpoints).
-- **Inline Edit**: Apply AI‑powered fixes, optimizations, and docs right from the editor’s context menu.
-See [Inline Edit](/code-studio/features/inline).
+- **Inline Chat**: Apply AI‑powered fixes, optimizations, and docs right from the editor’s context menu.
+See [Inline Chat](/code-studio/features/inlinechat).
- **Telemetry**: Anonymous usage analytics to improve product quality; can be disabled anytime.
See [Telemetry](/code-studio/features/telemetry).
@@ -53,12 +68,18 @@ See [Telemetry](/code-studio/features/telemetry).
Learn more on the [Generate Code](/code-studio/features/generatecode) Generate Code page.
- **Quick Fix**: Instantly detect and resolve errors with context‑aware AI suggestions, inline previews, and explanations—so you can fix issues without leaving your editor.
-Learn more on the [Quick Fix](/code-studio/features/quickfix) page.
+Learn more on the [Quick Fix](/code-studio/how-to-guides/quick-fix-error) page.
-- **MCP Integration**: Discover and manage servers via the [MCP Marketplace](/code-studio/reference/configure-properties/mcp/marketplace) or connect [Custom Servers](/code-studio/reference/configure-properties/mcp/customservers) including Remote, NPM, and Local.
+- **MCP Integration**: Discover and manage servers via the [MCP Marketplace](/code-studio/reference/configure-properties/mcp/marketplace) or connect [Custom Servers](/code-studio/reference/configure-properties/mcp/customservers) including NPM package,pip package, docker image, HTTP, command.
- **Custom Agent**: Pre‑configured AI agents for specific tasks that follow fixed rules, tools, and behaviors—ensuring consistent, repeatable workflows across teams. Learn more on the [Custom Agent](/code-studio/reference/configure-properties/custom-agents) page.
- **Custom Instructions**: Custom instructions define reusable guidelines that shape how AI generates code and performs development tasks, eliminating the need to repeat context in every prompt. They can be applied automatically to all chats, targeted to specific files, or manually attached to individual prompts. Learn more on the [Custom Instructions](/code-studio/reference/configure-properties/custom-instructions) page.
-- **Custom Prompts**: Prompt files are on‑demand, reusable Markdown prompts that standardize specific development tasks like code generation and reviews. Learn more on the [Custom Prompt](/code-studio/reference/configure-properties/custom-prompt) page.
\ No newline at end of file
+- **Custom Prompts**: Prompt files are on‑demand, reusable Markdown prompts that standardize specific development tasks like code generation and reviews. Learn more on the [Custom Prompt](/code-studio/reference/configure-properties/custom-prompt) page.
+
+## Get started
+
+Ready to try Code Studio?
+
+- Go to the [Quick Start](/code-studio/getting-started/quick-start) page to set up Code Studio and create your first code snippet with AI assistance.
\ No newline at end of file
diff --git a/code-studio/getting-started/quick-start.md b/code-studio/getting-started/quick-start.md
index 990e584..ad3e07c 100644
--- a/code-studio/getting-started/quick-start.md
+++ b/code-studio/getting-started/quick-start.md
@@ -8,23 +8,8 @@ keywords: ask-code-studio, error-resolution, ai-debugging, code-quality, develop
# Quick Start Guide about Syncfusion Code Studio
-Start using **Syncfusion Code Studio** in minutes and unlock AI‑powered coding that accelerates your development process.
-
-
-## Overview
**Syncfusion Code Studio** is an intelligent, AI‑powered coding companion designed to make your development process faster and easier. Instead of writing every line manually or searching for solutions, Code Studio works alongside you—understanding your intent, offering meaningful suggestions, and helping you learn as you build.
-This assistant supports developers of all skill levels whether you're writing your first lines of code or managing complex enterprise applications.
-
-With the help of advanced AI, Code Studio can:
-
-- **Generate code** for you, reducing repetitive tasks
-- **Identify and fix errors** automatically
-- **Explain your code**, line by line or function by function
-
-It helps you write cleaner, more accurate code while staying focused and productive.
-
-
## Prerequisites
Before getting started, make sure that:
@@ -38,6 +23,14 @@ Before getting started, make sure that:
3. **Basic familiarity with writing code**
You don’t need to be an expert—just comfortable editing files and understanding simple programming concepts.
+## What You’ll Learn
+By the end of this quick start guide, you’ll learn how to:
+
+- Load a workspace into your development environment to access its files and resources
+- Access and use the core AI-powered coding features: Autocomplete, Ask, Edit, Agent, and Plan
+- Generate, explain, refactor, and fix code using natural language instructions
+- Perform targeted code improvements with Inline Chat directly in the editor
+- Add necessary files or folders from your workspace as context to make AI suggestions more accurate and project-aware
## Step 1: Open a Project in Code Studio
@@ -55,7 +48,14 @@ Follow the steps below to open your project and start working inside the Code St
5. **Or you can directly open your project folder using 'Open Folder' button under the Code Studio logo**
-### Result :
+
+> **Note: Open folder directly from File Explorer / Finder using terminal**
+> - **Windows**
+> In File Explorer → type `cmd` in the address bar → Enter → then run: `sfcode .`
+>- **macOS**
+> Right-click inside folder → Services → New Terminal at Folder → then run: `sfcode .`
+
+### Result:
Your selected project will open in the editor where you can:
- Browse files in the Explorer sidebar
@@ -86,7 +86,7 @@ This reduces typing effort and ensures consistency.
*Learn more about [Autocomplete](/code-studio/features/autocomplete)*
-### 2. Ask
+### 2. Ask Mode
- Ask mode allows you to communicate with the AI using natural language and receive accurate, context‑aware help.
@@ -106,7 +106,7 @@ This reduces typing effort and ensures consistency.
- You can update logic, restructure components, clean up syntax, or improve performance without editing manually.
Code Studio shows suggested changes clearly, letting you apply or undo them step by step.
-**For Example:** Give, *“Simplify this function using early returns”* as pompt, Edit Mode rewrites it neatly while preserving behavior.
+**For Example:** Give, *“Simplify this function using early returns”* as prompt, Edit Mode rewrites it neatly while preserving behavior.
@@ -142,16 +142,16 @@ Ideal for scaffolding features, refactoring modules, or managing structured work
- Inline Chat allows localized edits directly next to your code.
- Highlight text and ask for improvements, optimizations, or rewrites without switching views.
-**Fo Example:** Select a loop and ask, *“Optimize this for better performance.”*
+**For Example:** Select a loop and ask, *“Optimize this for better performance.”*
You’ll see improved code inline with **Accept** and **Dismiss** options.
-*Learn more about [Inlinechat](/code-studio/features/inlinechat)*
+*Learn more about [Inline Chat](/code-studio/features/inlinechat)*
## Add Context
-- Add Context lets Code Studio understand more of your project by including additional files or folders in the request.
+- Add Context lets Code Studio understand more of your project by including additional files or folders from your workspace in the request.
- This leads to smarter, interconnected suggestions.
@@ -163,7 +163,7 @@ You’ll see improved code inline with **Accept** and **Dismiss** options.
## Next Steps
-- Now that you've explored the basics:
+Now that you've explored the basics:
- Learn how to create your first automated change with [Agent](/code-studio/features/agent).
diff --git a/code-studio/how-to-guides/Configure-default-model.md b/code-studio/how-to-guides/Configure-default-model.md
new file mode 100644
index 0000000..d8dca7c
--- /dev/null
+++ b/code-studio/how-to-guides/Configure-default-model.md
@@ -0,0 +1,64 @@
+---
+title: Configure Default Model
+Description: Guide to Setting a default model ensures that your preferred model appears as the pre-selected option in the model dropdown menu.
+platform: syncfusion-code-studio
+keywords: default model, model selection, configuration
+---
+
+# Configuring Default Models
+
+## Overview
+
+This guide explains how to configure default models using API keys (BYOK – Bring Your Own Key) from your chosen provider into Code Studio Enterprise. You'll learn how to set default models for different modes to streamline your workflow.
+
+## When to Use Default Models
+
+Setting a default model ensures that your preferred model appears as the pre-selected option in the model dropdown whenever Code Studio IDE opens or reopens. While you can switch to another model during a session, the default model will be automatically restored the next time you start Code Studio.
+
+## Prerequisites
+
+Before starting, ensure:
+
+* Syncfusion Code Studio is installed and configured on your system. If you have not yet downloaded Code Studio, refer to the [Syncfusion Code Studio Install and Configure](https://help.syncfusion.com/code-studio/getting-started/install-and-configuration)
+* You have a valid API key from the chat model provider you want to use (e.g., [OpenAI](https://platform.openai.com/api-keys), [Anthropic](https://console.anthropic.com/dashboard), [OpenRouter](https://openrouter.ai/settings/keys)).
+
+## Steps for Configure Default Models
+
+### Step 1: Open Code Studio Enterprise Server dashboard
+
+* Launch [Code Studio Enterprise Server](https://app.sfcodestudio.com/dashboard)
+
+
+
+### Step 2: Set Default Models
+
+* Go to the [Models](https://app.sfcodestudio.com/models) section and click Manage Default Settings.
+
+ **Note**: If you have not configured your model, please refer to [Configure LLM Providers and Models in Syncfusion Code Studio]( https://help.syncfusion.com/code-studio/enterprise-server/providersandmodels ) for guidance on adding models.
+
+ 
+
+* After selecting Manage Default settings, a popup appears with options to configure the default models for Chat and Autocomplete.
+
+ 
+
+
+
+* Choose a default model for each mode:
+ * Chat Mode
+
+
+
+ * Autocomplete Mode
+
+
+* Click Update to save your default model preferences.
+
+ 
+
+* You have successfully configured your default models! Your selected models will now appear automatically when you launch Code Studio IDE.
+
+ 
+
+
+* You can change these defaults at any time by repeating Step 2.
diff --git a/code-studio/how-to-guides/add-BYOK-model.md b/code-studio/how-to-guides/add-BYOK-model.md
new file mode 100644
index 0000000..38ecd14
--- /dev/null
+++ b/code-studio/how-to-guides/add-BYOK-model.md
@@ -0,0 +1,123 @@
+---
+title: Add BYOK Model in Syncfusion Code Studio
+description: Admin guide to add BYOK (Bring Your Own Key) models and connect providers in Code Studio.
+platform: syncfusion-code-studio
+keywords: byok, add model, providers, configuration, admin, enterprise, syncfusion, code-studio, api keys, openai, anthropic,openrouter
+---
+
+# Add BYOK Model
+
+## Overview
+
+This guide provides step-by-step instructions for administrators to configure Large Language Model (LLM) providers within Code Studio using the **Bring Your Own Key (BYOK)** feature.
+
+> **Note:** Only administrators can configure LLM providers.
+
+## When to Use
+
+Use this guide when you need to:
+
+- Connect new LLM providers (e.g., OpenAI, Anthropic,Openrouter) to Code Studio.
+- Add custom models from your preferred AI providers for your organization.
+- Manage API keys for enterprise-level AI integrations.
+
+## Prerequisites
+
+Before you begin, ensure you have the following:
+
+- An active administrator account on Code Studio.
+- A valid API key from your LLM provider (e.g., OpenAI, Anthropic).
+- *(Optional)* An OpenRouter API key for accessing multiple models through a single integration. Follow the detailed instructions [here](/code-studio/enterprise-server/freemodel) to obtain an OpenRouter API key and view the list of recommended free models.
+
+## How to Add Byok Models
+
+### Step 1: Open the Dashboard
+
+1. Open **Code Studio** in your machine.
+
+2. Click the **Account** tab in the left top of application.
+ 
+
+
+3. Click **Open Dashboard** to access the dashboard.
+
+ 
+
+
+
+### Step 2: Add an LLM Provider
+
+Follow these steps to add a new LLM provider to Code Studio:
+
+1. Navigate to the **LLM Keys** page under the **BYOK** section in the admin dashboard.
+
+ 
+
+2. Click the **Add LLM Key** button.
+
+ 
+
+3. In the dialog box, enter the following details:
+
+ | Field | Description |
+ |-------|-------------|
+ | **Provider Name** | Enter the name of the LLM provider (e.g., OpenAI, Anthropic, Openrouter). |
+ | **API Key** | Paste the API key provided by your LLM service. |
+
+4. Click **Add** to save the provider configuration.
+
+ 
+
+5. Once added successfully, the provider becomes available for model selection.
+
+
+### Step 3: Add a Model
+
+After configuring your LLM provider, follow these steps to add a model:
+
+1. Navigate to the **Models** page under the **BYOK** section.
+
+ 
+
+2. *(Optional)* Use the search bar to find a specific model by name.
+
+3. Click the **Add Model** button.
+
+ 
+
+4. In the form, configure the following options:
+
+ | Field | Description |
+ |-------|-------------|
+ | **Provider** | Select from the list of configured LLM providers. |
+ | **Model** | Choose a model from the dropdown list. Each model displays its input and output token costs. |
+ | **Modes** | Select the usage modes: **Chat**, **Autocomplete**, or both. This is a multi-select field. |
+
+5. Click **Add** to include the model in your BYOK model list.
+
+
+
+### Step 4: Verify the Model in Code Studio IDE
+
+After adding the model, verify that it appears in the Code Studio IDE:
+
+1. Open the **Code Studio IDE**.
+
+2. Click the **model selection dropdown** in the chat or editor panel.
+
+3. Scroll to the **BYOK Models** section to find your newly added model.
+
+ 
+
+4. If the model is not listed, click **Refresh Models** to sync the latest configurations.
+
+> **Tip:** After refreshing, your BYOK model should appear and be ready for use in Chat based on your configuration.
+
+
+
+## Related links
+
+- Learn how to [configure default models](/code-studio/how-to-guides/Configure-default-model) for your team.
+- Explore [provider and model management](/code-studio/enterprise-server/providersandmodels) for advanced configurations.
+- [Free Models with OpenRouter](/code-studio/enterprise-server/freemodel)
+- [User and Team Management](/code-studio/enterprise-server/userandteams)
diff --git a/code-studio/how-to-guides/add-local-model.md b/code-studio/how-to-guides/add-local-model.md
new file mode 100644
index 0000000..015a01c
--- /dev/null
+++ b/code-studio/how-to-guides/add-local-model.md
@@ -0,0 +1,76 @@
+---
+title: How to Add Personal Models
+description: Learn how to add and manage your own AI models in Code Studio using API keys from providers like OpenAI and Anthropic.
+platform: syncfusion-code-studio
+keywords: how-to, BYOK, personal-models, API-keys
+---
+
+# Add Models for Personal Use
+
+## Overview
+
+Personal models in Code Studio allow you to integrate AI models from various providers using your own API keys. This feature gives you access to specific models that may not be available in your organization's configuration. You can add, manage, and use these models alongside your organization's models for enhanced flexibility and experimentation.
+
+## When to Use
+
+Use personal models when you need to:
+
+- Experiment with specific models for personal projects
+- Access models when they are not available in your organization’s configuration
+- Compare different providers and model capabilities
+- Match models to unique coding or cost requirements
+
+## Prerequisites
+
+- Valid API keys from your chosen provider (e.g., OpenAI, Anthropic)
+- Active provider account with sufficient credits or quota
+
+## How To Add a Personal Model?
+
+1. Click the model’s section dropdown and select `Manage Models`.
+
+ 
+
+2. Choose your preferred Provider (e.g., OpenAI, Anthropic).
+
+ 
+
+3. Enter your API Key for the selected provider.
+
+ 
+
+ > **Note:** Ensure the API key is valid and correct.
+
+4. After adding the key, available models will be listed. Choose the models you want from the list.
+
+ 
+
+5. Click `OK` to add the selected model(s).
+
+ 
+
+6. The added models appear under `Other Models`. You can use them like any built‑in or organization‑configured model.
+
+ 
+
+## How To Remove a Personal Model?
+
+1. Open `Manage Models` from the model’s dropdown section.
+
+ 
+
+- In the **Manage Language Models** dialog that appears at the top, Choose **Ollama** from the provider list
+
+ 
+
+- The available locally installed models will appear in the dialog. You can select the installed ollama model in a model list, then click ok to confirm and close the dialog.
+
+
+
+- The selected Ollama model will now automatically appear in the main **model dropdown** under the **Other Models** section and you can start using it right away.
+
+
\ No newline at end of file
diff --git a/code-studio/how-to-guides/budget-alert.md b/code-studio/how-to-guides/budget-alert.md
new file mode 100644
index 0000000..db9ded0
--- /dev/null
+++ b/code-studio/how-to-guides/budget-alert.md
@@ -0,0 +1,118 @@
+---
+title: Set Budget Alerts
+Description: Set Budget Alerts lets administrators notify teams or individual users by email when budget usage reaches a configured threshold.
+platform: syncfusion-code-studio
+---
+
+# Set Budget Alerts
+
+## Overview
+
+Administrators can set up alerts for a team or a specific user to get notified when budget usage exceeds a defined threshold. Team alerts are emailed to the recipient you choose; individual user alerts are emailed to that user’s email address.
+
+## When to use
+
+Use budget alerts when you want an email notification as soon as spending crosses a defined threshold.
+
+- **Team budgets:** Use this when a team shares a budget and you want alerts to go to a chosen recipient who can take further action.
+- **Individual user budgets:** Use this when you want the individual user to be notified about their own budget usage so they can adjust their usage, ask queries efficiently and appropriately, and avoid unnecessary credit usage.
+
+## Prerequisites
+
+- **Code Studio account:** You must have a Code Studio account. If you don’t have one, sign up using the [Getting Started](/code-studio/getting-started/install-and-configuration) guide.
+- **Admin access:** Only administrators can create, edit, and assign budgets.
+- **Team/user available:** Ensure the team or individual user is part of the organization, so you can assign the budget and set the alert.
+- **Budget configured:** Refer to the [Create Budget](/code-studio/enterprise-server/createbudget) guide to create and assign a budget for the team or the individual user before setting an alert.
+
+## Steps to Configure Budget Alerts for Teams and Individual Users
+
+### Steps to Configure Budget Alerts for Teams:
+
+**Step 1:** Go to the **Budget tab** in CodeStudio dashboard. Team budgets are displayed on a table, with a **three-dot (More options)** menu on the right side of each row.
+
+
+
+**Step 2:** Click the **three-dot (More options)** icon. The following options are displayed: **Edit Budget, Set Alert, and Delete**.
+
+
+
+**Step 3:** Click **Set Alert**.
+
+
+
+**Step 4:**
+The **Set Alert** dialog box opens. You can configure alerts to be triggered when budget usage reaches **25%, 50%, 75%,** or **100%** of the budget limit you created.
+
+Now, let’s create a budget alert for the **Frontend team** that triggers when **50%** of the team’s budget limit is reached. Follow the steps below.
+
+1. Turn the toggle **On**. Two input fields are displayed; enter the required values in both fields.
+
+ 
+
+ - **Email subject:** Enter the email subject line that will appear in the alert email.
+ - **Send alerts to:** Select the users in the team who should receive the alert email.
+
+ 
+
+2. Click **Set**.
+
+### How to Verify and Manage Budget Alerts?
+
+To verify that a budget alert is created and to modify an existing alert, follow these steps,
+
+- In the **Budget** tab, hover over the team name. A **navigate** icon appears—click it to open the team’s **Budget** details window.
+
+
+
+- In the team’s Budget window, view the configured **Usage Alerts**. When you hover over an alert percentage, the UI displays the user(s) who will receive the alert email.
+
+
+
+- To modify an alert, click **Manage Alert**, update the alert details (for example, add another recipient), and then click **Update** to save the changes.
+
+
+
+### Steps to Configure Budget Alert for Individual Users in a team:
+
+**Step 1:** In the **Budget** tab, hover over the team name. A **navigate** icon appears—click it to open the team’s **Budget** details window.
+
+
+
+**Step 3:** Follow the same steps as setting a team budget alert (Steps 1–2). Enter the **Email subject**; the **Send alerts to** field is automatically prefilled with the individual user’s email.
+
+
+
+### How to Manage Budget Alerts for Individual Users?
+
+1. Click the three-dot (More options) menu on the right side of the user’s row in **Team Member Budgets** section.
+
+ 
+
+2. Click the three-dot (More options) icon. The following options are displayed: **Edit Budget** and **Manage Alert**.
+
+ 
+
+3. Click **Manage Alert**. Update the alert settings (for example, turn **50% Off** and turn **75% On**), enter the required values in the input fields, and then click **Update** to save the changes.
+
+ 
+
+**Individual User Budget Alert Email:**
+
+
+
+
+
diff --git a/code-studio/how-to-guides/buy-more-credits.md b/code-studio/how-to-guides/buy-more-credits.md
new file mode 100644
index 0000000..b95efdb
--- /dev/null
+++ b/code-studio/how-to-guides/buy-more-credits.md
@@ -0,0 +1,48 @@
+---
+title: Buy More Credits
+description: Guide on purchasing additional credits for AI model usage in Syncfusion Code Studio Enterprise.
+platform: syncfusion-code-studio
+keywords: buy credits, add credits, purchase credits, code studio enterprise, ai model usage, billing, subscription
+---
+
+# Buy More Credits in Code Studio
+
+## Overview
+
+Credits in Syncfusion Code Studio Enterprise are add-on units that fund AI model usage across your organization. They provide flexibility beyond the standard [subscription plans](/code-studio/enterprise-server/settings), allowing you to scale your AI-powered coding operations as needed. Once purchased, credits are immediately applied to your account after successful payment, and your current balance is visible at the top of the [dashboard](https://app.sfcodestudio.com/dashboard).
+
+
+## When to Use
+
+Purchase additional credits when:
+
+- Your organization’s monthly AI usage has exceeded the credits included in your current subscription plan
+- You want to avoid any interruption in AI model access during peak development periods
+- Your current credit balance is running low and you want to top it up quickly
+
+## Prerequisites
+
+- You must have administrative access to the Settings area in Code Studio Enterprise, this access typically available to organization [admins](https://help.syncfusion.com/code-studio/how-to-guides/invite-new-user#step-5--select-role).
+- Ensure you have a valid payment method.
+
+## Steps to Buy Credits
+
+1. **Navigate to the Credits Tab:** From the Code Studio dashboard, click on "Settings" in the left sidebar, then select the "Credits" tab.
+
+ 
+
+2. **Choose Purchase Amount:** Select a preset amount ($50, $100, or $500) or enter a custom dollar value in the provided field.
+
+ 
+
+3. **Initiate Purchase:** Click the "Buy credits" button to be redirected to the secure payment page.
+
+ 
+
+4. **Complete Checkout:** Enter or confirm your payment details and finalize the transaction.
+
+ 
+
+5. **Verify Application:** After successful payment, the new credits will be automatically added to your organization's balance. Refresh the page if needed to see the updated total.
+
+ 
\ No newline at end of file
diff --git a/code-studio/how-to-guides/daily-cost-usage.md b/code-studio/how-to-guides/daily-cost-usage.md
new file mode 100644
index 0000000..401e105
--- /dev/null
+++ b/code-studio/how-to-guides/daily-cost-usage.md
@@ -0,0 +1,82 @@
+---
+title: "Track Daily Cost and Token Usage"
+description: "How to view and filter daily costs and token usage in Syncfusion Code Studio"
+classification: "User Guide - How To Documentation"
+platform: syncfusion-code-studio
+keywords: cost-usage, daily-cost, token-usage, budget, dashboard, analytics
+---
+
+# Daily Cost and Token Usage
+
+## Overview
+Daily cost and token tracking provide visibility into your AI usage and the associated costs.
+It shows you:
+- How many tokens you used today in total.
+- How much that usage costs.
+- Whether your usage is normal or unusual.
+- How to control or reduce costs.
+
+This helps you save money, improve prompts, and stay within budget limits.
+
+## When to Use
+Use this tracking process when:
+- You need to monitor AI usage costs on a daily basis.
+- You're deploying LLM-based applications that may generate unpredictable or dynamic usage.
+- You want to optimize prompt efficiency or identify expensive operations.
+
+## Prerequisites
+Ensure the following prerequisites are met before tracking daily cost and token usage in Code Studio:
+- Syncfusion Code Studio is installed (see the [installation guide](/code-studio/getting-started/install-and-configuration)).
+- You are signed in to Code Studio.
+- You can access the Dashboard from within Code Studio Settings Account tab.
+- The Usage, Cost, and Tokens sections are visible on the dashboard.
+
+## Steps to Check Daily Cost and Token Usage
+Follow these steps to view your daily cost and token usage in Code Studio:
+
+### Step 1: Open Code Studio
+- Launch Code Studio from your workspace or project environment.
+- Ensure you are logged in with the correct user credentials.
+
+### Step 2: Open Account Settings
+- In the top-right corner of Code Studio, click your **avatar**.
+
+
+
+- This opens the Account tab within the Settings page.
+
+### Step 3: Navigate to the Dashboard
+- In the Account section, click **Dashboard**.
+
+- You are redirected to the web dashboard where cost and usage information is displayed.
+
+### Step 4: Select a Dashboard View
+- In the dashboard, choose either the `Premium Model` or `Bring Your Own Key` tab.
+
+ 
+
+### Step 5: Select Today’s Date
+- In the dashboard, locate the date filter at the top of the page.
+- Click the date field and select **Today**.
+
+
+### Step 6: Select your name in the User field.
+
+- The dashboard refreshes to show today’s cost usage.
+
+### Step 7: View Daily Cost Usage
+- After setting the date to **Today**, you see the total cost incurred today.
+- This section represents your daily cost usage.
+
+
+### Step 8: Scroll down to view Token Usage
+- Scroll down the dashboard page.
+- Below the cost summary, you will find the Token Usage section.
+
+Here is what you can track:
+ - Token usage across different models you used today (hover over a model name).
+ - Input vs. output token breakdown.
+ - Total tokens consumed.
+ - Model-specific token consumption trends.
+
+> **Note:** To Check **BYOK** models cost and token usage, select the BYOK option at the top of the dashboard and repeat steps 5–8.
diff --git a/code-studio/how-to-guides/howtoguide-images/Avator-icon1.png b/code-studio/how-to-guides/howtoguide-images/Avator-icon1.png
new file mode 100644
index 0000000..f88617b
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/Avator-icon1.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/Dashboard-View.png b/code-studio/how-to-guides/howtoguide-images/Dashboard-View.png
new file mode 100644
index 0000000..b574d19
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/Dashboard-View.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/Dashboard-navigate1.png b/code-studio/how-to-guides/howtoguide-images/Dashboard-navigate1.png
new file mode 100644
index 0000000..531a6bd
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/Dashboard-navigate1.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/Date-filter1.png b/code-studio/how-to-guides/howtoguide-images/Date-filter1.png
new file mode 100644
index 0000000..e6c1107
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/Date-filter1.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/Provider_list.png b/code-studio/how-to-guides/howtoguide-images/Provider_list.png
new file mode 100644
index 0000000..3a75516
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/Provider_list.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/Token-consumed.png b/code-studio/how-to-guides/howtoguide-images/Token-consumed.png
new file mode 100644
index 0000000..22f7707
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/Token-consumed.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/account-button.png b/code-studio/how-to-guides/howtoguide-images/account-button.png
new file mode 100644
index 0000000..bcb17bb
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/account-button.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/added_credits.png b/code-studio/how-to-guides/howtoguide-images/added_credits.png
new file mode 100644
index 0000000..391174e
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/added_credits.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/apiKey.png b/code-studio/how-to-guides/howtoguide-images/apiKey.png
new file mode 100644
index 0000000..0c4bd20
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/apiKey.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/budget-alert-created-individual.png b/code-studio/how-to-guides/howtoguide-images/budget-alert-created-individual.png
new file mode 100644
index 0000000..5911fd6
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/budget-alert-created-individual.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/budget-tab-individual.png b/code-studio/how-to-guides/howtoguide-images/budget-tab-individual.png
new file mode 100644
index 0000000..558806c
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/budget-tab-individual.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/buy_credits_button.png b/code-studio/how-to-guides/howtoguide-images/buy_credits_button.png
new file mode 100644
index 0000000..8440742
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/buy_credits_button.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/byok-model-added.png b/code-studio/how-to-guides/howtoguide-images/byok-model-added.png
new file mode 100644
index 0000000..68e2114
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/byok-model-added.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/checkout_page.png b/code-studio/how-to-guides/howtoguide-images/checkout_page.png
new file mode 100644
index 0000000..5c9ac90
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/checkout_page.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/clickOk.png b/code-studio/how-to-guides/howtoguide-images/clickOk.png
new file mode 100644
index 0000000..0a668ca
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/clickOk.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/codestudio-model.png b/code-studio/how-to-guides/howtoguide-images/codestudio-model.png
new file mode 100644
index 0000000..8c4e670
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/codestudio-model.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/common-newchat.png b/code-studio/how-to-guides/howtoguide-images/common-newchat.png
new file mode 100644
index 0000000..1c00d3c
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/common-newchat.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/cost-usage.png b/code-studio/how-to-guides/howtoguide-images/cost-usage.png
new file mode 100644
index 0000000..bbc6e08
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/cost-usage.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/credits_tab.png b/code-studio/how-to-guides/howtoguide-images/credits_tab.png
new file mode 100644
index 0000000..d59121d
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/credits_tab.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/custom_amount.png b/code-studio/how-to-guides/howtoguide-images/custom_amount.png
new file mode 100644
index 0000000..e203e2c
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/custom_amount.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/dashboard-manage-autocomplete.png b/code-studio/how-to-guides/howtoguide-images/dashboard-manage-autocomplete.png
new file mode 100644
index 0000000..831738b
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/dashboard-manage-autocomplete.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/dashboard-manage-models.png b/code-studio/how-to-guides/howtoguide-images/dashboard-manage-models.png
new file mode 100644
index 0000000..f8318de
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/dashboard-manage-models.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/dashboard-manage-update.png b/code-studio/how-to-guides/howtoguide-images/dashboard-manage-update.png
new file mode 100644
index 0000000..05b0caf
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/dashboard-manage-update.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/dashboard-models.png b/code-studio/how-to-guides/howtoguide-images/dashboard-models.png
new file mode 100644
index 0000000..f585209
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/dashboard-models.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/dashboard.png b/code-studio/how-to-guides/howtoguide-images/dashboard.png
new file mode 100644
index 0000000..e882e00
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/dashboard.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/individual-user-email.jpg b/code-studio/how-to-guides/howtoguide-images/individual-user-email.jpg
new file mode 100644
index 0000000..8ea2a7a
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/individual-user-email.jpg differ
diff --git a/code-studio/how-to-guides/howtoguide-images/individual-user-email.png b/code-studio/how-to-guides/howtoguide-images/individual-user-email.png
new file mode 100644
index 0000000..b7dbcf6
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/individual-user-email.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/installed_model_list.png b/code-studio/how-to-guides/howtoguide-images/installed_model_list.png
new file mode 100644
index 0000000..665fe6c
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/installed_model_list.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser1.png b/code-studio/how-to-guides/howtoguide-images/inviteuser1.png
new file mode 100644
index 0000000..6fc8eac
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser1.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser2.png b/code-studio/how-to-guides/howtoguide-images/inviteuser2.png
new file mode 100644
index 0000000..dd0b508
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser2.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser3.png b/code-studio/how-to-guides/howtoguide-images/inviteuser3.png
new file mode 100644
index 0000000..07bcbaa
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser3.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser4.png b/code-studio/how-to-guides/howtoguide-images/inviteuser4.png
new file mode 100644
index 0000000..c63afe4
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser4.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser5.png b/code-studio/how-to-guides/howtoguide-images/inviteuser5.png
new file mode 100644
index 0000000..156fd4e
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser5.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser6.png b/code-studio/how-to-guides/howtoguide-images/inviteuser6.png
new file mode 100644
index 0000000..052d40b
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser6.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser7.png b/code-studio/how-to-guides/howtoguide-images/inviteuser7.png
new file mode 100644
index 0000000..56b6614
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser7.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser8.png b/code-studio/how-to-guides/howtoguide-images/inviteuser8.png
new file mode 100644
index 0000000..03fbe2f
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser8.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/inviteuser9.png b/code-studio/how-to-guides/howtoguide-images/inviteuser9.png
new file mode 100644
index 0000000..5d6fb0c
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/inviteuser9.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/manage-alert-individual-user.png b/code-studio/how-to-guides/howtoguide-images/manage-alert-individual-user.png
new file mode 100644
index 0000000..196e203
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/manage-alert-individual-user.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/manage-alert-option.png b/code-studio/how-to-guides/howtoguide-images/manage-alert-option.png
new file mode 100644
index 0000000..bc0f3df
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/manage-alert-option.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/manage-alert-three-dots-individual.png b/code-studio/how-to-guides/howtoguide-images/manage-alert-three-dots-individual.png
new file mode 100644
index 0000000..650ae87
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/manage-alert-three-dots-individual.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/manage-alert-update-teams.png b/code-studio/how-to-guides/howtoguide-images/manage-alert-update-teams.png
new file mode 100644
index 0000000..730e698
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/manage-alert-update-teams.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/manageModels.png b/code-studio/how-to-guides/howtoguide-images/manageModels.png
new file mode 100644
index 0000000..c896cf7
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/manageModels.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/modelList.png b/code-studio/how-to-guides/howtoguide-images/modelList.png
new file mode 100644
index 0000000..1fdb0b0
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/modelList.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/model_drop_down.png b/code-studio/how-to-guides/howtoguide-images/model_drop_down.png
new file mode 100644
index 0000000..d36d5b4
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/model_drop_down.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/model_in_drop_down.png b/code-studio/how-to-guides/howtoguide-images/model_in_drop_down.png
new file mode 100644
index 0000000..32fa005
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/model_in_drop_down.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/move.gif b/code-studio/how-to-guides/howtoguide-images/move.gif
new file mode 100644
index 0000000..307f622
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/move.gif differ
diff --git a/code-studio/how-to-guides/howtoguide-images/newchat1.gif b/code-studio/how-to-guides/howtoguide-images/newchat1.gif
new file mode 100644
index 0000000..c8893d2
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/newchat1.gif differ
diff --git a/code-studio/how-to-guides/howtoguide-images/newchat2.gif b/code-studio/how-to-guides/howtoguide-images/newchat2.gif
new file mode 100644
index 0000000..e962a46
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/newchat2.gif differ
diff --git a/code-studio/how-to-guides/howtoguide-images/newchat3.gif b/code-studio/how-to-guides/howtoguide-images/newchat3.gif
new file mode 100644
index 0000000..5f68f4a
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/newchat3.gif differ
diff --git a/code-studio/how-to-guides/howtoguide-images/open-dashboard.png b/code-studio/how-to-guides/howtoguide-images/open-dashboard.png
new file mode 100644
index 0000000..d09e44a
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/open-dashboard.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/otherModels.png b/code-studio/how-to-guides/howtoguide-images/otherModels.png
new file mode 100644
index 0000000..7242092
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/otherModels.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/quickfix.gif b/code-studio/how-to-guides/howtoguide-images/quickfix.gif
new file mode 100644
index 0000000..575058d
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/quickfix.gif differ
diff --git a/code-studio/how-to-guides/howtoguide-images/quickfixexplain.gif b/code-studio/how-to-guides/howtoguide-images/quickfixexplain.gif
new file mode 100644
index 0000000..c203a14
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/quickfixexplain.gif differ
diff --git a/code-studio/how-to-guides/howtoguide-images/selectProvider.png b/code-studio/how-to-guides/howtoguide-images/selectProvider.png
new file mode 100644
index 0000000..9577286
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/selectProvider.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/set-alert-individual.png b/code-studio/how-to-guides/howtoguide-images/set-alert-individual.png
new file mode 100644
index 0000000..1a04296
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/set-alert-individual.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/set-alert-option.png b/code-studio/how-to-guides/howtoguide-images/set-alert-option.png
new file mode 100644
index 0000000..13edf7b
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/set-alert-option.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/set-alert-teams.png b/code-studio/how-to-guides/howtoguide-images/set-alert-teams.png
new file mode 100644
index 0000000..19bb72e
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/set-alert-teams.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/set-alert-ui-teams.png b/code-studio/how-to-guides/howtoguide-images/set-alert-ui-teams.png
new file mode 100644
index 0000000..d28744e
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/set-alert-ui-teams.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/settingscredits.png b/code-studio/how-to-guides/howtoguide-images/settingscredits.png
new file mode 100644
index 0000000..d0cdc8e
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/settingscredits.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/showchat1.png b/code-studio/how-to-guides/howtoguide-images/showchat1.png
new file mode 100644
index 0000000..7a31e08
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/showchat1.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/showchat2.png b/code-studio/how-to-guides/howtoguide-images/showchat2.png
new file mode 100644
index 0000000..9077432
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/showchat2.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/team-alert-email.png b/code-studio/how-to-guides/howtoguide-images/team-alert-email.png
new file mode 100644
index 0000000..ba47892
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/team-alert-email.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/team-budget-window-usage-alert-created-teams.png b/code-studio/how-to-guides/howtoguide-images/team-budget-window-usage-alert-created-teams.png
new file mode 100644
index 0000000..afd1cb2
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/team-budget-window-usage-alert-created-teams.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/team-members-budget-section.png b/code-studio/how-to-guides/howtoguide-images/team-members-budget-section.png
new file mode 100644
index 0000000..51a30e2
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/team-members-budget-section.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/three-dots-icon-teams.png b/code-studio/how-to-guides/howtoguide-images/three-dots-icon-teams.png
new file mode 100644
index 0000000..09ab16e
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/three-dots-icon-teams.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/three-dots-option-teams.png b/code-studio/how-to-guides/howtoguide-images/three-dots-option-teams.png
new file mode 100644
index 0000000..c5299a7
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/three-dots-option-teams.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/update-alert-individual.png b/code-studio/how-to-guides/howtoguide-images/update-alert-individual.png
new file mode 100644
index 0000000..3aa6756
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/update-alert-individual.png differ
diff --git a/code-studio/how-to-guides/howtoguide-images/user-profile.png b/code-studio/how-to-guides/howtoguide-images/user-profile.png
new file mode 100644
index 0000000..d596f57
Binary files /dev/null and b/code-studio/how-to-guides/howtoguide-images/user-profile.png differ
diff --git a/code-studio/how-to-guides/invite-new-user.md b/code-studio/how-to-guides/invite-new-user.md
new file mode 100644
index 0000000..1cc6d87
--- /dev/null
+++ b/code-studio/how-to-guides/invite-new-user.md
@@ -0,0 +1,77 @@
+---
+title: "Invite New User to Your Organization"
+description: "Guide for administrators and team leads to invite new users, configure role, and streamline team member onboarding within an organization"
+platform: syncfusion-code-studio
+keywords: invite-users, code-studio, organization, syncfusion
+---
+# Invite New User to Your Organization
+## Overview
+This guide explains how administrators and team leads can invite new users to their organization. Invited users to gain access to the platform, allowing them to collaborate, join teams, and perform actions based on their assigned roles.
+
+## When to Use
+- Onboard new team members into your organization.
+
+## Prerequisites
+- You are an Admin or Team Lead.
+- You have the email address of the person you want to invite
+- Your Code Studio organization is active.
+- A modern web browser with internet access.
+
+
+## Steps to Invite a New User
+Follow these steps to invite a new user to your organization.
+
+### Step 1 : Open [Code Studio Dashboard](https://app.sfcodestudio.com/dashboard)
+
+### Step 2 : Open the Users Panel
+- Navigate to the **Users** section in your organization’s dashboard.
+
+
+
+### Step 3 : Click Invite Users
+- Click the **Invite Users** button at the top of the Users List.
+
+
+
+- A dialog box will appear.
+
+
+
+### Step 4 : Select a Team
+- Choose the team to which the new user should be added.
+
+
+
+- If no teams exist, click **Add Team**.
+
+
+
+- Enter a team name and click **Add Team**.
+
+
+
+### Step 5 : Select Role
+- Choose the user’s role (e.g., User, Team Lead, Admin).
+
+
+
+### Step 6 : Enter User’s Email
+- Type the email address of the person you want to invite and click **Add**.
+
+
+
+### Step 7 : Send the Invitation
+- Click **Invite** to send the request.
+
+
+
+### Step 8 : User Accepts the Invitation
+The invited user receives an email with an **“Accept Invite”** link.
+
+Once they complete onboarding:
+
+- They appear in your organization
+- They are added to the selected team
+- Their assigned role is applied
+
+The new user is now fully onboarded and ready to collaborate.
\ No newline at end of file
diff --git a/code-studio/how-to-guides/manage-chat-session.md b/code-studio/how-to-guides/manage-chat-session.md
new file mode 100644
index 0000000..1afb619
--- /dev/null
+++ b/code-studio/how-to-guides/manage-chat-session.md
@@ -0,0 +1,134 @@
+---
+title: Syncfusion Code Studio Checkpoints
+description: The Checkpoints feature in Syncfusion Code Studio allows you to automatically track, preview, and restore your workspace state at key moments.
+platform: syncfusion-code-studio
+keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, checkpoints, versioning, history, workspace, file-recovery, diff, restore
+---
+
+# Manage Chat Sessions
+
+## Overview
+
+A chat session is the history of your interactions with the AI within a single conversation and includes all prompts, responses, and context used during that conversation. Each chat session maintains its own history, allowing you to ask follow-up questions or refine your requests based on previous interactions.
+
+In this guide, you’ll learn how to:
+
+- Start a new chat session in different views (side bar, editor tab, window)
+- Move an existing chat between views
+- View and resume past sessions
+- Save or export a session
+- Turn a session into a reusable prompt
+
+
+
+## When to use
+
+- Start a new session when switching topics or needing a clean slate to avoid context bleed and compare alternatives.
+
+- Continue the same session when iterating on the same task and leveraging prior context for refinements.
+
+- Save and export: When you want to use the current chat session as prompts for reusable workflows.
+
+
+
+## Prerequisites
+
+- Syncfusion Code Studio installed and configured on your system. If you have not yet downloaded Code Studio, please refer to this link [Install and Configure](/code-studio/getting-started/install-and-configuration) for step-by-step instructions on downloading and configuring Code Studio.
+
+
+
+## How to Start a New Chat Session
+
+You can create a fresh conversation in the new chat session in the view that fits you. Choose based on how much space you need; how visible you want the chat to be.
+
+
+
+**1. Open a chat session in the side bar.**
+
+If you want to open a new chat session within a side bar, click: `New Chat (+) > New Session`.
+
+
+
+**2. Open a chat session as an editor tab.**
+
+If you want to open a new chat session in a separate editor tab, click: `New Chat (+) > New Chat Editor`.
+
+
+
+**3. Open a new chat session in a separate window.**
+
+If you want to open a new chat session in a separate new window, click: `New Chat (+) > Open in New Window`.
+
+
+
+## Move a Chat Session to a Different View
+
+You can move an existing chat session to a different view, such as from the Chat view to an editor tab or a separate window. This is useful when you want to change how you interact with the chat session or organize your workspace differently.
+
+- In the Chat view, select the ‘...’ icon and then select `Move Chat into Editor Area` or `Move Chat into New Window`.
+
+- In a chat editor, select the ‘...’ icon in the top-right corner of the editor tab, and then select `Move Chat into Secondary Side Bar`.
+
+- In a chat window, select the `Move Chat into Secondary Side Bar` button in the window title bar.
+
+
+
+**Use the following commands from the Command Palette**
+
+Open the Command Palette with `Ctrl+Shift+P` (Windows) or `Cmd+Shift+P` (macOS):
+
+- `Chat: Move Chat into Editor Area`
+- `Chat: Move Chat into New Window`
+- `Chat: Move Chat into Side Bar`
+
+
+## View and Resume Past Sessions
+
+When you create a new chat session, the previous conversation history is cleared. However, all your chat sessions are saved in the session history, allowing you to return to previous conversations and continue where you left off. This is useful when you want to review past interactions, reference previous responses, or resume a conversation from an earlier session.
+
+**Accessing Chat Sessions**
+
+- In the chat panel, click the three dots at the top of the chat window.
+
+- Select `Show Chats` to view available sessions.
+
+> **Note:** You can only see chat history for the workspace you currently have open. To view another workspace’s history, open that workspace and see that workspace's chat history. There is no global chat history across workspaces.
+
+
+
+
+
+## Save and Export Chat Sessions
+
+You can save chat sessions to preserve important conversations or reuse them later for similar tasks.
+
+**Export a chat session as a JSON file**
+
+You can export a chat session to save it for later reference or share it with others. Exporting a chat session creates a JSON file that contains all prompts and responses from the session.
+
+To export a chat session:
+
+1. Open the chat session you want to export in the Chat view.
+
+2. Open the Command Palette with Ctrl+Shift+P (Windows) or Cmd+Shift+P (macOS):
+
+3. Type ‘Chat: Export Chat…’ in the Command Palette.
+
+4. Choose a location to save the JSON file.
+
+Alternatively, you can copy individual prompts or responses to the clipboard by right clicking the message and selecting Copy. To copy the entire chat session in Markdown format, right-click the Chat view and select Copy All.
+
+
+**Save a chat session as a reusable prompt**
+
+You can save a chat session as a reusable prompt to reuse for similar tasks.
+
+1. Open the chat session you want to save in the Chat view.
+
+2. Type /savePrompt in the chat input box and press Enter.
+
+3. The command creates a .prompt.md file that generalizes your current chat conversation into a reusable prompt. The prompt file has placeholders where appropriate.
+
+Review and edit the generated prompt file as needed, then save it to your workspace.
+
+Learn more about prompt file in [Custom Prompts](/code-studio/reference/configure-properties/custom-prompt) documentation.
\ No newline at end of file
diff --git a/code-studio/how-to-guides/quick-fix-error.md b/code-studio/how-to-guides/quick-fix-error.md
new file mode 100644
index 0000000..d0469dd
--- /dev/null
+++ b/code-studio/how-to-guides/quick-fix-error.md
@@ -0,0 +1,126 @@
+---
+title: Quick Fix Your Errors
+description: Resolve syntax errors and code issues in Syncfusion Code Studio using the Quick Fix feature with AI assistance.
+platform: syncfusion-code-studio
+category: how-to-guide
+keywords: quick-fix, error-resolution, syntax-errors, code-assistance, debugging
+---
+
+# Quick Fix Your Errors
+
+This guide covers two distinct workflows in Syncfusion Code Studio: **Quick Fix** for fast, one-click corrections, and **Explain** for understanding the root cause with rationale and a proposed fix. Use them independently based on your goal—fix immediately, or learn why before you change code.
+
+## When to Use
+
+Use the Quick Fix feature when:
+
+- Your code contains **syntax errors** flagged by the editor.
+- You encounter **compiler or linter warnings** highlighted in the code editor.
+- You need quick resolution to unblock your development workflow.
+- You want AI-powered suggestions to understand and fix code problems.
+- You are working with unfamiliar syntax or language features.
+
+## Prerequisites
+
+Before using Quick Fix, ensure:
+
+- Syncfusion Code Studio is installed and configured. See [Install and Configure](/code-studio/getting-started/install-and-configuration) for setup instructions.
+- A code file with errors is open in the Code Studio editor.
+- The editor has identified and highlighted at least one error in your code.
+
+## Steps to Fix Error
+
+### Step 1: Identify the Error
+
+Code Studio automatically highlights errors with:
+
+- Red squiggly underlines beneath problematic code.
+- Error icons in the editor gutter or problems panel.
+- Descriptive error messages on hover.
+
+Locate the error you wish to fix in your code file.
+
+### Step 2: Open the Quick Fix Menu
+
+1. Click directly on the highlighted error or the error icon in your code.
+2. A Quick Fix icon (lightbulb) appears adjacent to the error.
+3. Click the Quick Fix icon to open the Quick Fix panel.
+
+### Step 3: Select the Fix
+
+1. Review the suggested fix displayed in the Quick Fix panel.
+2. The suggestion shows the proposed correction and a brief explanation.
+3. Click the fix to apply it. The AI analyzes the error context and applies the correction.
+
+### Step 4: Apply the Fix
+
+The selected fix is applied immediately to your code:
+
+- The error highlighting disappears.
+- The corrected code replaces the problematic code.
+- The file is marked as modified.
+
+### Step 5: Verify the Correction
+
+Review the corrected line to ensure:
+
+- The syntax is now valid.
+- The correction aligns with your intended code logic.
+- No new errors were introduced.
+
+### Demonstration
+
+
+
+## Steps for Explain
+
+1. Open the Quick Fix menu (lightbulb) for the highlighted error and select **Explain**.
+2. Review the AI analysis in the chat panel. It includes:
+ - A concise root-cause explanation.
+ - A corrected code snippet.
+ - Rationale describing why the fix works and any trade-offs.
+3. Apply or adapt the fix:
+ - Apply directly if the proposal matches your intent.
+ - Copy and paste the suggestion, then adjust to fit your code style or constraints.
+
+### Demonstration
+
+
+
+## Expected Outcomes
+
+### Quick Fix
+
+After completing these steps:
+
+- All highlighted errors on the corrected line are resolved.
+- The code syntax is valid and recognized by the editor.
+- The file remains in the correct state for compilation or further editing.
+- The problems panel no longer flags the corrected line.
+- Development workflow resumes without blocking issues.
+
+### Explain
+
+- You understand the underlying cause of the error.
+- You have a proposed fix with rationale.
+- You can apply a correction confidently or adapt it to your constraints.
+
+## Troubleshooting
+
+### The applied fix resolves the syntax error but changes the code logic unintentionally
+
+**Solution:** Manually revert the change using **Ctrl+Z** (or **Cmd+Z** on Mac) and select a different suggestion that better preserves your intended logic.
+
+### New errors appear after applying a fix
+
+**Solution:** The fix may have dependencies on other code sections. Review the newly highlighted errors and apply Quick Fix to each in sequence, or consult the error descriptions for context.
+
+### Quick Fix option does not appear when clicking the error
+
+**Solution:** Ensure Code Studio has fully analyzed the file. Wait a moment, then click the error again. If the issue persists, reload the file or restart Code Studio.
+
+### The Explain analysis does not match the surrounding context
+
+**Solution:** Provide more context by selecting a larger code region before invoking Explain, then re-run. Optionally, ask for an alternative with specific constraints in chat.
+
+>**Note:** For complex errors involving multiple interdependent issues, consider using Agent mode for more comprehensive code analysis and refactoring. See [Agent Mode](/code-studio/features/agent) for details.
diff --git a/code-studio/reference/configure-properties/configure-opensource-model.md b/code-studio/reference/configure-properties/configure-opensource-model.md
deleted file mode 100644
index ab18045..0000000
--- a/code-studio/reference/configure-properties/configure-opensource-model.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: How to Configure Open-source Models in Code Studio
-description: Instructions to configure open-source models within Syncfusion Code Studio. Use this feature to connect your preferred open-source model providers such as Ollama and LM Studio.
-platform: syncfusion-code-studio
-control: IDE
-documentation: Getting Started
-keywords: code, IDE, opensource, models, ollama, lmstudio
----
-
-
-
-
-# How to Configure Open-source Models in Code Studio
-
-## Purpose
-This guide provides step-by-step instructions to configure open-source models within Syncfusion Code Studio. Use this feature to connect your preferred open-source model providers such as Ollama and LM Studio.
-
-## When to Use
-• When you want free, unlimited usage with no API costs or rate limits – perfect for long coding sessions or agent workflows.
-
-• When you need full privacy – your code or data must never leave your computer (sensitive projects, company policy, or offline work).
-
-## Prerequisites
-Before starting, ensure you have system requirement to install open-source models.
-
-• Refer this documentation for system requirement to install LM Studio [System-Requirements](https://lmstudio.ai/docs/app/system-requirements)
-
-• Refer this documentation for system requirement to install Ollama
- - MacOS - [MacOS](https://docs.ollama.com/macos)
- - Windows - [Windows](https://docs.ollama.com/windows)
-
-• Minimum hardware guidance (approximate):
- - 8–16 GB RAM for small models; 32+ GB recommended for large models.
- - GPU recommended for best performance on large models (check provider docs for GPU requirements).
-
-## Download and Install steps
-Refer the documentation below to download and install Ollama and LM Studio in your machine.
-
-• [Ollama](https://docs.ollama.com/quickstart)
-
-• [LMStudio](https://lmstudio.ai/docs/app/basics)
-
-## Quick checklist before configuring
-• Provider runtime installed (Ollama or LM Studio).
-
-• At least one model downloaded/installed locally.
-
-• Recommended models – deepseek-r1, qwen 2.5
-
-• Code Studio up-to-date (latest stable release recommended).
-
-## Configure Ollama Model in Code studio
-• Click the model's section dropdown and click 'Add Chat Model' option.
-
-
-
-• In the Add Chat Model dialog box choose the provider as ollama and model as autodetect and click connect button.
-
- 
-
-• You can select the installed ollama model in a model list under Local Models category.
-
-
-
-## Configure LM Studio Model in Code studio
-• Click the model's section dropdown and click 'Add Chat Model' option.
-
- 
-
-• You can select the installed LM Studio model in a model list under Local Models category.
-
-
\ No newline at end of file
diff --git a/code-studio/reference/configure-properties/custom-agents.md b/code-studio/reference/configure-properties/custom-agents.md
index 12711ad..af62423 100644
--- a/code-studio/reference/configure-properties/custom-agents.md
+++ b/code-studio/reference/configure-properties/custom-agents.md
@@ -4,9 +4,9 @@ description: Custom Agent Mode in Syncfusion Code Studio is an autonomous AI ass
platform: syncfusion-code-studio
keywords: "code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation"
---
-# Custom Agent
+# Custom Agents
-Custom Agent are specialized versions of Syncfusion Code Studio that deliver consistent expertise across end-to-end workflows. They are assigned to specific tasks and retain their configuration throughout the process. This reduces setup time, enforces team standards, and makes outcomes repeatable.
+Custom Agents are specialized versions of Syncfusion Code Studio that deliver consistent expertise across end-to-end workflows. They are assigned to specific tasks and retain their configuration throughout the process. This reduces setup time, enforces team standards, and makes outcomes repeatable.
By switching to the right agent (e.g., Planner, Security Reviewer, Architect), you get the correct behavior, tool access, and expertise — without manual reconfiguration each time.
@@ -143,7 +143,22 @@ Select your preferred location → click **Continue**.
- Choose **CodeReview** from the list of agents.
- Make your changes and save.
----
+## Predefined Agents
+
+For a quick start, explore our public repository of predefined agent templates. The catalog is updated regularly—check the repo for the latest additions.
+
+### Available Predefined Agents
+
+Predefined agents are available in our GitHub repository:
+
+**🔗 [Browse Predefined Agents](https://github.com/syncfusion/code-studio-agent-library)**
+
+### How to Use Predefined Agents
+
+1. **Browse the Repository**: Visit the [agents repository](https://github.com/syncfusion/code-studio-agent-library) to explore available agents
+2. **Download Agent Files**: Copy the `.agent.md` files you want to use
+3. **Add to Your Project**: Place files in `YOUR-PROJECT/.codestudio/agents/` folder
+4. **Activate**: The agents will automatically appear in your agent dropdown once saved
## Best Practices for Agent Configuration
diff --git a/code-studio/reference/configure-properties/custom-instructions.md b/code-studio/reference/configure-properties/custom-instructions.md
index ca0c319..3c098ca 100644
--- a/code-studio/reference/configure-properties/custom-instructions.md
+++ b/code-studio/reference/configure-properties/custom-instructions.md
@@ -7,27 +7,29 @@ documentation: Getting Started
keywords: code, IDE, installation, windows, setup, getting-started
---
-# Custom Instruction
+# Custom Instructions
-**Custom Instruction** in Code Studio allow you to provide specific instructions that guide how the AI assistant behaves when working with your code. Instead of the AI making assumptions about your coding standards, architecture patterns, or project-specific requirements, you can explicitly define guidelines that ensure consistent, contextually appropriate responses.
-
-## What is Custom Instruction?
+## Purpose
+
+Custom Instructions allow you to define guidelines and rules that automatically influence how the AI generates code and handles development tasks in Syncfusion Code Studio.
+
+They serve the following key purposes:
-- **Define guidelines and rules** that automatically influence how AI generates code and handles development tasks.
-- **Reduce repeated context** by specifying instructions in a Markdown file instead of every chat prompt.
-- **Apply instructions automatically** to all chat requests or limit them to specific files.
-- **Attach instructions manually** to a specific chat prompt when needed.
+- Provide durable, project-specific guidance that the assistant follows automatically in every relevant interaction.
+- Reduce repeated context and instructions by specifying them once in a Markdown file instead of including them in every chat prompt.
+- Cut down on repetitive chat instructions by setting default behavior, coding style, preferred tools, naming conventions, project context, architecture rules, and more.
+- Give you the flexibility to manually attach instructions to a specific chat prompt when needed, while still benefiting from persistent repo-level defaults.
## Types of Instruction Files
There are two types of instruction files:
-### 1. Repository-wise Instructions
-- Apply rules to the entire repository.
+### 1. Project-wise Instructions
+- Apply rules to the entire project.
- Once configured, the AI assistant automatically follows these guidelines for **all chats** and **code contexts** in the repo.
- use this when you want one consistent set of standards across the whole project.
- **File Type:** `codestudio-instructions.md`
-- **Location:** `.codestudio/codestudio-instructions.md` (at the repository root)
+- **Location:** `.codestudio/codestudio-instructions.md` (at the project root)
### 2. Path-specific Instructions
- Apply rules only when certain files or folders are in context.
@@ -37,11 +39,23 @@ There are two types of instruction files:
- Example: `.codestudio/instructions/python.instructions.md`
- Example: `.codestudio/instructions/frontend.instructions.md`
-## Purpose
+## When to use Custom Instructions
+
+Use Custom Instructions when you want to:
+
+- Set clear, permanent coding rules for the project (naming conventions, formatting style, folder structure, file organization)
+- Make sure the AI always follows the same standards in every chat and code suggestion, without explaining the rules again and again
+- Enforce important non-functional requirements automatically, such as:
+ - Security rules (never use inline scripts, always sanitize inputs, prefer prepared statements…)
+ - Performance best practices (avoid nested loops in hot paths, prefer memoization…)
+ - Accessibility guidelines (always add alt text, use semantic HTML…)
+
+## Prerequisites
+
+- You must have a project actively opened in Code Studio.
+- You need write access to the project
+
-- Provide **durable, repo-specific** guidance the assistant follows automatically.
-- Cut repeated **chat instructions** by setting defaults for behavior, style, tools, and project context.
-- Support **path-specific** rules so guidance matches the code you’re working on.
## Enabling Custom Instruction Files
@@ -58,8 +72,8 @@ There are two types of instruction files:
You will see three options:
-- **Option 1: Repository-wise instructions**
- - Use this option when you want **one set of rules** for the entire repository.
+- **Option 1: Project-wise instructions**
+ - Use this option when you want **one set of rules** for the entire project.
- Switch **ON** the repo path to enable the file.
@@ -83,7 +97,7 @@ You will see three options:
- Use this option when you want to create a **new instruction** file for a **custom path.**
-## How to Configure Repository-wise Instruction File
+## How to Configure Project-wise Instruction File
**Step 1:** Open the `codestudio-instructions.md` file.
- There are **two** options to open the codestudio-instructions.md file. You can choose any one of them based on your preference.
@@ -92,7 +106,7 @@ You will see three options:
- - Clcik the **Generate agent instructions** to open the file.
+ - Click the **Generate agent instructions** to open the file.
- **Option 2:**
- Open the chat view. Click the settings option at the top.
@@ -152,7 +166,7 @@ You will see three options:
### Option 1: Global Path Targeting
- **Definition:** `applyTo: '**'`
-- Applies rules **globally** to all files in the repository.
+- Applies rules **globally** to all files in the project.
- Best when you want rules to apply across every file types `(e.g.,.ts, .scss, .js, .html).`
- Steps to target the global path:
@@ -170,7 +184,7 @@ You will see three options:
### Option 2: Pattern-specific Targeting
- **Definition:** `applyTo: **/*.scss` or other patterns. for example `(**/*.ts, **/*.css)`
-- Applies rules only to files matching the **given pattern.**
+- Applies rules only to files matching the **given pattern** (e.g., "Use **/*.scss if you only want rules applied to SCSS files").
- Best for adding rules to certain file types or directories.
- Steps to target the pattern specific path
@@ -182,11 +196,49 @@ You will see three options:
- - Step 3: Give the file in the **chat context** which you want to edit.
+ - Step 3: Include the file in the **chat context** which you want to edit.
- Step 4: Open chat and send message your instruction file will come in the **used reference.**
-
\ No newline at end of file
+
+ ## Custom Instructions Example
+The following examples show how custom instructions can be used.
+
+```
+---
+applyTo: "docs/**/*.md"
+---
+# Technical Documentation Style Guide
+
+## Writing Principles
+- Communicate concepts with clarity and precision.
+- Prioritize simplicity over complexity whenever possible.
+- Maintain uniform structure across all documentation pages.
+- Provide practical examples to reinforce understanding.
+
+## Tone & Style
+* Use a professional and friendly tone.
+* Prefer short, direct sentences.
+* Avoid filler words and unnecessary explanations.
+* Focus on actionable information that helps readers immediately.
+
+## Formatting Standards
+- Use descriptive headings to break content into logical sections.
+- Use numbered lists for step‑by‑step instructions.
+- Highlight important terms with **bold** formatting.
+- Use inline code formatting (`example`) for commands, arguments, and filenames.
+
+## Code & Examples
+- Include language‑specific code fences for syntax highlighting.
+- Add comments in examples to clarify purpose.
+- Provide both input and expected output wherever relevant.
+- Keep code examples minimal, runnable, and directly associated with the topic.
+
+## Links & References
+- Link to related guides, API references, and external standards.
+- Use descriptive link text instead of generic labels like “here”.
+- Ensure all referenced content is up‑to‑date.
+```
\ No newline at end of file
diff --git a/code-studio/reference/configure-properties/custom-prompt.md b/code-studio/reference/configure-properties/custom-prompt.md
index 300fc73..b72772e 100644
--- a/code-studio/reference/configure-properties/custom-prompt.md
+++ b/code-studio/reference/configure-properties/custom-prompt.md
@@ -8,25 +8,27 @@ keywords: custom-prompts, ai-assistance, templates, workflows, best-practices
# Custom Prompt Files
-## Overview
+## Purpose
Prompt Files in Syncfusion Code Studio are reusable AI instructions you can save and run anytime. They act like templates for common tasks such as generating code, reviewing code, or documentation.
Why they matter: Instead of typing the same request again and again, you save it once as a Prompt File.
This makes your workflow faster and ensures consistency.
+## When to Use
+Prompt Files are helpful when you want to:
+
+- Save time by avoiding repetitive typing
+- Standardize prompts for your team (e.g., code reviews, documentation)
+- Build a library of reusable workflows
+
## Prerequisites
Before creating Prompt Files, make sure you have:
- Syncfusion Code Studio installed and configured (Follow the [Install and Configure](/code-studio/getting-started/install-and-configuration) guide if not yet installed)
- A project or folder opened in your workspace
-## When to Use Prompt Files
-Prompt Files are helpful when you want to:
-- Save time by avoiding repetitive typing
-- Standardize prompts for your team (e.g., code reviews, documentation)
-- Build a library of reusable workflows
## Steps to Create and Use Prompt Files
@@ -92,12 +94,3 @@ Requirements:
- Keep the code short and easy to read. No extra libraries.
```
-## Use Cases
-- Organize and store prompts for easy reference
-- Customize templates to match project needs
-- Quickly access saved prompts without retyping
-
-## Tips
-- Think of Prompt Files like shortcuts—they save time and reduce repetitive typing
-- Experiment with different agents (modes) to see which works best for your task
-- Share global prompts with your team to ensure consistency
diff --git a/code-studio/reference/configure-properties/mcp/customservers.md b/code-studio/reference/configure-properties/mcp/customservers.md
index a12c3ad..7fe00d7 100644
--- a/code-studio/reference/configure-properties/mcp/customservers.md
+++ b/code-studio/reference/configure-properties/mcp/customservers.md
@@ -1,5 +1,5 @@
---
-title: "Custom MCP Servers"
+title: Custom MCP Servers
description: "Instructions for connecting remote, NPM, and local MCP servers to Syncfusion Code Studio for enhanced accessibility and control."
control: IDE
documentation: Getting Started
@@ -7,14 +7,29 @@ platform: syncfusion-code-studio
keywords: custom-mcp-server, remote-server, npm-server, local-server, code-studio, server-management
---
-# Custom MCP Servers
+# Custom MCP Server
-## Overview
-Model Context Protocol (MCP) is an open standard that allows AI models to interact with external tools and services through a unified interface.
-In Code Studio, MCP servers extend your workspace by Integrating with external APIs.
-The Custom MCP Servers feature lets you connect any MCP server to the Code Studio application—providing flexibility, simplified workflows, and full control over your development environment.
+## Purpose
-## Supported MCP Server Types and Their Prerequisites
+[Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) is an open standard that enables AI models to interact with external tools and services through a unified interface. In Code Studio, MCP servers extend your workspace by integrating with external APIs.
+
+**Custom MCP Servers** let you add and manage MCP servers in Code Studio.
+
+You can add a custom MCP server using one of these connection types, based on how the server is hosted and delivered:
+
+- **Command (stdio)**: Runs a local executable/script that communicates over stdio.
+- **HTTP**: Connects to a remote MCP server endpoint using a URL.
+- **NPM package**: Installs and runs an MCP server published as an npm package.
+- **Pip package**: Installs and runs an MCP server published as a Python package.
+- **Docker image**: Runs an MCP server from a container image.
+
+## When to use
+
+Use a Custom MCP Server to integrate external tools or services into Code Studio. Choose this option whenever an MCP server exists for the tool or service you want to connect.
+
+## Prerequisites
+
+### Supported MCP Server Types and Their Prerequisites:
### **1. Command (stdio)**
Runs a local executable script that communicates over stdio.
@@ -25,28 +40,25 @@ Runs a local executable script that communicates over stdio.
- You're developing or debugging the server locally
**Prerequisite:**
-- Executable script must exist in the system PATH
+- The executable script must exist in the system PATH
**Installation Steps:**
- Ensure your script or binary is globally accessible via PATH
### **2. HTTP**
-Connects to a remote MCP server using HTTP.
+Connects to a remote MCP server over HTTP.
**Use this when:**
-- The MCP server runs on another machine
-- You need to connect to a cloud-hosted MCP endpoint
-
-
+- Use this option when the MCP server is hosted as a web service and you need to connect to it via a URL.
+
### **3. NPM Package**
Installs and runs an MCP server from an NPM package.
**Use this when:**
-- Your MCP server is published as an NPM module
-- You prefer Node.js tooling
-- You want automatic installation and execution
+
+- Use this option when the MCP server is distributed through the npm registry and you prefer Node.js tooling for installation and execution.
**Prerequisite:**
- Node.js installed
@@ -67,7 +79,8 @@ Installs an MCP server from a Python pip package.
**Installation Steps:**
- Install Python 3.13+ from [official site](https://www.python.org/downloads/).
-- Then install uv in CMD:
+- Then, in CMD, install uv and its [documentation site](https://docs.astral.sh/uv/) for reference.
+
```bash
pip install uv
uv --version
@@ -105,52 +118,123 @@ Runs an MCP server via .NET packages.
**Installation Steps:**
- Download .NET SDK 10+ from Microsoft’s [official site](https://dotnet.microsoft.com/en-us/download/dotnet/10.0).
+> **Note:** Custom servers installed via **npm**, **pip**, or **Docker** rely on AI model–assisted execution. If your [Premium model usage budget](/code-studio/how-to-guides/buy-more-credits) is exhausted, these configurations can’t be completed until additional budget is available.
+
+## Step-by-Step Guide: Postman MCP Server with CodeStudio
+
+This example shows how to configure the Postman MCP Server (via an npm package) as a Custom MCP Server in Code Studio. Once connected, you can use the Code Studio chat agent to interact with Postman directly—automating API testing and validation tasks without leaving your workspace.
+
+Follow the steps below to configure the Postman MCP Server in CodeStudio,
+
+**Step 1:** In Code Studio Extension, click the Settings icon and select MCP Servers
+
+
+
+**Step 2:** In the MCP Servers page, open the Custom Server tab.
+
+
+
+**Step 3:** Click Add MCP Server.
+
+
+
+Step 4: Review the Terms and Conditions, then click Accept and proceed.
+
+
+
+**Step 5:** Select the connection type that matches your setup. For this demonstration, choosing NPM package to install the Postman MCP Server.
+
+
+**Step 6:** The npm package name field will appear. Enter the required package name. For this demonstration, entering the Postman MCP Server package name ([@postman/postman-mcp-server](https://www.npmjs.com/package/@postman/postman-mcp-server?activeTab=readme)) and press Enter.
+
-## How to Add a Custom MCP Server
+**Step 7:** The Postman API key field will appear. Paste the Postman API key you generated and press Enter.
-**Step 1:** First navigate to Custom MCP server in code studio. You can navigate to a custom MCP server in Code Studio using either of the two entry points below.
+
-### Option 1
-Click the gear icon in the chat window and select MCP Server.
+**Note:**
+- If you don’t already have a Postman account, use Postman’s documentation guide to sign up: [Sign up for Postman](https://learning.postman.com/docs/getting-started/first-steps/sign-up-for-postman/)
+- To generate a Postman API key, follow Postman’s official documentation: [Postman API Key Generation](https://learning.postman.com/docs/developer/postman-api/authentication)
- 
+**Step 8:** Select the tool configuration that fits your needs. For this demonstration, choosing the Minimal option.
-### Option 2
-Open the Command Palette → type >MCP and select Code Studio: MCP Marketplace.
-
+
-**Step 2:** Then the MCP Marketplace opens, navigate to the Custom Server section and click Add MCP Server.
-
+**Step 9:** Select the region. Keep the default selection (US).
-**Step 3:** Review the Terms & Conditions → click Accept and Proceed.
-
+
-**Step 4:** A list of MCP server types (Command, HTTP, npm, pip, Docker) appears.
-
+**Step 10:** Enter a Server ID. This is a label you choose in Code Studio to identify the custom server (not a Postman ID).
-**Step 5:** Select your preferred type and enter the required information:
- - Command (path)
- - URL
- - NPM package name
- - Pip package name
- - Docker image
-
-
+
-**Step 6:** Enter your custom MCP server name and press Enter.
-
+**Step 11:** Select the configuration target based on your needs. For this demonstration, choose Global to make the server available across all workspaces.
-**Step 7:** Select your Configuration target.
-
+
-**Step 8:** Your server appears in the UI.
+**Step 12:** The Postman MCP Server is now configured and ready to use.
+
+
+
+For demonstration purposes, we created a **User Management API** collection in Postman with sample data and added five sample API requests to the collection.
+
+You can create your own collection and add API requests by following Postman’s [documentation](https://learning.postman.com/docs/collections/use-collections/use-collections-overview).
+
+
+
+
+### Generate test scripts
+
+- In this section, you will use Code Studio and the Postman MCP Server to generate standardized test scripts for the **User Management API** collection.
+
+- When you give the prompt, Code Studio generates test scripts for all API requests in the collection.
+
+- Code Studio then applies the generated scripts in Postman under each API request’s **Test Scripts** tab.
+
+**Sample prompt**
+
+```text
+Generate Postman test scripts for the “User Management API” collection (5 requests: GET all users, GET user by id, POST create user, PUT update user, DELETE user). Apply the scripts directly to each request’s Tests tab.
+
+For each request, include tests that validate:
+
+1. Expected status code (based on the method/API behavior)
+2. Response time is within an acceptable range
+3. Content-Type header (when present)
+4. Response body structure and key fields (required properties and data types)
+
+Use consistent, readable test names and keep scripts minimal and maintainable. Keep assertions non-brittle (no fixed record counts or hardcoded values). If the API does not persist changes, validate response structure and echoed fields instead of permanent updates.
+```
+
+
+### Run the monitor and create a deployment readiness report
+
+- In this section, you will run a Postman Monitor from Code Studio as a pre-deployment validation check. In production workflows, this confirms that critical endpoints respond correctly and that basic performance expectations are met.
+
+- After the monitor run completes, Code Studio can summarize the results into a **deployment readiness report**.
+
+**Sample prompts**
+
+```text
+List my Postman Monitors and their IDs.
+```
+
+```text
+Run the Postman Monitor with ID - 
-**Step 9:** A green tick indicates successful installation.
-
-> **Note**: Custom MCP servers installed via pip, Docker, NuGet, or npm rely on AI model–assisted execution. If your Premium model usage budget is exhausted, these AI-assisted custom MCP server configurations cannot be completed until additional budget is available.
+Postman provides many tools for creating and managing collections, environments, monitors, and more.
+You can explore and use these tools in your workflow.
## MCP Settings and Management
You can manage your installed MCP servers through the Manage Settings option.
@@ -167,7 +251,7 @@ Available actions include:
- Browse tools
- View all tools exposed by your MCP server
- 
+
## Uninstalling an MCP Server
To remove a custom MCP server:
@@ -176,4 +260,4 @@ To remove a custom MCP server:
2. Select Uninstall.
3. The server is removed from your device and Code Studio.
- 
+
diff --git a/code-studio/reference/configure-properties/mcp/marketplace.md b/code-studio/reference/configure-properties/mcp/marketplace.md
index 61a58ac..8fcb920 100644
--- a/code-studio/reference/configure-properties/mcp/marketplace.md
+++ b/code-studio/reference/configure-properties/mcp/marketplace.md
@@ -7,12 +7,23 @@ platform: syncfusion-code-studio
keywords: mcp-marketplace, mcp-server, installation, server-management, code-studio
---
-# MCP Marketplace Documentation
+# MCP Marketplace
-## Overview
+## Purpose
The **MCP Marketplace** is a centralized platform for server management, helping users discover, install, and connect the right servers for their needs through an easy-to-use interface. It showcases a variety of available MCP servers. Users can explore server options and configure them for use by simply clicking the **Install** button, which initiates an automated setup process to integrate the server with the Code Studio extension.
+## When to Use
+MCP servers are essential in the following scenarios:
+- **Dynamic Backend Integration**: When your IDE requires secure connections to external services without hardcoded configurations, enabling flexible and scalable integrations.
+- **Enhanced AI Capabilities**: When you need to extend the AI assistant's functionality with additional tools, resources, or real-time metadata access for improved context awareness and response quality.
+- **Service Orchestration**: When managing multiple external services that require coordinated access through a unified interface.
+## Prerequisites
+Before installing MCP servers from the marketplace, ensure that:
+- You are using the latest version of Syncfusion Code Studio
+- You have any required authentication credentials ready (Personal Access Tokens, API keys, or other tokens as needed by specific servers)
+- Node.js and npm are installed on your system, as certain MCP servers depend on npm packages for functionality
+- Help Link for installing Node.js and npm : [Install Node.js](https://nodejs.org/en/download)
## Steps to Install an MCP Server from Marketplace
- Click the **Syncfusion Code Studio** icon on the top right side to open the Syncfusion Code Studio chat window.
@@ -101,6 +112,9 @@ The **MCP Marketplace** is a centralized platform for server management, helping
- After entering the access token, click Continue to complete the installation successfully
- Help Link for creating a access token : [Personal Access Tokens](https://github.com/settings/tokens).
+> **Note:** Authentication requirements vary across different MCP servers. While some servers require Personal Access Tokens (like GitHub), others may need API keys or specific credentials. Certain servers offer automatic installation without requiring any authentication. The installation process will prompt you for the appropriate credentials based on the selected server's requirements.
+
+
### Step 3: Select the Installed Tool
diff --git a/code-studio/reference/configure-properties/toolssupport.md b/code-studio/reference/configure-properties/toolssupport.md
index c7d59a8..cb8b855 100644
--- a/code-studio/reference/configure-properties/toolssupport.md
+++ b/code-studio/reference/configure-properties/toolssupport.md
@@ -1,61 +1,66 @@
---
title: Introduction to Tools in Syncfusion Code Studio
-description: Learn how to use the built-in tools in Syncfusion Code Studio to streamline your development workflow and automate tasks efficiently.
+description: Learn how to use the built-in and MCP tools in Syncfusion Code Studio to streamline your development workflow and automate tasks efficiently.
platform: syncfusion-code-studio
-keywords: tools, syncfusion, code-studio, development, automation, workflow, built-in-tools
+keywords: tools, syncfusion, code-studio, development, automation, workflow, built-in-tools, MCP
---
# Tools Support
-## Overview
+## Purpose
-The Tools Support feature in Syncfusion Code Studio empowers developers to perform specific actions within the development environment, such as creating folders, reading files, searching within files, and interacting with browsers. This guide provides a step-by-step approach to use the built-in tools, enabling you to streamline your development workflow and automate tasks efficiently with simple prompts.
+The Tools Support feature in Syncfusion Code Studio empowers developers to perform specific actions within the development environment, such as creating folders, reading files, searching within files, and interacting with browsers. This guide provides a step-by-step approach to use the built-in and MCP tools, enabling you to streamline your development workflow and automate tasks efficiently with simple prompts.
-## Purpose
+## When to use
The tools are designed to automate and simplify common development tasks, allowing you to focus on writing code. Key purposes include:
### 1. File Management
-- Create new files or edit existing ones.
-- Perform bulk search-and-replace operations.
-- Organize project structures efficiently.
+- Create new files or edit existing ones
+- Perform bulk search-and-replace operations
+- Organize project structures efficiently
### 2. Terminal Integration
-- Run CLI commands like npm install or yarn start.
-- Install dependencies or launch development servers.
-- Automate build and deployment processes.
+- Run CLI commands like `npm install` or `yarn start`
+- Install dependencies or launch development servers
+- Automate build and deployment processes
### 3. Code Insights
-- Identify and fix bugs with AI-driven suggestions.
-- Refactor code for better performance or readability.
-- Generate inline documentation automatically.
+- Identify and fix bugs with AI-driven suggestions
+- Refactor code for better performance or readability
+- Generate inline documentation automatically
### 4. Web and Browser Tools
-- Perform web searches to fetch relevant resources.
-- Automate browser tasks like testing or scraping.
+- Perform web searches to fetch relevant resources
+- Automate browser tasks like testing or scraping
+
+## Prerequisites
+
+1. **Code Studio Installation** - Download and configure the IDE: [Install and Configuration](/code-studio/getting-started/install-and-configuration)
+2. **For MCP Tools** - MCP servers must be installed and configured before they can be used. See [MCP Marketplace](/code-studio/reference/configure-properties/mcp/marketplace) for installation instructions.
## Types of Tools
-Syncfusion Code Studio provides a suite of tools to streamline your workflow.You can use two types of tools in chat
+Syncfusion Code Studio provides a suite of tools to streamline your workflow. You can use two types of tools in chat:
### 1. Built-In Tools
-- Built-in tools are automatically available in chat.
-- They cover common development tasks and are optimized for working within your workspace.
-- No installation or configuration is required — they are ready to use as soon as you start.
+- Built-in tools are automatically available in chat.
+- They cover common development tasks and are optimized for working within your workspace.
+- No installation or configuration is required — they are ready to use as soon as you start.
### 2. MCP Tools
-- Model Context Protocol (MCP) is an open standard that enables AI models to use external tools and services through a unified interface.
-- MCP servers provide tools that you can add to Syncfusion Code Studio to extend chat with additional capabilities.
-- To use MCP tools, you must install and configure MCP servers first.
-- MCP servers can run locally on your machine or be hosted remotely.
+- Model Context Protocol (MCP) is an open standard that enables AI models to use external tools and services through a unified interface.
+- MCP servers provide tools that you can add to Syncfusion Code Studio to extend chat with additional capabilities.
+- To use MCP tools, you must install and configure MCP servers first.
+- MCP servers can run locally on your machine or be hosted remotely.
### Toolset Overview
-Below is a list of some tools and their descriptions for reference
+Below is a list of available tools and their descriptions for reference:
-## Tools Approval
+### Tools Approval
When using agents, the agent automatically determines which tools to use from the enabled set based on your prompt and the context of your request. The agent autonomously selects and invokes the relevant tools needed to accomplish the task.
diff --git a/code-studio/reference/configure-properties/usersettings.md b/code-studio/reference/configure-properties/usersettings.md
index 0ad03d9..30f8ed7 100644
--- a/code-studio/reference/configure-properties/usersettings.md
+++ b/code-studio/reference/configure-properties/usersettings.md
@@ -8,13 +8,9 @@ keywords: user-settings, customization, configuration, development-environment,
# User Settings
-## Overview
-
-The Settings is designed to make it easy for users to manage how the application works for them. It consolidates all essential controls in one place, enabling you to personalize features, monitor credits and usage, and optimize your workflow. The Settings page gives users full control, flexibility, and clarity so they can tailor Code Studio to their needs while staying efficient, cost aware, and compliant. Settings are stored locally and take effect immediately upon change.
-
## Purpose
-Settings allow users to tailor the development environment to their individual preferences. They help by providing
+Settings allow users to tailor the development environment to their individual preferences. They help by providing:
- **Centralized Control** – All key configuration options are available in one place.
- **Personalization** – Customize features such as agents, autocomplete, and instructions to fit your workflow.
@@ -22,6 +18,17 @@ Settings allow users to tailor the development environment to their individual p
- **Compliance & Transparency** – Access legal policies, agreements, and telemetry settings for clarity.
- **Help & Support** – Quickly reach documentation, tutorials, and support tickets when needed.
+## When to Use
+
+- You want consistent behavior across projects via explicit settings.
+- You need to enable agents, inject instructions, or tune request limits.
+- You monitor usage/costs or manage credits and subscriptions.
+- You prefer to adjust autocomplete, indexing, or telemetry policies.
+
+## Prerequisites
+
+**Code Studio Installation** - Download and configure the IDE: [Install and Configuration](/code-studio/getting-started/install-and-configuration).
+
## How to Access User Settings
The User Settings page can be accessed in three ways:
@@ -72,9 +79,9 @@ The following settings are available on the User Settings page.
> **Note:** You can track daily costs and token usage by applying filters in your Dashboard. This helps you stay on budget and manage usage effectively.
#### Upgrade to Pro Plan
- - Upgrade to Pro plan for additional features.
+ - Upgrade to the Pro plan for additional features.
-> **Note:** Upgrade the plan can be accessible only for Admins.
+> **Note:** Only admins can upgrade.
#### Email
- Sign in or sign out of your account.
@@ -87,7 +94,7 @@ The following settings are available on the User Settings page.
- Purchase credit based on your budget and requirements.
- Access pricing details.
-> **Note:** Credits sections can be accessible only for Admins.
+> **Note:** The Credits section is accessible only to admins.
@@ -95,33 +102,36 @@ The following settings are available on the User Settings page.
#### Agent Enabled
- Enables agent mode, which can be activated via the dropdown in the chat box.
-- Default: Enabled
+- Default: `Enabled`
#### Agent Max Requests
- Sets the maximum number of requests per turn when using an agent. If the limit is reached, you’ll be asked to confirm to continue.
-- Default: 25
+- Default: `25`
-#### Use Agents Md File
-- Decide whether the instructions from the AGENTS.MD file in your workspace are added to every chat request.
-- Default: Enabled
+#### Use AGENTS.md File
+- Decide whether the instructions from the AGENTS.md file in your workspace are added to every chat request.
+- Default: `Enabled`
### Instructions
-#### Use Codestudio-instructions Md File
-- Controls Whether code instructions from .codestudio/codestudio-instructions.md are added to Code Studio requests.
+#### Use codestudio-instructions.md File
+- Controls whether instructions from `.codestudio/codestudio-instructions.md` are added to Code Studio requests.
+- Default: `Disabled`
> **Note:** Keep your instructions short and precise. Poor instructions can degrade Code Studio quality and performance.
#### Instruction File Locations
-- Specify location(s) of instruction files (*. instructions.md) that can be attached in Chat sessions
+- Specify locations of instruction files (`*.instructions.md`) that can be attached in chat sessions.
+- Default: `Disabled`
### Autocomplete
-- When enabled, Code studio will give inline code suggestions globally across all supported languages
+- When enabled, Code Studio provides inline code suggestions across all supported languages.
+- Default: `Enabled`
@@ -133,7 +143,8 @@ The following settings are available on the User Settings page.
### Telemetry
-- When enabled, it allows Code Studio to collect anonymous telemetry data to improve the product.
+- When enabled, Code Studio collects anonymous telemetry data to improve the product.
+- Default: `Enabled`
@@ -143,7 +154,7 @@ The following settings are available on the User Settings page.
Access the official Syncfusion Code Studio documentation for configuration guidance and usage instructions.
- **Have an Issue?**
- If you encounter any problems, you can easily reach out to our support team at [support@syncfusion.com](https://support.syncfusion.com).
+ If you encounter any problems, you can easily reach out to our support team at [support.syncfusion.com](https://support.syncfusion.com).
- **Legal Center**
Review our transparent legal policies and agreements in the Legal Center. This ensures you fully understand and comply with Syncfusion’s terms and conditions.
diff --git a/code-studio/reference/reference-images/Openrouter-home.png b/code-studio/reference/reference-images/Openrouter-home.png
new file mode 100644
index 0000000..7189c6f
Binary files /dev/null and b/code-studio/reference/reference-images/Openrouter-home.png differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/Openrouter-integrations.png b/code-studio/reference/reference-images/Openrouter-integrations.png
similarity index 100%
rename from code-studio/troubleshoot/Troubleshoot-images/Openrouter-integrations.png
rename to code-studio/reference/reference-images/Openrouter-integrations.png
diff --git a/code-studio/troubleshoot/Troubleshoot-images/Openrouter-key.png b/code-studio/reference/reference-images/Openrouter-key.png
similarity index 100%
rename from code-studio/troubleshoot/Troubleshoot-images/Openrouter-key.png
rename to code-studio/reference/reference-images/Openrouter-key.png
diff --git a/code-studio/troubleshoot/Troubleshoot-images/Openrouter-setting.png b/code-studio/reference/reference-images/Openrouter-setting.png
similarity index 100%
rename from code-studio/troubleshoot/Troubleshoot-images/Openrouter-setting.png
rename to code-studio/reference/reference-images/Openrouter-setting.png
diff --git a/code-studio/reference/reference-images/add-mcp-server.png b/code-studio/reference/reference-images/add-mcp-server.png
new file mode 100644
index 0000000..1080e09
Binary files /dev/null and b/code-studio/reference/reference-images/add-mcp-server.png differ
diff --git a/code-studio/reference/reference-images/deployment-readiness-report.gif b/code-studio/reference/reference-images/deployment-readiness-report.gif
new file mode 100644
index 0000000..6ec7cef
Binary files /dev/null and b/code-studio/reference/reference-images/deployment-readiness-report.gif differ
diff --git a/code-studio/reference/reference-images/generate-test-scripts.gif b/code-studio/reference/reference-images/generate-test-scripts.gif
new file mode 100644
index 0000000..e3fb082
Binary files /dev/null and b/code-studio/reference/reference-images/generate-test-scripts.gif differ
diff --git a/code-studio/reference/reference-images/instruction_option.png b/code-studio/reference/reference-images/instruction_option.png
index 698def6..a9161eb 100644
Binary files a/code-studio/reference/reference-images/instruction_option.png and b/code-studio/reference/reference-images/instruction_option.png differ
diff --git a/code-studio/reference/reference-images/mcp-package-api-key.png b/code-studio/reference/reference-images/mcp-package-api-key.png
new file mode 100644
index 0000000..0b1bb39
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-package-api-key.png differ
diff --git a/code-studio/reference/reference-images/mcp-package-name.png b/code-studio/reference/reference-images/mcp-package-name.png
new file mode 100644
index 0000000..090d2c9
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-package-name.png differ
diff --git a/code-studio/reference/reference-images/mcp-postman-installed.png b/code-studio/reference/reference-images/mcp-postman-installed.png
new file mode 100644
index 0000000..895eaec
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-postman-installed.png differ
diff --git a/code-studio/reference/reference-images/mcp-postman-region-choosing.png b/code-studio/reference/reference-images/mcp-postman-region-choosing.png
new file mode 100644
index 0000000..c9107c8
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-postman-region-choosing.png differ
diff --git a/code-studio/reference/reference-images/mcp-postman-tool-configuration.png b/code-studio/reference/reference-images/mcp-postman-tool-configuration.png
new file mode 100644
index 0000000..fae8592
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-postman-tool-configuration.png differ
diff --git a/code-studio/reference/reference-images/mcp-server-connection-types.png b/code-studio/reference/reference-images/mcp-server-connection-types.png
new file mode 100644
index 0000000..dc826d2
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-server-connection-types.png differ
diff --git a/code-studio/reference/reference-images/mcp-server-id.png b/code-studio/reference/reference-images/mcp-server-id.png
new file mode 100644
index 0000000..ff4fc67
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-server-id.png differ
diff --git a/code-studio/reference/reference-images/mcp-server-option-from-settings.png b/code-studio/reference/reference-images/mcp-server-option-from-settings.png
new file mode 100644
index 0000000..373269f
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-server-option-from-settings.png differ
diff --git a/code-studio/reference/reference-images/mcp-server-webview.png b/code-studio/reference/reference-images/mcp-server-webview.png
new file mode 100644
index 0000000..f951049
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-server-webview.png differ
diff --git a/code-studio/reference/reference-images/mcp-workspace-option-choosing.png b/code-studio/reference/reference-images/mcp-workspace-option-choosing.png
new file mode 100644
index 0000000..8cee9f1
Binary files /dev/null and b/code-studio/reference/reference-images/mcp-workspace-option-choosing.png differ
diff --git a/code-studio/reference/reference-images/postman-dashboard.png b/code-studio/reference/reference-images/postman-dashboard.png
new file mode 100644
index 0000000..9c07dbf
Binary files /dev/null and b/code-studio/reference/reference-images/postman-dashboard.png differ
diff --git a/code-studio/reference/reference-images/quickfixexplain.gif b/code-studio/reference/reference-images/quickfixexplain.gif
new file mode 100644
index 0000000..c203a14
Binary files /dev/null and b/code-studio/reference/reference-images/quickfixexplain.gif differ
diff --git a/code-studio/reference/reference-images/startserver.png b/code-studio/reference/reference-images/startserver.png
new file mode 100644
index 0000000..6f954fa
Binary files /dev/null and b/code-studio/reference/reference-images/startserver.png differ
diff --git a/code-studio/reference/reference-images/terms-and-conditions.png b/code-studio/reference/reference-images/terms-and-conditions.png
new file mode 100644
index 0000000..e804f73
Binary files /dev/null and b/code-studio/reference/reference-images/terms-and-conditions.png differ
diff --git a/code-studio/reference/reference-images/uninstallserver.png b/code-studio/reference/reference-images/uninstallserver.png
new file mode 100644
index 0000000..2255644
Binary files /dev/null and b/code-studio/reference/reference-images/uninstallserver.png differ
diff --git a/code-studio/release-notes/v2.0.0.md b/code-studio/release-notes/v2.0.0.md
index 0ca39e7..713887d 100644
--- a/code-studio/release-notes/v2.0.0.md
+++ b/code-studio/release-notes/v2.0.0.md
@@ -11,7 +11,7 @@ We've completely revamped Code Studio with an intuitive UI and smarter AI-powere
### Migration Update
- **Authentication Reset:** After the auto-update to v2.0.0, existing authenticated accounts will be logged out due to session expiration. Reauthentication is required to continue using Code Studio Chat.
- **Conversation History:** Existing conversation sessions from previous versions are not accessible after migration.
-- **Configuration Files:** Workspace rules, prompt files, and previously installed MCP servers from prior versions are not accessible.
+- **Configuration Files:** Workspace rules, Agent rules files, prompt files, and previously installed MCP servers from prior versions are not accessible.
- **Session Tracking:** Session usage tracking is not currently displayed in this version.
### Model Configuration Changes
diff --git a/code-studio/security.md b/code-studio/security.md
new file mode 100644
index 0000000..0c3f940
--- /dev/null
+++ b/code-studio/security.md
@@ -0,0 +1,138 @@
+---
+title: Security in Syncfusion Code Studio
+description: Learn about the key security considerations, risks, protections, and best practices when working with AI-assisted development in Syncfusion Code Studio.
+platform: syncfusion-code-studio
+keywords: security, code-studio-security, ai-security, mcp-security, auto-approval-risks, supply-chain-risks, prompt-injection, workspace-trust, permission-management, secure-development
+---
+
+
+# Code Studio Security
+This document provides a clear overview of the key security considerations when working with AI-assisted development in Code Studio. It explains the risks, built‑in protections, and best practices you should follow to stay safe while benefiting from AI‑powered workflows.
+
+## Why Security Matters
+AI agents in development tools can automate tasks, modify files, and run commands. While this greatly improves productivity, it also increases the risk of accidental or malicious actions. Understanding how these systems work—and the protections around them—helps you use them safely.
+
+## Execution & Access Risks
+When you use AI agents in Code Studio, they can perform:
+
+### File Operations
+- Create, edit, or delete files in your workspace.
+- Trigger tools or scripts (like build or watch tasks) when files change.
+
+### Terminal Commands
+- Run shell commands with your user privileges.
+- Install software or modify system configurations.
+
+### Extensions & MCP Servers
+- MCP (Model Context Protocol) servers can access all local files.
+- They can run arbitrary code and interact with system resources.
+
+Because these actions carry risk, you must be aware of what’s being executed on your behalf.
+
+## Supply Chain Risks
+Modern AI development relies on many external components. Each one introduces trust concerns.
+
+### MCP Server Integrity
+- Third‑party MCP servers might contain vulnerabilities or harmful code.
+- They may not have formal security reviews.
+
+### External Tool Dependencies
+- AI agents may call external command‑line tools.
+- These tools could be outdated or compromised.
+
+### Update Channels
+- MCP server updates may come from untrusted sources.
+- Malicious updates could introduce harmful behavior.
+
+## Auto‑Approval Risks
+Auto‑approval speeds up development, but reduces visibility.
+
+### Edit Auto‑Approval
+- Automatically applies file edits.
+- Risk: Sensitive files could be modified without review.
+
+### Terminal Auto‑Approval
+- Allows commands to run without confirmation.
+- Risk: Destructive commands could execute silently.
+
+### Overall Tool Auto‑Approval
+- Enables all operations without asking you.
+- Risk: Arbitrary code execution, unintended workspace changes.
+
+Use auto‑approval features carefully—only when you understand the impact.
+
+## Information Exposure Risks
+AI systems handle a lot of context, which may include sensitive information.
+
+### Context Sharing
+- Files, environment variables, and configuration details may be sent to the model.
+- API keys or proprietary code can be accidentally exposed.
+
+### Tool Interactions
+- Sensitive information retrieved from one tool can be inadvertently shared with another tool.
+
+### External Content
+- Untrusted content from external sources can be introduced into your workspace through tool operations and file edits, potentially leading to data leakage.
+
+## Prompt Injection Risks
+Malicious instructions hidden inside comments, files, or tool outputs can trick the AI.
+
+### Examples of Attacks
+- Hidden text telling the AI to delete files.
+- Commands embedded in user‑generated content (e.g., GitHub READMEs).
+
+### Possible Impacts
+- Data exfiltration: Sending your data to unknown servers.
+- Context contamination: Misleading the AI.
+- Tool chaining attacks: Malicious output flows through multiple tools.
+- External data exploitation: Using untrusted web content to alter behavior.
+
+## Built‑In Security Protections
+- Code Studio includes multiple safety layers to reduce the risk of harmful actions.
+- Code Studio does not use your workspace data, code, or context for model training.
+
+## Trust Boundaries
+- Workspace Trust: Restricts execution until you trust the folder.
+- Extension Publisher Trust: Installs the extensions which are trusted by the user.
+
+## Controlled Scope
+- AI tools can access only your current workspace.
+- Tool picker lets you enable/disable tools.
+- Temporary session permissions prevent long‑term risks.
+
+## Permission Management
+- Terminal commands require explicit approval.
+- Tools require approval at session, workspace, or user level.
+
+## Transparency
+- You review all AI‑proposed file changes before applying them.
+- Clear messages show when auto‑approvals occur.
+- Warning banners appear for advanced or risky modes.
+
+## Secrets Management
+- Sensitive values are stored securely.
+- OAuth-based authentication protects MCP connections.
+
+>**Note:** Click [here](https://www.syncfusion.com/code-studio/legal/) to read our transparent legal policies and agreements in our Legal Center to ensure full compliance with and understanding of Syncfusion's terms and conditions.
+
+## Developer Responsibilities
+Even with strong protections, you play a key role in staying secure.
+
+### ✔ Review all edits
+- Always check changes to config files, scripts, build tools, and security‑related files.
+- Rely on source control to track and revert changes.
+
+### ✔ Review approvals
+- Don’t approve commands or operations you don’t understand.
+- Regularly review your auto‑approval settings.
+
+### ✔ Verify MCP servers
+- Install MCP servers only from trusted sources.
+- Enable them only when needed.
+
+### ✔ Be careful with untrusted codebases
+- Open unknown projects in restricted mode.
+- This disables agents and prevents prompt injection attacks.
+
+## Summary
+AI-powered development is powerful but introduces new security challenges. Code Studio helps protect you with trust boundaries, controlled scope, permissions, transparency, and secret management. As a developer, staying alert, reviewing actions, and only enabling what you trust will help you maintain a safe and productive workflow.
diff --git a/code-studio/troubleshoot/Troubleshoot-images/Openrouter-home.png b/code-studio/troubleshoot/Troubleshoot-images/Openrouter-home.png
deleted file mode 100644
index 59212d8..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/Openrouter-home.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/confignameadded.png b/code-studio/troubleshoot/Troubleshoot-images/confignameadded.png
deleted file mode 100644
index 5c1ca73..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/confignameadded.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/confignamemissing.png b/code-studio/troubleshoot/Troubleshoot-images/confignamemissing.png
deleted file mode 100644
index 1f7295e..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/confignamemissing.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/eaccess.png b/code-studio/troubleshoot/Troubleshoot-images/eaccess.png
deleted file mode 100644
index 924eb88..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/eaccess.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/macdel-1.png b/code-studio/troubleshoot/Troubleshoot-images/macdel-1.png
deleted file mode 100644
index 1977e67..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/macdel-1.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/macdel-2.png b/code-studio/troubleshoot/Troubleshoot-images/macdel-2.png
deleted file mode 100644
index 67baf7b..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/macdel-2.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/macdel-3.png b/code-studio/troubleshoot/Troubleshoot-images/macdel-3.png
deleted file mode 100644
index cab4b98..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/macdel-3.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/openconfig.png b/code-studio/troubleshoot/Troubleshoot-images/openconfig.png
deleted file mode 100644
index 5cbf124..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/openconfig.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/windel1.png b/code-studio/troubleshoot/Troubleshoot-images/windel1.png
deleted file mode 100644
index 7117f98..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/windel1.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/windel2.png b/code-studio/troubleshoot/Troubleshoot-images/windel2.png
deleted file mode 100644
index 8743426..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/windel2.png and /dev/null differ
diff --git a/code-studio/troubleshoot/Troubleshoot-images/windel3.png b/code-studio/troubleshoot/Troubleshoot-images/windel3.png
deleted file mode 100644
index c47cdba..0000000
Binary files a/code-studio/troubleshoot/Troubleshoot-images/windel3.png and /dev/null differ
diff --git a/code-studio/troubleshoot/access-session-history-files.md b/code-studio/troubleshoot/access-session-history-files.md
new file mode 100644
index 0000000..0631dc7
--- /dev/null
+++ b/code-studio/troubleshoot/access-session-history-files.md
@@ -0,0 +1,35 @@
+---
+title: How to access session history files in the revamped CodeStudio
+Description: Explains how to access session history in CodeStudio v2.0.0+ after the revamp, including where to find chats from the current version using the View and More Actions (⋯) menu.
+platform: syncfusion-code-studio
+keywords: Syncfusion Code Studio, session history, workspace chats, show chats, sessions, troubleshoot
+---
+
+# How to access session history files in the revamped CodeStudio
+
+This guide explains how to view session history after upgrading to CodeStudio v2.0.0+.
+
+## Problem Summary
+After upgrading to CodeStudio v2.0.0+, chat sessions from earlier versions (before v2.0.0) may not appear in the session history.
+
+> **Note:** Session history created prior to v2.0.0 cannot be migrated to the CodeStudio v2.0.0+ session history. Refer to the [v2.0.0 release notes](/code-studio/release-notes/v2.0.0) for migration details.
+
+## Resolution Steps
+
+After upgrading, existing conversation sessions created in versions before v2.0.0 may not be accessible.
+
+## Accessing Session History
+
+To view your session history, follow these steps:
+
+1. Click the **three dots icon** (⋯) labeled "View and More Actions".
+
+ 
+
+2. Select **Show Chats** from the menu.
+
+ 
+
+3. Your **Sessions History** will be displayed, showing all conversations made in that particular workspace.
+
+ 
diff --git a/code-studio/troubleshoot/enable-legacy-docs-indexing.md b/code-studio/troubleshoot/enable-legacy-docs-indexing.md
new file mode 100644
index 0000000..39ca2f5
--- /dev/null
+++ b/code-studio/troubleshoot/enable-legacy-docs-indexing.md
@@ -0,0 +1,39 @@
+---
+title: "How to enable legacy Docs Indexing within the updated platform"
+description: "Professional guide to enable legacy docs indexing with the fetch tool."
+platform: syncfusion-code-studio
+keywords: docs-indexing, fetch-tool, embeddings, url, troubleshoot, code-studio
+---
+# How to Enable Legacy Docs Indexing Within the Updated Platform
+
+## Problem Summary
+Starting with version **2.0.0**, Code Studio no longer uses the legacy **Docs Context Provider**. In earlier versions prior to 2.0.0, users could add documentation URLs through the **@** menu, which generated local embeddings for contextual responses. The latest release replaces this with the Realtime **Fetch Tool**, introducing a new approach to documentation indexing.
+
+## Possible Causes
+
+### 1. Deprecated Legacy Behavior
+- The previous system relied on locally stored embeddings created from documentation URLs. This functionality and the ability to index documentation has been removed.
+
+### 2. New System Depends on Real-Time Fetching
+- The updated **Fetch Tool** retrieves webpage content live instead of indexing and storing it locally.
+
+### 3. Previously Indexed Docs Can’t Be Accessed
+- Since local embedding and legacy indexing have been removed, any documentation indexed before **version 2.0.0** is no longer accessible.
+
+
+
+## Resolution Steps
+
+### Step 1 : Open the Code Studio Chat Interface
+
+### Step 2 : Type `#fetch` Followed by a Valid URL
+This triggers the Fetch Tool to pull content from the specified page.
+
+
+### Step 3 : Enter Your Query
+After adding the URL, type your actual query referencing the fetched documentation.
+
+
+### Step 4 : Let the Tool Retrieve Content
+The Fetch Tool retrieves webpage content instantly and uses it as reference material for your query.
+
\ No newline at end of file
diff --git a/code-studio/troubleshoot/how-to-remove-cache-folders-of-code-studio-to-resolve-the-app-corruption.md b/code-studio/troubleshoot/how-to-remove-cache-folders-of-code-studio-to-resolve-the-app-corruption.md
deleted file mode 100644
index 59a66ea..0000000
--- a/code-studio/troubleshoot/how-to-remove-cache-folders-of-code-studio-to-resolve-the-app-corruption.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: How to remove cache folders of Code Studio to resolve app corruption
-Description: Guide to delete Code Studio cache folders and config.yaml to fix application corruption on Windows and macOS.
-platform: syncfusion-code-studio
-keywords: cache, corruption, troubleshoot
----
-
-
-
-# How to remove cache folders of Code Studio to resolve the app corruption.
-
-This guide explains how to delete the Code Studio cache folders when you encounter application corruption issues.
-
-## Steps to Delete the Cache Folders
-
-### step 1: Delete the config.yaml file
-### WINDOWS
-
-Delete the config.yaml file in this location "C:\Users\YourName\ .sfcodestudio\ .codestudio\config.yaml"
-
-
-
-### MAC
-Delete the config.yaml file in this location "Users\syncfusion\ .sfcodestudio\ .codestudio\config.yaml"
-
-
-
-### step 2: Delete the Syncfusion Code Studio folders
-### WINDOWS
-Delete the Syncfusion Code Studio folder in these locations "C:\Program Files\Syncfusion Code Studio" and "C:\Users\YourName\AppData\Roaming\Syncfusion Code Studio"
-
-
-
-
-### MAC
-Delete the Syncfusion Code Studio folder in these locations "Users\syncfusion\Library\Application Support\Syncfusion Code Studio" and "Applications\Syncfusion Code Studio"
-
-
-
\ No newline at end of file
diff --git a/code-studio/troubleshoot/how-to-resolve-the-app-corruption.md b/code-studio/troubleshoot/how-to-resolve-the-app-corruption.md
new file mode 100644
index 0000000..0075d7f
--- /dev/null
+++ b/code-studio/troubleshoot/how-to-resolve-the-app-corruption.md
@@ -0,0 +1,76 @@
+---
+title: How to resolve Code Studio app corruption
+Description: Guide to fix application corruption on Windows and macOS.
+platform: syncfusion-code-studio
+keywords: cache, corruption, troubleshoot
+---
+
+
+
+# How to resolve Code Studio app corruption.
+
+When Syncfusion Code Studio becomes corrupted or stops functioning correctly, a full reset of the application may be required. This guide explains how to completely remove Code Studio's program files and configuration data so you can reinstall with a clean state.
+
+## Problem Summary
+
+Application corruption can occur when essential Code Studio files—such as installation components, configuration data, or cache folders—become damaged or inconsistent. These issues may prevent the IDE from launching, updating, or functioning normally. This guide explains how to fully remove all relevant directories so that a clean reinstallation can rebuild fresh, working files and resolve corruption‑related problems.
+
+## Possible Causes
+
+- **Auto update issues**: Incomplete or interrupted automatic updates can sometimes affect application stability clearing the cache helps refresh the IDE and resolve update-related behavior.
+- **System configuration updates**: Recent changes to your operating system settings may require a cache refresh to ensure compatibility.
+- **Performance optimization**: Regularly clearing the cache helps maintain smooth and optimal application performance over time.
+
+## Resolution Steps
+
+### Step 1: Backup Custom Configurations
+
+If you have custom agents or settings, backup before proceeding.
+
+### Step 2: Delete Application Folders
+
+You need to delete the main application folders to completely resolve the issue.
+
+#### Windows
+
+Delete the Syncfusion Code Studio folders at these locations:
+
+**Program Files:**
+```
+C:\Program Files\Syncfusion Code Studio
+```
+
+
+**AppData Roaming:**
+```
+C:\Users\YourName\AppData\Roaming\Syncfusion Code Studio
+```
+
+
+#### macOS
+
+Delete the Syncfusion Code Studio folders at these locations:
+
+**Applications:**
+```
+/Applications/Syncfusion Code Studio
+```
+
+
+**Application Support:**
+```
+/Users/YourName/Library/Application Support/Syncfusion Code Studio
+```
+
+
+
+
+### Step 3: Reinstall and Restore
+
+Once you've completed above step:
+
+1. Restart your computer to ensure all files are properly released
+2. Reinstall Syncfusion Code Studio, refer to the [Syncfusion Code Studio Install and Configure](/code-studio/getting-started/install-and-configuration)
+3. Launch the application - it will create fresh configuration files and cache
+
+
diff --git a/code-studio/troubleshoot/migrate-agent-files.md b/code-studio/troubleshoot/migrate-agent-files.md
new file mode 100644
index 0000000..e406e07
--- /dev/null
+++ b/code-studio/troubleshoot/migrate-agent-files.md
@@ -0,0 +1,41 @@
+---
+title: How to Migrate Agent Files from v1.x.x to v2.0.0+
+Description: Explains how to migrate Agent files from Code Studio v1.x.x to v2.0.0 and later versions by renaming the Agent file to agents.md and enabling the required Agents settings.
+platform: syncfusion-code-studio
+keywords: Syncfusion Code Studio, agent rules, Agent MD, agents.md, troubleshoot
+---
+
+# How to Migrate Agent Files from v1.x.x to v2.0.0+
+
+This guide explains how to migrate Agent files from Code Studio v1.x.x to v2.0.0 and later versions so they remain compatible with the updated settings.
+
+## Problem Summary
+After upgrading to Code Studio v2.0.0 and later versions, Agent rules may stop working unless you rename your Agent files and update the **Agents** settings.
+
+> **Note:** Agent files from v1.x.x aren’t migrated automatically in v2.0.0+. To restore Agent rules, follow the resolution steps below. Refer to the [v2.0.0 release notes](/code-studio/release-notes/v2.0.0) for migration details.
+
+## Resolution Steps
+
+### Step 1: Rename Your Agent File
+Rename your file from `agent.md` to `agents.md` (plural) in your project root directory.
+
+### Step 2: Update Settings Configuration
+
+**Settings in v2.0.0 and later versions:**
+1. Click the Settings icon.
+
+ 
+
+2. Open Settings
+
+ 
+
+3. In the settings window, select **Agents** in the sidebar.
+
+ 
+
+4. Ensure **Agent Enabled** and **Use Agents Md file** are enabled.
+
+**Note:** Keep your agent instructions under 500 lines to avoid context length issues.
+
+
diff --git a/code-studio/troubleshoot/migrate-code-studio-rules-to-instructions.md b/code-studio/troubleshoot/migrate-code-studio-rules-to-instructions.md
new file mode 100644
index 0000000..55bdc30
--- /dev/null
+++ b/code-studio/troubleshoot/migrate-code-studio-rules-to-instructions.md
@@ -0,0 +1,82 @@
+---
+title: "How to Migrate Code Studio Rules to Instructions"
+description: "Professional guide to migrate legacy rule configurations from config.yaml and .sfcoderules to Custom Instructions."
+platform: syncfusion-code-studio
+keywords: rules, custom-instructions, troubleshoot, code-studio
+---
+
+# How to Migrate Code Studio Rules to Instructions
+
+## Problem Summary
+In versions prior to 2.0.0, Code Studio stored rule configurations in two legacy formats: `config.yaml` and `.sfcoderules`. Starting from version 2.0.0, these formats are no longer supported. All rule definitions must now be migrated to the Custom Instructions file structure to ensure Code Studio continues applying them correctly.
+
+## Possible Causes
+- In earlier versions of Code Studio, rules were stored in legacy locations (`config.yaml` and `.sfcoderules`) and Code Studio automatically used them. Starting from version 2.0.0, these legacy files are no longer detected or processed.
+
+## Resolution Steps
+
+### Step 1: Create a New Instruction File
+
+- Open Code Studio.
+- Create a new instruction file following the [Custom Instructions](/code-studio/reference/configure-properties/custom-instructions)
+
+> Note: Custom Instructions are supported only in version 2.0.0 or later. If you are using an older version, please update to the latest version of Code Studio.
+
+
+### Step 2: Migrate Existing Rules
+
+### If Your Rules Were in `config.yaml`
+
+- Open the `config.yaml`.
+
+**Windows**
+
+```
+C:\Users\
+ +**macOS** + +``` +/Users/
+ +- Locate the `rules:` section. + +
+ +- Copy all rule descriptions. + +- Paste them into the new instruction file below the `applyTo` section. + +
+ +- Save the file. + + + +### If Your Rules Were in `.sfcoderules` File + +- Open the `.sfcoderules` file in the workspace. + +
+ +- Copy all lines. + +- Paste them into your new instruction file below the `applyTo` section. + +
+ +- Save the file. + + + +## How Instruction Files Will Work +Once your instructions file is saved, Code Studio will: + +- Automatically reference your new instructions +- Apply them to all future requests + +
\ No newline at end of file diff --git a/code-studio/troubleshoot/migrate-legacy-prompt-files.md b/code-studio/troubleshoot/migrate-legacy-prompt-files.md new file mode 100644 index 0000000..d28ef9d --- /dev/null +++ b/code-studio/troubleshoot/migrate-legacy-prompt-files.md @@ -0,0 +1,127 @@ +--- +title: Migrate Legacy Prompt Files to New Format +description: Step-by-step guide to migrate Code Studio prompts from the old `.prompt` format to the new `.prompt.md` format with YAML frontmatter and Markdown support. +platform: syncfusion-code-studio +keywords: code-studio, prompt-migration, markdown, yaml, developer-tools, syncfusion, documentation +--- + + +# Migrate Legacy Prompt Files: Troubleshooting Guide + +## Problem Summary +Legacy Code Studio prompt files (`.prompt` in `.codestudio/prompts/`) from versions before 2.0.0 are not recognized or usable in Code Studio 2.0.0 and later, which requires the new `.prompt.md` format with YAML frontmatter and Markdown support. Users may find their old prompts missing, not appearing in chat, or not functioning as expected. + +## Possible Causes +- Prompt files are still in the legacy `.prompt` format (`.codestudio/prompts/`) +- Files are not saved with the `.prompt.md` extension +- Prompts are not placed in the correct directory (`.codestudio/prompts/` for workspace, user profile folder for user prompts) + +## Resolution Steps + +Follow these steps to migrate and restore prompt functionality: + +### 1. Locate Your Legacy Prompt Files +- **Workspace prompts:** `.codestudio/prompts/` (in your workspace folder) +- **File Extension:** `.prompt` + +### 2. Open and Copy Prompt Content +1. Open a `.prompt` file in a text editor or Code Studio. +2. Copy the content from the `prompt:` section (the main instruction text). + +### 3. Create a New Prompt File in Code Studio +You can create prompts as either **Workspace** or **User** prompts: +- **Workspace Prompt:** `.codestudio/prompts/` +- **User Prompt:** User profile folder (available across all workspaces) + +1. Open Code Studio +2. Go to the **Chat view** +3. Click the **Configure Chat** (gear icon) +4. Select **Prompt Files** → **New prompt file** +5. Choose Workspace or User +6. Enter a filename (no extension needed) + +> **Note:** For detailed instructions on creating and configuring prompt files, see the [Custom Prompt Files](/code-studio/reference/configure-properties/custom-prompt) guide. + +### 4. Paste and Format Content in New File +1. Add YAML frontmatter at the top: + - Start and end with `---` + - Add `name:`, `description:`, and optionally `agent:`, `model:`, `tools:`, `argument-hint:` +2. Paste your prompt content below the frontmatter +3. Use Markdown for formatting (headings, lists, bold, etc.) +4. Save the file with the `.prompt.md` extension + + +#### Example: Legacy vs. New Format + +**Legacy Format (before 2.0.0) - `GenerateReactForm.prompt`:** +```yaml +name: GenerateReactForm +description: Generate a new React form component +prompt: + Your goal is to generate a new React form component based on the templates in #tool:githubRepo contoso/react-templates. + + Ask for the form name and fields if not provided. + + Requirements for the form: + - Use form design system components: [design-system/Form.md](../docs/design-system/Form.md) + - Use `react-hook-form` for form state management + - Always define TypeScript types for your form data + - Prefer *uncontrolled* components using register + - Use `defaultValues` to prevent unnecessary rerenders + - Use `yup` for validation + - Create reusable validation schemas in separate files + - Use TypeScript types to ensure type safety + - Customize UX-friendly validation rules +``` + +**New Format (2.0.0 and later) - `GenerateReactForm.prompt.md`:** +```markdown +--- +agent: 'agent' +model: GPT-4o +tools: ['githubRepo', 'search/codebase'] +description: 'Generate a new React form component' +--- +Your goal is to generate a new React form component based on the templates in #tool:githubRepo contoso/react-templates. + +Ask for the form name and fields if not provided. + +Requirements for the form: +* Use form design system components: [design-system/Form.md](../docs/design-system/Form.md) +* Use `react-hook-form` for form state management +* Always define TypeScript types for your form data +* Prefer *uncontrolled* components using register +* Use `defaultValues` to prevent unnecessary rerenders +* Use `yup` for validation +* Create reusable validation schemas in separate files +* Use TypeScript types to ensure type safety +* Customize UX-friendly validation rules +``` + + +### 5. Verify YAML Frontmatter and Variables +- Ensure the YAML frontmatter is correct and between `---` lines +- Use only officially supported variables: + - `${workspaceFolder}` + - `${workspaceFolderBasename}` + - `${selection}` + - `${selectedText}` + - `${file}` + - `${fileBasename}` + - `${fileDirname}` + - `${fileBasenameNoExtension}` + - `${input:variableName}` + - `${input:variableName:placeholder}` + +### 6. Run the Migrated Prompts +To confirm your migrated prompts are working: +1. Open the new `.prompt.md` file in Code Studio. +2. Check the YAML frontmatter for syntax errors. +
+3. In Chat, type `/` and see if the prompt appears in the list (look for the prompt name and model used).
+ 
+4. Run the prompt and make sure it produces the expected results.
+
+> **Note:** If there are errors in the YAML frontmatter, the prompt's assigned `model` may not be used and a default model could be selected instead. Fix frontmatter errors to ensure the specified model is applied.
+
+---
diff --git a/code-studio/troubleshoot/openai-integration.md b/code-studio/troubleshoot/openai-integration.md
index 0bf54f9..0378da7 100644
--- a/code-studio/troubleshoot/openai-integration.md
+++ b/code-studio/troubleshoot/openai-integration.md
@@ -1,95 +1,76 @@
---
-title: "Syncfusion Code Studio Troubleshoot"
-description: "Professional guide for resolving O3 Model Integration Error in OpenAI Integration via OpenRouter"
-classification: "User Guide - Troubleshoot"
+title: How to Resolve Error (Status Code 403) for O3 Model in OpenAI Integration via OpenRouter
+description: Guide to resolve HTTP 403 Forbidden error when using O3 model through OpenRouter by configuring a valid Tier 3+ OpenAI API key.
platform: syncfusion-code-studio
-keywords: O3, Openrouter, troubleshoot, code-studio, syncfusion
+keywords: O3, OpenRouter, OpenAI, 403 error, API key, BYOK, troubleshoot
---
-# How to Resolve Error (Status Code 403) for O3 model in OpenAI Integration via OpenRouter
+# How to Resolve Error (Status Code 403) for O3 Model in OpenAI Integration via OpenRouter
-This guide will help you easily set up and use the OpenAI o3 model through OpenRouter’s platform with your own OpenAI API key. Follow these simple steps to get started and make the most of this powerful integration.
+## Problem Summary
----
+When using the OpenAI O3 model through OpenRouter, requests can fail with HTTP 403 (Forbidden). This typically occurs because O3 requires a valid Tier 3 (or higher) OpenAI API key configured under a Bring Your Own Key (BYOK) setup in OpenRouter. If the key is missing, insufficient-tier, or misconfigured, OpenRouter denies the request.
-## What You Need to Know
+> **Note:** "Tier 3" refers to OpenAI's usage tiers that control rate and spend limits. As of OpenAI's documentation, Tier 3 generally requires $100+ paid and 7+ days since the first successful payment. See [OpenAI Rate limits](https://platform.openai.com/docs/guides/rate-limits) for more details.
-- The OpenAI o3 model requires your own OpenAI API key (**Bring Your Own Key - BYOK**) to work with OpenRouter.
-- You’ll need an OpenAI account and an OpenRouter account to proceed.
+## Possible Causes
----
+- **Insufficient API Key Tier**: The OpenAI key used is not Tier 3 or above, which is required for the O3 model.
+- **Incorrect Configuration**: The key was either added incorrectly or not properly linked to the OpenRouter Integrations page.
+- **Usage Limits Reached**: Daily request limits (50 free / 1,000 with credits) may have been exceeded.
## Prerequisites
-- An active OpenAI account with a valid API key (**Tier 3 or higher** is required for the o3 model).
+- An active OpenAI account with a valid API key (Tier 3 or higher is required for the O3 model).
- An OpenRouter account to connect and manage your API key.
----
+## Resolution Steps
-## Step-by-Step Setup
+### Step 1: Obtain an OpenAI API Key
-### 1. Obtain an OpenAI API Key
+#### Log in to OpenAI
-- **Log in to OpenAI**
- - Visit [OpenAI Platform](https://platform.openai.com/) and sign in to your account.
+Visit [OpenAI Platform](https://platform.openai.com) and sign into your account.
-- **Generate an API Key**
- - Navigate to the API keys section in the OpenAI dashboard.
- - Click **Create API Key** and give it a descriptive name (e.g., `OpenRouter o3 Key`).
- - Copy the generated key and store it securely. **Do not share it publicly.**
+#### Generate an API Key
----
+1. Navigate to the **API keys** section in the OpenAI dashboard.
+2. Click **Create API Key** and provide a descriptive name (e.g., "OpenRouter O3 Key").
+3. Copy the generated key and store it securely.
-### 2. Configure OpenRouter with Your OpenAI API Key
+### Step 2: Configure OpenRouter with Your OpenAI API Key
-- **Sign Up for OpenRouter**
- - Go to [OpenRouter](https://openrouter.ai/) and create an account if you don’t already have one.
- - Log in to your OpenRouter dashboard.
+#### Sign Up for OpenRouter
-- **Access OpenRouter Integrations**
- - Navigate to [Settings > Integrations](https://openrouter.ai/settings/integrations)
-
- 
+1. Go to [OpenRouter](https://openrouter.ai) and create an account if you don't already have one.
+2. Log in to your OpenRouter dashboard.
+#### Access OpenRouter Integrations
- 
+1. Navigate to **Settings > Integrations (BYOk)**.
+ 
- - Choose **OpenAI** as the provider for the o3 model.
-
+ 
- 
+2. Select **OpenAI** as the provider for the O3 model.
- - Paste your OpenAI API key into the provided field.
- - Make sure it’s a valid **Tier 3 or higher** key.
+ 
- 
-
- - Click **Save** to link your key to OpenRouter. The platform will verify your key and set it up for o3 model requests.
+3. Paste your OpenAI API key into the provided field.
+4. Ensure the key is Tier 3 or higher.
----
-
-## Monitor Your Usage
+ 
-- **Check Usage Limits:** Free accounts on OpenRouter have a limit of 50 requests per day. If you’ve purchased 10+ credits, this increases to 1,000 requests per day
-- **Track Costs:** OpenRouter’s dashboard shows your token usage and costs based on your OpenAI API key activity.
+5. Click **Save** to link your key to OpenRouter. The platform will verify your key and configure it for O3 model requests.
+### Step 3: Monitor Your Usage
----
-
-## Best Practices
-
-- **Secure Your API Keys**: Never expose your OpenAI or OpenRouter API keys in public repositories. OpenRouter is a GitHub secret scanning partner to detect exposed keys.
-
-- **Error Handling:** Implement error handling for cases like “Forbidden” errors, which may indicate an invalid or insufficient-tier API key.
-
-- **Test the Integration:** After setup, test with a simple request to ensure your API key and configuration work correctly. If errors occur (e.g., “OpenAI is temporarily requiring a Tier 3 API key”), verify your OpenAI account tier.
-
----
+- **Check Usage Limits**: Free accounts on OpenRouter have a limit of 50 requests per day. Purchasing 10+ credits increases this limit to 1,000 requests per day.
+- **Track Costs**: The OpenRouter dashboard displays your token usage and costs based on your OpenAI API key activity.
## Additional Resources
-- [OpenRouter Documentation](https://openrouter.ai/docs) – Detailed API specifications
-- [OpenRouter Integrations](https://openrouter.ai/settings/integrations) – Manage API keys
-- [OpenAI Dashboard](https://platform.openai.com/) – API key management and tier status
-- [OpenRouter Model Details](https://openrouter.ai/docs#models) – Info on o3 and other models
+- [OpenRouter Documentation](https://openrouter.ai/docs) – Detailed API specifications
+- [OpenRouter Integrations](https://openrouter.ai/settings/integrations) – Manage API keys
+- [OpenAI Platform](https://platform.openai.com) – API key management and tier status
diff --git a/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md b/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md
deleted file mode 100644
index 1243408..0000000
--- a/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Resolving Failed to Parse Assitant Issue
-description: Fix the YAML configuration error by adding the required name field in Syncfusion Code Studio.
-platform: syncfusion-code-studio
-control: IDE
-documentation: Troubleshoot
-keywords: config, yaml, name, required, parse, error, assistant, code-studio, windows, macos
----
-
-# Resolving the "Failed to parse assistant: name: Required" Error
-
-## Overview
-When starting or using **Syncfusion Code Studio**, you may see an error dialog similar to:
-
-Failed to parse assistant: name: Required
-
-
-
-This occurs when the `name` field is missing in the Code Studio configuration YAML file. This guide explains how to add the missing field and resolve the issue.
-
-
-
-## Prerequisites
-- Syncfusion Code Studio installed.
-- Ability to edit the configuration file from within Code Studio.
-
-## Steps to Resolve
-
-### Step 1: Open the Config File from Code Studio
-1. In Code Studio, click the Gear (Settings) icon in the sidebar.
-2. Select "Open Config". This opens the YAML configuration file.
-
-
-
-### Step 2: Add the Required name Field
-1. In the opened YAML file, add a `name` field for your local assistant and save the file. For example:
-
-```yaml
-name: Local Assistant
-
-```
-
-
-
-> **Notes:** `name` must be a non-empty string and Keep YAML indentation consistent (use spaces, not tabs).
-
-### Step 3: Restart Code Studio
-1. Close Syncfusion Code Studio.
-2. Reopen it and verify the error is resolved.
-
diff --git a/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md b/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md
deleted file mode 100644
index daf1dee..0000000
--- a/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: Resolve MCP Server EACCESS Error
-description: Steps to fix EACCESS permission errors when installing MCP servers from the Marketplace in Syncfusion Code Studio.
-platform: syncfusion-code-studio
-control: IDE
-documentation: Troubleshoot
-keywords: mcp, eaccess, permission, marketplace, macos, install, error, troubleshoot, code-studio
----
-
-
-# Resolving the EACCESS Error in Syncfusion Code Studio
-
-## Overview
-When attempting to install the MCP server in the Marketplace tab of **Syncfusion Code Studio**, you may encounter an **EACCESS error**. This issue typically arises due to insufficient permissions in the application's support directory. This document provides a clear, step-by-step guide to resolve the issue professionally and efficiently.
-
- **Note:** The EACCESS error most commonly occurs on macOS systems.
-
-
-
-## Prerequisites
-- Administrative access to your system.
-- A terminal application (e.g., Terminal on macOS).
-- Syncfusion Code Studio installed on your system.
-
-## Steps to Resolve the EACCESS Error
-
-### Step 1: Change Ownership of the Directory
-To ensure your user account has the necessary permissions, you need to change the ownership of the Syncfusion Code Studio directory.
-
-1. Open your terminal application.
-2. Run the following command to change the ownership to your user account:
-
- ```bash
- sudo chown -R $(whoami):staff ~/Library/Application\ Support/syncfusion.codestudio
- ```
-
-When prompted, enter your administrator password.
-This command assigns ownership of the directory to your user account, ensuring proper access.
-
-### Step 2: Update Directory Permissions
- 1. After changing ownership, update the permissions to grant full read and write access to the directory.
-
-
- 2. In the terminal, run the following command:
-
-```bash
-chmod -R u+rw ~/Library/Application\ Support/syncfusion.codestudio
-```
-
-
- 3. This command ensures that your user account has read and write permissions for the directory and its contents.
-
-
-### Step 3: Restart Syncfusion Code Studio
-To apply the changes:
-
-1. Close Syncfusion Code Studio if it is currently open.
-2. Reopen the application.
-3. Navigate to the Marketplace tab and attempt to install the MCP server again to verify that the issue is resolved.
\ No newline at end of file
diff --git a/code-studio/troubleshoot/resolve-uncaught-exception-error.md b/code-studio/troubleshoot/resolve-uncaught-exception-error.md
new file mode 100644
index 0000000..87dcafe
--- /dev/null
+++ b/code-studio/troubleshoot/resolve-uncaught-exception-error.md
@@ -0,0 +1,73 @@
+---
+title: How to Resolve the Uncaught Exception Error During Code Studio AutoUpdate
+description: Guide to fix the Uncaught Exception error that occurs when Code Studio is launched during automatic updates. Includes quick fixes and clean reinstallation steps.
+platform: syncfusion-code-studio
+keywords: uncaught exception, autoupdate, troubleshoot, update error
+---
+
+# How to Resolve the Uncaught Exception Error During Code Studio AutoUpdate
+
+This guide explains how to resolve the `Uncaught Exception` error that occurs when Code Studio is launched during its automatic update process.
+
+## Problem Summary
+
+Users may encounter an `Uncaught Exception` error when Code Studio is launching during its automatic update process. This occurs if the application is opened before the update is fully completed, causing conflicts while essential files are still being modified. The issue can temporarily prevent Code Studio from starting and may require a simple wait-and-retry approach or a clean reinstallation if it persists.
+
+
+
+## Possible Causes
+
+- **Update In Progress**: The automatic update process is still replacing application files.
+- **Premature Launch**: Code Studio was opened before the update completed.
+- **File Conflicts**: Temporary file locks or conflicts occurred during file replacement.
+
+## Resolution Steps
+
+### Quick Fix
+
+1. Close the error dialog.
+2. Wait a few minutes for the automatic update to complete in the background.
+3. Relaunch Code Studio. It will start successfully with the latest version and automatically launch without requiring any user interaction.
+
+### If the Issue Persists (Clean Reinstallation)
+
+#### Step 1: Uninstall Code Studio
+
+1. **Windows**:
+ - Open **Windows Settings** → **Apps**.
+ - Find and select **Syncfusion Code Studio**.
+ - Click **Uninstall** and follow the user prompts to remove the application.
+
+ 
+
+2. **macOS**:
+ - Open **Finder** → **Applications**.
+ - Locate **Syncfusion Code Studio**.
+ - Open context menu and click **Move to Trash** or **Move to Bin** to remove the application.
+
+
+
+#### Step 2: Remove Code Studio Cache Files
+
+Delete cache and configuration folders to ensure a clean reinstallation. See [How to remove cache folders of Code Studio](/code-studio/troubleshoot/how-to-remove-cache-folders-of-code-studio-to-resolve-the-app-corruption) for detailed steps.
+
+#### Step 3: Reinstall Code Studio
+
+1. Reinstall Syncfusion Code Studio, refer to the [Syncfusion Code Studio Install and Configure](/code-studio/getting-started/install-and-configuration).
+2. Launch the application and verify it starts without errors.
+
+## Verification
+
+To confirm the issue is resolved:
+
+- Code Studio launches without the "Uncaught Exception" dialog.
+- The application shows the expected latest version in **Help** → **About** (after an update).
+- Subsequent launches are successful without intermittent errors.
+
+## Best Practices
+
+- **Avoid Interrupting Updates**: Do not open Code Studio while an update is in progress.
+- **Allow Full Completion**: Let the update complete fully. The application typically relaunches automatically.
+- **Maintain System Resources**: Ensure sufficient disk space and memory during update operations.
+
+> **Note:** Backup Recommendation - If you have custom configurations or settings you want to preserve, back up the relevant folders before deleting or clearing them.
diff --git a/code-studio/troubleshoot/review-gitdiff-changes.md b/code-studio/troubleshoot/review-gitdiff-changes.md
new file mode 100644
index 0000000..ace8a38
--- /dev/null
+++ b/code-studio/troubleshoot/review-gitdiff-changes.md
@@ -0,0 +1,37 @@
+---
+title: Review Git Diff Changes
+description: Guide on reviewing Git diff changes in Syncfusion Code Studio.
+platform: syncfusion-code-studio
+keywords: git diff, review changes, code studio, version control, ai assistance, code modifications
+---
+
+# Review Git Diff Changes in Code Studio
+
+## Problem Summary
+
+After upgrading to Code Studio v2.0.0+, the method to review git diff changes has been updated. Previously(before v2.0.0), users could view uncommitted changes by typing **@Git Diff** in the chat box or using the **"Add context"** button. In v2.0.0+, this functionality is now accessed by typing **#** in the chat input box and selecting `#changes` from the dropdown menu.
+
+
+## Resolution Steps
+
+### Steps to Use #changes
+
+1. Make sure the desired project/workspace is open and active in Code Studio — preferably one that is connected to a GitHub repository. The `#changes` tool only shows modifications from the currently opened project.
+
+2. Go to the chat panel in Code Studio where you interact with the AI assistant.
+
+3. In the chat input box type #, a dropdown menu will appear showing available options. From this dropdown, select `#changes`.
+
+ 
+
+4. After selecting `#changes`, type your specific question or request regarding the current changes.
+
+5. Submit the prompt. The agent collects the current Git changes from your workspace and generates a response that references those changes to fulfill your request.
+
+ 
+
+## Best Practices
+
+- Write clear and specific questions so the `#changes` tool can focus on exactly what you want to see.
+- Review the diff carefully before staging, committing, or merging changes, especially when many files are modified.
+- Refine your question or ask a follow-up if you need a shorter summary, more explanation, or only certain types of changes.
\ No newline at end of file
diff --git a/code-studio/troubleshoot/troubleshoot-images/Openrouter-home.png b/code-studio/troubleshoot/troubleshoot-images/Openrouter-home.png
new file mode 100644
index 0000000..7189c6f
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/Openrouter-home.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/Openrouter-integrations.png b/code-studio/troubleshoot/troubleshoot-images/Openrouter-integrations.png
new file mode 100644
index 0000000..62bd792
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/Openrouter-integrations.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/Openrouter-key.png b/code-studio/troubleshoot/troubleshoot-images/Openrouter-key.png
new file mode 100644
index 0000000..d4cd03e
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/Openrouter-key.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/Openrouter-setting.png b/code-studio/troubleshoot/troubleshoot-images/Openrouter-setting.png
new file mode 100644
index 0000000..9ae982f
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/Openrouter-setting.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/agent-tab-settings.png b/code-studio/troubleshoot/troubleshoot-images/agent-tab-settings.png
new file mode 100644
index 0000000..09af0d7
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/agent-tab-settings.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/cache-image-mac.png b/code-studio/troubleshoot/troubleshoot-images/cache-image-mac.png
new file mode 100644
index 0000000..1b25bc8
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/cache-image-mac.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/cache-image-macapplication.png b/code-studio/troubleshoot/troubleshoot-images/cache-image-macapplication.png
new file mode 100644
index 0000000..da97a0f
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/cache-image-macapplication.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/cache-image-macroaming.png b/code-studio/troubleshoot/troubleshoot-images/cache-image-macroaming.png
new file mode 100644
index 0000000..c80f5c2
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/cache-image-macroaming.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/cache-image-programfiles.png b/code-studio/troubleshoot/troubleshoot-images/cache-image-programfiles.png
new file mode 100644
index 0000000..a7ba019
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/cache-image-programfiles.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/cache-image-roaming.png b/code-studio/troubleshoot/troubleshoot-images/cache-image-roaming.png
new file mode 100644
index 0000000..95cb663
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/cache-image-roaming.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/cache-image.png b/code-studio/troubleshoot/troubleshoot-images/cache-image.png
new file mode 100644
index 0000000..77683e8
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/cache-image.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/changes_tool_drop_down.png b/code-studio/troubleshoot/troubleshoot-images/changes_tool_drop_down.png
new file mode 100644
index 0000000..4fb80f1
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/changes_tool_drop_down.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/codebase_tool_drop_down.png b/code-studio/troubleshoot/troubleshoot-images/codebase_tool_drop_down.png
new file mode 100644
index 0000000..6afbf99
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/codebase_tool_drop_down.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/codebase_tool_response.png b/code-studio/troubleshoot/troubleshoot-images/codebase_tool_response.png
new file mode 100644
index 0000000..f236231
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/codebase_tool_response.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/docsindexing1.png b/code-studio/troubleshoot/troubleshoot-images/docsindexing1.png
new file mode 100644
index 0000000..77fb089
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/docsindexing1.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/docsindexing2.png b/code-studio/troubleshoot/troubleshoot-images/docsindexing2.png
new file mode 100644
index 0000000..9377c4b
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/docsindexing2.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/docsindexing3.gif b/code-studio/troubleshoot/troubleshoot-images/docsindexing3.gif
new file mode 100644
index 0000000..e349a63
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/docsindexing3.gif differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/git_diff_response.png b/code-studio/troubleshoot/troubleshoot-images/git_diff_response.png
new file mode 100644
index 0000000..82838f7
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/git_diff_response.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/migrated-prompt.png b/code-studio/troubleshoot/troubleshoot-images/migrated-prompt.png
new file mode 100644
index 0000000..6927f5a
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/migrated-prompt.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/model-used.png b/code-studio/troubleshoot/troubleshoot-images/model-used.png
new file mode 100644
index 0000000..e68c93d
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/model-used.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/models.png b/code-studio/troubleshoot/troubleshoot-images/models.png
new file mode 100644
index 0000000..29cfbcf
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/models.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/open-settings.png b/code-studio/troubleshoot/troubleshoot-images/open-settings.png
new file mode 100644
index 0000000..1d12e82
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/open-settings.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules1.png b/code-studio/troubleshoot/troubleshoot-images/rules1.png
new file mode 100644
index 0000000..8efacb4
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules1.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules2.png b/code-studio/troubleshoot/troubleshoot-images/rules2.png
new file mode 100644
index 0000000..1b25bc8
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules2.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules3.png b/code-studio/troubleshoot/troubleshoot-images/rules3.png
new file mode 100644
index 0000000..894e80b
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules3.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules4.gif b/code-studio/troubleshoot/troubleshoot-images/rules4.gif
new file mode 100644
index 0000000..94f9ee1
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules4.gif differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules5.png b/code-studio/troubleshoot/troubleshoot-images/rules5.png
new file mode 100644
index 0000000..fdb2e97
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules5.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules6.gif b/code-studio/troubleshoot/troubleshoot-images/rules6.gif
new file mode 100644
index 0000000..2f6796a
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules6.gif differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/rules7.gif b/code-studio/troubleshoot/troubleshoot-images/rules7.gif
new file mode 100644
index 0000000..dcb6e14
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/rules7.gif differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/session-history.png b/code-studio/troubleshoot/troubleshoot-images/session-history.png
new file mode 100644
index 0000000..1837bd4
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/session-history.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/session-three-dots.png b/code-studio/troubleshoot/troubleshoot-images/session-three-dots.png
new file mode 100644
index 0000000..2907132
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/session-three-dots.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/settings-icon.png b/code-studio/troubleshoot/troubleshoot-images/settings-icon.png
new file mode 100644
index 0000000..292a094
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/settings-icon.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/showchats.png b/code-studio/troubleshoot/troubleshoot-images/showchats.png
new file mode 100644
index 0000000..6cde737
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/showchats.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/uncaughtexception1.png b/code-studio/troubleshoot/troubleshoot-images/uncaughtexception1.png
new file mode 100644
index 0000000..1b4966d
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/uncaughtexception1.png differ
diff --git a/code-studio/troubleshoot/troubleshoot-images/uncaughtexception2.png b/code-studio/troubleshoot/troubleshoot-images/uncaughtexception2.png
new file mode 100644
index 0000000..dd1a5e8
Binary files /dev/null and b/code-studio/troubleshoot/troubleshoot-images/uncaughtexception2.png differ
diff --git a/code-studio/troubleshoot/use-codebase-search.md b/code-studio/troubleshoot/use-codebase-search.md
new file mode 100644
index 0000000..cc3c66f
--- /dev/null
+++ b/code-studio/troubleshoot/use-codebase-search.md
@@ -0,0 +1,35 @@
+---
+title: Codebase Search
+description: Guide on using Codebase Search in Syncfusion Code Studio.
+platform: syncfusion-code-studio
+keywords: codebase search, search codebase, code exploration, project navigation, ai assistance, code understanding
+---
+
+# Codebase Search in Code Studio
+
+## Problem Summary
+
+After upgrading to Code Studio v2.0.0+, the method to search your codebase has been updated. Previously(before v2.0.0), users could query or get context about their codebase by typing **@codebase** in the chat box or using the **"Add context"** button. In v2.0.0+, this functionality is now accessed by typing **#** in the chat input box and selecting `#codebase` from the dropdown menu.
+
+## Resolution Steps
+
+### Steps to Use Codebase Search
+
+1. Ensure that your desired codebase is loaded and active in the Code Studio IDE. The tool only accesses the currently opened project.
+
+2. Navigate to the chat panel within Code Studio where you can interact with the AI assistant.
+
+3. In the chat input box type #, a dropdown menu will appear with available options. From this dropdown, select `#codebase`.
+ 
+
+4. After the keyword, add specific questions or requests about the codebase, such as explaining the codebase, searching for functions, variables, or files.
+
+5. Submit the prompt and review the response, which will include relevant details from the codebase. If needed, refine your query for more precise results.
+
+ 
+
+## Best Practices
+
+- Write clear and specific questions so the codebase search can accurately understand which part of the project you want to explore.
+- Add helpful context such as folder names, file names, class names, function names, or the area of the codebase you are interested in.
+- Refine your question or ask a follow-up if the answer is too broad, misses something important, or needs more detail.
\ No newline at end of file
diff --git a/code-studio/tutorials/build-ui-using-syncfusionui-builder.md b/code-studio/tutorials/build-ui-using-syncfusionui-builder.md
new file mode 100644
index 0000000..80d669e
--- /dev/null
+++ b/code-studio/tutorials/build-ui-using-syncfusionui-builder.md
@@ -0,0 +1,107 @@
+---
+title: Build UI using Syncfusion UI Builder
+description: Step-by-step tutorial to build a customer dashboard in React using Syncfusion UI Builder in Code Studio. Includes data grid, charts, and export features.
+platform: syncfusion-code-studio
+keywords: tutorial, ui-builder, syncfusion-components, dashboard, data-grid, charts
+---
+
+# Build UI Using Syncfusion UI Builder
+
+## Overview
+
+Build a complete customer dashboard using Syncfusion UI Builder in Code Studio. You will scaffold a React app, generate a data grid and charts, wire up export actions, and validate the final result.
+
+## Prerequisites
+
+- Syncfusion Code Studio installed and configured (Follow the [Install and Configure](/code-studio/getting-started/install-and-configuration) guide if not yet installed)
+- Ensure UI Builder tool enabled
+- [Node.js](https://nodejs.org/en/download) and npm installed
+- [Syncfusion license key](https://help.syncfusion.com/common/essential-studio/licensing/how-to-generate)
+
+## What You’ll Learn
+
+- Generate a dashboard UI with data grid, charts, and export actions
+- Write effective UI Builder requests to create full features
+- Customize generated Syncfusion components
+- Configure Syncfusion licensing and theme assets
+- Validate functionality and troubleshoot common issues
+
+## Steps
+
+### Step 1: Create and Open the React Project
+
+1. Create a new React app and open it in Code Studio:
+ ```bash
+ npm create vite@latest customer-dashboard -- --template react
+ cd customer-dashboard
+ ```
+2. Open the project folder in Code Studio.
+3. Verify the UI Builder tool is enabled:
+ - Open the Configure Tools panel in Code Studio
+ - Ensure the UI Builder tool is enabled.
+ 
+ 
+
+### Step 2: Generate the Dashboard with UI Builder
+
+1. In Code Studio, make a comprehensive UI Builder request to create the full dashboard:
+
+ Create a customer dashboard for React using Syncfusion components with data grid, charts, and export functionality.
+
+2. Code Studio will generate the components (data grid, charts) and wire up basic layout and interactions.
+ 
+
+### Step 3: Configure Syncfusion License and Theme
+
+1. Ensure required Syncfusion packages are installed. Code Studio typically installs dependencies automatically when generating components.
+2. [Register](https://help.syncfusion.com/common/essential-studio/licensing/how-to-register-in-an-application#reactjs) your Syncfusion license key in your app entry (for example, in index.js):
+ ```javascript
+ import { registerLicense } from '@syncfusion/ej2-base';
+ registerLicense('YOUR_LICENSE_KEY');
+ ```
+3. Confirm that a Syncfusion theme CSS import is present in your entry styles.
+
+### Step 4: Run and Inspect
+
+1. Start the development server and open the app in the browser:
+ ```bash
+ npm run dev
+ ```
+2. Confirm all components render without errors and the layout is responsive.
+
+### Step 5: Customize (Optional)
+
+- Adjust grid columns, sorting, filtering, and pagination settings
+- Update chart types, series, and data sources
+- Add toolbar items such as Excel/PDF export and wire them to handlers
+- Replace sample data with API-backed data as needed
+
+## Verify
+
+Expected result:
+
+
+
+Validate the following:
+
+- Data Grid
+ - Columns support sorting and filtering
+ - Pagination works and data renders correctly
+- Charts
+ - Sales by Region (bar) and Customer Growth (line) show expected values
+ - Tooltips and interactions work; layout is responsive
+- Export
+ - Grid exports to Excel and PDF successfully
+ - Exported files contain correct data and formatting
+- Integration
+ - No runtime errors; acceptable load and render performance
+ - License key is registered and no license popups appear
+
+If something fails:
+- Ensure all Syncfusion packages and peer dependencies are installed
+- Verify theme CSS imports
+- Check data shapes against component requirements
+
+## Next Steps
+
+ - Visit [UI Builder](/code-studio/ui-builder) to learn how to use the UI Builder tool effectively and explore the supported platforms.
\ No newline at end of file
diff --git a/code-studio/tutorials/compare-ai-models.md b/code-studio/tutorials/compare-ai-models.md
new file mode 100644
index 0000000..37ddcd1
--- /dev/null
+++ b/code-studio/tutorials/compare-ai-models.md
@@ -0,0 +1,695 @@
+---
+title: Compare AI models for different tasks
+description: Compare AI models in Syncfusion Code Studio and learn when to use Claude, Gemini, and GPT families for coding, debugging, refactoring, and fast iterations with examples.
+platform: syncfusion-code-studio
+keywords: "compare-ai-models, choose-model, claude-haiku-4.5, claude-sonnet-4.5, gemini-2.5-flash, gemini-2.5-pro, gemini-3-flash, gpt-4.1, gpt-5, gpt-5-mini, gpt-5.1-codex, gpt-5.2, code-generation, debugging, refactoring, reasoning, low-latency"
+---
+
+# Compare AI models for different tasks
+
+## Overview
+
+Code Studio provides access to multiple AI models, each optimized for different kinds of tasks. Some models respond quickly with concise results, while others focus on deeper reasoning, larger context, or code-heavy workflows.
+
+This tutorial helps you understand which AI model to use for which type of task, using practical examples and expected outcomes. You will learn to match tasks to models based on complexity, latency requirements, and reasoning depth, enabling you to work more efficiently and produce better code.
+
+## Prerequisites
+
+**Code Studio Installation** - Download and configure the IDE: [Install and Configuration](/code-studio/getting-started/install-and-configuration)
+
+## What You'll Learn
+
+By the end of this tutorial, you will be able to:
+
+- Identify the strengths and optimal use cases for each AI model in Code Studio
+- Choose the right model based on task complexity, latency needs, and reasoning requirements
+- Apply model selection strategies to real development scenarios
+- Recognize when to switch models mid-task for better results
+- Understand the trade-offs between speed, reasoning depth, and context size
+
+No prior AI expertise is required. This tutorial focuses on practical decision-making rather than technical model details.
+
+## Model Capabilities with Examples
+
+Below are the AI models available in Code Studio, explained through realistic tasks, example prompts, and expected results. Each section explains **why** a particular model fits a specific task type.
+
+### Claude Haiku 4.5
+
+**Best for**
+
+- Fast, low-latency responses
+- Everyday coding assistance
+- Simple and repetitive coding tasks
+- Small utility functions and validation logic
+- Boilerplate generation and documentation help
+
+**Why use this model**
+
+Claude Haiku 4.5 prioritizes speed without sacrificing reliability. When you need immediate feedback for straightforward tasks—such as generating standard patterns, writing basic validation, or creating documentation—this model delivers results in seconds. It avoids over-complicating simple requests, making it ideal for maintaining development momentum.
+
+**Example Task**
+
+```
+Create boilerplate code for a REST API endpoint that:
+
+1. Accepts a GET request for /api/products?category=electronics
+2. Includes a controller to handle the request
+3. Includes a service layer for business logic
+4. Includes proper error handling
+5. Returns JSON response
+```
+
+**Example Outcome**
+
+```typescript
+// routes/productRoutes.ts
+import { Router } from 'express';
+import { ProductController } from '../controllers/ProductController';
+
+const router = Router();
+const productController = new ProductController();
+
+router.get('/products', (req, res) =>
+ productController.getProductsByCategory(req, res)
+);
+```
+
+```typescript
+// controllers/ProductController.ts
+import { Request, Response } from 'express';
+import { ProductService } from '../services/ProductService';
+
+export class ProductController {
+ private productService = new ProductService();
+
+ async getProductsByCategory(req: Request, res: Response) {
+ try {
+ const category = req.query.category as string;
+
+ if (!category) {
+ return res.status(400).json({ error: 'Category is required' });
+ }
+
+ const products = await this.productService.findByCategory(category);
+ return res.status(200).json(products);
+ } catch (error) {
+ return res.status(500).json({ error: 'Internal server error' });
+ }
+ }
+}
+```
+
+```typescript
+// services/ProductService.ts
+import { Product } from '../models/Product';
+
+export class ProductService {
+ async findByCategory(category: string): Promise
+
+### Step 2: Describe Your Task
+
+1. In the chat input field, enter your coding request or task description.
+
+ >**Tip:** Be as specific as possible with your instructions to achieve better results.
+
+2. Press **Enter** to submit your request.
+3. The Agent will:
+ - Analyze and understand your request.
+ - Explore the relevant codebase sections.
+ - Use appropriate tools to make changes.
+ - Suggest necessary code modifications.
+
+ 
+
+### Step 3: Review the Proposed Changes
+
+1. The Agent displays a side-by-side comparison of all proposed modifications.
+2. Examine each change carefully to ensure it aligns with your intent.
+3. For each change, use the options provided in the chat:
+ - Click **Keep** to approve and apply the change.
+ - Click **Undo** to reject and discard the change.
+
+ 
+
+### Step 4: Review the Code Change Summary
+
+1. Once all changes are complete, the Agent provides a detailed summary.
+2. The summary lists:
+ - All files modified.
+ - New files created.
+ - Tools used during the process.
+3. Review this summary carefully to confirm all changes match your requirements.
+
+### Step 5: Manage Using Checkpoints
+
+1. The Agent automatically creates checkpoints between chat requests.
+2. Checkpoints provide a safety net by allowing you to:
+ - Review changes at different stages.
+ - Restore your code to any previous checkpoint if needed.
+
+ 
+
+## Verification
+
+To confirm everything worked as expected:
+
+- **Agent Mode:** Verify that Agent Mode is active and you have granted all necessary tool permissions.
+- **Changes Applied:** Review your codebase and confirm that all accepted changes have taken effect.
+- **Summary Accuracy:** Check the final summary to ensure all intended files were modified or created as described.
+- **Checkpoints:** Locate the available checkpoints (usually visible at the bottom of each chat request) and attempt to restore one to confirm the feature works correctly.
+- **Permissions:** If tool calls are not executing, verify that you have granted permission for tool access in the settings.
+
+
+## Next Steps
+
+Now that you have successfully generated your first code change using Agent mode:
+
+- Learn about **checkpoint** to efficiently manage your project versions. See [Checkpoints](/code-studio/features/checkpoints) for details.
+- Review the **Agent mode features** guide for additional capabilities. See [Agent](/code-studio/features/agent) for details.
diff --git a/code-studio/tutorials/tutorials-images/context.png b/code-studio/tutorials/tutorials-images/context.png
new file mode 100644
index 0000000..143b4f1
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/context.png differ
diff --git a/code-studio/tutorials/tutorials-images/customer-dashboard-output.png b/code-studio/tutorials/tutorials-images/customer-dashboard-output.png
new file mode 100644
index 0000000..2cb8dfa
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/customer-dashboard-output.png differ
diff --git a/code-studio/tutorials/tutorials-images/firstagentchange1.png b/code-studio/tutorials/tutorials-images/firstagentchange1.png
new file mode 100644
index 0000000..5fd9735
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/firstagentchange1.png differ
diff --git a/code-studio/tutorials/tutorials-images/firstagentchange2.png b/code-studio/tutorials/tutorials-images/firstagentchange2.png
new file mode 100644
index 0000000..75da72e
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/firstagentchange2.png differ
diff --git a/code-studio/tutorials/tutorials-images/firstagentchange3.png b/code-studio/tutorials/tutorials-images/firstagentchange3.png
new file mode 100644
index 0000000..77c7976
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/firstagentchange3.png differ
diff --git a/code-studio/tutorials/tutorials-images/firstagentchange4.png b/code-studio/tutorials/tutorials-images/firstagentchange4.png
new file mode 100644
index 0000000..8b598cf
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/firstagentchange4.png differ
diff --git a/code-studio/tutorials/tutorials-images/tool.png b/code-studio/tutorials/tutorials-images/tool.png
new file mode 100644
index 0000000..50bcd56
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/tool.png differ
diff --git a/code-studio/tutorials/tutorials-images/toolenable.png b/code-studio/tutorials/tutorials-images/toolenable.png
new file mode 100644
index 0000000..164f54e
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/toolenable.png differ