From b2a8a9f8839f440f4a0fc3d926ef9f121d045006 Mon Sep 17 00:00:00 2001 From: Ado Kukic Date: Tue, 5 Nov 2024 11:20:37 -0800 Subject: [PATCH 1/6] Hackathon --- docs/cody/quickstart.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/cody/quickstart.mdx b/docs/cody/quickstart.mdx index 534982fd4..0590dfb92 100644 --- a/docs/cody/quickstart.mdx +++ b/docs/cody/quickstart.mdx @@ -1,3 +1,4 @@ + # Cody Quickstart

In this quickstart guide, you'll learn how to use Cody once you have installed the extension in your VS Code editor. Here you will perform the following three tasks:

From 635d0b6786c3f10bb91c3c9fd15959dc5e25e1d6 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Tue, 5 Nov 2024 11:49:08 -0800 Subject: [PATCH 2/6] Edit comment format --- docs/cody/quickstart.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/cody/quickstart.mdx b/docs/cody/quickstart.mdx index 0590dfb92..25b54b946 100644 --- a/docs/cody/quickstart.mdx +++ b/docs/cody/quickstart.mdx @@ -1,4 +1,5 @@ - +{/* Hackathon */} + # Cody Quickstart

In this quickstart guide, you'll learn how to use Cody once you have installed the extension in your VS Code editor. Here you will perform the following three tasks:

From f2696f970159722f4f3defc780199a4f08d02103 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Tue, 5 Nov 2024 18:23:50 -0800 Subject: [PATCH 3/6] Add new quickstart docs --- docs/cody/quickstart.mdx | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/docs/cody/quickstart.mdx b/docs/cody/quickstart.mdx index 25b54b946..98a323b10 100644 --- a/docs/cody/quickstart.mdx +++ b/docs/cody/quickstart.mdx @@ -1,30 +1,30 @@ -{/* Hackathon */} - # Cody Quickstart -

In this quickstart guide, you'll learn how to use Cody once you have installed the extension in your VS Code editor. Here you will perform the following three tasks:

+

This quickstart guide shows how to use Cody in the VS Code editor. You'll learn about the following three tasks:

