| Feature | +Purpose | +Key Actions | +
|---|---|---|
| Team Budget Setup | +Allocate budget for a team | +Select Team → Set Maximum Budget → Choose Period (Monthly/Quarterly/Half-Yearly/Annually) → Enable Auto-Renewal (optional) | +
| User Budget | +Assign budget to individual users | +Select Team → Choose User → Set Budget Limit → Define Period → Monitor Usage | +
| Usage Alerts | +Notify when usage exceeds threshold | +Set Threshold (%) → Add Email Subject Prefix → Specify Recipients → Click Update | +
+### Prerequisites
+
+- Administrator or Team Lead role.
+- Active teams and users in Code Studio.
+- Billing card on file (credits are deducted from usage).
+- Understanding of credit conversion: **1 USD = 150 credits**
+
+
+
+### Steps
-## 1. Team Budget Setup
+#### Step 1: Team Budget Setup
-**Steps:**
+1. Open the **Budget** window.
+2. Select the desired **Team**.
+3. Set the **Maximum Budget** for the team.
-- Open the **Budget** window.
-- Select the desired **Team**.
-- Set the **Maximum Budget** for the team.
-- Choose the **Budget Period**:
- - Monthly
- - Quarterly
- - Half-Yearly
- - Annually
-- (Optional) Enable **Auto-Renewal** by checking the box. This will automatically reset the budget at the end of each period.
+We have calculated the total budget in credits, based on the combined costs of the Premium Model and the BYOK (Bring Your Own Key) Model. The conversion rate used is 1 USD = 150 credits.
-## 2. Individual User Budget Allocation
+**Budget Summary Example:**
-**Steps:**
+- **Total Budget Allocated**: 4,500 credits
-- Within the selected team, give the user’s name to edit budget limit.
-- For each user:
- - Set the **Maximum Budget**.
- - Define the **Budget Period**.
-- Monitor usage and adjust as needed.
+**1. BYOK Model**
+- Dollar Amount: \$23
+- Conversion Rate: 1 USD = 150 credits
+- Total BYOK Cost: 23 × 150 = **3,450 credits**
-
+**2. Premium Model**
+- Dollar Amount: \$7
+- Total Premium Cost: **1,050 credits**
+
+**Combined Total Cost**:
+**3,450 (BYOK) + 1,050 (Premium) = 4,500 credits**
+
+4. Choose the **Budget Period**:
+ - Monthly
+ - Quarterly
+ - Half-Yearly
+ - Annually
-## 3. Usage Alerts
+5. *(Optional)* Enable **Auto-Renewal** to reset the budget at the end of each period.
-Administrators can set up alerts to notify when budget usage exceeds a defined threshold.
-**Steps:**
-- Open the **Edit usage Alert**.
-- Set the **Usage Threshold** (e.g., 50%).
-- Enter the **Email Subject Prefix** (required).
-- Specify the **Recipients** for the alert (e.g., team leads or finance managers). An alert email will be sent to the recipient.
-- Click **Update** to activate the alert.
+#### Step 2: Individual User Budget Allocation
+
+1. Within the selected team, choose the user to edit their budget.
+2. Set the **Maximum Budget**.
+3. Define the **Budget Period**.
+4. Monitor usage and adjust as needed.
+
+#### Step 3: Usage Alerts
+
+Admins can set up alerts to notify when budget usage exceeds a defined threshold.
+
+1. Open **Edit Usage Alert**.
+2. Set the **Usage Threshold** (e.g., 50%).
+3. Enter the **Email Subject Prefix**.
+4. Specify the **Recipients** (e.g., team leads or managers).
+5. Click **Update** to activate the alert.
-🔔 Alerts help proactively manage budget overruns and ensure timely action.
+> 🔔 **Alerts help proactively manage budget overruns and ensure timely action.**
+
+
+
+### Validation
+
+- **Team Budget**: Appears in Budget Overview with correct total, period, and auto-renew status.
+- **User Budget**: Displays under team with per-user cap and usage bar.
+- **Credit Math**:
+ - \$1 = 150 credits
+ - 4,500 credits = ~$30 total spend allowed
+- **Auto-Renew**: Budget resets at the end of the selected period (e.g., monthly).
+
+
+
+### Troubleshooting
+
+- **Budget not saving**
+ → Entered non-numeric value or missing period
+ → *Fix*: Use numbers only; select a period
+
+- **Team not in dropdown**
+ → Team not created or you lack access
+ → *Fix*: Create team in **Users & Teams**; check your role
+
+- **Usage not deducting from budget**
+ → BYOK model not tracked or credits disabled
+ → *Fix*: Ensure BYOK key is active; check **Billing** tab
+
+- **No alert email received**
+ → Threshold too high or recipients misspelled
+ → *Fix*: Lower to 50% for testing; verify email addresses
+
+- **Auto-renewal not resetting**
+ → Feature disabled or period misaligned
+ → *Fix*: Re-enable toggle; wait until exact period boundary (e.g., midnight UTC)
+
+- **User exceeds budget but still works**
+ → Soft limit (warning only) or alert misconfigured
+ → *Fix*: Budgets are flexible — use alerts + manual enforcement
+
+- **Can’t find Budget tab**
+ → You’re not an Admin or Team Lead
+ → *Fix*: Ask Admin to assign the correct role
+
+
+
+
+
+
diff --git a/code-studio/enterprise-server/dashboard.md b/code-studio/enterprise-server/dashboard.md
index 51c5c6f..b1ca9f6 100644
--- a/code-studio/enterprise-server/dashboard.md
+++ b/code-studio/enterprise-server/dashboard.md
@@ -7,11 +7,50 @@ keywords: dashboard, analytics, monitoring, usage, tokens, requests, latency, te
# Dashboard
-The Code Studios Dashboard provides a centralized interface for monitoring and analyzing usage metrics across your organization. It enables administrators and team leads to track token consumption, request volumes, latency, and cost metrics, both at the organizational and individual levels.
+The **Code Studio Dashboard** provides a centralized interface for monitoring and analyzing usage metrics across your organization. It enables administrators and team leads to track token consumption, request volumes, latency, and cost metrics—both at the organizational and individual levels.
+## When to Use
+- Track token usage, costs, requests, and response times across your organization, teams, or individual users.
+- Generate reports for budgeting, performance reviews, or monthly trend analysis.
+- Identify top users or models to optimize spending and resource allocation.
+- Spot performance issues using latency trends or detect unusual activity.
-## 1. Graphical Overview
+**Who can use it?**
+Administrators and Team Leads (Users have limited view).
+
+
+
+## Prerequisites
+
+- Active Code Studio account.
+- Administrator or Team Lead role for full access.
+- At least one model active in Premium or BYOK (Bring Your Own Keys) mode.
+- Modern browser (Chrome, Firefox, Edge).
+
+
+
+## Steps
+
+### 1: Navigate to the Dashboard
+
+- Go to **Dashboard**
+- Select tab: **Premium** or **BYOK**
+
+
+
+### 2: Check Summary Cards
+
+View key stats at the top:
+
+- **Total Cost** – Money spent in the selected period
+- **Input Prompt Tokens** – Tokens used in your prompts
+- **Output Completion Tokens** – Tokens in model responses
+- **Active Users** – Number of users who made requests
+
+
+
+### 3. Explore the charts
The dashboard presents a visual summary of the following metrics:
@@ -45,7 +84,7 @@ The dashboard presents a visual summary of the following metrics:
-## 2. Team & User Monitoring
+## 4. Team & User Monitoring
You can monitor:
@@ -53,47 +92,55 @@ You can monitor:
- **Team-specific usage**: Filter data by individual teams.
- **User-specific usage**: Drill down into individual user activity.
-## 3. Date Range Filtering
+### 5. Date Range Filtering
- Select custom date ranges to analyze token usage and other metrics over time.
- Useful for monthly reporting, trend analysis, and budget tracking.
-## 4. How to Use the Dashboard
-### Step 1: Navigate to the Dashboard
-- Go to [Dashboard](https://app.sfcodestudio.com/dashboard)
-
-### Step 2: Review Summary Metrics
+### 6: Analyze Top Usage
+
+- Review the “Top 5 Users” and “Top 5 Models” sections to identify high-usage patterns.
+- Use this data to optimize resource allocation or investigate anomalies.
-- Separate graphical widgets for premium model and BYOK model.
-- Observe the graphical widgets displaying cost, tokens, requests, and latency.
-- Hover over charts for detailed tooltips and breakdowns.
+## Validation
-
+- **Summary cards** update when you change filters.
+- **Charts** reflect the selected team, user, and date range.
+- **User role**: Total Tokens Chart is not visible for regular users.
+- **Hover tooltips** show exact numbers and time periods.
+- **Grid** matches applied filters (e.g., only selected team’s data).
-### Step 3: Filter by Team or User
-- Use the filter options to select:
- - All Teams
- - Specific Team
- - Individual User
+## Troubleshooting
-### Step 4: Set Date Range
+- **Dashboard is blank or says “No data”**
+ → No activity in the selected date range or wrong tab
+ → **Fix**: Pick a busier date or switch between **Premium** and **BYOK**
-- Click the date selector to choose a start and end date.
-- The dashboard will refresh to show metrics for the selected period.
+- **Charts don’t update after filtering**
+ → Browser cache or slow connection
+ → **Fix**: Press `Ctrl + Shift + R` (hard refresh)
-### Step 5: Analyze Top Usage
+- **Total Tokens Chart is missing**
+ → You’re logged in as a regular User
+ → **Fix**: Use an **Admin** or **Team Lead** account
-- Review the “Top 5 Users” and “Top 5 Models” sections to identify high-usage patterns.
-- Use this data to optimize resource allocation or investigate anomalies.
+- **Top 5 Users or Models list is empty**
+ → Fewer than 5 active in the time period
+ → **Fix**: Widen the date range or wait for more usage
+
+- **Latency shows “N/A”**
+ → No requests in the selected time
+ → **Fix**: Choose a period with activity
-## 5. Best Practices
+- **Grid shows wrong users or teams**
+ → Filter didn’t apply fully
+ → **Fix**: Re-select **Team** or **User**, wait a few seconds
-- **Regular Monitoring**: Check the dashboard weekly to stay on top of usage trends.
-- **Budget Control**: Use cost and token data to manage spending.
-- **Performance Optimization**: Track latency to identify performance bottlenecks.
-- **User Accountability**: Monitor individual usage to ensure fair and efficient use of resources.
+- **Cost shows \$0.00 even with usage**
+ → Using **BYOK** mode (you manage billing)
+ → **Fix**: Cost tracking only works in **Premium** mode
diff --git a/code-studio/enterprise-server/enterprise-images/byokplan.png b/code-studio/enterprise-server/enterprise-images/byokplan.png
new file mode 100644
index 0000000..4a24c4a
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/byokplan.png differ
diff --git a/code-studio/enterprise-server/enterprise-images/download.png b/code-studio/enterprise-server/enterprise-images/download.png
new file mode 100644
index 0000000..d74d5f1
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/download.png differ
diff --git a/code-studio/enterprise-server/enterprise-images/getstarted.png b/code-studio/enterprise-server/enterprise-images/getstarted.png
new file mode 100644
index 0000000..0f9dc17
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/getstarted.png differ
diff --git a/code-studio/enterprise-server/enterprise-images/managedefault.png b/code-studio/enterprise-server/enterprise-images/managedefault.png
new file mode 100644
index 0000000..d37792e
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/managedefault.png differ
diff --git a/code-studio/enterprise-server/enterprise-images/org.jpg b/code-studio/enterprise-server/enterprise-images/org.jpg
new file mode 100644
index 0000000..2b0c40c
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/org.jpg differ
diff --git a/code-studio/enterprise-server/enterprise-images/payment.png b/code-studio/enterprise-server/enterprise-images/payment.png
new file mode 100644
index 0000000..b617b9d
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/payment.png differ
diff --git a/code-studio/enterprise-server/enterprise-images/planimg.png b/code-studio/enterprise-server/enterprise-images/planimg.png
new file mode 100644
index 0000000..4528496
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/planimg.png differ
diff --git a/code-studio/enterprise-server/enterprise-images/profilelogin.jpg b/code-studio/enterprise-server/enterprise-images/profilelogin.jpg
new file mode 100644
index 0000000..6128fa0
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/profilelogin.jpg differ
diff --git a/code-studio/enterprise-server/enterprise-images/subscriptionNO.png b/code-studio/enterprise-server/enterprise-images/subscriptionNO.png
new file mode 100644
index 0000000..0b0f36f
Binary files /dev/null and b/code-studio/enterprise-server/enterprise-images/subscriptionNO.png differ
diff --git a/code-studio/enterprise-server/fallback.md b/code-studio/enterprise-server/fallback.md
index 64b3acc..a779887 100644
--- a/code-studio/enterprise-server/fallback.md
+++ b/code-studio/enterprise-server/fallback.md
@@ -11,6 +11,10 @@ Fallback Policies in Code Studio ensure uninterrupted AI workflows by automatica
> **Note**: Only admins can Configure and manage policies for Model.
+## When to Use
+
+Use fallback policies when implementing reliable, uninterrupted AI workflows during model failures
+
## 1. How Fallback Works
@@ -44,8 +48,22 @@ Fallback Policies in Code Studio ensure uninterrupted AI workflows by automatica
> **Note**: You can edit the model list and reorder them anytime to optimize fallback behavior for BYOK models.
-## 3. Best Practices
-- Choose models with varied capabilities and reliability to ensure coverage.
-- Limit retries to avoid unnecessary costs.
-- Regularly review fallback performance and adjust model order accordingly.
+## Validation
+
+**Check whether Fallback Works:**
+
+- Simulate failure (use invalid API key temporarily)
+- Request should succeed using second model in list
+- Retry Limit: After max retries, request fails gracefully (no crash)
+
+
+## Troubleshooting
+
+- **Costs higher than expected**
+ → Fallback using expensive model
+ → **Fix**: Reorder list — put cheaper models higher
+
+- **Fallback not triggering**
+ → Policy disabled or no fallback models added
+ → **Fix**: Enable toggle; add at least 2 models in order
diff --git a/code-studio/enterprise-server/getting-started.md b/code-studio/enterprise-server/getting-started.md
index aed3976..574f16d 100644
--- a/code-studio/enterprise-server/getting-started.md
+++ b/code-studio/enterprise-server/getting-started.md
@@ -5,13 +5,41 @@ platform: syncfusion-code-studio
keywords: getting started, onboarding, setup, account, dashboard, profile, settings, download, syncfusion, Code Studio
---
-# Getting Started
+# Getting Started with Code Studio
+
+## When to Use
+
+Use **Code Studio** when you need a cloud-based IDE to write, run, debug, and deploy code with built-in AI assistance, team collaboration, and pay-as-you-go LLM billing—perfect for single users, startups, or enterprises that want VS Code in the browser without managing servers.
+
+## Prerequisites
+
+- A modern browser:
+ - Chrome
+ - Edge
+ - Firefox
+ - Safari
+ *(Latest two versions recommended)*
+
+- Internet connection:
+ - ≥ 10 Mbps recommended
+
+- One of the following accounts:
+ - Microsoft account (personal, work, or school)
+ - GitHub account
+ - Existing Syncfusion account
+
+- *(Optional)* Credit card for AI usage beyond the free tier.
+
Start using Code Studio
-### 1. Create and Access Your Account
+## 1. Create and Access Your Account
+
+To start using Code Studio, visit: [Syncfusion Code Studio](https://www.syncfusion.com/code-studio/).
+- Explore the platform’s features and capabilities, then click the **"Get Started Now"** button to launch your coding experience.
+
+
-To start using Code Studio, visit: [Syncfusion Code Studio](https://app.sfcodestudio.com)
**Sign-In Options**
You can sign in using one of the following methods:
@@ -24,7 +52,18 @@ You can sign in using one of the following methods:
> **Note**: If you don’t have an account, click **“SIGN UP”** to create one.
-### 2. Accessing the Dashboard
+**Profile Details:** Provide the name you’d like to display on your Code Studio profile.
+
+
+**Organization Details:** Enter the name of your organization.
+
+
+
+Choose your operating system from the available options, then click the **"Download Code Studio"** button to get the application.
+
+
+
+## 2. Accessing the Dashboard
Once signed in:
@@ -32,11 +71,41 @@ Once signed in:
- Click on your **Profile Icon** to access **Settings**
-### 3. Managing Settings
+## 3. Managing Settings
Click on **Settings** to:
- Update your **Profile Information**
- Configure your **Organization Settings**
-
\ No newline at end of file
+
+
+## Validation
+
+You're ready when:
+
+- You see your **name/avatar** in the top-right corner.
+- Successful login redirects to the **Dashboard** (URL ends with `/dashboard`).
+- Opening **Settings → Profile** displays the data you just saved.
+
+## Troubleshooting
+
+- **Microsoft “Stay signed in?” loop**
+ → Click **No**
+ → Wait **5 seconds**
+ → Refresh the page
+
+- **GitHub “Authorization failed”**
+ → Go to **GitHub → Settings → Applications**
+ → Revoke **“Syncfusion”**
+ → Retry login
+
+- **“No organization found” banner**
+ → Go to **Settings → Organization**
+ → Click **Create Organization**
+ → Refresh the page
+
+- **BYOK / Budgets tabs missing**
+ → Ask your organization **Owner**
+ → Navigate to **Users & Teams**
+ → Request to be promoted to **Owner**
\ No newline at end of file
diff --git a/code-studio/enterprise-server/providersandmodels.md b/code-studio/enterprise-server/providersandmodels.md
index c49e1e8..836fd0d 100644
--- a/code-studio/enterprise-server/providersandmodels.md
+++ b/code-studio/enterprise-server/providersandmodels.md
@@ -12,6 +12,19 @@ This guide provides step-by-step instructions for administrators to configure La
> **Note**: Only admins can configure LLM providers and models.
+## When to Use
+
+- As an admin, when you need to centrally manage LLM provider credentials for your organization.
+- When selecting and configuring a custom list of AI models to meet specific team or enterprise needs.
+- To set default models for key AI modes like Chat, Apply, Edit, and Autocomplete.
+
+
+
+## Prerequisites
+
+- Admin role (check **Users & Teams**).
+- Fresh API key from any LLM.
+
## 1. Adding an LLM Provider
To integrate an LLM provider into Code Studio:
@@ -44,6 +57,46 @@ To add a model under a configured provider:
5. Click Add to include the model in your BYOK model list.
-6. Click Manage Default Settings to customize which AI models are used for key IDE functionalities like chat, edit, apply, and autocomplete.
+6. Click “Manage Default Settings".
+
+ - **Chat Default Model:** Select model for Chat from dropdown list.
+
+ - **Apply Default Model:** Select model for Apply from dropdown list.
+
+ - **Edit Default Model:** Select model for Edit from dropdown list.
+
+ - **Autocomplete Default Model:** Select model for Autocomplete from dropdown list.
+7. Click “Update” to set default model in your enterprise model list.
+ 
+
+
+
+## Validation
+
+- **LLM Keys**: New provider appears in Models dropdown.
+- **Models Added**: Visible in enterprise list with correct cost/mode tags.
+- **Defaults Applied**: New chat/edit session uses selected default model.
+
+
+
+## Troubleshooting
+
+- **Provider not showing in model list**
+ → API key invalid or expired
+ → **Fix**: Re-paste fresh key; test via provider dashboard first
+
+- **Model says “Unavailable” or “Not Found”**
+ → Model not supported by provider or wrong region
+ → **Fix**: Confirm model name/ID; check provider docs
+
+- **Default model not applying**
+ → Cache or user override in settings
+ → **Fix**: Clear browser cache; check User Preferences
+- **“Invalid API Key” error on save**
+ → Key copied with extra spaces or line breaks
+ → **Fix**: Paste into notepad first, recopy cleanly
+- **No modes available for model**
+ → Model doesn’t support Chat/Edit/etc.
+ → **Fix**: Choose compatible model (e.g., gpt-4o supports all modes)
diff --git a/code-studio/enterprise-server/settings.md b/code-studio/enterprise-server/settings.md
index d9353ea..9bceeb0 100644
--- a/code-studio/enterprise-server/settings.md
+++ b/code-studio/enterprise-server/settings.md
@@ -4,46 +4,175 @@ description: Manage profile, organization, credits, billing, and subscriptions i
platform: syncfusion-code-studio
keywords: settings, profile, organization, credits, billing, subscription, plans, BYOK, payments, enterprise, syncfusion, code-studio
---
+## Settings
-# Settings
+The **Settings** page in Code Studio allows users to manage personal details, organization settings, credits, and subscription preferences. It is divided into four tabs:
-The Settings area centralizes account and organization configuration for Code Studio Enterprise. Use it to manage your profile, organization details, credits, and billing/subscription plans.
-## How to Access
-- Open the [Code Studio page](https://app.sfcodestudio.com) and navigate to Settings from the left sidebar
-- Select one of the tabs: Profile, Organization, Credits, or Billing & Subscription
+### Tabs
-## 1. Profile
+#### Profile
+
+Update personal information such as:
+
+- **Name** – Editable field for display name.
+- **Email** – Registered email address (read-only).
+- **Account Type** – Displays the user role (Admin, Team Lead, or User).
+
+Click **Update** to save changes.
+
+#### Organization
+
+Configure organization-level settings (visible only to Admins).
+
+#### Credits
+
+View and manage available credits for usage.
+
+#### Billing and Subscription
+
+Manage subscription plans and payment details.
+
+
+
+### When to Use
+
+- Update your display name or view your email and role.
+- **Admins**: Change organization name or ID.
+- **Admins**: Check credit balance, buy more credits, or review payment history.
+- **Admins**: View, upgrade, or manage subscription plans and billing details.
+
+
+
+### Prerequisites
+
+- Active Code Studio account.
+- Administrator role for full access to all tabs.
+- Valid payment method (card or Cash App) for buying credits or upgrading plans.
+- Internet-connected browser.
+
+
+
+## Steps
+
+### Open Settings
+
+Click your profile icon (top right) → **Settings**
+Tabs appear: Profile, Organization, Credits, Billing and Subscription
+
+
+
+### Step 1: Profile
+
+The **Profile** tab centralizes personal information like Name, Email, and Account Type.
+Users can only edit their **Name**.
+
+**Steps:**
+
+- Navigate to **Settings → Profile**
+- Click **Update** to edit your name
+ → A toast message confirms successful update
-- View user name, email address, and account type
-## 2. Organization
-- View organization name and organization ID
-- Share the organization ID with your admins when requesting access or support
+### Step 2: Organization
+
+The **Organization** tab centralizes organization information like Organization Name and ID.
+Users can only edit the **Organization Name**.
+
+**Steps:**
+
+- Navigate to **Settings → Organization**
+- Click **Update** to edit organization name
+ → A toast message confirms successful update
+
+
-## 3. Credits
+### Step 3: Credits
+
+The **Credits** tab allows administrators to monitor and manage the organization’s usage credits.
+Every dollar converts to **150 credits**, which decrease as users submit prompts, launch agents, or perform token-based tasks.
+
+#### Features and Descriptions:
+
+- **Remaining Balance** – Displays current available credits
+- **Add-on Credits** – Quick purchase options: \$50, \$100, \$500
+- **Payment History** – Shows transaction details: ID, status, date, amount
+
+> **Note:** Only admins can view and manage credits usage.
-Add-on credits fund model usage across your organization.
-- Pricing: $1 = 100 credits
-- Preset amounts: $50, $100, $500
-- Custom amount: Enter a custom value as needed
-- Purchase flow: Click Buy credits to proceed to the payment page and complete checkout. Credits are applied after successful payment.
-## 4. Billing & Subscription
+## 1. Features
+
+### 1. Remaining Credit Balance
+
+Displays the current balance so teams always know how many credits remain before usage is interrupted.
+Provides a quick summary of each plan available for an organization.
+
+### 2. Add-on Credits
+
+Provides three quick-purchase buttons—\$50, \$100, and \$500—for fast top-ups.
+Selecting a preset highlights it and enables the **Buy Credits** button.
+
+### 3. Payment History
+
+Lists every top-up with:
+- Serial number
+- Status (e.g., Paid, Pending, Failed)
+- Date
+- Amount
+
+Helps confirm successful purchases and maintain accurate financial records.
+
+
+
+## 2. How to Use the Credits
+
+### Step 1: Navigate to the Credits
+
+Go to **Settings → Credits**
+
+### Step 2: Select the Credit
+
+- Choose a preset amount or enter a custom value under **Custom Amount**
+- Click **Buy Credits** to submit the purchase and complete payment
+
+### Step 3: Make Payment
+
+- **Card** – Securely pay using a credit or debit card
+
+- **Pay with Link** – Click the button to get a payment link
+
+Confirm the payment to activate or update the credits.
+
-- Available plans: Free, Basic, Pro, Enterprise
-- BYOK plan: $15 per month subscription
-- After subscription the current subscription details and billing cycle will be displayed.
-- Manage your subscription plan, billing cycle, and invoices.
-- The credit balance will be displayed on the top of the page.
-
+### Step 4: Verify Credits
+
+Return to the **Credits** page and verify:
+- Updated balance
+- New entry in **Payment History**
+
+
+
+## Step 4: Billing and Subscription
+
+The **Billing Plans** page helps you understand what your organization is paying for and how to adjust plans when your needs change.
+It keeps all billing information in one place so administrators can easily:
+
+- Review plan details
+- Manage payments
+- Make informed decisions about upgrades or downgrades
+
+### 1. Plan Overview
+
+Provides a quick summary of each plan available for an organization.
+
| Free | $0 | -IDE access, Enterprise server for 1 user, 4 AI models, UI builder, MCP server integration, Quick actions and codebase search, Memory and image input support. | +IDE access, Enterprise server for 1 user, 4 AI modes, UI builder, MCP server integration, Quick actions and codebase search, Memory and image input support. |
| Basic | @@ -81,4 +210,98 @@ Add-on credits fund model usage across your organization.BYOK models only, budget controls, dashboards, SSO, centralized management |
+
+
+### Step 3: Update Subscription
+
+- Choose a plan and set the user count for your team.
+- Confirm selection and proceed.
+
+
+### Step 4: Make Payment
+
+- **Card**: Securely pay using a credit or debit card.
+- **Cash App Pay**: Use Cash App for quick and easy payments.
+
+
+- Confirm the payment to activate or update the subscription.
+
+
+### Step 5: Verify Subscription
+
+- Check the **Billing and Subscription** page to confirm the updated plan.
+- Click **Manage Subscription** to modify existing plans.
+
+
+
+## Validation
+
+- **Profile**: Name change appears in top-right avatar and team lists.
+- **Organization**: New name shows in header and invites.
+- **Credits**:
+ - Balance increases after purchase.
+ - New row in Payment History with Paid status.
+- **Billing**:
+ - Plan name updates in header.
+ - Invoice emailed within 5 minutes of payment.
+ - Manage Subscription shows correct user count and next bill date.
+
+
+
+## Troubleshooting
+
+- **“Update failed” on name change**
+ → Name too long or contains invalid characters
+ → **Fix**: Use 2–50 letters, numbers, spaces.
+
+- **Payment failed or stuck on “Pending”**
+ → Card declined or network issue
+ → **Fix**: Try another card; check bank; retry after 10 minutes.
+
+- **Credits not added after payment**
+ → Payment succeeded but sync delayed
+ → **Fix**: Refresh page; check Payment History; contact support if missing after 1 hour.
+
+- **Wrong plan showing after upgrade**
+ → Cache or partial sync
+ → **Fix**: Log out and back in; hard refresh (`Ctrl + Shift + R`).
+
+- **“Pay with Link” not working**
+ → Link expired or blocked by browser
+ → **Fix**: Generate new link; allow pop-ups.
+
+- **Can’t change organization name**
+ → Name already taken or not Admin
+ → **Fix**: Choose unique name; verify Admin role.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/code-studio/enterprise-server/userandteams.md b/code-studio/enterprise-server/userandteams.md
index be7f759..541e3fb 100644
--- a/code-studio/enterprise-server/userandteams.md
+++ b/code-studio/enterprise-server/userandteams.md
@@ -9,18 +9,26 @@ keywords: users, teams, roles, admin, team lead, invitations, access control, go
Code Studio empowers administrators and team leads to manage organization members, assign roles, and organize users into teams for seamless collaboration and governance.
-## 1. Key Benefits
-- **Role Assignment**: Assign roles such as Admin, Team Lead, or User to match your organizational hierarchy.
-- **Team Creation**: Easily create and manage teams with intuitive controls.
-- **Usage Visibility**: Monitor usage and spending at both team and individual levels.
-- **Streamlined Control**: Centralized management for onboarding, governance, and collaboration.
+## When to Use
-> **Note**: Only Admins and Team Leads can manage users and teams. Regular users do not have permission to make changes to team or user settings.
+- Admins & Team Leads: Invite users, assign roles, create teams, or reorganize members.
+- Onboard new team members with correct role and team access.
+- Update user roles (promote/demote) or team ownership.
+- Clean up: rename, delete teams, or remove users.
+## Prerequisites
-## 2. Teams Management
+- Administrator or Team Lead role.
+- Valid email addresses for new users.
+- Active Code Studio organization.
+- Browser with internet access.
+
+
+
+
+## 1. Teams Management
### Team List Panel
@@ -47,7 +55,7 @@ Accessible via the context menu (three-dot icon):
-## 3. User Management
+## 2. User Management
### Viewing Members
@@ -72,9 +80,44 @@ Accessible via the context menu (three-dot icon):
-## 4. Best Practices
-- **Maintain Clear Roles**: Assign roles based on responsibilities.
-- **Audit Teams Regularly**: Ensure team structures reflect current projects.
-- **Monitor Usage**: Use integrated analytics to track activity and spending.
-- **Secure Onboarding**: Verify user details before sending invitations.
+## Validation
+
+- **Invite Sent**: Email received with Accept Invite link.
+- **User Added**: Appears in correct Team and Role column.
+- **Role Change**: User sees new permissions (e.g., Budget tab appears for Team Lead).
+- **Team Created**: Shows in left panel and can be selected.
+- **Delete Team**: Team gone; members moved to Unassigned or removed.
+- **Search**: Only matching users show in grid.
+
+
+## Troubleshooting
+
+- **“Invite User” button missing**
+ → You’re not Admin/Team Lead
+ → **Fix**: Ask Admin to promote you
+
+- **User stuck in “Pending”**
+ → Invite not received or expired (24 hrs)
+ → **Fix**: Resend invite; check spam folder
+
+- **Can’t change role**
+ → You’re Team Lead but not org Admin (can’t promote to Admin)
+ → **Fix**: Only Admins can assign Admin role
+
+- **Team name won’t save**
+ → Name too long (>50 chars) or contains invalid symbols
+ → **Fix**: Use letters, numbers, spaces, hyphens
+
+- **Deleted team still shows**
+ → Browser cache
+ → **Fix**: Hard refresh `Ctrl + Shift + R`
+
+- **User in wrong team after move**
+ → Moved but old team still cached
+ → **Fix**: Refresh page; user should appear only in new team
+
+- **No teams in left panel**
+ → First-time setup or all deleted
+ → **Fix**: Click **+ Add Team** to create one
+
diff --git a/code-studio/features/agent.md b/code-studio/features/agent.md
index 80d4157..6f7f08a 100644
--- a/code-studio/features/agent.md
+++ b/code-studio/features/agent.md
@@ -7,50 +7,53 @@ keywords: "code, IDE, AI, developer-tools, syncfusion, code-assistance, producti
# Agent Mode
-**Agent mode** in Syncfusion Code Studio is an AI coding assistant that works independently to explore your code, plan updates, and complete complex tasks. It’s designed to save you time by reading files, editing code, running commands, and using available tools — all with minimal input from you.
+## Purpose
+Agent mode in Syncfusion Code Studio is an AI coding assistant that works independently to explore your code, plan updates, and complete complex tasks. It’s designed to save you time by reading files, editing code, running commands, and using available tools — all with minimal input from you.
-You can switch to **Agent mode** in the mode selector below the chat input box.
+## When to Use
+- You need an assistant to autonomously plan and carry out multi-step coding tasks (refactors, feature additions, migrations).
+- You want the AI to read files, make edits, run tools/commands, and verify results with minimal hand-holding—while keeping you in control through approvals and permissions.
+- You prefer a safety net that records checkpoints so you can review or roll back any change.
-
+## Prerequisites
+ - Syncfusion Code Studio open with a workspace.
-## Agent Capabilities
+## Steps
-- **Autonomous Operation**
- Automatically explores your code, finds the right files, and makes needed changes on its own.
+### 1. Switch to Agent Mode
+- Use the mode selector in the chat input to choose **Agent** mode.
-- **Tool Access**
- Uses all available tools to search, edit, create files, and run terminal commands.
+
-- **Contextual Understanding**
- Understands your existing codebase and its dependencies.
+### 2. Provide the Task
+- State a clear goal and constraints: scope, style guidelines, frameworks, performance or API stability requirements.
+### 3. Plan (with Approval)
+- The agent drafts a stepwise action plan describing files to read/edit, commands to run, and expected outcomes.
+- Review the plan and approve or request revisions before execution begins.
-## Workflow of Agent
+### 4. Execution
+Upon approval, the agent:
+- Reads relevant files and searches the codebase
+- Applies diffs/edits and creates new files as needed
+- Runs commands (build, test, format) to validate progress
+- Uses tools (search, edit, terminal) within your allowed permissions
-1. **Understand Request**
- Analyzes your prompt and the current code to grasp the task and its goals.
+### 5. Checkpoints and Progress
+- The agent creates checkpoints at logical milestones so you can review or roll back to a known good state.
+- Progress updates appear in the chat with diffs, command outputs, and next intended actions.Learn more about checkpoints [here](/code-studio/features/checkpoints) .
-2. **Explore Codebase**
- Searches your code, documentation, or web to identify relevant files and understand the current implementation.
+### 6. Task Complete
+- Summarizes all changes and hands back control once the task is completed.
-3. **Plan Changes**
- Breaks the task into clear steps and prepares a change plan based on what it learns.
+
-4. **Execute Changes**
- Applies edits, adds code, suggests libraries or terminal commands, and performs required actions.
+## Validation
+- Start with a task. Confirm you see a clear plan with files to change and verification steps.
+- Approve once; verify a checkpoint is created and diffs match the plan.
+- Run your project/tests to ensure behavior aligns with the acceptance criteria.
+- If needed, restore from a checkpoint to confirm safe rollback.
-5. **Verify Results**
- Checks the results, fixes any issues or linter errors, and ensures the code behaves as expected.
-
-6. **Task Complete**
- Summarizes all changes and hands back control once the task is completed.
-
-## Giving Agent Permission
-
-By default, Agent mode will ask for your permission before using any tool. Click **Continue** to approve the action, or **Cancel** to deny it.
-
-
-
-Once tool permission is granted, Agent will proceed with the tool and provide the response in the chat output.
-
-
+## Troubleshooting
+- **Unwanted edits across many files**: use compare to inspect multi-file diffs; restore from the previous checkpoint and refine the plan to limit scope.
+- **Insufficient token limits**: reduce scope and provide exact file paths or relevant snippets. Ask for a “plan-only” pass first.
diff --git a/code-studio/features/applytocurrentfile.md b/code-studio/features/applytocurrentfile.md
index 87c27c1..0b87194 100644
--- a/code-studio/features/applytocurrentfile.md
+++ b/code-studio/features/applytocurrentfile.md
@@ -7,37 +7,49 @@ keywords: apply-to-current-file, ai-assistance, code-insertion, workflow-automat
---
# Apply To Current File
-
-The **Syncfusion Code Studio** provides an efficient way to apply suggested code directly into your currently opened file. With a single click, changes are applied in place so you can review, adjust, and continue coding without copy-paste.
-
-## Purpose
+## Purpose
+
+The Syncfusion Code Studio provides an efficient way to apply suggested code directly into your currently opened file. With a single click, changes are applied in place so you can review, adjust, and continue coding without copy-paste.
+
- **Insert Code Instantly:** Place AI-suggested code directly into your open file with one click.
- **Speed Up Workflow:** Reduce manual copy-paste and keep coding without interruption.
- **Review and Accept Easily:** Quickly check and apply code changes to your active project files.
- **Minimize Errors:** Ensure code is placed exactly where it’s needed, reducing mistakes during integration.
-## How to Apply Changes to the Current File
-
-### 1. Open Code Studio Extension
-
-Click the **Syncfusion Code Studio** icon on the left toolbar to open the Syncfusion Code Studio chat window.
- 
-### 2. Enter Your Query
+## When to Use
+- When you want to apply AI-generated code suggestions or fixes directly into your source file.
+- To quickly implement improvements such as code optimization, bug fixes, or documentation.
+- When you wish to review, accept, or reject AI-proposed changes without switching contexts or manually copying code.
+
+## Prerequisites
+ - An active coding project with a file opened and focused in the editor.
+
+## Steps
+
+### 1. Enter Your Query
In the chat window, ask for specific tasks, such as code optimization, debugging, or adding documentation. After you receive a response containing code suggestions, you will have the option to apply the code directly.
-### 3. Apply Changes
+### 2. Apply Changes
Once Syncfusion Code Studio provides a code solution or modification in the chat, review the changes to ensure they meet your requirements and click the **Apply** button to insert the provided code directly into the currently opened file in your IDE.
-### 4. Verify the Changes
+### 3. Verify the Changes
The code will be automatically applied to the correct location in your file. Review the file to confirm that the changes are implemented as expected.
- Click **Accept** to apply the AI-suggested solution to the selected code in the file.
- Click **Reject** to disregard the AI's suggested solution.
-
\ No newline at end of file
+
+
+## Validation
+- Ensure the AI-suggested code appears at the intended position in your currently open file after you click Apply.
+- Your file reflects the changes or enhancements as proposed by the AI.
+- The Accept and Reject options are available for final decision-making.
+
+## Troubleshooting
+- **Apply Button Not Visible**:Ensure you have received a code suggestion block from the AI chat and that a file is open and focused in your editor.
\ No newline at end of file
diff --git a/code-studio/features/askcodestudio.md b/code-studio/features/askcodestudio.md
index 380fa8d..e3baccf 100644
--- a/code-studio/features/askcodestudio.md
+++ b/code-studio/features/askcodestudio.md
@@ -8,23 +8,41 @@ keywords: ask-code-studio, error-resolution, ai-debugging, code-quality, develop
# Ask Code Studio
-Syncfusion Code Studio's **Ask Code Studio** feature delivers **instant AI-powered error resolution** directly within your development environment. This intelligent debugging assistant reduces troubleshooting time while maintaining code quality standards across development teams.
-
## Purpose
+Syncfusion Code Studio’s Ask Code Studio feature delivers instant AI-powered error resolution directly within your development environment. This intelligent debugging assistant reduces troubleshooting time while maintaining code quality standards across development teams.
+
+## When to Use
+- You encounter code errors, warnings, or undefined behaviors and need instant AI-powered explanations and fixes.
+- You want to understand the root cause of an error without interrupting your workflow or context-switching.
+- You're learning best practices for error handling and want verified, knowledge-backed solutions.
+
+## Prerequisites
+- Syncfusion Code Studio open with an active editor file.
+- File with visible error indicators (red/yellow underlines, syntax errors, runtime warnings).
-The Ask Code Studio feature is designed to reduce the time developers spend on debugging and error resolution. Its main purposes are to:
+## Steps
-- **Provide Instant Solutions**: Get immediate, actionable suggestions for fixing code errors.
-- **Improve Code Quality**: Learn from AI-powered explanations and apply best practices for error handling.
+### 1. Detect Errors and Share the Context to AI
+- Hover the error indicators (red/yellow underlines) in your code and click the quick fix button.
+- Select “Ask Code Studio” from the quick actions menu.
+- The 3 lines above and below the error are automatically sent to the chat followed by the question:
+ “Please explain the cause of this error and how to solve it: [ERROR_MESSAGE]” and click Enter.
+### 2. Review Suggestions and Verify the Answer
+- Read the suggestions provided by the AI.Apply the fix in your code if it matches your problem.
+- Before applying a fix, make sure it fits your project.
-## How To Use Ask Code Studio
-1. **Detect**: Notice error indicators (red/yellow underlines) in your code
-2. **Activate**: Click lightbulb icon or press `Ctrl/Cmd + .`
-3. **Select**: Choose "Ask Code Studio" from the quick actions menu
-4. **Context Transfer**: The 3 lines above and below the error are automatically sent to the chat followed by the question "How do I fix the following problem in the above code?: [ERROR_MESSAGE]"
-5. **Resolve**: Review AI suggestions → Apply fix
+
-
+### 3. Knowledge Transfers and Limitations
+- Knowledge includes language semantics, common debugging strategies, and the 3+3 lines surrounding the error plus the diagnostic message.
+- Context is limited to 3 lines above/below the error; for larger code blocks, use manual code selection and "Add to context" in chat.
+## Validation
+- When you hover the error, click the lightbulb icon; verify the error and surrounding context appear in chat.
+- Review the AI suggestion and confirm it accurately identifies and explains the issue.
+- Apply the fix and verify the error indicator disappears.
+## Troubleshooting
+- **Ask Code Studio lightbulb icon doesn't appear**: ensure the file has visible errors (red/yellow underlines), the editor is focused, and Code Studio is active.
+- **Suggestion doesn't apply cleanly**: verify the suggestion matches your code structure; if not, ask the assistant for an alternative or clarification in chat.
diff --git a/code-studio/features/autocomplete.md b/code-studio/features/autocomplete.md
index 8557e8f..e88ba6d 100644
--- a/code-studio/features/autocomplete.md
+++ b/code-studio/features/autocomplete.md
@@ -7,34 +7,58 @@ keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productiv
# Autocomplete
+## Purpose
Autocomplete provides inline code suggestions as you type. It provides real-time, inline code suggestions as you type, helping you write code faster and with fewer errors. As you begin typing, it predicts and displays context-aware completions directly. This feature enhances productivity by reducing repetitive typing and offering intelligent suggestions based on your current code and project context.
-## Steps to Integrate Autocomplete Feature:
+## When to Use
+- You want inline, context‑aware code suggestions as you type to speed up routine coding and reduce typos.
+- Works well across all common languages (for example: JS/TS, Python, Java, C#, Go, Rust, C/C++, Ruby, PHP, Kotlin, Swift; plus, HTML/CSS/JSON/YAML/Markdown/shell).
+- Quality improves with clear intent and open project context.
-**Step 1:** Open your `config.yaml` file by clicking the gear icon at the top of the chat.
+## Prerequisites
+- Syncfusion Code Studio An open file and an active project/workspace.
+- Access to an autocomplete model in the Models section (premium, BYOK, or local models).
-
-**Step 2:** Then click the **"open config file"** button to open the `config.yaml` file.
+## Steps
-
+### 1. Open the Models section in Chat
+- Open the Models section at the top of chat.
-**Step 3:** Inside the `config.yaml` file, add `roles` under the model which you are using in the `models` section. Inside `roles`, add `"autocomplete"`.
+
-
+### 2. Choose the Autocomplete model
+- Choose the Autocomplete model under the Autocomplete category (pick premium/BYOK/local models).
-**Step 4:** Now if you type in the file, it will suggest code completions.
+
-
+### 3. Autocomplete Suggestions
+- Start typing in an editor file. Inline ghost text suggestions will appear.
+- Typical triggers include short pauses while typing, starting a new line, after typing function names/parentheses/brackets, imports, or recognizable patterns.
+
+
+### 4. Acceptance Shortcuts
+**Accepting a full suggestion:**
-## Accepting a full suggestion:
Press the **"Tab"** key on your keyboard.
-## Rejecting a full suggestion:
+**Rejecting a full suggestion:**
+
Press the **"Esc"** key on your keyboard.
-## Partially accepting a suggestion:
+**Partially accepting a suggestion:**
+
Press **"Cmd/Ctrl + →"** on your keyboard to accept parts of the suggestion word-by-word.
+
+
+## Validation
+- In a file, begin a common construct (e.g., define a function or start a loop) and pause briefly.
+- Confirm an inline suggestion appears that matches your code context.
+- Press Tab to accept and verify the code is inserted correctly; press Esc to dismiss; press Cmd/Ctrl + Right Arrow to accept incrementally.
+
+## Troubleshooting
+- **Irrelevant suggestions**: Provide clearer intent (function signature, variable names), and open related project files so context is available.
+- **Slow suggestions**: Use a faster/local model, ensure a stable network.
diff --git a/code-studio/features/chat.md b/code-studio/features/chat.md
index 5b58536..6ee2650 100644
--- a/code-studio/features/chat.md
+++ b/code-studio/features/chat.md
@@ -5,17 +5,35 @@ platform: syncfusion-code-studio
keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation
---
# Chat
-Engage in a natural language conversation with the AI to boost productivity. You can ask coding questions, request explanations of complex logic, generate new code snippets, or troubleshoot bugs. The AI understands your project’s context, so its responses are relevant, accurate, and tailored to your current files and development environment. It's like having an expert developer always ready to assist.
-
+## Purpose
+Chat Mode lets you interact with an AI assistant using natural language to boost your productivity. You can ask coding questions, get explanations, generate code, or troubleshoot issues. The AI understands your project’s context, so its help is always relevant and tailored to your current work.
-## Code Selection & AI Assistance Feature
+## When to Use
+- You want conversational AI assistance for coding questions, explanations, and troubleshooting without leaving your workflow.
+- You need context-aware responses tailored to your project's codebase and development environment.
+- You prefer natural language interaction to explore ideas, generate snippets, or debug complex logic.
-You can easily get AI help with specific code segments by:
+## Prerequisites
+- Syncfusion Code Studio open with chat.
-Using your mouse to select any portion of code in your editor
-Pressing `Command+L (on Mac)` or `Control+L (on Windows/Linux)`
-This action will automatically send the selected code to the AI assistant via chat
-You can then type questions or requests about the selected code, and the AI will respond with explanations, suggestions, or improvements
+## Steps
-
\ No newline at end of file
+### 1. Attach Context
+- Select code in your editor and press **Command+L** (Mac) or **Control+L** (Windows/Linux) to automatically send the selected code to the chat.
+- The AI uses this context for tailored responses.
+
+### 2. Code-aware Prompts
+- Ask questions or requests about the attached code—explain logic, suggest improvements, generate alternatives, or troubleshoot bugs.
+- The AI responds with explanations, suggestions, or new code snippets.Type follow-up questions or refine requests in natural language.
+- The AI maintains context across the conversation and understands your project structure, so responses remain relevant and accurate.
+
+
+
+## Validation
+- Select a code segment and press Command+L / Control+L; confirm it appears in the chat with context preserved.
+- Ask a question about the attached code (e.g., "Explain this function") and verify the response is specific to your code, not generic.
+
+## Troubleshooting
+- **Code doesn't attach to chat**: ensure you've selected text in an active editor file and pressed the correct keyboard shortcut (Command+L or Control+L).
+- **AI responses feel generic**: provide more context by attaching relevant files or clarifying your project structure in the prompt.
diff --git a/code-studio/features/checkpoints.md b/code-studio/features/checkpoints.md
index 46d75a4..1a2363c 100644
--- a/code-studio/features/checkpoints.md
+++ b/code-studio/features/checkpoints.md
@@ -5,38 +5,60 @@ platform: syncfusion-code-studio
keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, checkpoints, versioning, history, workspace, file-recovery, diff, restore
---
-# Checkpoints Feature
+# Checkpoints
+## Purpose
The Checkpoints feature in Syncfusion Code Studio automatically captures and preserves the state of your workspace at key moments. This allows you to:
-- Track changes over time
-- Preview modifications
-- Revert to previous states
+
+- Track changes over time
+- Preview modifications
+- Revert to previous states
Checkpoints help ensure your work remains safe, traceable, and manageable throughout the development process.
-## How to Use the Checkpoints Feature
+## When to Use
+- You want automatic snapshots of your workspace to track changes, preview diffs, and quickly roll back.
+- You’re experimenting, running tools, or applying large edits and need a safe restore point.
+
+## Prerequisites
+- Working in Syncfusion Code Studio with an open workspace.
+- Stable environment to avoid interrupted snapshots.
-### Step 1: Triggering Checkpoints
-1. Enter a query in the chat (e.g., "Create a user management dashboard application using Syncfusion React components.") and press Enter.
-2. A checkpoint is automatically created at the start of the response.
-3. Additional checkpoints are created after each tool execution, such as:
- - Create New File
- - Edit File
- - Run Terminal Command
+## Steps
-
+### 1. Creating Checkpoints
+- Enter a query in the chat (e.g., “Create a user management dashboard application using Syncfusion React components.”) and press Enter.
+- A checkpoint is automatically created at the start of the response.
+- Additional checkpoints are created after each tool execution, such as:
+ - Create New File
+ - Edit File
+ - Run Terminal Command
-### Step 2: Comparing Checkpoints
-- Click the Compare button next to a checkpoint to view a detailed diff of the workspace files.
+
+
+### 2. Comparing Checkpoints
+- Click the Compare button next to a checkpoint to view a detailed diff of the workspace files.
- This shows which files will be modified or affected if you restore to that checkpoint.
-
+
-### Step 3: Restoring a Checkpoint
-- Click the Restore button to revert your workspace to the state captured in the selected checkpoint.
-- This action will overwrite your current workspace files with the versions saved in that checkpoint.
+### 3. Restoring Checkpoints
+- Click the Restore button to revert your workspace to the state captured in the selected checkpoint.
+- This action will overwrite your current workspace files with the versions saved in that checkpoint.
- Before restoring, you can preview the changes using the Compare button to ensure accuracy.
-
+
+
+
+## Validation
+- Trigger a checkpoint by running a chat command; confirm a new entry appears in the list.
+- Make a small edit in a file, then use Compare on the latest checkpoint to see the diff.
+- Click Restore to revert; verify the file content returns to the checkpointed version.
+
+## Troubleshooting
+- **No checkpoints appear**: ensure an action ran and the workspace is writable.
+- **Diff looks empty or incomplete**: confirm files were saved and not ignored by tooling.
+- **Restore didn’t change files**: you may be restoring to the current state; pick an older checkpoint.
+
+
-
\ No newline at end of file
diff --git a/code-studio/features/context-providers/add-more-contextproviders/clipboard.md b/code-studio/features/context-providers/add-more-contextproviders/clipboard.md
index f0ef1fa..8c30520 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/clipboard.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/clipboard.md
@@ -7,41 +7,34 @@ keywords: Syncfusion Code Studio, syncfusion, clipboard, context, code-studio, d
# Clipboard
+## Purpose
The Clipboard context option in the Syncfusion Code Studio enables users to easily incorporate recently copied content from editor files into their AI conversations, improving context and productivity.
-
-## How to use the Clipboard context
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
-
-
-
-### 2. Select Clipboard context
-
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the Clipboard context option in the list, you will need to add it manually to include this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
+## When to Use
+- You recently copied code, logs, or text and want the assistant to use it without pasting manually.
+- You need quick answers about a snippet, config block, or error stack you just copied.
-Select clipboard from the list of context providers.
-
-It will show recently copied clipboard contents one by one into your conversation.
+## Prerequisites
+- Syncfusion Code Studio open with a project.
+## Steps
-
+### 1. Select Clipboard Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Clipboard.
+- Pick the clipboard item you want to ask the query about. The provider shows a short list of your most recent copied contents.
+> **Note:** If you cannot locate the Clipboard context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+### 2. Use Clipboard Context with Query
+- After selecting the copied content, input relevant details about the copied content in the chat window and click Enter.
+- The assistant uses the selected clipboard content as context for this message only.
+- Limitations: Only the last 10 recently copied items are shown to keep latency low.
-Select the necessary copied content you need from the copied clipboard contents list.
-> **Note:** Once you close the Syncfusion Code Studio and reopen again the copied contents will not show again.
+
-
-
-### 3. Use Clipboard context with query
-
-After selecting the copied content, input relevant details about the copied content in the chat window and click Enter. You will get the results.
+## Validation
+- Copy a short function, choose @Clipboard, select the item, and ask for a refactor; verify the reply references your copied code.
+- Restart Code Studio and confirm the clipboard list is empty.
-
\ No newline at end of file
+## Troubleshooting
+- **Clipboard option missing**: add the clipboard provider in config.yaml and reload.
+- **No items listed**: confirm you copied text recently.
diff --git a/code-studio/features/context-providers/add-more-contextproviders/commit.md b/code-studio/features/context-providers/add-more-contextproviders/commit.md
index e2c209d..3e49e6a 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/commit.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/commit.md
@@ -7,50 +7,40 @@ keywords: code, syncfusion, git-commit, context, ai-assistance, commit-explanati
# Commit
+## Purpose
The Commit context in Syncfusion Code Studio lets you bring recent Git commit information into your AI conversations. This helps the AI provide targeted assistance based on recent changes in your code, such as reviewing a commit, explaining what was modified, or verifying the impact of a change.
+## When to Use
+- You want the assistant to analyze a specific Git commit for review, summarization, impact assessment, or regression checks.
+- You need context-aware help that references exactly what changed, not the whole branch.
+- You prefer quick access to recent commits with size/rate safeguards for fast responses.
+## Prerequisites
+- Syncfusion Code Studio open in a Git-enabled workspace.
-## How to use Commit context
+## Steps
-### 1. Open the Chat Window
+### 1. Select Commit Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Commits.
+- Choose the specific commit you want to ask about from the dropdown list that appears. You can also choose the last 10 commits combine option.
+- This provides the AI with access to the details of that commit.
+> **Note:** If you cannot locate the Commit context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-Click the Syncfusion Code Studio icon on the left toolbar to open the Syncfusion Code Studio chat window.
+### 2. Use Commit Context with Query
+- Once the commit is selected, enter a relevant query in the chat window. You can ask the AI to:
+ - Summarize what changed in the commit
+ - Explain the purpose of the modifications
+ - Check for potential issues introduced in the commit
+- The AI will analyze the commit content and respond with helpful insights.
+- Limitations: Only a limited number of recent commits are listed for performance.
-
+
+## Validation
+- Select a small commit and ask for a summary; confirm the answer references files changed in that commit.
+- Choose a larger commit and request “summarize the key changes”; verify the response.
-
-### 2. Select Commit context
-
-In the chat window, click the `@` button.
-
-> **Note:** If you cannot locate the commit context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in the [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
-From the context menu that appears, choose commit.
-
-
-
-
-
-### 3. Select the Commit
-
-Choose the specific commit you want to ask about from the dropdown list that appears. This provides the AI with access to the details of that commit.
-
-
-
-
-
-### 4. Use commit Context with Query
-
-Once the commit is selected, enter a relevant query in the chat window. You can ask the AI to:
-
-- Summarize what changed in the commit
-- Explain the purpose of the modifications
-- Check for potential issues introduced in the commit
-
-The AI will analyze the commit content and respond with helpful insights.
-
+## Troubleshooting
+- **Commits option missing**: add the provider in config.yaml and reload.
+- **Commit list empty**: verify the folder is a Git repo with recent commits.
diff --git a/code-studio/features/context-providers/add-more-contextproviders/database.md b/code-studio/features/context-providers/add-more-contextproviders/database.md
index d81cb18..6cc5bc8 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/database.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/database.md
@@ -7,19 +7,28 @@ keywords: syncfusion, syncfusion Code Studio, database, context, code-studio, da
# Database
+## Purpose
The Database context option in Syncfusion Code Studio enables users to add database-related information directly into the chat, making it easier to access data during development.
+
+## When to Use
+- To get accurate AI assistance or suggestions based on real database structure.
+- When you need to compose, explain, or troubleshoot SQL queries with schema context.
+
+## Prerequisites
+- Syncfusion Code Studio open
+- Access to the target database including credentials.
-## How to Use the Database context
+## Steps
### 1. Open the Syncfusion Code Studio
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
+- In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
### 2. Select Database context
-In the chat window, click the `@` button.
+- In the chat window, click the `@` button.
> **Note:** If you cannot locate the Database context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
@@ -30,13 +39,21 @@ A menu will appear—select Database context option to view the list of table sc
### 3. Select Required Table Schema
-Select the table schemas from the list to enable the AI to access the connected database and deliver accurate, data-driven responses.
+- Select the table schemas from the list to enable the AI to access the connected database and deliver accurate, data-driven responses.
### 4. Describe the Query
-Input relevant details about the query in the chat model window and click Enter.
-The AI will generate the response based on the context datas.
+- Input relevant details about the query in the chat model window and click Enter.
+- The AI will generate the response based on the context datas.
+
+
+
+## Validation
+- Ensure table schemas are listed after choosing the database context.
+- Ensure selected table schemas enable the AI to deliver precise, informed responses.
+
-
\ No newline at end of file
+## Troubleshooting
+- **Unable to View Table Schemas**: Ensure you have correct credentials and necessary database read permissions.Verify the connection details and database availability.
\ No newline at end of file
diff --git a/code-studio/features/context-providers/add-more-contextproviders/debugger.md b/code-studio/features/context-providers/add-more-contextproviders/debugger.md
index d9c0933..c631e53 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/debugger.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/debugger.md
@@ -7,31 +7,52 @@ keywords: syncfusion, syncfusion Code Studio, debugger, context, debug mode, loc
# Debugger
+## Purpose
The Debugger context option in Syncfusion Code Studio allows you to enhance your development experience by seamlessly integrating debugging capabilities into your workflow. A key feature is the Debugger context option, which enables users to share relevant local variables from the active debugging session directly in the chat window.
+
+## When to Use
+- When you’re debugging code and need explanations or suggestions tailored to the current state of your variables.
+- To get targeted help from AI while paused at a breakpoint in your debugging session.
+
+## Prerequisites
+- Syncfusion Code Studio extension installed and running.
+- A project open with a debug session initiated (code running in debug mode).
+- At least one breakpoint set and hit during debugging.
-## How to Use the Debugger context
+## Steps
### 1. Open the Syncfusion Code Studio
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
+- In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
### 2. Select Debugger context
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the Debugger context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+- In the chat window, click the `@` button.
+
A menu will appear—Select Debugger from the list of contexts to embed debug output into your conversation.
+> **Note:** If you cannot locate the Debugger context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+
### 3. Use Debugger context with query
-The Debugger option is only available when your source code is running in debug mode and has hit a breakpoint. Once the breakpoint is reached, you can use the Debugger in the context provider.
-You can then use the Step Over and Step Into options to view detailed information about the variables at each step of the debugging process.
-AI will now have access to this context, and any suggestions or assistance will be tailored based on the local variables shared.
+- The Debugger option is only available when your source code is running in debug mode and has hit a breakpoint. Once the breakpoint is reached, you can use the Debugger in the context provider.
+- You can then use the Step Over and Step Into options to view detailed information about the variables at each step of the debugging process.
+- AI will now have access to this context, and any suggestions or assistance will be tailored based on the local variables shared.
+
+
+
+## Validation
+- The Debugger option appears in the context list (after adding).
+- When selected, variable names and values from the active debug session are visible/used in AI queries and responses.
+- AI suggestions or explanations clearly reference or use the local variable context you shared.
+
-
\ No newline at end of file
+## Troubleshooting
+- **Variables Not Appearing**: Make sure you’re paused at a breakpoint in your debug session.Step through code (Step Over/Step Into) to refresh variable values and update the context.
\ No newline at end of file
diff --git a/code-studio/features/context-providers/add-more-contextproviders/github-issues.md b/code-studio/features/context-providers/add-more-contextproviders/github-issues.md
index 5d52ad5..9c2ac40 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/github-issues.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/github-issues.md
@@ -7,34 +7,34 @@ keywords: syncfusion Code Studio, syncfusion, github, issues, context, code-stud
# GitHub Issues
+## Purpose
The GitHub Issues context option in Syncfusion Code Studio allows users to bring GitHub issue data directly into the chat, enabling quick access to issue details and improving collaboration without switching context.
-
-## How to Use the GitHub Issues context
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
+## When to Use
+- You want the assistant to reason over a specific GitHub issue without leaving the editor.
+- You need quick summaries, planning a fix, or writing an implementation plan tied to an issue.
-
-### 2. Select GitHub Issues context
-
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the GitHub Issues context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+## Prerequisites
+- Syncfusion Code Studio open with chat.
+- Github repo name, owner name and github token
-
-
-A menu will appear—select GitHub Issues context option.
+## Steps
-
-
-### 3. Select Required GitHub Issues
-
-A list of your GitHub issues will be displayed. Click on the desired issue to insert it into the chat.
-
-
+### 1. Select Github Issue Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Github Issues.
+- A list of your GitHub issues will be displayed. Click on the desired issue to insert it into the chat.
+> **Note:** If you cannot locate the Github Issues context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+
+### 2. Use Github Issue Context with Query
+- Once inserted type a relevant query and click Enter, the AI will provide responses based on the GitHub issue context.
+- limitations: By default, only the first 30 open issues will be shown in the chat.
+
+
-Once inserted and click Enter, the AI will provide responses based on the GitHub issue context.
+## Validation
+- Select an issue and ask for a summary; confirm details are reflected.
+- Pick a different issue and ask query,check that suggestions align with the repo.
-
\ No newline at end of file
+## Troubleshooting
+- **GitHub Issues not in @ menu**: enable the provider in config.yaml and reload;
+- **Issue list empty or incomplete**: verify GitHub credentials/token, repo selection.
\ No newline at end of file
diff --git a/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders.md b/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders.md
index 780611a..d17df77 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders.md
@@ -6,32 +6,35 @@ keywords: syncfusion, syncfusion Code Studio, context providers, add context, co
---
# How to configure more context providers
-
+
+## Purpose
The Add More Context Provider feature lets you give the AI extra information to help it understand your project better.
-
-## How to Use the Add more context providers
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
+## When to Use
+- You want the assistant to use additional context providers that aren’t currently listed in your @ menu.
+- You need project- or org-specific providers and want full control over which ones are enabled.
+
+
+## Prerequisites
+- Syncfusion Code Studio open with chat.
+
+## Steps
-### 2. Select Add more Context Providers
+### 1. Select Add more Context Providers
-In the chat window, click the `@` button.
-A menu will appear—select Add more context providers.
-This action automatically opens the `config.yaml` file in your editor.
+- In the chat window, click the `@` button.A menu will appear—select Add more context providers.
+- This action automatically opens the `config.yaml` file in your editor.
+
-
-### 3. Add Context Provider
+### 2. Add Context Provider
-After you click on "Add more context providers", the `config.yaml` file will open. You can then add the appropriate YAML object for the context provider you wish to use from the list below and insert it under context.
+- After you click on "Add more context providers", the `config.yaml` file will open.
+- You can then add the appropriate YAML object for the context provider you wish to use.
-
+
-## Available Context Providers
+### 3.Available Context Providers
### Files
Reference any file within your current workspace.
@@ -167,4 +170,13 @@ Reference the markdown-converted contents of a given URL.
Reference results from a code search
```yaml
- provider: search
-```
\ No newline at end of file
+```
+
+## Validation
+- After editing config.yaml, confirm the new provider appears in the @ picker.
+- Disable by removing its YAML block; confirm it disappears from @.
+
+
+## Troubleshooting
+- **Context Provider not showing**: check YAML indentation and keys properly; save the file and reload the workspace.
+
diff --git a/code-studio/features/context-providers/add-more-contextproviders/openfile.md b/code-studio/features/context-providers/add-more-contextproviders/openfile.md
index 788439d..6073fad 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/openfile.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/openfile.md
@@ -7,32 +7,35 @@ keywords: syncfusion, syncfusion Code Studio, openfiles, context, ai, developer-
# OpenFiles
+## Purpose
The OpenFiles context provider in Syncfusion Code Studio helps you work more efficiently by allowing the AI to automatically access and use the content from all currently open files in your editor.
-
-## How to Use the OpenFiles context
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
-
-### 2. Select OpenFiles context
-
-In the chat window, click the `@` button.
+## When to Use
+- You want the assistant to reason over exactly what you’re working on right now—every file currently open in your editor.
+- You’re fixing cross-file issues, reviewing side-by-side edits, or asking for a refactor that touches multiple open tabs.
+- You prefer automatic context gathering without manually attaching files.
+
+## Prerequisites
+- Syncfusion Code Studio open with a project.
+
+## Steps
+
+### 1. Select OpenFile Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Open Files.
+- This will allow the AI to access and understand the content of the files you have currently opened.
> **Note:** If you cannot locate the OpenFiles context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-A menu will appear—select OpenFiles.
-
-This will allow the AI to access and understand the content of the files you have currently opened.
+### 2. Use OpenFile Context with Query
+- After choosing openfile context, to receive the most relevant assistance, describe your query or issue in detail and then press Enter.
+- The AI will use the context of your open files to generate more precise and relevant responses to your query.
+- Closing tabs or reducing file size lowers latency and token; open only what you need for best performance.
-
-
-### 3. Use OpenFiles context with query
-
-To receive the most relevant assistance, describe your query or issue in detail and then press Enter.
-The AI will use the context of your open files to generate more precise and relevant responses to your query.
+
+
+## Validation
+- Open two related files, choose @OpenFiles, and ask for a consistency check; confirm the reply references both files.
+- Close one tab, re-run the query, and verify the answer no longer cites the closed file.
-
\ No newline at end of file
+## Troubleshooting
+- **OpenFiles not in @ menu**: enable it in config.yaml and reload.
+- **No files detected**: ensure tabs are actually open and belong to the current workspace; switch focus back to the editor.
diff --git a/code-studio/features/context-providers/add-more-contextproviders/postgresql.md b/code-studio/features/context-providers/add-more-contextproviders/postgresql.md
index 82cb576..77d4345 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/postgresql.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/postgresql.md
@@ -7,36 +7,54 @@ keywords: syncfusion, syncfusion Code Studio, postgresql, database, context, cod
# PostgreSQL
+## Purpose
The PostgreSQL context provider in Syncfusion Code Studio enables seamless integration with PostgreSQL databases, allowing you to interact with your database directly from your development environment.
+
+## When to Use
+- When you want to analyze, query, or get help with your PostgreSQL database from within your development workflow.
+- To make AI recommendations more relevant by supplying real database schema and data context.
+
+## Prerequisites
+- Syncfusion Code Studio open
+- Access to a PostgreSQL database with necessary credentials (hostname, port, database, user, password).
-## How to Use the PostgreSQL context
+## Steps
### 1. Open the Syncfusion Code Studio
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
+- In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
### 2. Select PostgreSQL context
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the PostgreSQL context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+- In the chat window, click the `@` button.
A menu will appear—select PostgreSQL. This allows the AI to access your PostgreSQL database and utilize its data for context.
+> **Note:** If you cannot locate the PostgreSQL context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
### 3. Select Required Table Schema
-Select the table schemas from the list to enable the AI to access the connected database and deliver accurate, data-driven responses.
+- Select the table schemas from the list to enable the AI to access the connected database and deliver accurate, data-driven responses.
### 4. Describe the Query
-Give the detailed query in the chat model window and click Enter.
-The AI will provide responses based on the PostgreSQL database context.
+- Give the detailed query in the chat model window and click Enter.
+- The AI will provide responses based on the PostgreSQL database context.
+
+
+
+## Validation
+- Ensure the PostgreSQL context option appears in the @ context menu after adding.
+- Ensure you are able to select and see your PostgreSQL table schemas.
+- Ensure AI responses reference accurate database schema information.
+
-
\ No newline at end of file
+## Troubleshooting
+- **Can’t Connect to Database**: Ensure correct database credentials and network accessibility.Check that the PostgreSQL service is running.
diff --git a/code-studio/features/context-providers/add-more-contextproviders/search.md b/code-studio/features/context-providers/add-more-contextproviders/search.md
index 0a4b82f..8b51e21 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/search.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/search.md
@@ -7,30 +7,38 @@ keywords: syncfusion, syncfusion Code Studio, search, exactsearch, context, code
# Search
+## Purpose
The Search context option in the Syncfusion Code Studio allows users to perform precise searches across their codebase or documentation. It is particularly useful for developers and content creators who need to quickly locate specific strings, functions, or variables.
-
-## How to Use the Search context
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
-
-### 2. Select Search context
-
-In the chat window, click the `@` button.
+## When to Use
+Use the Search context when you need to:
+- Locate specific strings, functions, or variables across your codebase or documentation.
+- Understand how a particular object is used throughout the project.
+- Quickly navigate large projects without manually opening each file.
+- Perform targeted queries without relying on open tabs.
+
+## Prerequisites
+Syncfusion Code Studio open with a project.
+
+## Steps
+
+### 1. Select Search Context
+- In the Code Studio chat window, click the @ button.
+- A menu will appear—select Search.
> **Note:** If you cannot locate the Search context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-A menu will appear—select Search.
+### 2. Use Search Context with Query
+- After choosing the Search context, type your query in the chat window.
+- Include relevant details such as the name of the function, variable, or string you're looking for.
+- Press Enter to submit.
+- The AI will search your entire project and return results showing where and how the item is used.
-
-
-### 3. Use Search context with query
-
-Input relevant details about the query in the chat model window and click Enter.
-This allows you to review how the search object is defined and used throughout the project.
+
+
+## Validation
+- Search for a known function name and verify that the AI returns all its references.
+- Try searching for a string in both code and documentation to test cross-artifact coverage.
-
\ No newline at end of file
+## Troubleshooting
+- **Search not in @ menu:** Enable it in `config.yaml` and reload Code Studio.
+- **No results returned:** Ensure the query is spelled correctly and exists in the current workspace.
\ No newline at end of file
diff --git a/code-studio/features/context-providers/add-more-contextproviders/url.md b/code-studio/features/context-providers/add-more-contextproviders/url.md
index 61e6f4e..a85efd8 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/url.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/url.md
@@ -7,31 +7,32 @@ keywords: syncfusion, syncfusion Code Studio, url, context, web, ai, developer-t
# URL
-The URL context option in Syncfusion Code Studio allows you to bring content from a web page directly into your conversation with the AI. By processing the page's information, the AI provides more accurate and relevant responses based on the linked content.
-
-## How to Use the URL context
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
-
+## Purpose
+The URL context option in Syncfusion Code Studio allows you to bring content from a web page directly into your conversation with the AI. By processing the page’s information, the AI provides more accurate and relevant responses based on the linked content.
-### 2. Select URL context
-
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the URL context option in the list, you will need to add it manually to include this context provider, Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+## When to Use
+- You want the assistant to answer using a specific web page (docs, blog) without pasting its content.
+- You need quick, link-driven context for explanations, examples, or comparisons.
-
-
-A menu will appear—select URL.
+## Prerequisites
+- Syncfusion Code Studio open with chat.
-
-
-### 3. Use URL context with query
-
-After selecting URL, a text box will appear. Paste the link to the webpage that contains the information you want the AI to consider.
+## Steps
+
+### 1. Select URL Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select URL.
+> **Note:** If you cannot locate the URL context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+
+### 2. Use URL Context with Query
+- After selecting URL, a text box will appear. Paste the link to the webpage that contains the information you want the AI to consider.
+- After you submit a URL, AI retrieves and processes the webpage content, extracting and summarizing relevant information.
+
+
-After you submit a URL, AI retrieves and processes the webpage content, extracting and summarizing relevant information.
+## Validation
+- Provide a short documentation URL and request a summary; verify the answer cites details from that page.
+- Ask for a code sample from a tutorial page; confirm the snippet aligns with the article.
-
\ No newline at end of file
+## Troubleshooting
+- **URL option missing**: enable the provider in config.yaml and reload.
+- **Answer seems generic**: point to a more specific page section or add a clarifying question about what to extract.
diff --git a/code-studio/features/context-providers/add-more-contextproviders/web.md b/code-studio/features/context-providers/add-more-contextproviders/web.md
index 93f0099..4ac2b6e 100644
--- a/code-studio/features/context-providers/add-more-contextproviders/web.md
+++ b/code-studio/features/context-providers/add-more-contextproviders/web.md
@@ -7,30 +7,33 @@ keywords: Syncfusion Code Studio, syncfusion, web, context, code-studio, real-ti
# Web
+## Purpose
The Web context provider in Syncfusion Code Studio allows the AI to access real-time web content, ensuring responses are accurate, current, and context-aware.
-
-## How to Use the Web context
-
-### 1. Open the Syncfusion Code Studio
-
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
-
-### 2. Select Web context
-
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the Web context option in the list, you will need to add it manually to include this context provider, Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+## When to Use
+- You need current, real-time information from the public web (latest versions, changelogs, advisories, tutorials).
+- You want the assistant to cite specific pages it searched so you can verify the answer.
+- You prefer not to copy/paste content; the provider fetches and summarizes relevant pages for you.
-
-
-A menu will appear—select Web
+## Prerequisites
+- Syncfusion Code Studio open with chat.
-
-
-### 3. Use Web context with query
-
-After selecting the Web context provider option, type your query for which you want the AI to provide the latest up-to-date information.
-Now, the web context provider will give the response from the latest web content and display the context items that are passed to the AI model, providing up-to-date information for the conversation.
+## Steps
+
+### 1. Select Web Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Web.
+> **Note:** If you cannot locate the Web context option in the list, you will need to add it manually to include this context provider. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+
+### 2. Use Web Context with Query
+- After selecting the Web context provider option, type your query for which you want the AI to provide the latest up-to-date information.
+- Now, the web context provider will give the response from the latest web content and display the context items that are passed to the AI model, providing up-to-date information for the conversation.
+
+
+
+## Validation
+- Ask for a recent framework release summary; verify the response includes linked sources.
+- Refine the query with a domain filter and confirm sources match.
-
\ No newline at end of file
+## Troubleshooting
+- **Web option missing**: enable the provider in config.yaml and reload.
+- **Results seem generic**: add domain filters or specify version/platform.
\ No newline at end of file
diff --git a/code-studio/features/context-providers/code.md b/code-studio/features/context-providers/code.md
index acb85ba..f58eb34 100644
--- a/code-studio/features/context-providers/code.md
+++ b/code-studio/features/context-providers/code.md
@@ -7,37 +7,34 @@ keywords: code, syncfusion, code-context, ai-assistance, developer-tools, code-r
# Code
+## Purpose
The Code context option in the Syncfusion Code Studio lets you reference specific code from your project directly in the chat. This helps you quickly troubleshoot, edit, or review code without copying it manually.
+## When to Use
+- You want the assistant to consider only a specific part of your code instead of the whole repo.
+- You need focused help for a bug, review, or refactor with precise scope control and minimal noise.
+- You prefer fast responses and lower token usage by sharing the smallest necessary context.
+## Prerequisites
+- Syncfusion Code Studio open with a project.
-## How to Use the Code context
+## Steps
-### 1. Open Syncfusion Code Studio
+### 1. Select Code Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Code.
+- Now choose the code which you want to ask the query about.
+> **Note:** If you cannot locate the Code context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
+### 2. Use Code Context with Query
+- The Syncfusion Code Studio analyzes the selected code and offers help based on its content.
+- It can point out issues, suggest improvements, or guide you in making specific changes.
+- This makes reviewing and editing code faster and more efficient.
-### 2. Select Code context
+
- In the chat window, click the `@` button.
- > **Note:** If you cannot locate the code context option in the list, you will need to add it manually to include this context provider in config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+## Validation
+- Choose @Code context, and ask for an explanation; confirm the response references only those code lines.
-
-
- A menu will appear—select Code.
-
-
-
-### 3. Choose the code
-
- Now choose the code which you want to ask the query about it.
-
-
-
-### 4. Use Code Context with Query
-
- The Syncfusion Code Studio analyzes the selected code and offers help based on its content.
- It can point out issues, suggest improvements, or guide you in making specific changes. This makes reviewing and editing code faster and more efficient.
-
\ No newline at end of file
+## Troubleshooting
+- **Responses feel generic**: narrow scope to the most relevant code; restate your goal.
diff --git a/code-studio/features/context-providers/codebase.md b/code-studio/features/context-providers/codebase.md
index be73f94..98268c1 100644
--- a/code-studio/features/context-providers/codebase.md
+++ b/code-studio/features/context-providers/codebase.md
@@ -7,40 +7,39 @@ keywords: code, syncfusion, codebase, context, ai-assistance, developer-tools, f
# Codebase
+## Purpose
The Codebase context in Syncfusion Code Studio lets you share your codebase with the AI so it can understand your project better. You can ask it to explain a file, help with an error, or guide you in adding new features. Just mention codebase with the relevant query, and it will give you useful answers based on that.
+## When to Use
+- You want the assistant to reason over your whole project structure rather than just a single file.
+- You’re diagnosing cross-file issues, planning a refactor, or adding a feature that touches multiple layers.
+- You need focused control over how much of the repository is shared.
+## Prerequisites
+- Syncfusion Code Studio open with a project.
-## How to Use Codebase context
+## Steps
-### 1. Open the Chat Window
+### 1. Select Codebase Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Codebase.
+> **Note:** If you cannot locate the Codebase context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-Click the Syncfusion Code Studio icon on the left toolbar to open the Syncfusion Code Studio chat window.
-
+### 2. Use Codebase Context with Query
+- When asking about your code, try to include details like:
+ - Which file you need help with
+ - The part of the code causing the issue
+ - Details for a new feature you want to add
+ - Specific functions, methods, or classes you’re working on
+- This helps the AI understand your problem better and give you the right solution. Once you add the details, press Enter.
+- The Syncfusion Code Studio will use that info to give more accurate and helpful answers.
+- Larger scopes cost more tokens and slow responses.For long monorepos, use a specific query (e.g., packages/ui, services/api) to keep context tight.
+
-### 2. Select Codebase context
+## Validation
+- Ask for an architecture summary; confirm the reply references files from that workspace.
+- Ask for an integration plan; verify cross-file references are accurate.
-In the chat window, click the `@` button.
-
-> **Note:** If you cannot locate the codebase context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
-From the context menu that appears, choose codebase.
-
-
-
-
-
-
-### 3. Use codebase Context with Query
-
-When asking about your code, try to include details like Which file you need help with ,The part of the code causing the issue, Details for a new feature you want to add ,Specific functions, methods, or classes you're working on.
-
-This helps the AI understand your problem better and give you the right solution. Once you add the details, press Enter.
-
-The Syncfusion Code Studio will use that info to give more accurate and helpful answers.
-
-
+## Troubleshooting
+- **Slow or truncated responses**: reduce scope, split the task into smaller questions, or analyze one package at a time.
diff --git a/code-studio/features/context-providers/docs.md b/code-studio/features/context-providers/docs.md
index 9dc2b0f..ff41ecc 100644
--- a/code-studio/features/context-providers/docs.md
+++ b/code-studio/features/context-providers/docs.md
@@ -7,46 +7,42 @@ keywords: code, syncfusion, docs-context, documentation, ai-assistance, develope
# Docs
-The Docs context provider lets you easily reference content from any documentation site directly within Syncfusion Code Studio, making it more efficient to get help and insights based on the documents you're working with.
+## Purpose
+The Docs context provider lets you easily reference content from any documentation site directly within Syncfusion Code Studio, making it more efficient to get help and insights based on the documents you’re working with.
+## When to Use
+- You want the assistant to answer using specific external documentation (framework guides, API refs) without pasting text.
+- You need focused, doc-aware help tied to chosen pages rather than the whole web.
+- You prefer tight scope control and predictable performance.
+## Prerequisites
+- Syncfusion Code Studio open with a project.
+- URLs for the docs you want to reference
-## How to Use the Docs context
+## Steps
-### 1. Open the Syncfusion Code Studio
+### 1. Index the Documentation
+- In the chat window, click the @ button and select Docs from the menu.
+> **Note:** If you cannot locate the Docs context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
-
+- Click Add Docs, enter the title and URL, then click Add to save it.
+- The added docs entry will be shown in the config.yaml file after indexing.
+- Syncfusion Code Studio generates embeddings from chunked content and stores them locally.
-### 2. Select Docs context
+
-In the chat window, click the `@` button and select Docs from the menu.
-> **Note:** If you cannot locate the Docs context option in the list, you will need to add it manually to include this context provider in config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+### 2. Use Docs Context with Query
+- The document will appear in the list—select the one you want to use.
+- Type a relevant query about the selected doc in the chat box and press Enter.The AI will respond based on the selected documentation and query.
+- Large or many pages increase indexing time, token usage, and latency.Prefer concise pages; add more only if the assistant requests additional context.
-
+
+## Validation
+- Add one doc page and ask for a summary; confirm the answer cites concepts from that page.
+- Add a second page and ask for a code sample; verify details come from both.
-
-Click **Add Docs**, enter the title and URL, then click **Add** to save it.
-
-
-
-
-
-
-
-Syncfusion Code Studio generates embeddings from chunked content and stores them locally.
-
-
-
-
-### 3. Use Docs Context with Query
-
-The document will appear in the list—select the one you want to use.
-
-
-
-Press Enter, and the AI will respond based on the selected documentation and query.
-
-
+## Troubleshooting
+- **Page not indexing or slow**: check network; try a smaller page or wait for indexing to complete.
+- **Response too slow/expensive**: reduce the number of URLs or pick shorter pages; avoid whole-site imports.
diff --git a/code-studio/features/context-providers/files.md b/code-studio/features/context-providers/files.md
index e819d0f..1cab10d 100644
--- a/code-studio/features/context-providers/files.md
+++ b/code-studio/features/context-providers/files.md
@@ -7,39 +7,36 @@ keywords: code, syncfusion, files, context, code-studio, documentation, develope
# Files
-The Files context feature is a key component of Syncfusion Code Studio. It allows you to include relevant content from selected documents directly in the chat, enabling the AI to deliver responses that are more accurate and aligned with your files.
+## Purpose
+The Files context feature in Syncfusion Code Studio allows you to enhance collaboration by including relevant file content in chat, enabling AI-assisted responses that are more accurate and aligned with your project files.
+## When to Use
+- You want the assistant to consider content from specific files without pasting text into chat.
+- You need focused, file-aware answers tied to the files you select, not the whole repo.
+- You prefer quick results with tight scope control to reduce latency and token usage.
-## How to Use the Files context
+## Prerequisites
+- Syncfusion Code Studio open with a project.
-### 1. Open Syncfusion Code Studio
+## Steps
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side of the screen, where you can interact with the AI and get assistance.
+### 1. Select File Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Files.
+- Now choose the file which you want to ask the query about.
+> **Note:** If you cannot locate the File context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-### 2. Select Files context
+### 2. Use File Context with Query
+- Type a relevant query about the selected file in the chat box and press Enter.
+- Syncfusion Code Studio will read and analyze the selected file(s), allowing the AI to provide more context-aware and helpful responses based on the content of your files and the query you’ve submitted.
+- Larger or many files increase token usage and response time.If the reply asks for more details, add one more file rather than multiple files.
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the files context option in the list, you will need to add it manually to include this context provider in config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+
-
-A menu will appear—select Files from the list.
+## Validation
+- Choose @Files context, and ask for an explanation or bug fix; confirm the response references only those selected file.
-
-
-
-
-### 3. Choose the File
-
-After selecting Files, choose the document you want to include in context.
-
-
-
-
-### 4. Use file Context with Query
-
-Type a relevant query about the selected file in the chat box and press Enter.
-Syncfusion Code Studio will read and analyze the selected file(s), allowing the AI to provide more context-aware and helpful responses based on the content of your files and the query you've submitted.
-
+## Troubleshooting
+- **Responses feel generic**: narrow scope to the most relevant file or specific section; restate your goal.
+- **Slow responses**: reduce the number/size of files.
diff --git a/code-studio/features/context-providers/folder.md b/code-studio/features/context-providers/folder.md
index 5203434..9e3e983 100644
--- a/code-studio/features/context-providers/folder.md
+++ b/code-studio/features/context-providers/folder.md
@@ -6,45 +6,35 @@ keywords: code, syncfusion, folder, context, ai-assistance, developer-tools
---
# Folder
-The Folder context in Syncfusion Code Studio lets you select a whole folder so the AI can check all the files inside it. It’s helpful when your work is split across many files, like a project or a feature. You can also ask a query about a particular file inside that selected folder. This way, the AI can understand everything better and give you more accurate help.
+## Purpose
+The Folder context in Syncfusion Code Studio lets you select an entire folder so the AI can understand and reference all files within it. This is ideal for multi-file features or projects, enabling cross-file reasoning, targeted questions about specific files in the folder, and more accurate, holistic assistance.
+## When to Use
+- You want the assistant to reason over all files in a specific folder of the directory instead of a single file.
+- You’re facing cross-file issues, reviewing a multi-file change, or asking for a refactor that spans a folder.
+- You need clear scope control (pick one folder, subfolders).
+## Prerequisites
+- Syncfusion Code Studio open with a project.
-## How to Use Folder context
+## Steps
-### 1. Open the Chat Window
+### 1. Select Folder Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Folder.
+- Now choose the folder which you want to ask the query about.
+> **Note:** If you cannot locate the Folder context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-Click the Syncfusion Code Studio icon on the left toolbar to open the Syncfusion Code Studio chat window.
+### 2. Use Folder Context with Query
+- After selecting a folder in the context, enter a relevant query about the folder and press Enter.
+- The AI will analyze the contents of all the files within that folder. It will then use this information to improve the accuracy and relevance of its responses.
+- Larger folders mean higher token usage and slower replies.Narrow the scope to a more specific subfolder and mention key files or entry points in your prompt.
-
+
+## Validation
+- Select a folder and ask for an overview; confirm the answer references files inside that folder.
+- Ask for a plan across two files in the folder; verify cross-file relationships are correctly identified.
-
-### 2. Select Folder context
-
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the folder context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
-From the context menu that appears, choose folder.
-
-
-
-
-
-### 3. Choose the Folder
-
-Now select the folder you want to ask about.
-
-
-
-
-
-### 4. Use folder Context with Query
-
-After selecting a folder in the context, enter a relevant query about the folder and press Enter.
-
-The AI will analyze the contents of all the files within that folder. It will then use this information to improve the accuracy and relevance of its responses.
-
-
+## Troubleshooting
+- **Responses are generic**: narrow the scope to a more specific subfolder and mention key files or entry points in your prompt.
+- **Slow or truncated responses**: split the task into multiple questions.
diff --git a/code-studio/features/context-providers/gitdiff.md b/code-studio/features/context-providers/gitdiff.md
index 0da2449..3edf849 100644
--- a/code-studio/features/context-providers/gitdiff.md
+++ b/code-studio/features/context-providers/gitdiff.md
@@ -7,32 +7,40 @@ keywords: code, syncfusion, git-diff, context, ai-assistance, developer-tools, c
# Git Diff
-The Git Diff Context provider lets you reference all changes made in your current branch to get a summary of your work or request a general review. This is especially useful for reviewing progress, identifying improvements, or preparing for a commit by ensuring the modifications align with project goals and coding standards.
+## Purpose
+The Git Diff Context provider lets you reference all changes made in your current branch to get a summary of your work or request a general review. This is especially useful for reviewing progress, identifying improvements, or preparing for a commit by ensuring the modifications align with project goals and coding standards.
+## When to Use
+- You want the assistant to analyze and summarize all the code changes made in your current Git branch.
+- You need help preparing a commit, reviewing your changes, generating release notes, or ensuring code modifications align with project goals and standards.
-## How to Use the Git Diff context
-### 1. Open the Syncfusion Code Studio
+## Prerequisites
+- Syncfusion Code Studio open with a project.
+- GitDiff Context provider available in the @ menu.
+- Git branch with code changes.
-In the Syncfusion Code Studio, the chat interface is located on the left-hand side. This is where you can interact with AI and ask questions or get assistance.
+## Steps
-
+### 1. Select GitDiff Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select GitDiff.
+> **Note:** If you cannot locate the GitDiff context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-### 2. Select Git Diff context
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the GitDiff context option in the list, you will need to add it manually to include this context provider in config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
+### 2. Use GitDiff Context with Query
+- Git Diff Context allows you to programmatically gather and reference all code changes made in your current Git branch. It is especially helpful when you want to:
+ - Summarize your work before creating a commit or pull request
+ - Request a review of recent modifications
+ - Generate AI-assisted documentation, commit messages, or release notes
+ - Verify the scope and impact of changes to ensure they align with the intended feature or fix
+- Large diffs or many files may increase analysis time and token usage.
+- Narrow scope as needed to ensure quicker feedback and concise reviews.
-
-A menu will appear—select GitDiff.
-
+
+## Validation
+- Make several changes in your branch, then select @GitDiff and ask for a summary; confirm the assistant lists main updates clearly.
+- Use @GitDiff on a single file and ask for a quality or standards review; verify the feedback references actual changes.
-
-### 3. Use Git Diff Context with Query
-
-Git Diff Context allows you to programmatically gather and reference all code changes made in your current Git branch. It is especially helpful when you want to:
-- Summarize your work before creating a commit or pull request.
-- Request a review of recent modifications.
-- Generate AI-assisted documentation, commit messages, or release notes.
-- Verify the scope and impact of changes to ensure they align with the intended feature or fix.
-
\ No newline at end of file
+## Troubleshooting
+- **Feedback feels generic**: narrow the diff scope to specific files or include a targeted question (file, feature, or issue).
+- **No related responses**: ensure your workspace folder is a valid Git repository.
diff --git a/code-studio/features/context-providers/helpbot.md b/code-studio/features/context-providers/helpbot.md
index 9a8d626..092cbbe 100644
--- a/code-studio/features/context-providers/helpbot.md
+++ b/code-studio/features/context-providers/helpbot.md
@@ -6,40 +6,34 @@ keywords: code, syncfusion, helpbot, context, ai-assistance, documentation, api-
---
# HelpBot
+## Purpose
The HelpBot context in Syncfusion Code Studio gives quick access to Syncfusion’s documentation. It checks user guides, API references, help articles, and forums to find useful information. This makes it easier to solve problems and understand Syncfusion documentation without leaving the editor.
+## When to Use
+- You want instant, documentation-powered answers for Syncfusion products without leaving your editor or searching docs manually.
+- You need help with APIs, usage examples, best practices, or troubleshooting based on the latest Syncfusion resources.
+## Prerequisites
+- Syncfusion Code Studio open with chat.
-## How to Use Helpbot context
+## Steps
-### 1. Open the Chat Window
+### 1. Select Helpbot Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Helpbot.
+> **Note:** If you cannot locate the Helpbot context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-Click the Syncfusion Code Studio icon on the left toolbar to open the Syncfusion Code Studio chat window.
-
+### 2. Use Helpbot Context with Query
+- After choosing the HelpBot context, you can type a question to get helpful info from Syncfusion’s documentation.
+- For example, you can ask something like “How to add Title and Content slide in PowerPoint library?” Then press Enter.
+- HelpBot will search the documentation, retrieve relevant information, and display helpful results, giving you accurate answers based on your query.
+- Results are typically fast since queries are limited to Syncfusion’s own documentation. Complex or broad queries may take slightly longer if many resources match.
+
-### 2. Select Helpbot context
+## Validation
+- Ask for an example using a specific Syncfusion library in HelpBot context; confirm the answer references docs or shows code snippets from official sources.
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the helpbot context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
-From the context menu that appears, choose helpbot.
-
-
-
-
-
-
-
-### 3. Use helpbot Context with Query
-
-After choosing the HelpBot context, you can type a question to get helpful info from Syncfusion’s documentation.
-
-For example, you can ask something like “How to add Title and Content slide in PowerPoint library?” Then press Enter.
-
-HelpBot will search the documentation, retrieve relevant information, and display helpful results, giving you accurate answers based on your query.
-
-
+## Troubleshooting
+- **No useful answer**: restate your query more specifically, mentioning product, platform, or version; try a different Syncfusion control or topic.
+- **Slow/fuzzy results**: narrow your question or specify the relevant API/component for faster matching.
diff --git a/code-studio/features/context-providers/problems.md b/code-studio/features/context-providers/problems.md
index 2c611e2..47c47eb 100644
--- a/code-studio/features/context-providers/problems.md
+++ b/code-studio/features/context-providers/problems.md
@@ -7,46 +7,36 @@ keywords: code, syncfusion, problems, context, bug-fixing, ai-assistance, coding
# Problems
+## Purpose
The problems context in Syncfusion Code Studio makes it easier to fix problems in your code. With the problems context, you can quickly focus on specific issues found in your project. This is useful when you need help with a particular error or bug. It shows file-specific problems and lets the AI give better support based on the code you are currently looking at.
+## When to Use
+- You want the assistant to focus on specific errors, warnings, or bugs identified in your project—without manually describing every problem.
+- You’re actively working on a file and want targeted fixes for the issues.
+## Prerequisites
+- Syncfusion Code Studio open with a project.
-## How to Use the Problems context
-### 1. Open the File
+## Steps
-Ensure the file with the problem is open in your VS Code editor.
+### 1. Select Problems Context
+- Ensure the file with the problem is open in your Code Studio editor.
+- In the Code Studio chat window, click the @ button. A menu will appear—select Problems.
+> **Note:** If you cannot locate the Problems context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
+### 2. Use Problems Context with Query
+- After selecting problems context provider, input relevant details about the issue in the chat model window and click Enter.
+- The AI will analyze the problems data and offer suggestions or solutions for issues in the currently opened file directly in the chat window. This will help you resolve issues in the file you’re working on in the VS Code editor.
+- Too many issues in a file or folder may increase token usage and response time. Prioritize a few key problems or files at a time for the best results.
-### 2. Access the Chat Window
+
-Open the chat model window of the Syncfusion Code Studio by clicking the Syncfusion Code Studio icon on the left toolbar.
+## Validation
+- With a problem in a file, use @Problems and ask for a fix; confirm the response references the correct diagnostic(s).
+- Try with another file with issues; verify the suggestions align with current code and problem list.
-
-
-
-### 3. Select Problems context
-
-In the chat window, click the `@` button.
-> **Note:** If you cannot locate the problems context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
-From the context menu that appears, choose problems.
-
-
-
-
-
-
-
-### 4. Use problems Context with Query
-
-Input relevant details about the issue in the chat model window and click Enter.
-
-The AI will analyze the problems data and offer suggestions or solutions for issues in the currently opened file directly in the chat window. This will help you resolve issues in the file you're working on in the VS Code editor.
-
-
-
\ No newline at end of file
+## Troubleshooting
+- **No suggestions or generic answers**: be sure problems are flagged in the file first (from linter, type checker, etc.); specify the file and issue in your message.
+- **Slow or incomplete responses**: focus on one file at a time to control performance impacts.
diff --git a/code-studio/features/context-providers/terminal.md b/code-studio/features/context-providers/terminal.md
index 9a10d67..eb4693e 100644
--- a/code-studio/features/context-providers/terminal.md
+++ b/code-studio/features/context-providers/terminal.md
@@ -7,41 +7,34 @@ keywords: code, syncfusion, terminal, context, ai-assistance, debug, terminal-er
# Terminal
+## Purpose
The Terminal context in Syncfusion Code Studio helps you fix errors shown in your terminal. It reads the latest output from the terminal and gives helpful suggestions or solutions based on what it finds. This makes it easier to understand and solve terminal issues quickly.
+## When to Use
+- You want the assistant to analyze recent terminal output (build logs, test failures) without pasting it into chat.
+- You’re facing package install issues, or failing scripts and need targeted guidance.
+## Prerequisites
+- Syncfusion Code Studio open with a project.
-## How to Use Terminal context
+## Steps
-### 1. Open the Chat Window
-
-Click the Syncfusion Code Studio icon on the left toolbar to open the Syncfusion Code Studio chat window.
-
-
-
-
-### 2. Select Terminal context
-
-In the chat window, click the `@` button.
+### 1. Select Terminal Context
+- In the Code Studio chat window, click the @ button. A menu will appear—select Terminal.
+> **Note:** If you cannot locate the Terminal context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
> **Note:** Before using the terminal context, ensure that you have opened a terminal in VS Code and that it contains relevant information or error details necessary for proper functionality.
-> **Note:** If you cannot locate the terminal context option in the list, you will need to add it manually by including this context provider in the config.yaml file. Please follow the steps outlined in this [link](/code-studio/features/context-providers/add-more-contextproviders/how-to-configure-more-contextproviders) to do so.
-
-
-
-From the context menu that appears, choose terminal to embed terminal output into your conversation.
-
-
-
-
-
-
-
-### 3. Use terminal Context with Query
+### 2. Use Terminal Context with Query
+- After choosing terminal context, input relevant details about the issue in the chat model window and click Enter.
+- The AI will process the terminal data and present you with suggestions or solutions directly in the chat window. Review these recommendations to address the issue or error at hand.
+- Very long logs increase token usage and latency. Trim to the error section or rerun the command with reduced verbosity when possible.
-Input relevant details about the issue in the chat model window and click Enter.
+
-The AI will process the terminal data and present you with suggestions or solutions directly in the chat window. Review these recommendations to address the issue or error at hand.
+## Validation
+- Run a command that fails. Select @Terminal and ask for a diagnosis; confirm the response references the logged error.
+- Switch to another terminal and repeat; verify the assistant analyzes the selected terminal’s output.
-
\ No newline at end of file
+## Troubleshooting
+- **Multiple errors interleaved**: select the terminal with the specific failure, or share a smaller slice around a single error for clarity.
diff --git a/code-studio/features/edit.md b/code-studio/features/edit.md
index 9b284cd..f3c865d 100644
--- a/code-studio/features/edit.md
+++ b/code-studio/features/edit.md
@@ -7,11 +7,22 @@ keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productiv
# Edit
+## Purpose
Edit makes it easy to quickly update specific code or files. Just highlight the code you want to change, describe the update, and the changes will appear inline for you to **accept** or **reject**. It’s a fast and efficient way to make precise edits directly in your file.
+- Quick Updates: Easily make precise updates to specific code segments or entire files.
+- Minimize Errors: Ensure targeted, context-aware edits rather than manual, error-prone updates.
+## When to Use
+- When you want to update, refactor, or improve a portion of code without manually rewriting it.
+- If you need to rapidly apply suggestions, fixes, or enhancements generated by Syncfusion Code Studio.
+## Prerequisites
+ - Syncfusion Code Studio open with a workspace.
+ - An open file with code ready for selection and editing.
-## Code Selection & AI Assistance Feature
+
+## Steps
+### 1. Code Selection & AI Assistance Feature
You can easily get AI help with specific code segments by:
@@ -25,7 +36,7 @@ You can easily get AI help with specific code segments by:
-### Reviewing Changes
+### 2.Reviewing Changes
- If you click the **Accept** button, Each change can be **reviewed and applied** individually.
@@ -36,3 +47,11 @@ You can easily get AI help with specific code segments by:
- You can also use the **Accept All** or **Reject All** buttons in the chat to apply or discard changes when diffs are available.
+
+## Validation
+- Ensure the selected code updates in place according to accepted suggestions.
+- Ensure all changes can be reviewed for accuracy before applying.
+
+## Troubleshooting
+- **Changes Applied Incorrectly**:Double-check the selected code and ensure your description is clear and specific.
+
diff --git a/code-studio/features/feature-images/Search.gif b/code-studio/features/feature-images/Search.gif
new file mode 100644
index 0000000..dbd7329
Binary files /dev/null and b/code-studio/features/feature-images/Search.gif differ
diff --git a/code-studio/features/feature-images/agent2.gif b/code-studio/features/feature-images/agent2.gif
new file mode 100644
index 0000000..47382fb
Binary files /dev/null and b/code-studio/features/feature-images/agent2.gif differ
diff --git a/code-studio/features/feature-images/apply2.png b/code-studio/features/feature-images/apply2.png
index 69dae8f..1a4d076 100644
Binary files a/code-studio/features/feature-images/apply2.png and b/code-studio/features/feature-images/apply2.png differ
diff --git a/code-studio/features/feature-images/apply3.png b/code-studio/features/feature-images/apply3.png
index c316fa7..41f403b 100644
Binary files a/code-studio/features/feature-images/apply3.png and b/code-studio/features/feature-images/apply3.png differ
diff --git a/code-studio/features/feature-images/apply4.png b/code-studio/features/feature-images/apply4.png
index 84033ce..ec2d0ec 100644
Binary files a/code-studio/features/feature-images/apply4.png and b/code-studio/features/feature-images/apply4.png differ
diff --git a/code-studio/features/feature-images/askcodestudio.gif b/code-studio/features/feature-images/askcodestudio.gif
new file mode 100644
index 0000000..99a0a7c
Binary files /dev/null and b/code-studio/features/feature-images/askcodestudio.gif differ
diff --git a/code-studio/features/feature-images/autocomplete1.png b/code-studio/features/feature-images/autocomplete1.png
index af98d63..033a24b 100644
Binary files a/code-studio/features/feature-images/autocomplete1.png and b/code-studio/features/feature-images/autocomplete1.png differ
diff --git a/code-studio/features/feature-images/autocomplete2.png b/code-studio/features/feature-images/autocomplete2.png
index 0a87305..781cb8f 100644
Binary files a/code-studio/features/feature-images/autocomplete2.png and b/code-studio/features/feature-images/autocomplete2.png differ
diff --git a/code-studio/features/feature-images/autocomplete3.png b/code-studio/features/feature-images/autocomplete3.png
index 2244870..aff1211 100644
Binary files a/code-studio/features/feature-images/autocomplete3.png and b/code-studio/features/feature-images/autocomplete3.png differ
diff --git a/code-studio/features/feature-images/chat.png b/code-studio/features/feature-images/chat.png
new file mode 100644
index 0000000..a7552e2
Binary files /dev/null and b/code-studio/features/feature-images/chat.png differ
diff --git a/code-studio/features/feature-images/checkpoint1.png b/code-studio/features/feature-images/checkpoint1.png
new file mode 100644
index 0000000..b9cf1f4
Binary files /dev/null and b/code-studio/features/feature-images/checkpoint1.png differ
diff --git a/code-studio/features/feature-images/checkpoint2.png b/code-studio/features/feature-images/checkpoint2.png
new file mode 100644
index 0000000..6f58df3
Binary files /dev/null and b/code-studio/features/feature-images/checkpoint2.png differ
diff --git a/code-studio/features/feature-images/checkpoint3.png b/code-studio/features/feature-images/checkpoint3.png
new file mode 100644
index 0000000..ace708d
Binary files /dev/null and b/code-studio/features/feature-images/checkpoint3.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..ae1fb54
Binary files /dev/null and b/code-studio/features/feature-images/checkpoint4.png differ
diff --git a/code-studio/features/feature-images/clipboardcontext.gif b/code-studio/features/feature-images/clipboardcontext.gif
new file mode 100644
index 0000000..07c7b30
Binary files /dev/null and b/code-studio/features/feature-images/clipboardcontext.gif differ
diff --git a/code-studio/features/feature-images/codebasecontext.gif b/code-studio/features/feature-images/codebasecontext.gif
new file mode 100644
index 0000000..85b1a14
Binary files /dev/null and b/code-studio/features/feature-images/codebasecontext.gif differ
diff --git a/code-studio/features/feature-images/codecontext1.gif b/code-studio/features/feature-images/codecontext1.gif
new file mode 100644
index 0000000..7e22a73
Binary files /dev/null and b/code-studio/features/feature-images/codecontext1.gif differ
diff --git a/code-studio/features/feature-images/commitcontext.gif b/code-studio/features/feature-images/commitcontext.gif
new file mode 100644
index 0000000..d01b27f
Binary files /dev/null and b/code-studio/features/feature-images/commitcontext.gif differ
diff --git a/code-studio/features/feature-images/docscontext1.gif b/code-studio/features/feature-images/docscontext1.gif
new file mode 100644
index 0000000..6be5cb6
Binary files /dev/null and b/code-studio/features/feature-images/docscontext1.gif differ
diff --git a/code-studio/features/feature-images/docscontext2.gif b/code-studio/features/feature-images/docscontext2.gif
new file mode 100644
index 0000000..d26ca38
Binary files /dev/null and b/code-studio/features/feature-images/docscontext2.gif differ
diff --git a/code-studio/features/feature-images/files-context.gif b/code-studio/features/feature-images/files-context.gif
new file mode 100644
index 0000000..62ca936
Binary files /dev/null and b/code-studio/features/feature-images/files-context.gif differ
diff --git a/code-studio/features/feature-images/foldercontext.gif b/code-studio/features/feature-images/foldercontext.gif
new file mode 100644
index 0000000..e5229ff
Binary files /dev/null and b/code-studio/features/feature-images/foldercontext.gif differ
diff --git a/code-studio/features/feature-images/gitdiffcontext.gif b/code-studio/features/feature-images/gitdiffcontext.gif
new file mode 100644
index 0000000..84621da
Binary files /dev/null and b/code-studio/features/feature-images/gitdiffcontext.gif differ
diff --git a/code-studio/features/feature-images/githubissuecontext.gif b/code-studio/features/feature-images/githubissuecontext.gif
new file mode 100644
index 0000000..6a003dd
Binary files /dev/null and b/code-studio/features/feature-images/githubissuecontext.gif differ
diff --git a/code-studio/features/feature-images/helpbotcontext.gif b/code-studio/features/feature-images/helpbotcontext.gif
new file mode 100644
index 0000000..9307104
Binary files /dev/null and b/code-studio/features/feature-images/helpbotcontext.gif differ
diff --git a/code-studio/features/feature-images/inline-edit.gif b/code-studio/features/feature-images/inline-edit.gif
new file mode 100644
index 0000000..e220186
Binary files /dev/null and b/code-studio/features/feature-images/inline-edit.gif differ
diff --git a/code-studio/features/feature-images/memory1.gif b/code-studio/features/feature-images/memory1.gif
new file mode 100644
index 0000000..af0bf0b
Binary files /dev/null and b/code-studio/features/feature-images/memory1.gif differ
diff --git a/code-studio/features/feature-images/memory2.png b/code-studio/features/feature-images/memory2.png
index 53c93b8..64fd7e6 100644
Binary files a/code-studio/features/feature-images/memory2.png and b/code-studio/features/feature-images/memory2.png differ
diff --git a/code-studio/features/feature-images/memory3.png b/code-studio/features/feature-images/memory3.png
index 64fd7e6..85d6678 100644
Binary files a/code-studio/features/feature-images/memory3.png and b/code-studio/features/feature-images/memory3.png differ
diff --git a/code-studio/features/feature-images/morecontext.gif b/code-studio/features/feature-images/morecontext.gif
new file mode 100644
index 0000000..9413e06
Binary files /dev/null and b/code-studio/features/feature-images/morecontext.gif differ
diff --git a/code-studio/features/feature-images/openfilecontext.gif b/code-studio/features/feature-images/openfilecontext.gif
new file mode 100644
index 0000000..50a5ae8
Binary files /dev/null and b/code-studio/features/feature-images/openfilecontext.gif differ
diff --git a/code-studio/features/feature-images/problemscontext.gif b/code-studio/features/feature-images/problemscontext.gif
new file mode 100644
index 0000000..2b3eab1
Binary files /dev/null and b/code-studio/features/feature-images/problemscontext.gif differ
diff --git a/code-studio/features/feature-images/summarization.png b/code-studio/features/feature-images/summarization1.png
similarity index 100%
rename from code-studio/features/feature-images/summarization.png
rename to code-studio/features/feature-images/summarization1.png
diff --git a/code-studio/features/feature-images/summarization2.png b/code-studio/features/feature-images/summarization2.png
new file mode 100644
index 0000000..e2575cd
Binary files /dev/null and b/code-studio/features/feature-images/summarization2.png differ
diff --git a/code-studio/features/feature-images/telemetry.png b/code-studio/features/feature-images/telemetry.png
new file mode 100644
index 0000000..4eb2b9c
Binary files /dev/null and b/code-studio/features/feature-images/telemetry.png differ
diff --git a/code-studio/features/feature-images/terminalcontext.gif b/code-studio/features/feature-images/terminalcontext.gif
new file mode 100644
index 0000000..3ad7e54
Binary files /dev/null and b/code-studio/features/feature-images/terminalcontext.gif differ
diff --git a/code-studio/features/feature-images/urlcontext.gif b/code-studio/features/feature-images/urlcontext.gif
new file mode 100644
index 0000000..c206291
Binary files /dev/null and b/code-studio/features/feature-images/urlcontext.gif differ
diff --git a/code-studio/features/feature-images/webcontext.gif b/code-studio/features/feature-images/webcontext.gif
new file mode 100644
index 0000000..9bacc6a
Binary files /dev/null and b/code-studio/features/feature-images/webcontext.gif differ
diff --git a/code-studio/features/inline.md b/code-studio/features/inline.md
index 5778da2..f3a4c96 100644
--- a/code-studio/features/inline.md
+++ b/code-studio/features/inline.md
@@ -7,17 +7,30 @@ keywords: inline-edit, right-click-actions, ai-assistance, contextual-editing, c
---
# Inline Edit
-Syncfusion Code Studio's Inline Edit feature delivers **instant AI-powered code improvements** directly within your editor. This intelligent system enables developers to enhance code quality, fix issues, and optimize performance through contextual right-click actions.
## Purpose
-The inline edit feature is designed to accelerate development and improve code quality by providing contextual AI assistance without switching away from the code editor. Its key purposes are to:
+Syncfusion Code Studio's Inline Edit feature delivers **instant AI-powered code improvements** directly within your editor. This intelligent system enables developers to enhance code quality, fix issues, and optimize performance through contextual right-click actions.Its key purposes are to:
- **Increase Efficiency**: Quickly fix issues, write documentation, or optimize code with a single click.
- **Maintain Focus**: Keep developers in the flow by providing AI assistance directly in the editor.
- **Standardize Code Quality**: Ensure consistent code quality and documentation across the team.
-## Core Edit Functions
+## When to Use
+- You want instant, contextual AI-powered code improvements without leaving the editor.
+- You need to fix errors, optimize performance, or enhance code quality on demand.
+- You prefer a right-click workflow for quick refactoring and standardization across your team
+
+## Prerequisites
+- Syncfusion Code Studio editor open with code visible.
+
+
+## Steps
+
+1. **Select** code in your editor by highlighting the section you want to improve.
+2. **Right-click** on the selection to open the context menu.
+3. **Choose** "Code Studio" from the menu options.
+4. **Select** an action from the dropdown:
| Add comprehensive comments, Improved code maintainability | |||||
| Write command | -Commands generation | -Develop clear commands in the code to enhance developer maintainability | +Write comments | +Comments generation | +Develop clear comments in the code to enhance developer maintainability |
+
+## Validation
+- Highlight a simple function and select "Write docstring"; confirm docstrings appears correctly.
+- Try "Fix this code" on code with an obvious error; verify the suggestion resolves it.
+- Use "Optimize this code" on a loop or query; check that the output is more efficient.
+
-
+## Troubleshooting
+- **Context menu doesn't appear**: ensure you've highlighted code and right-clicked within the selection.
+- **Suggestions don't apply**: click "Accept" in the diff view; if still stuck, reload the editor.
diff --git a/code-studio/features/memory.md b/code-studio/features/memory.md
index 9f71a53..37588b6 100644
--- a/code-studio/features/memory.md
+++ b/code-studio/features/memory.md
@@ -7,40 +7,56 @@ keywords: code, IDE, AI, developer-tools, syncfusion, memory, context, productiv
# Memory
+## Purpose
The Memory feature in Syncfusion Code Studio enhances your AI chat experience by allowing the assistant to recall and reuse relevant information from past interactions. This ensures continuity, improves response accuracy, and supports complex or multi-step workflows.
+## When to Use
+- You want the AI assistant to recall and reuse relevant information from past interactions to maintain continuity across sessions.
+- You're working on multi-step projects and need context-aware responses that reference previous conversations.
+- You prefer organized, searchable access to conversation history without losing important details.
-## Memory Context Provider
-Memory Context Provider gives you full control over which past conversations are referenced in your current session.
+## Prerequisites
+- Syncfusion Code Studio open with a workspace.
+- Memory feature toggled on in User Settings (default is enabled).
+- Local storage available on your machine (memories are stored locally).
-### How to Use:
-1. Open Syncfusion Code Studio.
-2. Click the Syncfusion Code Studio icon in the left-hand toolbar to open the AI chat interface.
-
-3. In the chat window, click the @ button.
-
-4. Select Memory from the menu.
-
-5. Browse the list of saved memory summaries.
-
-6. Choose the memory you want to include in your current session.
+## Steps
+### 1. Enable Memory
+- Go to **Settings > Memory** and toggle "Enable memory" on.
+- This will allow the assistant to recall and reuse relevant information from past interactions to maintain continuity and improve response accuracy.
-Once selected, the memory is added to your context, helping the assistant respond with greater relevance.
+### 2. Add Memory Context Provider
+- In the chat window, click the @ button and select **Memory** from the menu.
+- Browse saved memory summaries grouped by date (e.g., "Yesterday", "Last Week").
+- Select the memory or conversation you want to include in your current session; it will be added as context for more relevant responses.
-## Managing Memories
-You can edit or delete memories to keep your workspace organized and up to date. Click on the open settings icon and navigate to the Memory section.
-
-- Edit: Click the edit icon next to a memory to update its summary.
-- Delete: Click the trash icon to remove a memory that's no longer needed.
-
+
-> **Note:** All memories are stored locally on your machine. Syncfusion values your privacy and does not upload memory data to the cloud.
+### 3. Manage Saved Memories
+- Hover over any saved memory entry to reveal edit and delete icons.
+ - **Edit**: Click the pencil icon to update a memory summary or notes.
+ - **Delete**: Click the trash icon to delete the memories.
-You can also toggle the Memory feature on or off anytime from the User Settings page.
-
+
-## Progress bar
-The progress bar is based on the saved memories storage. When the saved memories increase the size of the progress bar will also increase simultaneously. When you delete the saved memories the size of the progress bar will decrease. If the progress bar limit is full the storage is over(50mb). After that the memories will not be saved. You need to delete the memories to store new ones.
+### 4. Monitor Storage
+- The progress bar below "Saved memories" tracks your local storage usage (based on total size of saved memories).
+- When usage approaches the 50 MB limit, delete unnecessary memories to free space.
+- Once full, new memories won't be saved until you clear space.
-
\ No newline at end of file
+
+
+### 5. Scope of the Memory
+- **User-level**: Useful for storing recurring coding patterns, preferences, or general best practices that apply across all your development work.
+- **Project-level**: Memories tied to a specific project for focused context. These memories help the assistant understand project-specific architectures, coding standards, dependencies, and prior decisions. Project-level memories are isolated from other projects, reducing noise and keeping context relevant to current work.
+
+## Validation
+- Enable Memory in Settings and run a chat query; confirm a memory entry appears in the Saved memories list.
+- Click @ in chat and select a previous memory; verify the assistant references it in its response.
+- Edit a memory by clicking the pencil icon and updating the summary; confirm changes are saved.
+- Delete a memory using the trash icon and verify the progress bar storage decreases.
+
+## Troubleshooting
+- **Memories not in @ menu**: check User Settings > Memory and toggle it on.
+- **Storage is full in progress bar (50 MB)**: delete unused memories via the trash icon; the progress bar will decrease accordingly.
\ No newline at end of file
diff --git a/code-studio/features/summarize.md b/code-studio/features/summarize.md
index ce6a411..837fe00 100644
--- a/code-studio/features/summarize.md
+++ b/code-studio/features/summarize.md
@@ -5,21 +5,40 @@ platform: syncfusion-code-studio
keywords: summarization, syncfusion, code-studio, chat, context management, development, efficiency
---
-# Summarization Feature in Code Studio
+# Summarization
-## Overview
-As coding sessions and conversations extend over time, managing the increasing volume of context becomes crucial for maintaining efficiency and clarity. Code Studio addresses this challenge with its Summarization feature, designed specifically to keep your development chats streamlined, relevant, and effective regardless of their length.
## Purpose
-The Summarization feature ensures that, as conversations grow and exceed the AI's model context window, older messages are intelligently summarized. This process preserves the essential points and technical history while freeing up capacity for new interactions.
+The Summarization feature ensures that, as conversations grow and exceed the AI’s model context window, older messages are intelligently summarized. This process preserves the essential points and technical history while freeing up capacity for new interactions.
-## How It Works
+## When to Use
+- When coding sessions or AI-assisted conversations extend over many messages and risk exceeding the AI’s context window.
+- When you want Code Studio to remember only the crucial points, requirements, and decisions, while freeing up space for ongoing development chats.
-- **Automatic Monitoring:** Code Studio tracks the length of each conversation and the usage of context tokens.
-- **Triggering Summarization:** Once the chat approaches the context window limit, the system automatically summarizes earlier messages.
-- **Summarization Output:** Only essential details — technical decisions, requirements, and actions taken — are retained in concise summary format.
-- **Makes Space for New Chats:** By compressing older conversation content, Code Studio ensures space for current and future interactions.
-- **Enable/Disable Summarization:** Users can toggle summarization based on their project needs and preferences.
+## Prerequisites
+ - Syncfusion Code Studio open with a workspace.
+ - Summarization feature enabled in settings (can be toggled on/off based on user preference)
-
+## Steps
+### 1.Enable/Disable Summarization:
+- Users can toggle summarization based on their project needs and preferences.
+- Navigate to the settings and you can toggle on/off summarization.
+
+
+### 2.Automatic Monitoring:
+- Code Studio tracks the length of each conversation and the usage of context tokens.
+
+### 3.Triggering Summarization:
+- Once the chat approaches the context window limit, the system automatically summarizes earlier messages.
+- Only essential details — technical decisions, requirements, and actions taken — are retained in concise summary format.
+- By compressing older conversation content, Code Studio ensures space for current and future interactions.
+
+
+
+## Validation
+- Ensure the summarization should happen only when the context length exceeds over 50%.
+- Ensure the summarization should not happen after turning off in settings.
+
+## Troubleshooting
+-**Summarization Not Occurring**: Confirm that the feature is enabled in Code Studio settings.Ensure the mode is agent mode, as summarization does not occur in chat mode.
diff --git a/code-studio/features/telemetry.md b/code-studio/features/telemetry.md
index fe9f5ef..1c62689 100644
--- a/code-studio/features/telemetry.md
+++ b/code-studio/features/telemetry.md
@@ -7,44 +7,39 @@ keywords: code, IDE, AI, developer-tools, syncfusion, code-assistance, productiv
# Telemetry
+## Purpose
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.
+## When to Use
+- You want to help improve Code Studio performance and user experience by sharing anonymous usage metrics.
+- You’re okay with event data being sent to Syncfusion’s internal analytics for reliability, performance tuning, and feature prioritization.
+- You need a clear privacy toggle to opt in or out at any time.
-## Analytics Platform
+## Prerequisites
+- Syncfusion Code Studio installed with default telemetry settings (anonymous collection is on by default and can be turned off any time).
-Telemetry data is collected and stored using [PostHog](https://posthog.com/), an open-source product analytics platform.
+## Steps
-## Data Collection Policy
+### 1. Collected Data Types When Enabled
+Syncfusion Code Studio collects a limited set of anonymous usage metrics to help improve product performance and user experience. No personal data or user-generated content (such as code, prompts, or files) is ever collected or stored.
-Syncfusion Code Studio collects a limited set of **anonymous usage metrics** to help improve product performance and user experience. We ensure that **no personal data or user-generated content** (such as code, prompts, or files) is ever collected or stored.
+- **System Configurations**: Information about your operating system and development environment
+- **Model and Command**: The specific AI model and command used
+- **Token Usage**: The number of tokens generated during interactions
+- **Autocomplete Feedback**: Whether you accepted or rejected the suggestions provided
+- **User account details when logged-in**: User's login name and email will be collected
+> **Note**: No user-generated content (e.g., code, prompts, files) is collected.
+### 2. Privacy Toggles
+- To disable telemetry:
+ Go to **Settings > Allow Anonymous Telemetry** → toggle off.
+- Changes take effect immediately and can be reversed any time.
-## Collected Data Types
+
-The following categories of data are collected:
+## Validation
+- Ensure the telemetry toggle button in settings by turn off and turn on.
-- **System Configurations**: Information about your operating system and development environment.
-- **Model and Command**: The specific AI model and command used.
-- **Token Usage**: The number of tokens generated during interactions.
-- **Autocomplete Feedback**: Whether you accepted or rejected the suggestions provided.
-
-> **Note:** No user-generated content (e.g., code, files, or personal data) is collected.
-
-
-
-## Disabling Telemetry
-
-Telemetry can be disabled through the application settings at any time.
-
-### Steps to Disable Telemetry:
-
-1. Open **Settings** in Syncfusion Code Studio.
-
-
-
-2. Navigate to the User Settings page.
-3. Locate the option **“Allow Anonymous Telemetry”** and toggle it **off**.
-Changes take effect immediately and can be reversed at any time.
-
-
\ No newline at end of file
+## Troubleshooting
+- **Unsure if telemetry is enabled**: open **Settings** and turn on **Allow Anonymous Telemetry**.
+- **Concern about content capture**: telemetry never includes code, prompts, or files. If you still prefer zero event capture, keep telemetry disabled.
\ No newline at end of file
diff --git a/code-studio/get-started/firstAgentrun.md b/code-studio/get-started/firstAgentrun.md
new file mode 100644
index 0000000..db27419
--- /dev/null
+++ b/code-studio/get-started/firstAgentrun.md
@@ -0,0 +1,73 @@
+---
+title: Using Agent Mode in Syncfusion Code Studio
+description: Learn how to use Agent Mode in Syncfusion Code Studio to autonomously refactor modules with AI assistance, guardrails, and trackable changes.
+platform: syncfusion-code-studio
+keywords: agent-mode, refactoring, AI-assistance, syncfusion, code-studio, autonomous-coding, guided-workflow
+---
+
+# Overview
+Agent mode in Syncfusion Code Studio is a powerful AI assistant that autonomously explores your codebase, plans updates, and executes complex tasks with minimal input. This tutorial walks you through using Agent mode to refactor a module, with checkpoints and budget guardrails to ensure safe, trackable changes.
+
+
+
+## Prerequisites
+Before starting, make sure:
+
+- Your project is open and contains a module ready for refactoring
+- You understand how to switch to Agent mode using the mode selector below the chat input box
+- You’re ready to approve tool usage when prompted
+
+
+
+## What You’ll Build
+By the end of this tutorial, you’ll have:
+
+- Enabled Agent mode and configured guardrails
+- Automatic code changes in the existing files and new file creation and tool usage
+- Received a summary of all changes made
+
+
+
+## Steps
+
+### 1. Enable Agent Mode
+- Open the chat input box in Code Studio.
+- Use the mode selector to switch to **Agent mode**.
+- Agent mode activates autonomous coding capabilities.
+
+
+
+### 2. Run the Prompt
+- Describe the refactor task in the chat (e.g., `"Generate a login form using Syncfusion React components"`).
+- Agent will:
+ - Understand your request
+ - Explore the codebase
+ - Plan changes
+ - Request permission before using tools
+
+ You’ll see a permission prompt before Agent uses any tool. Click **Continue** to approve or **Cancel** to deny.
+
+
+
+### 3. Review Diffs
+- Agent will present a diff view showing proposed changes.
+
+
+### 4. Accept or Revert
+- Use the chat buttons to approve or reject each change.
+- Agent will proceed based on your input and adjust the plan if needed.
+
+
+
+### 5. Summarize
+- Once complete, Agent will provide a summary of all changes made.
+- You’ll regain full control of the editor.
+
+
+
+## Verify
+To confirm success:
+
+- Ensure Agent mode was activated and tool permissions were granted
+- Review the final summary and verify that the intended module was refactored
+- Check that all accepted changes are reflected in your codebase
\ No newline at end of file
diff --git a/code-studio/get-started/firstproject.md b/code-studio/get-started/firstproject.md
new file mode 100644
index 0000000..9bd73da
--- /dev/null
+++ b/code-studio/get-started/firstproject.md
@@ -0,0 +1,41 @@
+---
+title: Setting Up Workspace and Using Chat + Autocomplete
+description: Learn how to set up a workspace, connect a model, and use Chat and Autocomplete in Syncfusion Code Studio to streamline your development workflow with AI assistance.
+platform: syncfusion-code-studio
+keywords: workspace-setup, chat, autocomplete, syncfusion, code-studio, AI-assistance, code-improvement
+---
+
+# Overview
+In this guide, you’ll learn how to set up a workspace, connect a model, and use Chat + Autocomplete to improve your code. This is ideal for developers looking to streamline their workflow with inline AI assistance.
+
+
+
+## Prerequisites
+Before you begin, make sure you have:
+
+- A repository cloned locally
+
+
+
+## What You’ll Build
+You’ll enhance an existing function using:
+
+- Chat-based suggestions
+- Inline edits powered by your connected LLM
+- Context-aware autocomplete
+
+
+
+## Steps
+1. **Open your project folder in Code Studio**
+2. **Connect a language model provider**
+3. **Add context**
+ Choose a specific file or the entire codebase and ask for improvements, refactoring, or bug fixes.
+ The autocomplete will suggest the code based on the context.
+4. **Verify the AI suggested code and apply the changes to your current file.**
+
+
+
+## Verify
+- Ensure the updated function behaves as intended
+- Check for any new issues in the Problems panel or terminal output
\ No newline at end of file
diff --git a/code-studio/get-started/getting-started-image/agentmode.png b/code-studio/get-started/getting-started-image/agentmode.png
new file mode 100644
index 0000000..51c927c
Binary files /dev/null and b/code-studio/get-started/getting-started-image/agentmode.png differ
diff --git a/code-studio/get-started/getting-started-image/gif/Agent.gif b/code-studio/get-started/getting-started-image/gif/Agent.gif
new file mode 100644
index 0000000..bb6a78c
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/Agent.gif differ
diff --git a/code-studio/get-started/getting-started-image/gif/chatmode.gif b/code-studio/get-started/getting-started-image/gif/chatmode.gif
new file mode 100644
index 0000000..0da09b1
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/chatmode.gif differ
diff --git a/code-studio/get-started/getting-started-image/gif/contextprovider.gif b/code-studio/get-started/getting-started-image/gif/contextprovider.gif
new file mode 100644
index 0000000..1a6d36e
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/contextprovider.gif differ
diff --git a/code-studio/get-started/getting-started-image/gif/firstproject.gif b/code-studio/get-started/getting-started-image/gif/firstproject.gif
new file mode 100644
index 0000000..102701a
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/firstproject.gif differ
diff --git a/code-studio/get-started/getting-started-image/gif/productoverview.gif b/code-studio/get-started/getting-started-image/gif/productoverview.gif
new file mode 100644
index 0000000..4def1e1
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/productoverview.gif differ
diff --git a/code-studio/get-started/getting-started-image/gif/searchCP.gif b/code-studio/get-started/getting-started-image/gif/searchCP.gif
new file mode 100644
index 0000000..dbd7329
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/searchCP.gif differ
diff --git a/code-studio/get-started/getting-started-image/gif/sfcode ..gif b/code-studio/get-started/getting-started-image/gif/sfcode ..gif
new file mode 100644
index 0000000..a86f7ee
Binary files /dev/null and b/code-studio/get-started/getting-started-image/gif/sfcode ..gif differ
diff --git a/code-studio/get-started/getting-started-image/mac2.png b/code-studio/get-started/getting-started-image/mac2.png
index 6b15fe7..2c0be57 100644
Binary files a/code-studio/get-started/getting-started-image/mac2.png and b/code-studio/get-started/getting-started-image/mac2.png differ
diff --git a/code-studio/get-started/getting-started-image/opensettings.png b/code-studio/get-started/getting-started-image/opensettings.png
index 07b07a4..a9f65d4 100644
Binary files a/code-studio/get-started/getting-started-image/opensettings.png and b/code-studio/get-started/getting-started-image/opensettings.png differ
diff --git a/code-studio/get-started/mac.md b/code-studio/get-started/mac.md
index 90c93a0..efa4c8f 100644
--- a/code-studio/get-started/mac.md
+++ b/code-studio/get-started/mac.md
@@ -68,37 +68,11 @@ After launching, the IDE displays a **Welcome Page** to help you get started.
-### Open Chat Page
- Start a new chat session to interact with **Syncfusion Code Studio** directly.
-### Add Chat Model
+- You can customize syncfusion code studio settings by giving Open Settings Button.
-- Open a popup to configure your AI model, including provider, model name, and API key.
-
-
-
-
-
-
-- You can select the provider from the dropdown
-
-
-
-- You can select the Model from the dropdown
-
-
-
-- Enter the API key to connect the model with the selected provider and click connect button.
-
-
-
-- Now, the selected model has been added and is displayed in the chat box
-
-
-
-- Ready for integration within your development environment
-
-
+
\ No newline at end of file
diff --git a/code-studio/get-started/product-tour.md b/code-studio/get-started/product-tour.md
new file mode 100644
index 0000000..6f0dbce
--- /dev/null
+++ b/code-studio/get-started/product-tour.md
@@ -0,0 +1,75 @@
+# Welcome to Syncfusion Code Studio
+**Slug:** /tutorials/welcome
+**Description:** An introduction to Syncfusion Code Studio, the AI-powered IDE by Syncfusion for enhanced developer productivity
+**Platform:** syncfusion-code-studio
+**Documentation:** Getting Started
+**Keywords:** code, IDE, AI, developer-tools, syncfusion, code-assistance, productivity, UI-generation, bug-fixing, documentation
+
+
+
+## Overview
+Syncfusion Code Studio is a next-generation AI-powered Integrated Development Environment (IDE), designed to supercharge developer productivity. With built-in AI assistance, 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.
+Deeply integrated with Syncfusion’s UI components, library, Code Studio empowers teams to build robust, scalable applications with speed and precision.
+
+
+## What You’ll Build
+By the end of this tutorial, you’ll:
+
+- Understand the core concepts and modes of Code Studio
+- Explore the main UI components: Chat, Autocomplete, Agent, and Context Pane
+- Open a sample project repository in Code Studio
+- Run your first AI-powered prompt
+
+
+## Steps
+
+### 1. Launch Code Studio
+- Open Syncfusion Code Studio from your desktop or browser.
+- Sign in with your Syncfusion credentials to access your workspace.
+
+### 2. Open Your Project Repository
+Follow these steps to open your local project:
+
+- Navigate to your project folder.
+- Open your file explorer and locate your project’s root directory.
+- Open a terminal window in that folder.
+ Right-click → “Open in Terminal” (or use your system shortcut).
+- Launch Code Studio by running the following command:
+
+```bash
+sfcode .
+```
+ 
+
+### 3. Explore the UI
+Familiarize yourself with the key interface elements:
+
+- **Chat Mode:** Ask questions, generate code, or get explanations through natural language. [Learn more](../features/chat.md)
+- **Autocomplete Mode:** Receive AI-powered code suggestions as you type. [Learn more](../features/autocomplete.md)
+- **Agent Mode:** Let the AI agent perform multi-step tasks like file edits, UI generation, and logic reasoning. [Learn more](../features/agent.md)
+- **Context Pane:** View relevant files, summaries, and session memory to stay oriented as you work.
+
+
+
+### 4. Run Your First Prompt
+In chat mode, ask a question or request a code snippet. Try
+"Can you provide a step by step plan to build an admin dashboard".
+
+ 
+
+## Verify
+
+✅ You’ve launched Code Studio successfully
+✅ You can identify and describe the Chat, Autocomplete, Agent, and Context Pane
+✅ You’ve opened a sample repository
+✅ You’ve run at least one prompt and received a response
+
+
+
+## Next Steps
+Now that you’ve completed the product tour, explore these tutorials next:
+
+
+- [Build your first project](../)
+- [Building a UI with the Agent]()
+- [Fixing Bugs using context providers](../get-started/usingContextProviders.md)
\ No newline at end of file
diff --git a/code-studio/get-started/usingContextProviders.md b/code-studio/get-started/usingContextProviders.md
new file mode 100644
index 0000000..6e9d628
--- /dev/null
+++ b/code-studio/get-started/usingContextProviders.md
@@ -0,0 +1,60 @@
+---
+title: Using Context Providers in Syncfusion Code Studio
+description: Learn how to use Context Providers in Syncfusion Code Studio to reference code, errors, and terminal output directly in chat for guided bug fixing with AI assistance.
+platform: syncfusion-code-studio
+keywords: context-providers, bug-fixing, AI-assistance, syncfusion, code-studio, troubleshooting, guided-workflow
+---
+
+# Overview
+Context Providers in Syncfusion Code Studio allow you to reference specific parts of your development environment—code, diffs, errors, and terminal output—directly in chat. This tutorial walks you through using these providers to fix a bug with AI assistance, ensuring a guided, trackable workflow.
+
+
+
+## Prerequisites
+Before you begin, ensure:
+
+- Your project is open.
+- You’re ready to engage with the AI assistant to troubleshoot and resolve issues.
+
+
+## What You’ll Build
+By the end of this tutorial, you’ll have:
+
+- Used Context providers to fix the issues.
+- Experienced a full-cycle bug fix flow powered by AI.
+
+
+## Step-by-Step Instructions
+
+### 1. Diagnose the Bug and Select Context Providers
+- Click the **@** button in the chat to select a context provider.
+- Use the **Terminal** context to capture the runtime errors flagged by the IDE.
+- Use the **Problems** context to capture the compile-time errors.
+
+
+
+### 2. Guided Fix
+- Make sure the file containing the issue is open in your VS Code editor. This ensures the model can access the relevant error data.
+- Click the **Syncfusion Code Studio** icon in the left-hand toolbar to open the chat model window.
+- In the chat window, click the **@** button to open the context menu. From the list, select **Problems**.
+- Type your question or describe the issue in the chat window, then press **Enter**.
+
+The AI will:
+- Analyze the Problems panel data from your open file
+- Suggest fixes or explanations for the errors
+- Help you resolve issues without switching contexts
+
+ 
+
+### 3. Verify the Fix
+- Save the changes.
+- Verify that the bug has been resolved by checking the Problems panel or any error indicators in the editor window.
+
+
+
+## Verify
+To confirm the bug was resolved:
+
+- Ensure all relevant context providers were used.
+- Review the AI’s guidance and verify that the issue is fixed.
+- Confirm that all accepted changes are reflected in your codebase.
\ No newline at end of file
diff --git a/code-studio/get-started/windows.md b/code-studio/get-started/windows.md
index c89fc7f..a4e9899 100644
--- a/code-studio/get-started/windows.md
+++ b/code-studio/get-started/windows.md
@@ -98,33 +98,6 @@ After installation, the IDE launches with a **Welcome Page** to help you get sta
-### Add Chat Model
-
-- Open a popup to configure your AI model, including provider, model name, and API key.
-
-
-
-
-
-- You can select the provider from the dropdown
-
-
-
-- You can select the Model from the dropdown
-
-
-
-- Enter the API key to connect the model with the selected provider and click connect button.
-
-
-
-- Now, the selected model has been added and is displayed in the chat box
-
-
-
-- Ready for integration within your development environment
-
-
-
-
+- You can customize syncfusion code studio settings by giving Open Settings Button.
+
\ No newline at end of file
diff --git a/code-studio/reference/configure-properties/docs.md b/code-studio/reference/configure-properties/docs.md
index b7b6ece..7b4bfac 100644
--- a/code-studio/reference/configure-properties/docs.md
+++ b/code-studio/reference/configure-properties/docs.md
@@ -8,13 +8,21 @@ keywords: code, IDE, installation, windows, setup, getting-started
---
# Docs
-The "Docs" section in Code Studio allows you to integrate documents directly into the environment. This means Code Studio can access and utilize these documents at any time, enhancing its ability to provide relevant assistance based on your specific information.
## Purpose
-By adding your specific documentation, you can provide Code Studio with custom context relevant to your projects and workflows. All added documents are listed for easy management and direct use.
-Keeping your essential resources within Code Studio, reducing the need to switch between applications.
+The "Docs" section in Code Studio allows you to integrate documents directly into the environment. This means Code Studio can access and utilize these documents at any time, enhancing its ability to provide relevant assistance based on your specific information.
+
+## When to Use
+- You want the assistant to answer using specific external documentation (framework guides, API refs) without pasting text.
+- You need focused, doc-aware help tied to chosen pages rather than the whole web. You prefer tight scope control and predictable performance.
+
+
+## Prerequisites
+- Syncfusion Code Studio open with a workspace
+- Documentation site link to integrate
-## How to Add Documents
+
+## Steps
### 1. Navigate to the "Docs" Section
In Code Studio, locate and click on the "Docs" section.
@@ -38,12 +46,12 @@ Click on the "Add" button to finalize the process. Your document will now be int
-## Managing Your Added Documents
+### 5.Managing Your Added Documents
Once documents are added, they will be listed in the "Docs" section.
-### Editing Document Details
+### 6.Editing Document Details
To modify the title or URL of an existing document,
Click on the "Edit" option next to the desired document in the list.
This action will open the configuration file.
@@ -51,4 +59,14 @@ You can then edit the name and URL directly within the config page.
-**Note:** To access the added documents refer the steps in this [page](/code-studio/features/context-providers/docs).
\ No newline at end of file
+**Note:** To access the added documents refer the steps in this [page](/code-studio/features/context-providers/docs).
+
+## Validation
+- Add one doc page and ask for a summary; confirm the answer cites concepts from that page.
+- Add a second page and ask for a code sample; verify details come from both.
+
+
+## Troubleshooting
+- **Page not indexing or slow**: check network; try a smaller page or wait for indexing to complete.
+- **Response Too slow/expensive**: reduce the number of URLs or pick shorter pages; avoid whole-site imports.
+
diff --git a/code-studio/reference/configure-properties/how-to-add-local-and-BYOK-model.md b/code-studio/reference/configure-properties/how-to-add-local-and-BYOK-model.md
index a29f18c..f4f9cc0 100644
--- a/code-studio/reference/configure-properties/how-to-add-local-and-BYOK-model.md
+++ b/code-studio/reference/configure-properties/how-to-add-local-and-BYOK-model.md
@@ -1,13 +1,24 @@
---
-title: How to Add Local and BYOK Models
-Description: Steps to add local chat models and BYOK (Bring Your Own Key) models in Code Studio, including adding provider API/LLM keys and registering models.
+title: How to Add Local Models
+Description: Steps to add local chat models in Code Studio, including adding provider API/LLM keys and registering models.
platform: syncfusion-code-studio
-keywords: local, BYOK
+keywords: local,models
---
-# How to add local models and BYOK models
+# How to add local models
+
+## Purpose
+To enable users to configure and use their own chat models locally within the application by adding them with the appropriate API keys.
+
+## When to Use
+- When you need to access or switch between different chat models from various providers within a unified interface.
+- When adding a new model to expand the capabilities or options available for AI-powered tasks.
+
+## Prerequisites
+-The API key for the chat model provider you want to add (e.g., OpenAI, Anthropic, etc.).
+
+## Steps:
-## Local Models:
Click the model's section dropdown and click 'Add Chat Model' option.
@@ -20,22 +31,11 @@ you can see the added model appear in local model category in model's section
-## BYOK models:
-Navigate to Code Studio dashboard website by clicking the dashboard button in the profile icon.
-
-
-
-
-In the dashboard website navigate to BYOK/LLM keys section and add the LLM key by clicking 'Add LLM key' button
-
-
-
-
-After adding the LLM key navigate to the BYOK/Models section and add the model by clicking 'Add Model' button
-
-
-
-
-After adding the model, the added model will appear in Code Studio models section under BYOK models category.
+## Validation
+- Verify that the added model appears under the local model category in the model’s section.
+- Ensure the model can be selected for chat or other intended tasks.
+- Perform a quick test (if possible) by issuing a simple query to the new model to confirm connectivity and functionality.
-
\ No newline at end of file
+## Troubleshooting
+- **Model Does Not Appear**:Ensure all fields (provider, model, API key) are filled correctly and try reconnecting.
+- **Connection Fails**: Double-check that the API key is valid.
\ No newline at end of file
diff --git a/code-studio/reference/configure-properties/mcp/configure-mcp-server.md b/code-studio/reference/configure-properties/mcp/configure-mcp-server.md
index da4be02..e2d3a76 100644
--- a/code-studio/reference/configure-properties/mcp/configure-mcp-server.md
+++ b/code-studio/reference/configure-properties/mcp/configure-mcp-server.md
@@ -9,37 +9,32 @@ keywords: mcp-marketplace, mcp-server, installation, server-management, code-stu
# Model Context Protocol (MCP) Configuration Guide
-As AI systems evolve, they are often constrained by their dependence on fixed training datasets, which limits their ability to access real-time data or utilize specialized tools. **The Model Context Protocol (MCP)** overcomes these challenges by facilitating seamless connections between AI models and external data sources, tools, and environments, enabling dynamic and enhanced functionality.
+## Purpose
+The Model Context Protocol (MCP) enables the AI in Syncfusion Code Studio to securely connect to external data sources, tools, and environments. This extends the model beyond its fixed training data, allowing real-time information access and specialized actions through a standardized, permissioned interface for more dynamic and reliable assistance.
-## How to Configure MCP Servers through config.yaml
+## When to Use
+- You want Code Studio to connect the assistant to external tools/data via Model Context Protocol (MCP).
+- You need to pass environment variables and secrets safely to MCP servers at launch.
-You can set up an MCP server by either downloading it from the [Marketplace](/code-studio/reference/configure-properties/mcp/marketplace) or adding a local MCP server block to your configuration file.
-## Accessing the Config Page
+## Prerequisites
+- Syncfusion Code Studio installed.
+- MCP configuration entry with necessary arguments and environment variables if needed
-The Config page can be accessed by clicking the gear icon located in the header of the Code Studio, then selecting the Settings tab.
-
+## Steps
+### 1.Accessing the Config File
+- The Config file can be accessed by clicking the gear icon located in the header of the Code Studio, then selecting the Settings tab.
+- Click on the Open Config File button.
+- This will open the config.yaml file in the editor, where you can manually add or modify MCP server configurations.
-## Open Config file
+
-1. Click on the Open Config File button.
+### 2.Adding MCP Server Configuration
-2. This will open the `config.yaml` file in the editor, where you can manually add or modify MCP server configurations.
+- In config.yaml file add the MCP entry that you want to connect.
-3. Below is an example of a local MCP server configuration in a `yaml` file:
-
-```yaml
-
-mcpServers:
- - name: Browser search
- command: npx
- args:
- - "@playwright/mcp@latest"
-```
-
-
-## MCP Server Properties
+**MCP Server Properties**
Below are the properties you can configure for an MCP server:
@@ -52,7 +47,23 @@ Below are the properties you can configure for an MCP server:
- **args**: A list of arguments to pass to the command.
- **env**: Secrets or environment variables to be injected into the command for secure execution.
-Once configured, the Playwright tools will be available in the tools list.
+Below is an example of a local MCP server configuration in a yaml file:
+
+```yaml
+
+mcpServers:
+ - name: Browser search
+ command: npx
+ args:
+ - "@playwright/mcp@latest"
+```
+
+Once configured, the added MCP's tools will be available in the tools list.
+
+
-
+## Validation
+- Save config.yaml, restart the session, then open Chat and check that the new tool(s) appear in tools section.
+## Troubleshooting
+- **Tools don’t appear**: check YAML indentation and keys (name, type, command) in config.yaml file, save the file, and reload the window.
diff --git a/code-studio/reference/configure-properties/mcp/customservers.md b/code-studio/reference/configure-properties/mcp/customservers.md
index 7c7c0c4..3926cc2 100644
--- a/code-studio/reference/configure-properties/mcp/customservers.md
+++ b/code-studio/reference/configure-properties/mcp/customservers.md
@@ -8,12 +8,26 @@ keywords: custom-mcp-server, remote-server, npm-server, local-server, code-studi
---
# Custom Servers
+
+## Purpose
Custom Servers allows users to connect to any custom MCP servers, providing a seamless way to link these servers to the Code Studio extension for enhanced accessibility and control.
1. Remote server
2. NPM server
3. Local server
-## Steps to add custom servers
+## When to Use
+- When you want to expand Code Studio’s capabilities by adding new or custom MCP servers.
+- To integrate remote servers, NPM-based servers, or local servers for custom workflows or processing
+
+## Prerequisites
+- Syncfusion Code Studio open
+- Required server details, depending on the server type:
+ - Remote Server: Server name and URL endpoint.
+ - NPM Server: Server name and NPM package name.
+ - Local Server: Server name and the path to the server script.
+
+
+## Steps
Click the **Syncfusion Code Studio** icon on the left toolbar to open the Syncfusion Code Studio chat window.
@@ -22,7 +36,7 @@ Navigate to MCP section by clicking MCP icon and move to custom servers tab.
-## Remote Server:
+### Remote Server:
This option allows user to connect existing remote servers to the Code Studio extension using the remote server url end point.
Fill server name, server url, choose server type as remote server then click ‘add server’ button
@@ -32,7 +46,7 @@ Also, the added custom remote server occurs in MCP section and custom remote ser
-## NPM Server:
+### NPM Server:
This option allows user to install and configure mcp server as npm package to the Code Studio extension using npm package name.
Fill server name, NPM package, choose server type as npm package then click ‘add server’.
@@ -42,7 +56,7 @@ Also, the added custom npm server occurs in MCP section and custom npm server
-## Local server:
+### Local server:
This option allows user to build and configure the mcp server from the server source to the Code Studio extension.
Fill server name, script path, choose server type as local server then click ‘add server’.
@@ -51,3 +65,12 @@ After installation, the custom local server entry occurs in config.yaml file and
Also, the added custom local server occurs in MCP section and custom local server’s tools occur
+
+## Validation
+- Verify the new server appears in the user installed servers section.
+- Ensure a corresponding entry for the server is present in your config.yaml file.
+- Confirm the new server’s tools are listed in the Tools section.
+
+
+## Troubleshooting
+- **Server Not Added**: Double-check the information (server type, name, URL/NPM package/script path) entered.Ensure the server endpoint or package is valid.Refresh Code Studio if necessary.
\ No newline at end of file
diff --git a/code-studio/reference/configure-properties/mcp/marketplace.md b/code-studio/reference/configure-properties/mcp/marketplace.md
index 0456464..d727195 100644
--- a/code-studio/reference/configure-properties/mcp/marketplace.md
+++ b/code-studio/reference/configure-properties/mcp/marketplace.md
@@ -7,11 +7,19 @@ platform: syncfusion-code-studio
keywords: mcp-marketplace, mcp-server, installation, server-management, code-studio
---
-## MCP Marketplace
-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.
-This 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.
+# MCP Marketplace
+## Purpose
+To provide a centralized, user-friendly platform for managing MCP servers. The MCP Marketplace lets users discover, install, and connect MCP servers to the Code Studio extension, streamlining server integration and tool accessibility.
-## Steps to install an MCP server from marketplace
+## When to Use
+- When you need to explore and add new MCP servers to expand your coding and workflow capabilities in Code Studio.
+- When you want to easily install, or remove MCP servers without manual configurations.
+
+## Prerequisites
+- Syncfusion Code Studio open
+- To install MCP some credentials needed like personal access tokens for figma and azure devops MCP's
+
+## Steps
Click the **Syncfusion Code Studio** icon on the left toolbar to open the Syncfusion Code Studio chat window.
Navigate to MCP section by clicking MCP icon and navigate to marketplace tab.
@@ -31,6 +39,14 @@ After restart, the installed MCP’s tools occurs in tools section and MCP entry
You can uninstall the MCP server by clicking uninstall button.
-## Installed Servers
+### Installed Servers
Navigate to installed tab. The installed MCP servers is showing here.
-
\ No newline at end of file
+
+
+## Validation
+- Verify the new MCP server appears in the Installed tab and its tools are listed in the Tools section.
+- Confirm the MCP server entry exists in the config.yaml file.
+
+
+## Troubleshooting
+- **Server Not Installing**: Ensure you have internet connectivity.Check for error messages during installation and address any permission issues.
\ No newline at end of file
diff --git a/code-studio/reference/configure-properties/models.md b/code-studio/reference/configure-properties/models.md
index aeafebc..906ad0a 100644
--- a/code-studio/reference/configure-properties/models.md
+++ b/code-studio/reference/configure-properties/models.md
@@ -9,37 +9,52 @@ keywords: code, IDE, installation, windows, setup, getting-started
# Models
-Select the right language model from the dropdown menus in each section to optimize your workflow for tasks like chat, editing, or code completion.
+## Purpose
-## Why Choose a Model?
+The Model section lets you select the right language model from the dropdown menus in each section to optimize your workflow for tasks like chat, editing, or code completion.
-- **Specialization**: Each model excels at certain tasks—some are conversational, others are optimized for code completion or understanding context.
-- **Customization**: Tailor your experience by picking the model that best matches your use case.
+## When to Use
-## Available Model Use Cases
-You can apply different models to the following features:
+- When you want to decide specfic models excels at specific tasks—some are conversational, while others are optimized for code completion or context understanding.
+- When you want to tailor your experience, choose the model that best matches your use case.
+
+## Prerequisites
+- Syncfusion Code Studio open
+- Access to premium/BYOK models, if logged out local models are needed
+
+
+## Steps
+
+### 1. Locate the Model Dropdown
+- Navigate to models section in the chat.In each mode section (e.g., Chat, Edit, Autocomplete), you’ll find a model selection dropdown.
+
+
+**Available Model Use Cases**
+
+You can apply different models to the following features, except for embed and rerank, as they use the built-in Transformer.js.
+
- **Chat**: Interact naturally to get explanations, answers, or code reviews.
- **Edit**: Generate, refactor, or transform code snippets.
- **Apply**: Execute targeted code modifications with high accuracy.
- **Autocomplete**: Receive smart code completions while typing.
-- **Embed**: Produce vector representations for tasks like search or similarity.
-- **Rerank**: Improve the ordering of search or recommendation results.
-
-
-## How to Select a Model
-### 1. Locate the Model Dropdown
+### 2. Choose Based on Your Task
-In each mode section (e.g., `Chat`, `Edit`, `Autocomplete`), you’ll find a model selection dropdown.
+- Click the dropdown and select the model from the list of models.
+- Click on the most suitable model for your current task.
+- Code Studio will now use this model for actions in this section.
-### 2. Choose Based on Your Task
+
-1. Click the dropdown and select the model from the list of models.
-2. Click on the most suitable model for your current task.
-
+## Validation
+- Chat: ask for a step‑by‑step explanation, then switch to a different model and compare clarity/latency.
+- Edit/Apply: request a refactor; verify the Apply model makes minimal, precise diffs.
+- Autocomplete: type a function scaffold and confirm inline suggestions appear quickly after switching models.
-Code Studio will now use this model for actions in this section.
+## Troubleshooting
+- **Slow or timeouts**: choose a smaller/faster model, reduce attached contexts, or use a local model.
+- For autocomplete use cost efficient models for lower token generation.
diff --git a/code-studio/reference/configure-properties/prompt.md b/code-studio/reference/configure-properties/prompt.md
index a92de64..8309ee5 100644
--- a/code-studio/reference/configure-properties/prompt.md
+++ b/code-studio/reference/configure-properties/prompt.md
@@ -7,8 +7,6 @@ keywords: custom-prompts, ai-assistance, templates, workflows, best-practices
# Custom Prompts
-Custom prompts let you encode your team’s coding standards into reusable templates. This delivers consistent, high-quality AI assistance and speeds up routine tasks.
-
## Purpose
The primary purpose of custom prompts is to streamline and standardize development workflows by:
@@ -17,8 +15,24 @@ The primary purpose of custom prompts is to streamline and standardize developme
- **Improving Consistency**: Standardize how common tasks are performed.
- **Accelerating Development**: Automate repetitive coding tasks with predefined templates.
+## When to Use
+- You want reusable instructions that produce consistent code, reviews, docs, or tests.
+- You need fast, repeatable workflows for common tasks.
+- You prefer templates you can version-control and share across the team.
+
+## Prerequisites
+- Syncfusion Code Studio open with a workspace
+
+
+## Steps
+### 1.Using Prompt Files
+
+- Click the “Add Prompt” button in prompt section, Code Studio will automatically generate your new prompt file under the sfcodestudio/prompts/ directory.
+- In Code Studio chat, type / and pick your prompt.
+- Run the prompt and review suggestions.
+
+**Basic example prompt file structure**
-## Prompt File Structure
-## Example Prompt
+**Example Prompt**
```yaml
name: GenerateTestCases
@@ -65,7 +73,7 @@ prompt:
5. Document test cases and set test coverage for each functionality
```
-## Using Context with @ Syntax
+### 2.Using Context with @ Syntax
While editing a prompt file, you can enhance its context by using the @ symbol to reference specific resources. This allows the AI to incorporate relevant information from your workspace. Available options include:
@@ -87,3 +95,12 @@ While editing a prompt file, you can enhance its context by using the @ symbol t
+
+## Validation
+- Create a prompt, type / in chat, select it, and confirm the generated output follows your template.
+- Add @currentFile to the prompt, open a different file, rerun, and verify results change with context.
+
+## Troubleshooting
+- **Prompt not showing in /**: ensure the prompt file is created inside sfcodestudio/prompts/ .
+
+
diff --git a/code-studio/reference/configure-properties/rules.md b/code-studio/reference/configure-properties/rules.md
index 7f2cfe0..d11982d 100644
--- a/code-studio/reference/configure-properties/rules.md
+++ b/code-studio/reference/configure-properties/rules.md
@@ -9,38 +9,28 @@ keywords: code, IDE, installation, windows, setup, getting-started
# Rules
-**Rules** 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.
-
-
## Purpose
+**Rules** 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.
-- **Set Standards:** Ensure the AI follows your coding styles, guidelines, and project needs.
-- **Keep Responses Consistent:** Ensure all answers align with your team’s requirements every time.
-- **Easily Update Guidance:** Modify rules as your project evolves to maintain relevant suggestions.
-- **Support Team Alignment:** Help everyone on the project receive guidance that matches shared practices.
+## When to Use
+- You want the assistant to follow specific rules or instructions that guide how the AI assistant behaves when working with your code.
+- You want to define guidelines that ensure consistent, contextually appropriate responses.
-## How Rules Work in Syncfusion Code Studio
- To form the system message, rules are joined with new lines, in the order they appear in the toolbar.
+## Prerequisites
+- Syncfusion Code Studio open with a workspace
-## How to Use Rules
-
-### 1. Open Code Studio Extension
-
-Click the **Syncfusion Code Studio** icon on the left toolbar to open the Syncfusion Code Studio chat window.
-
-
-### 2. Add Rules
+## Steps
+### 1. Add Rules
You can add rules in three different ways. Regardless of the method you choose, Code Studio will automatically apply the changes once the file is saved.
**1. Using add Rules block**
- Go to the **Rules** section and click **Add Rules**.
-
- Enter the **rule name** and **description**, then click the **Add** button.
-
- Once added, the rule will appear as a block in the interface and will be automatically included in the configuration file.
-
+
+
**2. Using a `.sfcoderules` file**
@@ -48,29 +38,38 @@ You can add rules in three different ways. Regardless of the method you choose,
- Add your rules to this file, one per line.
- Save the file. Code Studio will automatically apply these rules.
+
**3. Using the `config.yaml` file**
- Open `config.yaml` page by clicking the settings icon and click on `open config file` the config page will be opened.
- In the file, create a `rules` section and list the instructions you want the Code Studio to follow.
- Save the file. The Code Studio will respond according to these rules.
-
+
-### 3. Verify the Response
+### 2. Verify the Response
After adding the rules, give a query to the model. The response will be based on the rules you provided.
-
+
-### 4. Edit the Rules
+### 3. Edit the Rules
- Navigate to the **Rules** section and click the **pencil icon** next to the rule you want to edit.
-
+
- The **Edit Rules** interface will open, allowing you to update the rule name or description.
- After making your changes, click **Save** to apply the updates.
-
\ No newline at end of file
+
+
+## Validation
+- Add a rule and ask a query; confirm the reply follows the rule.
+- Try to edit the rules and save and ensure the edited rule appear in config.yaml file
+
+
+## Troubleshooting
+- **Rules not followed by model**: Ensure the rules are visible in the Rules section also in config.yaml file under 'rules' array and reload if needed.
diff --git a/code-studio/reference/configure-properties/sfcodeignore.md b/code-studio/reference/configure-properties/sfcodeignore.md
index 6f52a13..577e5bb 100644
--- a/code-studio/reference/configure-properties/sfcodeignore.md
+++ b/code-studio/reference/configure-properties/sfcodeignore.md
@@ -7,21 +7,56 @@ keywords: sfcodeignore, ignore, indexing
# .Sfcodeignore
+## Purpose
+
The “.sfcodeignore” file allows you to specify files or directories from your workspace that should be ignored during indexing when using the Syncfusion Code Studio. This is useful for excluding irrelevant, sensitive, or unnecessary files from being processed.
-## Steps to Add Folders and Files in the “.sfcodeignore” File:
-### step1: create ".sfcodeignore" file
-create ".sfcodeignore" file in your workspace and open it
+## When to Use
+- You want to exclude irrelevant or sensitive files and folders from Code Studio indexing so they don’t appear in context providers or influence AI answers.
+
+
+## Prerequisites
+- Syncfusion Code Studio open with a workspace
+
+## Steps
+
+### 1.Create ".sfcodeignore" file
+- create ".sfcodeignore" file in your workspace and open it
-### step 2: Add a file/folder
-Add the required files and folders in ".sfcodeignore" file to ignore while indexing.
+### 2.Add a file/folder
+- Add the required files and folders in ".sfcodeignore" file to ignore while indexing.
+
+**ADD PATTERNS**:
+- Lines starting with # are comments.
+- Trailing slash / matches only directories (dist/).
+- Leading slash / anchors to repo root (/build/).
+- Use ! to negate a previous ignore (re-include).
+
+**Examples**:
+- node_modules/ # ignore folder
+- *.log # all .log files
+- /secrets/*.json # only under repo root
+- docs/**/*.png # images anywhere under docs
+- !docs/keep.png # re-include a specific file
+
-### step 3: Added files will be ignored
-After adding the required file/folders reload the Code Studio and the added files and folders will be ignored during indexing. You can check this by using the file and folder context providers. Type '@' and open file and folder context providers. The added files and folders will not appear.
+### 3.Added files will be ignored
+- After adding the required file/folders reload the Code Studio and the added files and folders will be ignored during indexing.
+- You can check this by using the file and folder context providers. Type '@' and open file and folder context providers. The added files and folders will not appear.
+
+## Validation
+- After reloading, open @Files/@Folder: ignored paths should not appear.
+- Temporarily remove a file in sfcodeignore file , reload, and confirm the path reappears.
+
+
+## Troubleshooting
+- **Files/folders seems not ignored**: ensure you have reloaded the Code Studio.
+- Ensure the added patterns are correct.
+
diff --git a/code-studio/reference/configure-properties/toolssupport.md b/code-studio/reference/configure-properties/toolssupport.md
index 87eb3a1..545bca2 100644
--- a/code-studio/reference/configure-properties/toolssupport.md
+++ b/code-studio/reference/configure-properties/toolssupport.md
@@ -6,49 +6,34 @@ keywords: tools, syncfusion, code-studio, development, automation, workflow, bui
---
# Tools
-
- The Tools 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.
-
## Purpose
+ The Tools 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 built-in 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.
-
-### 2. Terminal Integration
-- 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.
+## When to Use
+- You want to automate routine development actions (create/edit files, search/replace, browse the web) from chat.
+- You need the assistant to execute concrete steps with safety controls (Automatic, Ask First, Excluded).
+- You’re in Agent mode and prefer approving changes before they touch your workspace.
-### 4. Web and Browser Tools
-- Perform web searches to fetch relevant resources.
-- Automate browser tasks like testing or scraping.
+## Prerequisites
+- Syncfusion Code Studio open with a workspace
-## Built-In Tools
+## Steps
-Syncfusion Code Studio provides a suite of tools to streamline your workflow. Below is a comprehensive list of available tools and their description.
-
-### 1. Ensure the Required Tools Policy
+**1.Open the Chat Window**: Click the Syncfusion Code Studio icon on the left toolbar to open the chat interface.
-To balance speed and safety, each tool in Syncfusion Code Studio can be configured in one of three modes:
+**2.Choose tool permissions for each tool set mode**: Automatic, Ask First, or Excluded. Use Ask First for impactful actions (writes, terminal).
+- **Automatic**: When the model requests a tool, Code Studio automatically executes it and sends the response back to the model.
+- **Ask First**: When the model requests a tool, Code Studio prompts you to either “Cancel” or “Continue” before proceeding.
+- **Excluded**: The model is unaware of the tool and cannot use it.
-- **Automatic:** When the model requests a tool, Code Studio automatically executes it and sends the response back to the model.
+**3.Enter Your Request**: Type your request in natural language, describing what you want to accomplish. Ensure Code Studio is in Agent mode.
-- **Ask First:** When the model requests a tool, Code Studio prompts you to either "Cancel" or "Continue" before proceeding.
+**4.Review Tool Execution**: The AI will automatically select and execute the appropriate tools based on your request.
-- **Excluded:** The model is unaware of the tool and cannot use it.
+**5.Approve Changes**: Review any proposed changes and approve or modify them as needed.
- To change the mode, click on the desired option. Once configured, enter your prompt to perform the task. Code Studio will then leverage the selected tools to build the application.
-### 2. Toolset Overview
+**Toolset Overview**
Available built-in tools and their descriptions:
@@ -115,17 +100,13 @@ Available built-in tools and their descriptions:
-## How to Use Tools
-
-1. **Open the Chat Window** - Click the Syncfusion Code Studio icon on the left toolbar to open the chat interface.
-
-2. **Enter Your Request** - Type your request in natural language, describing what you want to accomplish. Ensure Code Studio is in Agent mode.
-
-3. **Review Tool Execution** - The AI will automatically select and execute the appropriate tools based on your request.
-
-4. **Approve Changes** - Review any proposed changes and approve or modify them as needed.
-
+## Validation
+- File operations: Create any file and ensure the file is created by create file tool;
+- Web: “Search web for ‘vite coverage exclude config’ and summarize top solutions.” Verify cited results.
+- Terminal: “Run npm test and summarize failures.” Confirm command output and diagnosis.
+## Troubleshooting
+- **Tools not running**: ensure mode is in Agent mode and the tool isn’t set to Excluded in tools section.
diff --git a/code-studio/reference/configure-properties/usersettings.md b/code-studio/reference/configure-properties/usersettings.md
index 9bdc28d..11dd416 100644
--- a/code-studio/reference/configure-properties/usersettings.md
+++ b/code-studio/reference/configure-properties/usersettings.md
@@ -8,23 +8,30 @@ keywords: user-settings, customization, configuration, development-environment,
# User Settings
-Customize your Code Studio experience with personalized settings that enhance productivity and workflow efficiency. Settings are stored locally and take effect immediately upon change.
-
## Purpose
-
User settings provide a way to tailor the development environment to individual preferences, which helps to:
- **Optimize Workflow**: Adjust the UI and behavior to match your personal workflow.
- **Enhance Accessibility**: Modify font sizes and enable text-to-speech for better accessibility.
- **Manage Privacy**: Control what data is shared to protect privacy.
-## Accessing the User Settings Page
+## When to Use
+- You want to customize your Code Studio experience with personalized settings that enhance productivity and workflow efficiency.
+- You need to tune chat behavior, autocomplete, indexing, and memory for large projects.
+
+
+## Prerequisites
+- Syncfusion Code Studio open.
-The User Settings page can be accessed by clicking the gear icon located in the header of the Code Studio, then selecting the Settings tab.
+## Steps
+### 1.Accessing the User Settings Page
+- The User Settings page can be accessed by clicking the gear icon located in the header of the Code Studio, then selecting the Settings tab.
-## Settings Categories
+
+
+### 2.Settings Categories
The following settings are available on the User Settings page.
@@ -111,7 +118,8 @@ The following settings are available on the User Settings page.
-### Help & Support
+### Help
+**Help & Support**
- **Documentation**
Access the official Syncfusion Code Studio documentation for configuration guidance and usage instructions.
@@ -122,8 +130,17 @@ The following settings are available on the User Settings page.
- **Token Usage**
View daily token consumption across supported models for better usage tracking.
-## Keyboard Shortcuts
+**Keyboard Shortcuts**
Quickly navigate and interact with Code Studio using the following shortcuts.
-
\ No newline at end of file
+
+
+## Validation
+- Toggle session tabs, ensure tabs dispalys above the chat window to organize and access your sessions.
+- Change Font Size and confirm UI text updates instantly.
+- Toggle Wrap Codeblocks, ensure the codeblocks wrapped in chat response
+
+
+## Troubleshooting
+- Setting doesn’t apply: toggle Off/On again or reload the window
\ No newline at end of file
diff --git a/code-studio/reference/reference-images/configuremcp1.png b/code-studio/reference/reference-images/configuremcp1.png
new file mode 100644
index 0000000..8a121b9
Binary files /dev/null and b/code-studio/reference/reference-images/configuremcp1.png differ
diff --git a/code-studio/reference/reference-images/configuremcp2.png b/code-studio/reference/reference-images/configuremcp2.png
new file mode 100644
index 0000000..c4c34b2
Binary files /dev/null and b/code-studio/reference/reference-images/configuremcp2.png differ
diff --git a/code-studio/reference/reference-images/ignore2.png b/code-studio/reference/reference-images/ignore2.png
index 5586ea3..81467c7 100644
Binary files a/code-studio/reference/reference-images/ignore2.png and b/code-studio/reference/reference-images/ignore2.png differ
diff --git a/code-studio/reference/reference-images/ignore3.gif b/code-studio/reference/reference-images/ignore3.gif
index 1fcdbb7..015fe20 100644
Binary files a/code-studio/reference/reference-images/ignore3.gif and b/code-studio/reference/reference-images/ignore3.gif differ
diff --git a/code-studio/reference/reference-images/modelssectiongif.gif b/code-studio/reference/reference-images/modelssectiongif.gif
new file mode 100644
index 0000000..5d5352f
Binary files /dev/null and b/code-studio/reference/reference-images/modelssectiongif.gif differ
diff --git a/code-studio/reference/reference-images/rules1.gif b/code-studio/reference/reference-images/rules1.gif
new file mode 100644
index 0000000..718b724
Binary files /dev/null and b/code-studio/reference/reference-images/rules1.gif differ
diff --git a/code-studio/reference/reference-images/rules2.png b/code-studio/reference/reference-images/rules2.png
new file mode 100644
index 0000000..6b624c3
Binary files /dev/null and b/code-studio/reference/reference-images/rules2.png differ
diff --git a/code-studio/reference/reference-images/rules3.png b/code-studio/reference/reference-images/rules3.png
new file mode 100644
index 0000000..e7ac728
Binary files /dev/null and b/code-studio/reference/reference-images/rules3.png differ
diff --git a/code-studio/reference/reference-images/rules4.png b/code-studio/reference/reference-images/rules4.png
new file mode 100644
index 0000000..96c4c82
Binary files /dev/null and b/code-studio/reference/reference-images/rules4.png differ
diff --git a/code-studio/reference/reference-images/rules5.png b/code-studio/reference/reference-images/rules5.png
new file mode 100644
index 0000000..0dfa3a9
Binary files /dev/null and b/code-studio/reference/reference-images/rules5.png differ
diff --git a/code-studio/reference/reference-images/rules6.png b/code-studio/reference/reference-images/rules6.png
new file mode 100644
index 0000000..307176f
Binary files /dev/null and b/code-studio/reference/reference-images/rules6.png differ
diff --git a/code-studio/reference/reference-images/settings1.png b/code-studio/reference/reference-images/settings1.png
new file mode 100644
index 0000000..e66bc1e
Binary files /dev/null and b/code-studio/reference/reference-images/settings1.png differ
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
index 59a66ea..986e0ba 100644
--- 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
@@ -7,13 +7,23 @@ 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.
+# Overview
+This guide explains how to delete **Syncfusion Code Studio cache folders** when you encounter application corruption issues.
+
+
+
+## When to Use
+Use this cleanup process if:
+
+- **Syncfusion Code Studio** is crashing, freezing, or behaving unexpectedly.
+- You suspect **corrupted configuration or cache files** are affecting performance.
+- You need to **reset the app environment without reinstalling the entire IDE**.
+
## Steps to Delete the Cache Folders
-### step 1: Delete the config.yaml file
+### Step 1: Delete the config.yaml file
### WINDOWS
Delete the config.yaml file in this location "C:\Users\YourName\ .sfcodestudio\ .codestudio\config.yaml"
@@ -25,15 +35,21 @@ Delete the config.yaml file in this location "Users\syncfusion\ .sfcodestudio\ .
-### step 2: Delete the Syncfusion Code Studio folders
+### 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"
+Delete the Syncfusion Code Studio folder in this locations "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"
+Delete the Syncfusion Code Studio folder in this locations "Users\syncfusion\Library\Application Support\Syncfusion Code Studio".
-
\ No newline at end of file
+
+
+## Validation
+- Relaunch **Syncfusion Code Studio** and confirm it starts with **default settings**.
+- Check that previous corruption symptoms (e.g., crashes, UI glitches) are resolved.
+- Verify that **new configuration files** are generated after relaunch.
+
diff --git a/code-studio/troubleshoot/openai-integration.md b/code-studio/troubleshoot/openai-integration.md
index 0bf54f9..bd858f0 100644
--- a/code-studio/troubleshoot/openai-integration.md
+++ b/code-studio/troubleshoot/openai-integration.md
@@ -10,21 +10,21 @@ keywords: O3, Openrouter, troubleshoot, code-studio, syncfusion
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.
----
+
## What You Need to Know
- 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.
----
+
## Prerequisites
- 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.
----
+
## Step-by-Step Setup
@@ -38,7 +38,7 @@ This guide will help you easily set up and use the OpenAI o3 model through OpenR
- 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.**
----
+
### 2. Configure OpenRouter with Your OpenAI API Key
@@ -67,7 +67,7 @@ This guide will help you easily set up and use the OpenAI o3 model through OpenR
- Click **Save** to link your key to OpenRouter. The platform will verify your key and set it up for o3 model requests.
----
+
## Monitor Your Usage
@@ -75,7 +75,7 @@ This guide will help you easily set up and use the OpenAI o3 model through OpenR
- **Track Costs:** OpenRouter’s dashboard shows your token usage and costs based on your OpenAI API key activity.
----
+
## Best Practices
@@ -85,7 +85,7 @@ This guide will help you easily set up and use the OpenAI o3 model through OpenR
- **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.
----
+
## Additional Resources
@@ -93,3 +93,29 @@ This guide will help you easily set up and use the OpenAI o3 model through OpenR
- [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
+
+## Validation
+
+- **Send a test request using the o3 model via OpenRouter.**
+- Confirm that the response is successful and no **403 error** appears.
+- If successful, your **API key and tier** are correctly configured.
+- If the error persists, double-check your **API tier and key validity**.
+
+
+
+## Troubleshooting
+
+- **403 Forbidden Error:**
+ - Likely due to an **invalid or insufficient-tier API key**.
+ - Confirm your **OpenAI account is Tier 3 or higher**.
+
+- **Key Not Working:**
+ - Ensure the key is **active**, not expired, and correctly pasted.
+ - Avoid using **test or free-tier keys** for the o3 model.
+
+- **Usage Limits Reached:**
+ - Check your **OpenRouter request quota**. Upgrade if needed.
+
+- **Security Tip:**
+ - Never expose your **API keys** in public.
+ - OpenRouter supports **GitHub secret scanning** to detect leaks.
\ No newline at end of file
diff --git a/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md b/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md
index 1243408..1a5888b 100644
--- a/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md
+++ b/code-studio/troubleshoot/resolve-failed-to-parse-assistant.md
@@ -48,3 +48,20 @@ name: Local Assistant
1. Close Syncfusion Code Studio.
2. Reopen it and verify the error is resolved.
+### Validation
+
+- **Confirm that Syncfusion Code Studio launches without showing the config error.**
+- Ensure the `config.yaml` file has **valid syntax and consistent indentation**, as YAML is indentation-sensitive.
+
+
+
+### Troubleshooting
+
+- **Still seeing the error?**
+ - Double-check that the `name` field is added correctly.
+ - Ensure there are no syntax issues in the YAML file.
+
+- **Config file won’t open?**
+ - Try accessing it directly from the file system:
+ - **Windows:** `C:\Users\YourName\.sfcodestudio\.codestudio\config.yaml`
+ - **macOS:** `Users\syncfusion\.sfcodestudio\.codestudio\config.yaml`
diff --git a/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md b/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md
index daf1dee..7bc1278 100644
--- a/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md
+++ b/code-studio/troubleshoot/resolve-mcp-server-eaccess-issue.md
@@ -56,4 +56,24 @@ 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
+3. Navigate to the Marketplace tab and attempt to install the MCP server again to verify that the issue is resolved.
+
+### Validation
+
+- **Confirm that the MCP server installs successfully without triggering the EACCESS error.**
+- Check that the **Marketplace tab** loads and functions as expected.
+- Verify that no **permission-related errors** appear in the terminal or logs.
+
+
+
+### Troubleshooting
+
+- **Still seeing EACCESS error?**
+ - Double-check that you ran both commands correctly.
+ - Ensure you used `sudo` and entered the correct password.
+
+- **Directory not found?**
+ - Make sure **Syncfusion Code Studio** is installed and has launched at least once.
+
+- **Permission denied when running commands?**
+ - Confirm you have **admin rights** on your macOS account.
\ No newline at end of file