{"id":30851677,"url":"https://github.com/zipcodecore/windsurf-demo","last_synced_at":"2025-10-10T14:08:26.859Z","repository":{"id":292316019,"uuid":"980501193","full_name":"ZipCodeCore/windsurf-demo","owner":"ZipCodeCore","description":"Demonstrate the Windsurf AI Editor","archived":false,"fork":false,"pushed_at":"2025-05-09T08:53:14.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-09T09:33:57.831Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZipCodeCore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-09T08:28:41.000Z","updated_at":"2025-05-09T08:53:17.000Z","dependencies_parsed_at":"2025-05-09T18:01:32.608Z","dependency_job_id":null,"html_url":"https://github.com/ZipCodeCore/windsurf-demo","commit_stats":null,"previous_names":["zipcodecore/windsurf-demo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ZipCodeCore/windsurf-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZipCodeCore%2Fwindsurf-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZipCodeCore%2Fwindsurf-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZipCodeCore%2Fwindsurf-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZipCodeCore%2Fwindsurf-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZipCodeCore","download_url":"https://codeload.github.com/ZipCodeCore/windsurf-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZipCodeCore%2Fwindsurf-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274010099,"owners_count":25206763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-07T07:42:14.182Z","updated_at":"2025-10-10T14:08:21.808Z","avatar_url":"https://github.com/ZipCodeCore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Windsurf Editor Demo: AI-Powered Development\n\n## What is Windsurf?\n\nWindsurf is an advanced AI-powered code editor built on the foundation of VS Code that combines the functionality of a copilot and an agent. Formerly known as Codeium, Windsurf offers a cleaner UI, faster performance, and innovative features designed to keep developers in flow.\n\n## Key Features\n\n### 1. Cascade Flow System\n\nAt the heart of Windsurf lies the Cascade Flow system - an AI-driven development environment that creates a seamless coding experience:\n\n- **Knowledge Cascade**: Understands your codebase semantically and adapts as you code\n- **Tools Cascade**: Provides AI-driven tools for searching, editing, and executing code efficiently\n- **Real-time awareness**: Automatically reasons about your explicit actions in the editor\n\n### 2. Write Mode\n\nWindsurf features an innovative \"Write Mode\" where you can:\n- Write and generate files directly from your prompts\n- Turn it off to use chat as you would in a traditional assistant\n\n### 3. Multi-File Editing\n\nUnlike traditional code editors:\n- Make changes across multiple files simultaneously\n- Deep contextual awareness for production codebases\n- Create self-consistent changes across files\n\n### 4. Terminal Integration\n\n- Terminal command suggestions\n- Debug and execute code within the editor\n- If code execution fails, Windsurf can iterate and fix issues\n\n### 5. AI Models Integration\n\nAccess to various AI models:\n- Claude 3.5 (recommended for most code generation tasks)\n- Deepseek R1\n- Gemini 2.0 Flash\n\n## Practical Examples\n\n### Example 1: Building a Web App from Scratch\n\n```\nPrompt: \"Create a simple React to-do list app with local storage\"\n```\n\nWindsurf will:\n1. Create necessary file structure\n2. Generate component files:\n   - `App.js` - Main component\n   - `TodoList.js` - List component\n   - `TodoItem.js` - Individual item component\n   - `TodoForm.js` - Form for adding new items\n3. Implement local storage functionality\n4. Set up state management\n5. Add basic CSS styling\n\nYou'll see a diff preview of all files before accepting the changes.\n\n### Example 2: Refactoring Existing Code\n\n```\nPrompt: \"Refactor this function to use async/await instead of promises\"\n```\n\nFor a function like:\n\n```javascript\nfunction fetchUserData(userId) {\n  return fetch(`/api/users/${userId}`)\n    .then(response =\u003e {\n      if (!response.ok) {\n        throw new Error('User not found');\n      }\n      return response.json();\n    })\n    .then(data =\u003e {\n      return {\n        name: data.name,\n        email: data.email,\n        role: data.role\n      };\n    })\n    .catch(error =\u003e {\n      console.error('Error fetching user:', error);\n      return null;\n    });\n}\n```\n\nWindsurf will intelligently refactor to:\n\n```javascript\nasync function fetchUserData(userId) {\n  try {\n    const response = await fetch(`/api/users/${userId}`);\n    if (!response.ok) {\n      throw new Error('User not found');\n    }\n    const data = await response.json();\n    return {\n      name: data.name,\n      email: data.email,\n      role: data.role\n    };\n  } catch (error) {\n    console.error('Error fetching user:', error);\n    return null;\n  }\n}\n```\n\n### Example 3: Debugging Code\n\nWhen you have an error in your terminal:\n\n```\nTypeError: Cannot read property 'filter' of undefined\n    at filterActiveUsers (./src/utils/userUtils.js:15:27)\n    at renderUserList (./src/components/UserList.js:42:34)\n```\n\n1. Click on the terminal\n2. Press Ctrl + I for inline chat\n3. Type: \"Help me fix this error\"\n\nWindsurf will:\n- Analyze the error stack trace\n- Locate the relevant code files\n- Identify the issue (likely `users` array is undefined)\n- Suggest a fix with proper null checking:\n\n```javascript\n// Original code in userUtils.js\nfunction filterActiveUsers(users) {\n  return users.filter(user =\u003e user.isActive);\n}\n\n// Windsurf's suggested fix\nfunction filterActiveUsers(users) {\n  return users ? users.filter(user =\u003e user.isActive) : [];\n}\n```\n\n### Example 4: Working with Test Files\n\n```\nPrompt: \"Write tests for this authentication service\"\n```\n\nGiven an `authService.js` file:\n\n```javascript\nexport const authService = {\n  login: async (username, password) =\u003e {\n    // Implementation\n  },\n  logout: () =\u003e {\n    // Implementation\n  },\n  resetPassword: async (email) =\u003e {\n    // Implementation\n  }\n};\n```\n\nWindsurf will generate a comprehensive test file:\n\n```javascript\nimport { authService } from './authService';\n\njest.mock('./apiClient', () =\u003e ({\n  post: jest.fn(),\n  delete: jest.fn()\n}));\n\ndescribe('Auth Service', () =\u003e {\n  beforeEach(() =\u003e {\n    jest.clearAllMocks();\n    localStorage.clear();\n  });\n  \n  describe('login', () =\u003e {\n    it('should store token on successful login', async () =\u003e {\n      // Test implementation\n    });\n    \n    it('should throw error on invalid credentials', async () =\u003e {\n      // Test implementation\n    });\n  });\n  \n  // Tests for logout and resetPassword\n});\n```\n\n### Example 5: Adding Features to Existing Projects\n\n```\nPrompt: \"Add input validation to this form\"\n```\n\nFor a basic form component:\n\n```javascript\nfunction ContactForm() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [message, setMessage] = useState('');\n  \n  const handleSubmit = (e) =\u003e {\n    e.preventDefault();\n    // Submit logic\n  };\n  \n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cinput \n        type=\"text\" \n        value={name} \n        onChange={(e) =\u003e setName(e.target.value)} \n        placeholder=\"Name\" \n      /\u003e\n      \u003cinput \n        type=\"email\" \n        value={email} \n        onChange={(e) =\u003e setEmail(e.target.value)} \n        placeholder=\"Email\" \n      /\u003e\n      \u003ctextarea \n        value={message} \n        onChange={(e) =\u003e setMessage(e.target.value)} \n        placeholder=\"Message\" \n      /\u003e\n      \u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\nWindsurf will add validation:\n\n```javascript\nfunction ContactForm() {\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [message, setMessage] = useState('');\n  const [errors, setErrors] = useState({});\n  \n  const validate = () =\u003e {\n    const newErrors = {};\n    \n    if (!name.trim()) newErrors.name = 'Name is required';\n    \n    if (!email.trim()) {\n      newErrors.email = 'Email is required';\n    } else if (!/\\S+@\\S+\\.\\S+/.test(email)) {\n      newErrors.email = 'Email is invalid';\n    }\n    \n    if (!message.trim()) newErrors.message = 'Message is required';\n    \n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  };\n  \n  const handleSubmit = (e) =\u003e {\n    e.preventDefault();\n    if (validate()) {\n      // Submit logic\n    }\n  };\n  \n  return (\n    \u003cform onSubmit={handleSubmit}\u003e\n      \u003cdiv\u003e\n        \u003cinput \n          type=\"text\" \n          value={name} \n          onChange={(e) =\u003e setName(e.target.value)} \n          placeholder=\"Name\" \n          className={errors.name ? 'error' : ''}\n        /\u003e\n        {errors.name \u0026\u0026 \u003cspan className=\"error-message\"\u003e{errors.name}\u003c/span\u003e}\n      \u003c/div\u003e\n      \n      \u003cdiv\u003e\n        \u003cinput \n          type=\"email\" \n          value={email} \n          onChange={(e) =\u003e setEmail(e.target.value)} \n          placeholder=\"Email\" \n          className={errors.email ? 'error' : ''}\n        /\u003e\n        {errors.email \u0026\u0026 \u003cspan className=\"error-message\"\u003e{errors.email}\u003c/span\u003e}\n      \u003c/div\u003e\n      \n      \u003cdiv\u003e\n        \u003ctextarea \n          value={message} \n          onChange={(e) =\u003e setMessage(e.target.value)} \n          placeholder=\"Message\" \n          className={errors.message ? 'error' : ''}\n        /\u003e\n        {errors.message \u0026\u0026 \u003cspan className=\"error-message\"\u003e{errors.message}\u003c/span\u003e}\n      \u003c/div\u003e\n      \n      \u003cbutton type=\"submit\"\u003eSend\u003c/button\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n## Using Windsurf\n\n### Basic Workflow\n\n1. **Start Cascade**: Press Command + L to open Cascade\n2. **Use Natural Language**: Type your request, like \"Create a login form with validation\"\n3. **Review Changes**: Windsurf shows diffs of proposed changes\n4. **Accept Changes**: Apply all or select specific changes to implement\n\n### Advanced Features\n\n- **Inline Edits**: Click on specific code and press Ctrl + I to access inline edits\n- **Terminal Integration**: Click on terminal window and press Ctrl + I for inline chat\n- **Memories**: Cascade creates automatic memories to optimize responses\n- **Automatic Bug Fixing**: If Cascade generates code that doesn't pass a linter, it will automatically fix errors\n\n## Platform Availability\n\nWindsurf Editor is available for:\n- macOS\n- Windows\n- Linux\n\n## Getting Started\n\n1. Download from the official website (https://windsurf.com or https://codeium.com/windsurf)\n2. Install on your system\n3. Open a project folder to begin\n4. Press Command + L to start using Cascade\n\n### Customizing Windsurf\n\nWindsurf provides several customization options to enhance your workflow:\n\n#### 1. Configure AI Model Preferences\n\n1. Go to Settings (⚙️)\n2. Select \"AI Settings\"\n3. Choose your preferred AI model:\n   - Claude 3.5 (best for complex reasoning)\n   - Gemini 2.0 Flash (faster response time)\n   - Deepseek R1 (good for specific coding tasks)\n\n#### 2. Create Custom Commands\n\nYou can set up custom commands for frequent operations:\n\n1. Open Settings\n2. Navigate to \"Command Templates\"\n3. Add a new template with:\n   - Name (e.g., \"Generate API Documentation\")\n   - Template text (e.g., \"Generate documentation for the following API endpoint: {selection}\")\n   - Shortcut key (optional)\n\n#### 3. Create Memories for Project-Specific Guidelines\n\nFor consistent code generation across your team:\n\n1. Open Cascade\n2. Type: \"Create a new memory with the following rules\"\n3. Define your project-specific guidelines\n4. Name your memory for easy reference\n\n## Pro Tips\n\n- Use Claude 3.5 for more complex code generation tasks\n- For specific code edits, use inline editing instead of full file generation\n- Remember that Windsurf is powerful but not perfect - always review generated code\n- Use the terminal integration for debugging and running commands\n\n## Comparison with Other AI Code Editors\n\n### Windsurf vs. Cursor\n\nWhile both are AI-powered editors built on VS Code, Windsurf offers:\n- Generally cleaner UI with more refined details\n- Often faster performance, especially on Linux\n- Different pricing model ($15/seat vs. Cursor's $20/seat)\n- Original \"Cascade\" feature that inspired Cursor's agent mode\n\n### Unique Advantages\n\n- **Developer Flow**: Windsurf emphasizes maintaining developer flow - making changes seamlessly without interrupting your workflow\n- **Cleaner Interface**: Focuses on simplicity with fewer UI elements and options\n- **Performance**: Engineered to be lean and fast with a smaller memory footprint than standard VS Code\n- **VS Code Extensions**: Full access to the VS Code extension marketplace\n\n## Real-World Development Scenarios\n\n### Onboarding to a New Codebase\n\nWhen joining a new project:\n\n1. Open the codebase in Windsurf\n2. Use Cascade: \"Explain the architecture of this project\"\n3. Ask: \"What are the main components and how do they interact?\"\n4. Request: \"Show me where the API endpoints are defined\"\n\n### Automating Repetitive Tasks\n\nFor tasks like updating copyright headers:\n\n1. Open Cascade\n2. Type: \"Update all copyright headers in this project to include 2025\"\n3. Review the proposed changes across all files\n4. Accept all changes with one click\n\n---\n\n*Note: This demo showcases the main features of Windsurf Editor. Actual functionality may vary based on the version you're using.*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzipcodecore%2Fwindsurf-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzipcodecore%2Fwindsurf-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzipcodecore%2Fwindsurf-demo/lists"}