+ +1. Chat with Cody to write code snippets +2. Use Cody to execute inline edits +3. Use Cody to debug code and ask Cody to fix bugs -1. Generate unit tests for your code -2. Identify errors and get suggested code fixes -3. Add documentation to your code snippets +There are [many ways to use Cody](/cody/clients). For this guide, we'll be using the [VS Code](/cody/clients/install-vscode) extension. ## Prerequisites -- Make sure you have the [Cody extension installed](/cody/clients/install-vscode) in your VS Code editor -- You have a Free or Pro account through Sourcegraph.com or a Sourcegraph Enterprise account -- You have a project open in VS Code +Before you start, you'll need the following: + +- [Cody extension installed](/cody/clients/install-vscode) in your VS Code editor +- Free or Pro account via Sourcegraph.com or a Sourcegraph Enterprise account +- A project open in VS Code -## Getting started with the Cody extension, prompts, and commands +## Getting started with the Cody -After installing the extension, the side activity bar will display an icon for **Cody**. Click this icon, and Cody's panel will open. This interface is used to start a **New Chat**, run Cody **commands**, prompts or get access to relevant resources. +After installing the extension and connecting to a Sourcegraph instance, you can leverage Cody to use the best LLM and context to understand, write, and fix code. Click the **Cody** icon from the VS Code side activity bar to open the Cody chat panel. -![Cody icon in side activity bar ](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-sidebar-102024.png) +By default, the chat input will have the context of your entire codebase, and Claude 3.5 Sonnet is selected as the default chat model. Based on your [Cody tier](https://sourcegraph.com/pricing?product=cody), you can change the LLM model and context based on your use case to optimize for speed, accuracy, or cost. -Cody supports **Prompts** and **Commands** with VS Code. These are quick, ready-to-use actions that you can apply to any code or text-based snippet you've highlighted. You can run a command in the following ways: +To help you automate your key tasks in your development workflow you get **[Prompts](/cody/capabilities/commands)**. If you are a part of an organization on Sourcegraph.com or a self-hosted Sourcegraph instance, you can view these pre-built Prompts created by your teammates. On the contrary, you can create your own Prompts via the **Prompt Library** from your Sourcegraph instance. -- Highlight your code and select the command or any prompt from the sidebar -- Press `Option+K` to run an edit command exclusively -- Right-click on any code element and select **Cody > Choose a command** from the list +There a few more options and settings that you can explore in the Cody chat interface. [You can read more in these docs](/cody/capabilities/chat). ## Working with the Cody extension From a2dc6fec723a6faf542e7be7a76e838bcd395858 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Tue, 5 Nov 2024 18:41:52 -0800 Subject: [PATCH 4/6] Add docs for chat with Cody in quickstart --- docs/cody/quickstart.mdx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/cody/quickstart.mdx b/docs/cody/quickstart.mdx index 98a323b10..52e55261f 100644 --- a/docs/cody/quickstart.mdx +++ b/docs/cody/quickstart.mdx @@ -26,7 +26,19 @@ To help you automate your key tasks in your development workflow you get **[Prom There a few more options and settings that you can explore in the Cody chat interface. [You can read more in these docs](/cody/capabilities/chat). -## Working with the Cody extension +![cody-chat-interface](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-chat-interface-1124.png) + +## Chat with Cody + +The best way to see Cody in action is through chat. Cody allows you to chat directly with AI to ask questions about your code. You can start by asking simple questions like " What does this repo do?" and "Explain this codebase in three to four lines," or ask more complex questions like "Suggest ways to refactor the codebase?" and "How can I make this code more performant?" + +Cody will respond with a code snippet, a suggested fix, or an explanation. + +![chat-with-cody](https://storage.googleapis.com/sourcegraph-assets/Docs/chat-with-cody-1124.png) + +Let's look at some more complex use cases that Cody can help you with. + +## 1. Chat with Cody to write code snippets Let's create a JavaScript function that converts a `given date` into a human-readable description of the time elapsed between the `given date` and the `current date`. This example uses a starter boilerplate code that helps you set up and run three tasks with the Cody VS Code extension. From 577c3afc165c2fda6b1242897c890bfc58786c36 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Wed, 6 Nov 2024 16:09:02 -0800 Subject: [PATCH 5/6] Some more docs --- docs/cody/quickstart.mdx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/docs/cody/quickstart.mdx b/docs/cody/quickstart.mdx index 52e55261f..edd4d2de3 100644 --- a/docs/cody/quickstart.mdx +++ b/docs/cody/quickstart.mdx @@ -20,7 +20,7 @@ Before you start, you'll need the following: After installing the extension and connecting to a Sourcegraph instance, you can leverage Cody to use the best LLM and context to understand, write, and fix code. Click the **Cody** icon from the VS Code side activity bar to open the Cody chat panel. -By default, the chat input will have the context of your entire codebase, and Claude 3.5 Sonnet is selected as the default chat model. Based on your [Cody tier](https://sourcegraph.com/pricing?product=cody), you can change the LLM model and context based on your use case to optimize for speed, accuracy, or cost. +By default, the chat input will have the context of your entire codebase, and Claude 3.5 Sonnet (New) is selected as the default chat model. Based on your [Cody tier](https://sourcegraph.com/pricing?product=cody), you can change the LLM model and context based on your use case to optimize for speed, accuracy, or cost. To help you automate your key tasks in your development workflow you get **[Prompts](/cody/capabilities/commands)**. If you are a part of an organization on Sourcegraph.com or a self-hosted Sourcegraph instance, you can view these pre-built Prompts created by your teammates. On the contrary, you can create your own Prompts via the **Prompt Library** from your Sourcegraph instance. @@ -30,13 +30,21 @@ There a few more options and settings that you can explore in the Cody chat inte ## Chat with Cody -The best way to see Cody in action is through chat. Cody allows you to chat directly with AI to ask questions about your code. You can start by asking simple questions like " What does this repo do?" and "Explain this codebase in three to four lines," or ask more complex questions like "Suggest ways to refactor the codebase?" and "How can I make this code more performant?" +The best way to see Cody in action is through chat. Cody allows you to chat directly with AI to ask questions about your code. You can start by asking simple questions like: + +- What does this repo do? +- Explain this codebase in three to four lines + +Or ask more complex questions like: + +- Suggest ways to refactor the codebase? +- How can I make this code more performant? Cody will respond with a code snippet, a suggested fix, or an explanation. ![chat-with-cody](https://storage.googleapis.com/sourcegraph-assets/Docs/chat-with-cody-1124.png) -Let's look at some more complex use cases that Cody can help you with. +Here are some practical use cases that Cody can help you with: ## 1. Chat with Cody to write code snippets From f9f41145062aa858874e8592ce670c8a99f267e3 Mon Sep 17 00:00:00 2001 From: Maedah Batool Date: Tue, 12 Nov 2024 18:38:31 -0800 Subject: [PATCH 6/6] Revamp quickstart --- docs/cody/quickstart.mdx | 133 +++++++-------------------------------- 1 file changed, 24 insertions(+), 109 deletions(-) diff --git a/docs/cody/quickstart.mdx b/docs/cody/quickstart.mdx index edd4d2de3..597221dd9 100644 --- a/docs/cody/quickstart.mdx +++ b/docs/cody/quickstart.mdx @@ -1,10 +1,11 @@ # Cody Quickstart -

