diff --git a/README.md b/README.md index ce0221d..a6faf33 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,43 @@ -# Claude Dev VSCode Extension +# Claude Dev -Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) Claude Dev can handle complex software development tasks step-by-step. With tools that let him read & write files, create entire projects from scratch, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond simple code completion or tech support. +

+ [video] +

-Claude Dev bridges the gap between complex python scripting and simple chat websites. With its intuitive GUI, it offers a safe and accessible platform for exploring the potential of agentic AI. +

+ Download VSCode Extension +       + Tutorials (coming soon) +       + Make Contribution +

-- Keep track of total tokens and API usage cost for the current task loop -- View edit diffs or new files in beautifully syntax highlighted previews -- Streams command execution output into the chat, so you never have to open a terminal yourself -- Presents permission buttons (i.e. 'Approve CLI command') before tool use or sending information to the API -- Set a maximum # of API requests allowed for a task before being prompted for permission to proceed -- View the JSON of API requests when they are made and track individal API request costs -- When a task is completed, Claude Dev determines if he can present the result to you with a CLI command like `open -a "Google Chrome" index.html`, which you run with a click of a button +Thanks to [Claude 3.5 Sonnet's agentic coding capabilities](https://www-cdn.anthropic.com/fed9cc193a14b84131812372d8d5857f8f304c52/Model_Card_Claude_3_Addendum.pdf) Claude Dev can handle complex software development tasks step-by-step. With tools that let him analyze project source code, read & write files, and execute terminal commands (after you grant permission), he can assist you in ways that go beyond simple code completion or tech support. From building software projects to running system operations, Claude Dev is only limited by your imagination. -Download the VSCode extension here: [https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev) +While autonomous AI scripts traditionally run in sandboxed environments, Claude Dev offers a human-in-the-loop GUI to supervise every file change and command executed, providing a safe and accessible way to explore the potential of agentic AI. -This project was developed for Anthropic's [Build with Claude June 2024](https://docs.anthropic.com/en/build-with-claude-contest/overview) contest. +- View syntax highlighted file previews and diffs for every change Claude makes +- Streams command execution output into the chat, so you never have to open a terminal yourself +- Presents permission buttons (i.e. 'Approve CLI command') before tool use or sending information to the API +- Keep track of total tokens and API usage cost for the entire task loop and individual requests +- Set a maximum # of API requests allowed for a task before being prompted for permission to proceed +- When a task is completed, Claude Dev determines if he can present the result to you with a CLI command like `open -a "Google Chrome" index.html`, which you run with a click of a button ## How it works -Claude Dev uses an agentic loop style implementation with chain-of-thought prompting and access to powerful tools that give him the ability to accomplish nearly any task. From building software projects to running system operations, Claude Dev is only limited by your imagination. Start by providing a task and the agentic loop fires off, where it might use certain tools (with your permission) to accomplish each step in its thought process. - +Claude Dev uses an agentic loop style implementation with chain-of-thought prompting and access to powerful tools that give him the ability to accomplish nearly any task. Start by providing a task and the agentic loop fires off, where it might use certain tools (with your permission) to accomplish each step in its thought process. ### Tools Claude Dev has access to the following capabilities: -1. **execute_command**: Execute CLI commands on the system. -2. **list_files**: List all files and directories at the top level of the specified directory. -3. **read_file**: Read the contents of a file at the specified path. -4. **write_to_file**: Write content to a file at the specified path. -5. **ask_followup_question**: Ask the user a question to gather additional information needed to complete a task. -6. **attempt_completion**: Present the result to the user after completing a task, potentially with a CLI command to kickoff a demonstration. +1. **`execute_command`**: Execute CLI commands on the system +2. **`analyze_project`**: Analyze the project's source code and file structure +3. **`list_files`**: List all files and directories at the top level of the specified directory +4. **`read_file`**: Read the contents of a file at the specified path +5. **`write_to_file`**: Write content to a file at the specified path +6. **`ask_followup_question`**: Ask the user a question to gather additional information needed to complete a task +7. **`attempt_completion`**: Present the result to the user after completing a task, potentially with a CLI command to kickoff a demonstration ### Only With Your Permission @@ -38,35 +45,10 @@ Claude always asks for your permission first before any tools are executed or in ![image](https://github.com/saoudrizwan/claude-dev/assets/7799382/e6435441-9400-41c9-98a9-63f75c5d45be) -## Demo +## Contribution -### 1. Give Claude Dev any task! - -First, I asked Claude Dev to make me a game with loose requirements. He used chain-of-thought `` tags to determine what steps he needed to take to accomplish the task. - -![image](https://github.com/saoudrizwan/claude-dev/assets/7799382/d04f5d54-4a20-456a-9928-cec2999ed717) - -### 2. Powerful tools to accomplish anything - -Then he iteratively used the tools built into the extension, such as creating new files, to build an entire website from scratch. - -![image](https://github.com/saoudrizwan/claude-dev/assets/7799382/195b8e3e-0a35-4778-91a7-4e1e342a685b) - -### 3. Run the project with a click of a button - -Claude Dev even offered to run a command that would open it in Chrome for me. - -![image](https://github.com/saoudrizwan/claude-dev/assets/7799382/9c8b675d-9dcb-4862-a484-3338ef7395fb) - -### 4. Finished Product - -From idea to functional website in seconds. Thanks, Claude Dev! - -![image](https://github.com/saoudrizwan/claude-dev/assets/7799382/b3a4c801-e8d6-4e20-96c4-2c7094a20664) - -## Installation - -To install Claude Dev, follow these steps: +Feel free to contribute to this project by submitting issues and pull requests. Contributions are welcome and appreciated! +To build Claude Dev locally, follow these steps: 1. Clone the repository: ```bash @@ -76,16 +58,11 @@ To install Claude Dev, follow these steps: ```bash code claude-dev ``` -3. Install the necessary dependencies: +3. Install the necessary dependencies for the extension and webview-gui: ```bash npm run install:all ``` -5. Launch the extension: - - Press `F5` to open a new VSCode window with the extension loaded. - -## Contribution - -Feel free to contribute to this project by submitting issues and pull requests. Contributions are welcome and appreciated! +4. Launch by pressing `F5` to open a new VSCode window with the extension loaded ## License @@ -93,4 +70,4 @@ This project is licensed under the MIT License. See the [LICENSE](./LICENSE) fil ## Acknowledgments -Special thanks to Anthropic for hosting the "Build with Claude June 2024" contest and providing the API that powers this extension. \ No newline at end of file +Special thanks to Anthropic for providing the API that powers this extension. diff --git a/package.json b/package.json index 7f31d21..93d6eac 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "claude-dev", "displayName": "Claude Dev", "description": "Autonomous software engineer right in your IDE, capable of reading/writing files, executing commands, and more with your permission every step of the way.", - "version": "0.0.6", + "version": "1.0.0", "icon": "icon.png", "engines": { "vscode": "^1.84.0" @@ -46,7 +46,7 @@ { "type": "webview", "id": "claude-dev.ClaudeDevProvider", - "name": "Claude Dev" + "name": "" } ] }, diff --git a/webview-ui/README.md b/webview-ui/README.md deleted file mode 100644 index b87cb00..0000000 --- a/webview-ui/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# Getting Started with Create React App - -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). diff --git a/webview-ui/src/components/Announcement.tsx b/webview-ui/src/components/Announcement.tsx index bad3235..e8a6517 100644 --- a/webview-ui/src/components/Announcement.tsx +++ b/webview-ui/src/components/Announcement.tsx @@ -32,6 +32,10 @@ const Announcement = ({ hideAnnouncement }: AnnouncementProps) => { or Claude Dev: Open In New Tab in command palette) to see how Claude updates your workspace more clearly +
  • + New analyze_project tool to help Claude get a comprehensive overview of your project's + source code definitions and file structure +
  • Provide feedback to tool use like terminal commands and file edits
  • Updated max output tokens to 8192 so less lazy coding ({"// rest of code here..."}) diff --git a/webview-ui/src/components/SettingsView.tsx b/webview-ui/src/components/SettingsView.tsx index 8156f12..6593963 100644 --- a/webview-ui/src/components/SettingsView.tsx +++ b/webview-ui/src/components/SettingsView.tsx @@ -166,8 +166,6 @@ const SettingsView = ({ apiKey, setApiKey, maxRequestsPerTask, setMaxRequestsPer fontStyle: "italic", }}>

    - This project was made for Anthropic's "Build with Claude June 2024 contest" -
    https://github.com/saoudrizwan/claude-dev