Skip to content

Update documentation for Code Studio's Ask and Tool. #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SuriyaKumar2402 merged 9 commits into from
Feb 5, 2026
Merged

Update documentation for Code Studio's Ask and Tool. #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b6aafa6
Prepared documentation for Code Studio's Ask and Tool.
Arunachalam406 Feb 4, 2026
1385a49
Changed from overview to purpose.
Arunachalam406 Feb 4, 2026
b4fd7e6
Improved the ask.md(slightly content changed), toolssupport.md(added …
Arunachalam406 Feb 5, 2026
2849d04
Merge branch 'development' of https://github.com/syncfusion-content/s…
Arunachalam406 Feb 5, 2026
6b41325
Improved the compare-ai-models.md documentation and added the prerequ…
Arunachalam406 Feb 5, 2026
0a045b7
Restructured the title for the ask.md and updated the prerequisites o…
Arunachalam406 Feb 5, 2026
8b9de30
Removed the unwanted link.
Arunachalam406 Feb 5, 2026
d8de4db
Added the review changes.
Arunachalam406 Feb 5, 2026
6abe6f4
Merge branch 'development' of https://github.com/syncfusion-content/s…
Arunachalam406 Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 58 additions & 36 deletions code-studio/features/ask.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
## Feature 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

<img src="./feature-images/ask1.png" alt="Ask Mode" />
**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

<img src="./feature-images/ask2.png" alt="Ask Mode" />
**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

<img src="./feature-images/ask3.png" alt="Ask Mode" />
### 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.
<img src="./feature-images/ask1.png" alt="Ask Mode Selection" />

## Why use ask mode?
Ask Mode is designed for learning and exploration. It’s perfect when you want:
- Quick answers without digging through documentation.
- Ready-to-use code snippets for common tasks.
- Clear explanations of design patterns and best practices.
### Step 2: Submit Your Query

Type your query using natural language. For optimal results:
- State the programming language or framework explicitly
- Include relevant error messages or stack traces when troubleshooting
- Specify the desired output format

**Example Query:**

<img src="./feature-images/ask2.png" alt="Ask Mode Query Example" />

### Step 3: Review the Response

Code Studio processes your query and returns:
- Technical explanations with relevant context
- Executable code snippets with syntax highlighting
- Best practice recommendations specific to your query
- References to related concepts when applicable

**Example Response:**

<img src="./feature-images/ask3.png" alt="Ask Mode Response Example" />

### Step 4: Apply or Iterate

- **Copy snippets** directly into your editor for immediate use
- **Refine queries** with follow-up questions to clarify edge cases
- **Request alternatives** by asking for different approaches or implementations

## Best Practices
- Write clear and direct questions so Ask Mode understands your request.
- Add context like code snippets, frameworks, or error messages for accurate answers.
- Keep questions focused by asking one at a time.
- Review Ask Mode’s response carefully before applying it to your project.
- Refine your query or ask follow-up questions if the first answer isn’t enough.

- **Be Specific** - Include framework versions, error codes, and technical constraints in your query
- **Provide Context** - Share minimal code snippets that demonstrate the problem or requirement
- **Single-Purpose Queries** - Ask one focused question per prompt for clearer responses
- **Verify Outputs** - Review generated code for security, performance, and compatibility before integration
- **Iterate When Needed** - Refine queries with additional details if the initial response is insufficient
- **Use Proper Terminology** - Technical accuracy in your question improves response quality

## Related Features

- [Edit Mode](/code-studio/features/edit) - Context-aware file editing with workspace integration
- [Agent Mode](/code-studio/features/agent) - Multi-step task automation with tool execution
69 changes: 38 additions & 31 deletions code-studio/reference/configure-properties/toolssupport.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

<img src="../reference-images/tools1.png" alt="Tools" >

### 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:

<table border="1" cellpadding="8" cellspacing="0">
<thead>
Expand Down Expand Up @@ -100,13 +105,15 @@ Below is a list of some tools and their descriptions for reference
</tbody>
</table>

## How to Enable Tools for Chat
## Steps

### How to Enable Tools for Chat

Before you can use tools in chat, you need to enable them in the **Chat view**. Tools can be enabled or disabled on a per-request basis using the **tools picker**.
Before you can use tools in chat, you need to enable them in the **Chat view**. Tools can be enabled or disabled on a per-request basis using the **tools picker**.

> **Note:** Select the agent after that tool picker is visible in the chat. Select only the tools that are relevant to your prompt to improve results.
> **Note:** Select the agent after the tools picker is visible in the chat. Select only the tools that are relevant to your prompt to improve results.

### How to access the tools picker
#### How to access the tools picker

**Step 1** : Click the Syncfusion Code Studio icon. The chat window is displayed.

Expand All @@ -126,7 +133,7 @@ Before you can use tools in chat, you need to enable them in the **Chat view**.

**💡Tip** : Use the search box to quickly filter the list of tools.

## How to use tools in your prompts
### How to Use Tools in Your Prompt

You can explicitly reference tools in your prompts by typing **#** followed by the **tool name**. This is useful when you want to ensure that a specific tool is used. Type **#** in the chat input field to see a list of available tools.

Expand All @@ -136,7 +143,7 @@ You can explicitly reference tools in your prompts by typing **#** followed by t

<img src="../reference-images/tools6.png" alt="Tools" >

## 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.

Expand Down
Loading