This quickstart guide shows how to use Cody in the VS Code editor. You'll learn about the following three tasks:

+

This quickstart guide shows how to use Cody in the VS Code editor. You'll learn about the following tasks:

-1. Chat with Cody to write code snippets -2. Use Cody to execute inline edits -3. Use Cody to debug code and ask Cody to fix bugs +- Chat with Cody to ask questions about your code +- Code completions and suggestions +- Use Cody to refactor code +- Use Cody to debug code and ask Cody to fix bugs There are [many ways to use Cody](/cody/clients). For this guide, we'll be using the [VS Code](/cody/clients/install-vscode) extension. @@ -20,11 +21,11 @@ Before you start, you'll need the following: After installing the extension and connecting to a Sourcegraph instance, you can leverage Cody to use the best LLM and context to understand, write, and fix code. Click the **Cody** icon from the VS Code side activity bar to open the Cody chat panel. -By default, the chat input will have the context of your entire codebase, and Claude 3.5 Sonnet (New) is selected as the default chat model. Based on your [Cody tier](https://sourcegraph.com/pricing?product=cody), you can change the LLM model and context based on your use case to optimize for speed, accuracy, or cost. +By default, the chat input will have the context of your entire codebase, and Claude 3.5 Sonnet (New) is selected as the default chat model. Based on your [Cody tier](https://sourcegraph.com/pricing?product=cody), you can change the LLM model and context based on your use case to optimize speed, accuracy, or cost. -To help you automate your key tasks in your development workflow you get **[Prompts](/cody/capabilities/commands)**. If you are a part of an organization on Sourcegraph.com or a self-hosted Sourcegraph instance, you can view these pre-built Prompts created by your teammates. On the contrary, you can create your own Prompts via the **Prompt Library** from your Sourcegraph instance. +To help you automate your key tasks in your development workflow, you get **[Prompts](/cody/capabilities/commands)**. If you are a part of an organization on Sourcegraph.com or a self-hosted Sourcegraph instance, you can view these pre-built Prompts created by your teammates. On the contrary, you can create your own Prompts via the **Prompt Library** from your Sourcegraph instance. -There a few more options and settings that you can explore in the Cody chat interface. [You can read more in these docs](/cody/capabilities/chat). +The Cody chat interface offers a few more options and settings. [You can read more in these docs](/cody/capabilities/chat). ![cody-chat-interface](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-chat-interface-1124.png) @@ -32,7 +33,7 @@ There a few more options and settings that you can explore in the Cody chat inte The best way to see Cody in action is through chat. Cody allows you to chat directly with AI to ask questions about your code. You can start by asking simple questions like: -- What does this repo do? +- What does this code do? - Explain this codebase in three to four lines Or ask more complex questions like: @@ -44,117 +45,31 @@ Cody will respond with a code snippet, a suggested fix, or an explanation. ![chat-with-cody](https://storage.googleapis.com/sourcegraph-assets/Docs/chat-with-cody-1124.png) -Here are some practical use cases that Cody can help you with: +## Code completions and suggestions -## 1. Chat with Cody to write code snippets +Cody helps you code faster by providing real-time single and multi-line code completions. It uses the context of the code around your cursor to make accurate suggestions and starts predicting what you're trying to write before you type it. -Let's create a JavaScript function that converts a `given date` into a human-readable description of the time elapsed between the `given date` and the `current date`. This example uses a starter boilerplate code that helps you set up and run three tasks with the Cody VS Code extension. +Let's try it by typing a `bubbleSort()` function in a JavaScript file. -Here's the code for the date elapsed function: +![cody-completions](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-completions-1124.png) -```js -function getTimeAgoDescription(dateString) { - const startDate = new Date(dateString); - const currentDate = new Date(); +Cody automatically predicts the function body in gray-dimmed text. Press `Tab` to accept the suggestion or `Esc` to dismiss it. - const years = currentDate.getFullYear() - startDate.getFullYear(); - const months = currentDate.getMonth() - startDate.getMonth(); - const days = currentDate.getDate() - startDate.getDate(); +## Use Cody to refactor code - let timeAgoDescription = ''; +You can refactor your code with inline edits. All you need to do is highlight the code, hit the edit hotkey (`Opt + K`), and describe a change. Cody will generate a diff for the change in seconds. - if (years > 0) { - timeAgoDescription += `${years} ${years === 1 ? 'year' : 'years'}`; - } +Let's use the same `bubbleSort()` function from the previous section. Now, refactor the function to sort dates in descending order. Highlight the function and press `Opt + K`. - if (months > 0) { - if (timeAgoDescription !== '') { - timeAgoDescription += ' '; - } - timeAgoDescription += `${months} ${months === 1 ? 'month' : 'months'}`; - } +![cody-refactor](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-refactor-code-1124.png) - if (days > 0) { - if (timeAgoDescription !== '') { - timeAgoDescription += ' '; - } - timeAgoDescription += `${days} ${days === 1 ? 'day' : 'days'}`; - } +Type your refactoring suggestion in the input field and press `Enter`. Cody will generate a diff for the change in seconds. You can review the diff, accept the change, reject it, or retry if you are unsatisfied with the result. - if (timeAgoDescription === '') { - timeAgoDescription = 'today'; - } else { - timeAgoDescription += ' ago'; - } +## Use Cody to debug code - return timeAgoDescription; -} -``` +You can ask Cody to debug your code and fix bugs. Cody chat and inline edits are both quite powerful in debugging. If you are running into a bug, you can ask Cody to debug and fix the code. If you are a VS Code user and have the Cody extension installed, you can use **code actions** to debug your code. -## 1. Generate a unit test +When there is a mistake, a red warning is triggered. Along with this, you get a lightbulb icon. If you click on this lightbulb icon, there is an **Ask Cody to fix** option. Click this, and Cody will try to fix the bug with **Cody is working** notice. +![code-actions](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-code-actions-vscode-1124.png) -To ensure code quality and early bug detection, one of the most useful commands that Cody offers is **Generate unit tests**. It quickly helps you write test code for any snippet that you have highlighted. To generate a unit test for our example function: - -- Open the `date.js` file in VS Code -- Highlight a code snippet that you'd like to test -- Inside Cody chat, type `/test` or press the command hotkey (`⌥` + `c` / `alt` + `c`) -- Select `Generate unit tests` option and hit `Enter` - -Cody will help you generate the following unit test in the sidebar: - -```js -import assert from 'assert'; -import { getTimeAgoDescription } from '../src/date.js'; - -describe('getTimeAgoDescription', () => { - it('returns correct relative time for date 1 month ago', () => { - const oneMonthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]; - const result = getTimeAgoDescription(oneMonthAgo); - assert.equal(result, '1 month ago'); - }); - - it('returns correct relative time for date 2 months ago', () => { - const twoMonthsAgo = new Date(Date.now() - 2 * 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]; - const result = getTimeAgoDescription(twoMonthsAgo); - assert.equal(result, '2 months ago'); - }); -}); - -``` - -This unit test file tests the `getTimeAgoDescription()` function from the `date.js` file. These tests help you validate that the `getTimeAgoDescription()` function correctly returns the relative time descriptions for dates in the past. The tests generate specific sample input dates and confirm that the output matches the expected result. - -## 2. Suggest bug fixes and changes to code snippets - -Cody is very efficient at catching bugs and suggesting improvements to code snippets. To try this out, let's run our previously generated unit test and see if Cody notices any issues. Inside your VS Code terminal, run the following command to try the unit test: - -```bash -node tests/test.js -``` - -This results in an error, as our function does not identify the `describe` statement. - -![Example of running failed unit test ](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-quickstart/unit-test-fail.png) - -Let's paste this error into the Cody chat and see what suggestions it provides: - -![Example of error debugging with Cody ](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-quickstart/debug-with-cody.png) - -Leveraging the failed test output, Cody is able to identify the potential bug and suggest a fix. It recommends installing `mocha`, importing it at the top of the `test.js` file to identify `describe`, and finally running it with `mocha`. - -![Example of successfully running unit test ](https://storage.googleapis.com/sourcegraph-assets/Docs/cody-quickstart/passed-tests.png) - -## 3. Ask Cody to add code documentation - -Cody can also create well-crafted code documentation and comments, significantly improving the readability experience. -You can add it by selecting a code snippet and running the **Document** command. Cody will add a comment to the top of the code snippet. - -## Try other commands and Cody chat - -That's it for this quickstart guide! Feel free to continue chatting with Cody to learn more about its [capabilities](/cody/capabilities). Cody can run some other useful commands including: - -- Explain code snippets -- Refactor code and variable names -- Translate code to different languages -- Answer general questions about your code -- Write context-aware code with a general awareness of the broader codebase +That's it for this quickstart guide! Feel free to continue chatting with Cody to learn more about its [capabilities](/cody/capabilities).