diff --git a/code-studio-toc.html b/code-studio-toc.html index b9230d6..f6537a7 100644 --- a/code-studio-toc.html +++ b/code-studio-toc.html @@ -3,6 +3,7 @@
  • Getting Started diff --git a/code-studio/features/feature-images/ask2.png b/code-studio/features/feature-images/ask2.png index 216a728..b57b5c2 100644 Binary files a/code-studio/features/feature-images/ask2.png and b/code-studio/features/feature-images/ask2.png differ diff --git a/code-studio/features/feature-images/auto-configure3.png b/code-studio/features/feature-images/auto-configure3.png index 0e48214..10f5433 100644 Binary files a/code-studio/features/feature-images/auto-configure3.png and b/code-studio/features/feature-images/auto-configure3.png differ diff --git a/code-studio/features/feature-images/auto-configure4.png b/code-studio/features/feature-images/auto-configure4.png index 20bd122..b80c315 100644 Binary files a/code-studio/features/feature-images/auto-configure4.png and b/code-studio/features/feature-images/auto-configure4.png differ diff --git a/code-studio/features/feature-images/auto-configure5.png b/code-studio/features/feature-images/auto-configure5.png index 947f7a4..8664a60 100644 Binary files a/code-studio/features/feature-images/auto-configure5.png and b/code-studio/features/feature-images/auto-configure5.png differ diff --git a/code-studio/getting-started/gettingstarted-images/voiceapp-apply.gif b/code-studio/getting-started/gettingstarted-images/voiceapp-apply.gif new file mode 100644 index 0000000..e154a23 Binary files /dev/null and b/code-studio/getting-started/gettingstarted-images/voiceapp-apply.gif differ diff --git a/code-studio/getting-started/gettingstarted-images/voiceapp-archive.gif b/code-studio/getting-started/gettingstarted-images/voiceapp-archive.gif new file mode 100644 index 0000000..2756a02 Binary files /dev/null and b/code-studio/getting-started/gettingstarted-images/voiceapp-archive.gif differ diff --git a/code-studio/getting-started/gettingstarted-images/voiceapp-final.png b/code-studio/getting-started/gettingstarted-images/voiceapp-final.png new file mode 100644 index 0000000..aa5c935 Binary files /dev/null and b/code-studio/getting-started/gettingstarted-images/voiceapp-final.png differ diff --git a/code-studio/getting-started/gettingstarted-images/voiceapp.gif b/code-studio/getting-started/gettingstarted-images/voiceapp.gif new file mode 100644 index 0000000..0895cb3 Binary files /dev/null and b/code-studio/getting-started/gettingstarted-images/voiceapp.gif differ diff --git a/code-studio/getting-started/gettingstarted-images/voiceapp1.png b/code-studio/getting-started/gettingstarted-images/voiceapp1.png new file mode 100644 index 0000000..a2af494 Binary files /dev/null and b/code-studio/getting-started/gettingstarted-images/voiceapp1.png differ diff --git a/code-studio/getting-started/quickstarts/build-voice-notes-app-with-spec-driven-development.md b/code-studio/getting-started/quickstarts/build-voice-notes-app-with-spec-driven-development.md new file mode 100644 index 0000000..1c54bc2 --- /dev/null +++ b/code-studio/getting-started/quickstarts/build-voice-notes-app-with-spec-driven-development.md @@ -0,0 +1,218 @@ +--- +title: Build Your First App Using Spec-Driven Development +description: "Learn how to build a Voice Notes web app using Spec-Driven Development (SDD) approach with Syncfusion Code Studio" +classification: "User Guide - Tutorial" +platform: syncfusion-code-studio +keywords: spec-driven-development, ai-development, voice-notes-app, openspec, code-generation, agent-mode +--- + +# Build Your First App Using Spec-Driven Development + +## Overview + +Building applications with AI can be unpredictable when instructions are unclear. **Spec-Driven Development (SDD)** solves this by defining exactly what you want to build before you start coding. This approach reduces guesswork and ensures your AI agent generates code that matches your vision. + +In this beginner-friendly guide, you'll learn how to build a **Voice Notes web app** from scratch using the SDD approach in Code Studio. You'll go from idea to a working application by following a structured methodology that combines clear specifications, detailed planning, and AI-assisted code generation. + +## Prerequisites + +Before getting started, make sure that: + +1. **Syncfusion Code Studio is installed** + If it’s not installed, refer to the [installation guide](/code-studio/getting-started/install-and-configuration) to set it up properly. + +2. Node.js >= 20.19.0 is installed. + +## What You'll Learn + +By the end of this tutorial, you'll know how to: +- Understand what Spec-Driven Development (SDD) is and why it matters for AI-powered development +- Understand what OpenSpec is and how it helps you build software predictably +- Set up your development environment and install OpenSpec +- Create a detailed project plan using the `/opsx:propose` command +- Review the generated proposal, design, specifications, and tasks +- Implement your plan using the `/opsx:apply` command to generate code +- Test and run your completed Voice Notes web application +- Finalize and organize your project using the `/opsx:archive` command + +## Understanding SDD and OpenSpec + +### What is Spec-Driven Development (SDD)? + +Spec-Driven Development (SDD) is a methodology that emphasizes creating clear, structured specifications before writing any code. Instead of jumping straight into coding and hoping everything works out, you first write down exactly what you want to build, how it should behave, and what it should do. + +**Why it matters:** +- **Reduces confusion** — Everyone (including AI) knows exactly what to build +- **Improves collaboration** — Your specifications become the shared source of truth +- **Better quality** — Clear requirements lead to fewer mistakes and less rework + +Unlike traditional approaches where code often becomes the de-facto specification, SDD treats specifications as living documents. You write your requirements in plain English (using Markdown files), and then AI agents generate the implementation based on those specifications. + +### What is OpenSpec? + +OpenSpec is a structured workflow tool that helps you organize AI-powered development in a predictable way. Think of it as a project manager for working with AI to build software. Instead of letting AI make random changes, OpenSpec keeps everything organized and transparent. + + +For more information about open spec, visit our [Using OpenSpec in Code Studio](/code-studio/tutorials/using-openspec-inside-syncfusion-code) guide. + +## Build Your First App in Code Studio + +### Step 1: Set Up Your Environment + +Before building your Voice Notes app, ensure your Code Studio environment is ready: + + +1. **Create a new workspace**: + - Create a new folder named `voice-notes-app` on your machine + - Open Code Studio on your machine + - Select the new folder as your workspace in code studio by clicking **File** -> **Open Folder** + +### Step 2: Install OpenSpec + + +1. **Open the Terminal** in Code Studio (`Terminal` → `New Terminal`) +2. **Install OpenSpec** by running this command: + ``` + npm install -g @fission-ai/openspec@latest + ``` +3. **Initialize the spec structure** in your project folder: + ``` + openspec init + ``` + This creates a folder structure to organize your proposal, specification, and design documents. + + voice app + +> **Tip**: If you have UI designs or wireframes for your Voice Notes app, add them to your project folder now. You can reference them later when defining specifications. + +### Step 3: Create Your Change Plan (Propose) + +**What happens in this step:** +You tell Code Studio's AI what you want to build by describing your Voice Notes app in detail. The AI reads your description and creates a complete project plan for you. This plan includes: +- A **proposal** explaining what you're building and why +- A **design** describing how it will work +- **Specifications** for each part of the app +- **Tasks** — a checklist of all the work needed + +All of these are saved as markdown files you can read and edit. + +**How to do it:** +Type the `/opsx:propose` command in the Code Studio Chat Panel. This command tells Code Studio to start the planning process. Follow it with a detailed description of what you want to build. + +Example prompt: + +``` +/opsx-propose + +Build a Voice Notes Web App with: + +Features: +- Record voice → auto-transcribe to text (Web Speech API) +- Search notes by keywords, pin/edit/delete notes +- Optional AI enhancement (GPT-4.1 via OpenRouter) +- Settings: theme (Light/Dark/System), font size + +Pages: Auth (signup/signin), Onboarding (4-slide carousel), Dashboard (search + note grid), Voice Recorder, Note Editor, Settings + +Tech Stack: +- React 18 + TypeScript, Vite +- Syncfusion React Components +- SQLite (sql.js) + IndexedDB persistence +- Web Speech API (Chrome/Edge preferred) + +Key Requirements: +- Client-side only, no backend/server +- Local-first storage in browser +- Auto-save after 2s inactivity +- Responsive: mobile-first (768px tablet, 1024px desktop) +- CRITICAL: Voice audio NOT stored, only transcribed text + +Out of Scope v1: +- Cloud sync/backup, audio editing, multiple languages +- Export/import, sharing, advanced AI features +``` + +The AI will generate several markdown files in your `openspec/changes/` directory. Open the change folder to review the generated files: + +**Understanding What Was Generated:** + +The files you see represent OpenSpec's structured approach to planning changes: + +- **Proposal** — A summary document describing what you want to build +- **Design** — Technical details about how it will be built +- **Tasks** — Step-by-step checklist of work to complete +- **Specs** — Detailed specifications for each file or component +- **Change folder** — The directory containing all these files for this specific change + +Review these files carefully before proceeding to the next step. You can modify the markdown files directly if needed. + + voice app + +### Step 4: Implement the Plan (Apply) + +**What happens in this step:** +Now that your plan is ready, you tell the AI to start building. The AI reads all the specifications and tasks you approved in Step 3, then writes the actual code for your Voice Notes app. It works through the tasks one by one, creating files and writing code that matches your specifications exactly. + +This is where your detailed plan from Step 3 becomes actual working code. + +**How to do it:** +Type the `/opsx:apply` command in the Code Studio Chat Panel. This command tells the AI: "Start building based on my plan." The AI will then begin creating your application. + +For example: + +``` +/opsx-apply +``` + +The AI will begin executing tasks one by one. You'll see progress updates in the chat as each task completes. + + voice app + +### Step 5: Run Your Application + +Launching your completed app and verify it works end-to-end: + +1. **Start the development server**: + ``` + npm run dev + ``` + +2. **Open your app** in a web browser (usually `http://localhost:3000`) + +3. **Perform a full user walkthrough**: + - Record and transcribe + - Save and retrieve notes + - Verify all features work smoothly + +4. **Celebrate!** You've successfully built an app using Spec-Driven Development. + + voice app + +### Step 6: Finalize and Organize (Archive) + +**What happens in this step:** +After building and testing your Voice Notes app, it's time to clean up and organize your project. The `/opsx:archive` command moves all your specifications to a main specs folder and archives your working files, keeping everything neat and organized. This is like filing away completed project documents so they don't clutter your workspace. + +Archiving makes it easy to find your specifications later and prepares your project folder for the next feature you want to build. + +**How to do it:** +Type the `/opsx-archive` command in the Code Studio Chat Panel. This command tells Code Studio: "Organize and finalize my work." + +For example: + +``` +/opsx:archive +``` + +Check your project structure to verify the archiving worked correctly: + +What you should see: + +- Spec files moved to `openspec/specs/` (main specs folder) +- Change folder archived to `openspec/changes/archive/` +- Your project is now cleanly organized and ready for the next feature! + + voice app + + +Congratulations! You've successfully built a Voice Notes web app using Spec-Driven Development approach. By following this workflow — planning with detailed specifications, implementing with AI assistance, and organizing your work — you've experienced how SDD makes AI-powered development predictable and maintainable. You can now use this same methodology to build other applications with confidence, knowing that clear specifications lead to better code and fewer surprises. diff --git a/code-studio/how-to-guides/howtoguide-images/showchat1.png b/code-studio/how-to-guides/howtoguide-images/showchat1.png index 1fb11a9..e0bbb59 100644 Binary files a/code-studio/how-to-guides/howtoguide-images/showchat1.png and b/code-studio/how-to-guides/howtoguide-images/showchat1.png differ diff --git a/code-studio/reference/configure-properties/agent-plugin.md b/code-studio/reference/configure-properties/agent-plugin.md new file mode 100644 index 0000000..95adcad --- /dev/null +++ b/code-studio/reference/configure-properties/agent-plugin.md @@ -0,0 +1,232 @@ +--- +title: Agent Plugins in Syncfusion Code Studio +description: Agent Plugins are prepackaged bundles of customizations that you can discover, install, and manage from plugin marketplaces. They provide slash commands, skills, custom agents, hooks, and MCP servers to extend Code Studio functionality across your team. +platform: syncfusion-code-studio +keywords: agent-plugins, customization, slash-commands, skills, custom-agents, hooks, MCP-servers, plugin-marketplace, code-studio, AI-automation, team-collaboration +--- + + + + +# Agent Plugins + +## Purpose +Agent plugins are bundles of customizations you can install from plugin marketplaces. They extend Code Studio with combinations of slash commands, skills, agents, hooks, and MCP servers, while working alongside your existing customizations. + +**Key Benefits:** +- **Simplify Configuration** — Install complete workflows in one action +- **Standardize Practices** — Enforce consistent coding standards across your team +- **Share Knowledge** — Distribute expertise and best practices organization-wide + +## What Plugins Provide + +Agent plugins can include the following components: + +**Slash Commands** +Chat commands prefixed with `/` for specific tasks (like `/test-report` or `/deploy`) + +**Skills** +Instructions, scripts, and resources that load on-demand for specific tasks + +**Custom Agents** +Specialized AI personas with preconfigured tools for domain-specific tasks + +**Hooks** +Automation scripts that execute at specific lifecycle points like `SessionStart` or `PostToolUse` + +**MCP Servers** +External tool integrations providing additional capabilities to your agents + + + +## When to Use Agent Plugins + + +- **Team Standardization** — Ensure consistent tooling across projects. + Uses workspace settings to recommend the same plugins for all team members. + +- **Quality Enforcement** — Automate validation, formatting, and testing. + Hooks can run these checks at key points in your workflow to maintain standards. + +- **Knowledge Sharing** — Make domain expertise available to everyone. + Packaged skills and agents democratize specialized knowledge across teams. + +- **Onboarding** — Give new team members immediate access to required tools. + New hires can install recommended plugins and be productive from day one. + + +## Prerequisites + +Before you begin working with agent plugins, ensure the following requirements are met: + +- **Syncfusion Code Studio**: You must have Code Studio installed and configured on your system. For installation instructions, refer to the [Install and Configure Code Studio](https://help.syncfusion.com/code-studio/install-and-configure) guide. + +- **Write Access**: You must have write permissions to either your personal profile folder or the project repository where you plan to install plugins. + +## Enabling Agent Plugins + +### Step 1: Discover Available Plugins + +Follow these steps to find available agent plugins: + +1. Open the Extensions view by pressing `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS). + +2. Enter `@agentPlugins` in the search field. + + agent_plugin + + +3. **Alternative method**: Select the **settings** icon in the Extensions sidebar and choose **Plugins**. + + + + agent_plugin + +4. Browse the available plugins from your configured marketplaces. + +5. Review each plugin's description, author information, and version number before installation. + +### Step 2: Install a Plugin + +#### Option 1: Install from Marketplace + +To install a plugin from a marketplace: + +1. Click the **Install** button to add it to your user profile. + +2. Code Studio automatically downloads and registers the plugin. + + agent_plugin + +#### Option 2: Install from a Git Repository + +To install a plugin that is not available in a marketplace: + +1. Open the Command Palette by pressing `Ctrl+Shift+P` (Windows/Linux) or `Cmd+Shift+P` (macOS). + +2. Run the command **Chat: Install Plugin From Source**. + + agent_plugin + +3. Enter the Git repository UL (for example, `https://github.com/yourorg/custom-plugin`). + + agent_plugin + +4. Code Studio automatically clones the repository and installs the plugin. + + + +### Step 3: Manage Installed Plugins + +To manage your installed plugins: + +1. Navigate to **Agent Plugins - Installed** in the Extensions sidebar. + +2. From this view, you can perform the following actions: + +   - View all installed plugins and their metadata. + +   - Enable or disable plugins globally or per-workspace. + +   - Uninstall plugins that you no longer need. + +   - Check for available updates. + + agent_plugin + +### Step 4: Update Plugins + +Code Studio provides two methods to check for plugin updates: + +- **Automatic Updates**: Code Studio checks for updates automatically every 24 hours if the `extensions.autoUpdate` setting is enabled. + +- **On-Demand Updates**: Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on macOS) and run **Extensions: Check for Extension Updates**. + + + +### Managing Plugin State + +To enable or disable a plugin: + +1. Open the Extensions view by pressing `Ctrl+Shift+X`. + +2. Navigate to **Agent Plugins - Installed**. + +3. Right-click the plugin you want to manage and select **Enable** or **Disable**. + + + agent_plugin + +**Effects of Disabling a Plugin** + +When you disable a plugin, the following components become inactive: + +- Plugin skills, agents, and slash commands are hidden from view. + +- Plugin hooks do not execute. + +- Plugin MCP servers are stopped. + + + +**Note**: Disabling a plugin does not uninstall it. You can re-enable it at any time. + +## Understanding How Plugins Become Available + +Once you install a plugin, Code Studio processes the plugin's configuration and makes its components available for use. Here is what happens behind the scenes: + +### Plugin Processing + +A typical plugin contains the following components: `plugin.json` (manifest), `agents/` (custom agents), `skills/` (reusable skills), `hooks/` (lifecycle automation), and `.mcp.json` . + +When you install a plugin, Code Studio performs the following steps: + +1. **Configuration Reading**: Code Studio reads the plugin's `plugin.json` file to understand the plugin's structure and components. + +2. **Component Registration**: The plugin's AI components (agents, skills, and slash commands) are registered and made available for use in your chats. + +3. **Hook Setup**: Any automation scripts (hooks) are configured to execute at specific moments during your AI interactions. + +### Where New Plugin Features Appear + +After installation, you will notice the new plugin capabilities in the following locations: + +- **Skills**: New skills appear in the "Configure Skills" menu when you click it in the chat interface. + +- **Custom Agents**: Plugin agents become available when you switch between different AI agents. + +- **Slash Commands**: New slash commands (for example, `/analyze` or `/format`) work immediately when you type them in chat. + + agent_plugin + + + +### Essential Best Practices + +### 1. Review Before Installing +- Check publisher reputation and credentials +- Read documentation to understand capabilities and required access +- Test in a separate workspace before using in production +- Ask: What will it do? What access does it need? Is the source trusted? + +### 2. Stay Updated +- Enable `extensions.autoUpdate` for automatic security patches +- Or manually check for updates via the Command Palette +- Test plugins briefly after updates to ensure compatibility + +### 3. Monitor Security +- Understand what each hook does and when it runs +- Review scripts to verify they match documented behavior +- Disable unnecessary hooks to minimize security exposure +- Use permission levels appropriately (allow/ask/deny) + +## Related Features + +For more information on features that work with agent plugins, refer to the following: + +- **[Agent Skills](https://help.syncfusion.com/code-studio/reference/configure-properties/skills)**: Learn how to create reusable, specialized tasks for agents. + +- **[Custom Agents](https://help.syncfusion.com/code-studio/reference/configure-properties/custom-agents)**: Understand how to build domain-specific AI personas. + +- **[MCP Servers](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace)**: Discover how to integrate mcp tools and data sources. + \ No newline at end of file diff --git a/code-studio/reference/reference-images/agentplugin1.png b/code-studio/reference/reference-images/agentplugin1.png new file mode 100644 index 0000000..7038f91 Binary files /dev/null and b/code-studio/reference/reference-images/agentplugin1.png differ diff --git a/code-studio/reference/reference-images/agentplugin2.png b/code-studio/reference/reference-images/agentplugin2.png new file mode 100644 index 0000000..3972512 Binary files /dev/null and b/code-studio/reference/reference-images/agentplugin2.png differ diff --git a/code-studio/reference/reference-images/agentplugin4.png b/code-studio/reference/reference-images/agentplugin4.png new file mode 100644 index 0000000..c9680bc Binary files /dev/null and b/code-studio/reference/reference-images/agentplugin4.png differ diff --git a/code-studio/reference/reference-images/agentplugin5.png b/code-studio/reference/reference-images/agentplugin5.png new file mode 100644 index 0000000..2e420f7 Binary files /dev/null and b/code-studio/reference/reference-images/agentplugin5.png differ diff --git a/code-studio/reference/reference-images/agentplugin6.png b/code-studio/reference/reference-images/agentplugin6.png new file mode 100644 index 0000000..1db254d Binary files /dev/null and b/code-studio/reference/reference-images/agentplugin6.png differ diff --git a/code-studio/reference/reference-images/agentplugin7.png b/code-studio/reference/reference-images/agentplugin7.png new file mode 100644 index 0000000..b850074 Binary files /dev/null and b/code-studio/reference/reference-images/agentplugin7.png differ diff --git a/code-studio/reference/reference-images/plugin-gif1.gif b/code-studio/reference/reference-images/plugin-gif1.gif new file mode 100644 index 0000000..07b319f Binary files /dev/null and b/code-studio/reference/reference-images/plugin-gif1.gif differ diff --git a/code-studio/reference/reference-images/plugin-gif2.gif b/code-studio/reference/reference-images/plugin-gif2.gif new file mode 100644 index 0000000..97cb4bd Binary files /dev/null and b/code-studio/reference/reference-images/plugin-gif2.gif differ