### Signing In to Augment - Vim/Neovim Command

Source: https://docs.augmentcode.com/quickstart

This command is used within Vim or Neovim to initiate the sign-in process for the Augment extension. Users execute this command in the editor's command mode to authenticate their Augment account and enable full functionality.

```Vimscript
:Augment signin
```

--------------------------------

### Configuring SQLite MCP Server in Augment's settings.json

Source: https://docs.augmentcode.com/setup-augment/mcp

This JSON snippet demonstrates how to add an MCP server configuration to the `augment.advanced.mcpServers` array within the `settings.json` file. It specifies a server named 'sqlite', the command 'uvx' to run it, and arguments to point to the 'mcp-server-sqlite' and a database path. Dependencies like UV and Sqlite must be installed separately.

```JSON
"augment.advanced": {
    "mcpServers": [
        {
            "name": "sqlite",
            "command": "uvx",
            "args": ["mcp-server-sqlite", "--db-path", "/path/to/test.db"]
        }
    ]
}
```

--------------------------------

### Signing In to Augment with Vim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This snippet provides the Vim command to authenticate and sign in to the Augment service. It requires Vim or Neovim to be open and the Augment plugin to be installed to execute successfully.

```Vim script
:Augment signin
```

--------------------------------

### Installing Augment with Lazy.nvim for Neovim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This Lua snippet demonstrates how to add the Augment Vim plugin to a Neovim configuration using the `lazy.nvim` plugin manager. Users should insert this line into their `init.lua` file within the `require('lazy').setup` block, then run `:Lazy sync` in Neovim to install.

```lua
require('lazy').setup({
  -- Your other plugins here
  'augmentcode/augment.vim',
})
```

--------------------------------

### Creating Custom Keybindings for Augment Chat Commands (Vimscript)

Source: https://docs.augmentcode.com/vim/setup-augment/vim-keyboard-shortcuts

This Vimscript snippet illustrates how to define custom keybindings in `.vimrc` or `init.lua` for Augment's chat functionalities. It includes examples for mapping keys to send a chat message, start a new conversation, and toggle the chat panel visibility, applicable in both normal and visual modes.

```Vimscript
" Send a chat message in normal and visual mode
noremap <leader>ac :Augment chat<CR>
vnoremap <leader>ac :Augment chat<CR>

" Start a new chat conversation
nnoremap <leader>an :Augment chat-new<CR>

" Toggle the chat panel visibility
nnoremap <leader>at :Augment chat-toggle<CR>
```

--------------------------------

### Using Availability Component in React/JSX

Source: https://docs.augmentcode.com/setup-augment/workspace-context-vscode

This snippet demonstrates how to use the `Availability` React component, passing an array of tags as a prop. In this specific example, it shows the 'vscode' tag, which will be rendered with its corresponding predefined styling.

```jsx
<Availability tags={["vscode",]} />
```

--------------------------------

### Defining Keyboard Shortcut Component (JSX)

Source: https://docs.augmentcode.com/jetbrains/setup-augment/install-jetbrains-ides

This JSX component renders a keyboard shortcut string within a styled `<span>` element. It takes a `shortcut` prop and displays it with specific styling for visual emphasis in documentation.

```JSX
export const Keyboard = ({shortcut}) => <span className="inline-block border border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-gray-800 rounded-md text-xs text-gray font-bold px-1 py-0.5">
    {shortcut}
  </span>;
```

--------------------------------

### Defining Next Steps Component - React/JSX

Source: https://docs.augmentcode.com/quickstart

This React functional component, `Next`, is used to wrap content within a styled `div` element, typically for 'Next steps' sections in documentation. It accepts `children` as a prop, which will be rendered inside the component. The component applies specific Tailwind CSS classes for styling borders, padding, and dark mode compatibility.

```JavaScript
export const Next = ({children}) => <div className="border-t border-b pb-8 border-gray dark:border-white/10">\n    <h3>Next steps</h3>\n    {children}\n  </div>;
```

--------------------------------

### Defining Keyboard Shortcut Component - React/JSX

Source: https://docs.augmentcode.com/quickstart

This React functional component, `Keyboard`, is designed to display keyboard shortcuts with a distinct visual style. It takes a `shortcut` prop, which is rendered within a `span` element. The component applies Tailwind CSS classes to create a styled, rounded background with specific text formatting, suitable for inline display of key combinations.

```JavaScript
export const Keyboard = ({shortcut}) => <span className="inline-block border border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-gray-800 rounded-md text-xs text-gray font-bold px-1 py-0.5">{shortcut}</span>;
```

--------------------------------

### Manually Installing Augment for Vim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This shell command manually clones the Augment Vim plugin repository into the standard Vim `pack` directory. This method directly places the plugin files, making them available for Vim to load without a plugin manager.

```sh
git clone https://github.com/augmentcode/augment.vim.git ~/.vim/pack/augment/start/augment.vim
```

--------------------------------

### Manually Installing Augment for Neovim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This shell command manually clones the Augment Vim plugin repository into the standard Neovim `pack` directory. This method directly places the plugin files, making them available for Neovim to load without a plugin manager.

```sh
git clone https://github.com/augmentcode/augment.vim.git ~/.config/nvim/pack/augment/start/augment.vim
```

--------------------------------

### Defining a Command React Component

Source: https://docs.augmentcode.com/jetbrains/setup-augment/mcp

This JavaScript (React) component defines a simple `Command` component that renders its `text` prop within a `<span>` element, applying bold styling. It is used to display command-like text with specific formatting within the documentation.

```JavaScript
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Example Usage of React Availability Component

Source: https://docs.augmentcode.com/using-augment/instructions

This snippet demonstrates how to instantiate the `Availability` React component, passing an array containing the 'vscode' tag. This will render the 'Availability' label followed by a styled 'vscode' tag, illustrating how to use the component to indicate specific feature availability.

```JavaScript
<Availability tags={["vscode",]} />
```

--------------------------------

### Installing Augment with Vim Plug for Vim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This Vimscript snippet shows how to add the Augment Vim plugin to a Vim configuration using the `Vim Plug` plugin manager. Users should add this within their `.vimrc` file between `call plug#begin()` and `call plug#end()`, then run `:PlugInstall` in Vim to install.

```vimscript
call plug#begin()

" Your other plugins here
Plug 'augmentcode/augment.vim'

call plug#end()
```

--------------------------------

### Defining a Keyboard Shortcut React Component

Source: https://docs.augmentcode.com/jetbrains/setup-augment/mcp

This JavaScript (React) component defines a `Keyboard` component that displays a keyboard shortcut. It renders its `shortcut` prop within a `<span>` element, applying specific styling for visual representation of a keyboard key or shortcut within the documentation.

```JavaScript
export const Keyboard = ({shortcut}) => <span className="inline-block border border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-gray-800 rounded-md text-xs text-gray font-bold px-1 py-0.5">
    {shortcut}
  </span>;
```

--------------------------------

### Configuring Augment Workspace Context in Neovim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This Lua line configures the `vim.g.augment_workspace_folders` global variable in `init.lua` to specify project root directories for Augment's context engine. Providing project paths helps Augment offer more relevant code suggestions by understanding the codebase.

```lua
" Add to your init.lua
vim.g.augment_workspace_folders = {'/path/to/project'}
```

--------------------------------

### Defining Command Text Component (JSX)

Source: https://docs.augmentcode.com/jetbrains/setup-augment/install-jetbrains-ides

This JSX component renders a given text string within a bold `<span>` element. It takes a `text` prop and is used to highlight command names or UI elements in documentation.

```JSX
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Defining Next Steps UI Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-slack-app

This JSX component defines a 'Next steps' section with a top and bottom border. It's designed to wrap child elements, providing a consistent visual style for follow-up actions or information.

```JSX
export const Next = ({children}) => <div className="border-t border-b pb-8 border-gray dark:border-white/10">
    <h3>Next steps</h3>
    {children}
  </div>;
```

--------------------------------

### Defining Command Text Formatting Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-slack-app

This JSX component is a simple utility for formatting text as a command, typically by making it bold. It accepts a 'text' prop and renders it within a <span> tag with specific styling.

```JSX
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Natural Language Prompt for Augment Code Generation

Source: https://docs.augmentcode.com/using-augment/instructions

This example showcases a natural language prompt used with Augment's 'Instructions' feature. The prompt, '> Add a getUser function that takes userId as a parameter', instructs the AI to generate a new function, demonstrating the capability to create code based on simple text commands.

```Plain Text
> Add a getUser function that takes userId as a parameter
```

--------------------------------

### Typical .gitignore Exclusions (Bash)

Source: https://docs.augmentcode.com/vim/setup-augment/workspace-indexing

This snippet provides examples of common patterns used in a `.gitignore` file to prevent specific files and directories from being tracked by Git. It illustrates how to exclude dependencies (`node_modules`), sensitive environment variables (`.env`), and build output directories (`out`, `build`). This file is often referenced when deciding what to include in `.augmentignore`.

```bash
# Exclude dependencies
node_modules

# Exclude secrets
.env

# Exclude build artifacts
out
build
```

--------------------------------

### Defining Next.js Component for Next Steps Section

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This React component, `Next`, is used to wrap content within a styled `div` element, typically for "Next steps" sections. It applies specific border and padding styles, adapting to dark mode, and accepts `children` as a prop to render nested content.

```javascript
export const Next = ({children}) => <div className="border-t border-b pb-8 border-gray dark:border-white/10">
    <h3>Next steps</h3>
    {children}
  </div>;
```

--------------------------------

### Completing a TypeScript Function Implementation

Source: https://docs.augmentcode.com/jetbrains/using-augment/completions

This example illustrates Augment's ability to provide comprehensive suggestions for a function's entire implementation. As the user types, Augment continues to offer relevant code, leading to a complete and functional code block.

```TypeScript
function getUser(): Promise<User> {
  return fetch("/api/user/1")
    .then((response) => response.json())
    .then((json) => {
      return json as User;
    });
}
```

--------------------------------

### Defining External Link Component (JSX)

Source: https://docs.augmentcode.com/jetbrains/setup-augment/install-jetbrains-ides

This JSX component creates an external hyperlink. It accepts `text` for the link's display and `href` for the URL, ensuring the link opens in a new tab with `noopener noreferrer` for security.

```JSX
export const ExternalLink = ({text, href}) => <a href={href} rel="noopener noreferrer">
    {text}
  </a>;
```

--------------------------------

### Configuring Augment Workspace Context in Vim

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This Vimscript line configures the `g:augment_workspace_folders` global variable in `.vimrc` to specify project root directories for Augment's context engine. Providing project paths helps Augment offer more relevant code suggestions by understanding the codebase.

```vimscript
" Add to your .vimrc
let g:augment_workspace_folders = ['/path/to/project']
```

--------------------------------

### Common Exclusions in .gitignore - Bash

Source: https://docs.augmentcode.com/jetbrains/setup-augment/workspace-indexing

This snippet illustrates typical patterns for a `.gitignore` file, used to prevent certain files and directories from being tracked by Git. It includes examples for excluding dependencies (`node_modules`), sensitive files (`.env`), and build artifacts (`out`, `build`).

```bash
# Exclude dependencies
node_modules

# Exclude secrets
.env

# Exclude build artifacts
out
build
```

--------------------------------

### Mentioning Third-Party Documentation in Chat Context

Source: https://docs.augmentcode.com/using-augment/chat-context

This example illustrates how to include third-party documentation, such as 'Next.js', in the chat context by typing '@' followed by the documentation name. This allows Augment to leverage external knowledge bases for more informed responses.

```plaintext
@Next.js
```

--------------------------------

### Defining Command Text Display Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-visual-studio-code

This JSX component renders a `<span>` element to display command text. It takes a `text` prop, which is rendered with bold styling to highlight specific commands or actions mentioned in the documentation.

```JSX
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Mentioning Specific Files in Chat Context

Source: https://docs.augmentcode.com/using-augment/chat-context

This example demonstrates how to include a specific file, 'routes.tsx', in the chat context by typing '@' followed by the file name in the input field. This action prioritizes the content of the mentioned file for more relevant chat responses.

```plaintext
@routes.tsx
```

--------------------------------

### Defining React Component for External Links

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This React component, `ExternalLink`, creates an anchor tag (`<a>`) for external links. It accepts `text` for the link's display content and `href` for the URL, automatically adding `rel="noopener noreferrer"` for security best practices when opening new tabs.

```javascript
export const ExternalLink = ({text, href}) => <a href={href} rel="noopener noreferrer">
    {text}
  </a>;
```

--------------------------------

### Common Exclusions in .gitignore

Source: https://docs.augmentcode.com/setup-augment/workspace-indexing

This snippet illustrates typical patterns used in a .gitignore file to prevent certain files and directories from being tracked by Git. It includes examples for excluding dependencies (e.g., node_modules), sensitive information (e.g., .env), and build artifacts (e.g., out, build). These exclusions are respected by Augment's indexing process unless overridden by .augmentignore.

```bash
# Exclude dependencies
node_modules

# Exclude secrets
.env

# Exclude build artifacts
out
build
```

--------------------------------

### Defining Keyboard Shortcut Display Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-visual-studio-code

This JSX component renders a styled `<span>` element to visually represent keyboard shortcuts. It accepts a `shortcut` prop, which is then displayed within the span, applying specific Tailwind CSS classes for consistent styling.

```JSX
export const Keyboard = ({shortcut}) => <span className="inline-block border border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-gray-800 rounded-md text-xs text-gray font-bold px-1 py-0.5">
    {shortcut}
  </span>;
```

--------------------------------

### Customizing Suggestion Acceptance Keybinding (Vimscript)

Source: https://docs.augmentcode.com/vim/setup-augment/vim-keyboard-shortcuts

This Vimscript snippet demonstrates how to change the default key for accepting Augment completion suggestions. It provides examples for mapping `<c-y>` to accept a suggestion and mapping `<cr>` (Enter) to accept a suggestion, with an optional fallback to inserting a newline if no suggestion is available.

```Vimscript
" Use Ctrl-Y to accept a suggestion
inoremap <c-y> <cmd>call augment#Accept()<cr>

" Use enter to accept a suggestion, falling back to a newline if no suggestion
" is available
inoremap <cr> <cmd>call augment#Accept("\n")<cr>
```

--------------------------------

### Defining JetBrains Logo SVG Component (JSX)

Source: https://docs.augmentcode.com/jetbrains/setup-augment/install-jetbrains-ides

This JSX component renders the JetBrains logo using an embedded SVG. It includes a linear gradient definition and multiple path elements to construct the logo's visual appearance, suitable for use as an icon.

```JSX
export const JetbrainsLogo = () => <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64">
    <defs>
      <linearGradient id="linear-gradient" x1=".8" y1="3.3" x2="62.6" y2="64.2" gradientTransform="translate(0 66) scale(1 -1)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#ff9419" />
        <stop offset=".4" stop-color="#ff021d" />
        <stop offset="1" stop-color="#e600ff" />
      </linearGradient>
    </defs>
    <path fill="url(#linear-gradient)" d="M20.3,3.7L3.7,20.3c-2.3,2.3-3.7,5.5-3.7,8.8v29.8c0,2.8,2.2,5,5,5h29.8c3.3,0,6.5-1.3,8.8-3.7l16.7-16.7c2.3-2.3,3.7-5.5,3.7-8.8V5c0-2.8-2.2-5-5-5h-29.8c-3.3,0-6.5,1.3-8.8,3.7Z" />
    <path fill="#000" d="M48,16H8v40h40V16Z" />
    <path fill="#fff" d="M30,47H13v4h17v-4Z" />
  </svg>;
```

--------------------------------

### Defining React Component for Neovim Logo SVG

Source: https://docs.augmentcode.com/vim/setup-augment/install-vim-neovim

This React component, `NeoVimLogo`, renders an SVG graphic of the Neovim logo. It defines the paths and linear gradients for the logo's distinct colors and shapes, ensuring a consistent visual representation of the Neovim icon within the application.

```javascript
export const NeoVimLogo = () => <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1012_311)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.11719 5.0407L7.2509 -0.14502V23.9669L2.11719 18.841V5.0407Z" fill="url(#paint0_linear_1012_311)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9551 5.08747L16.7572 -0.14502L16.8625 23.9669L21.9902 18.8404L21.9551 5.08747Z" fill="url(#paint1_linear_1012_311)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.25 -0.111816L20.5981 20.2637L16.8629 24.0001L3.50781 3.66964L7.25 -0.111816Z" fill="url(#paint2_linear_1012_311)" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24955 9.28895L7.24248 10.0894L3.14258 4.01872L3.52221 3.63086L7.24955 9.28895Z" fill="black" fill-opacity="0.13" />
</g>
<defs>
<linearGradient id="paint0_linear_1012_311" x1="258.803" y1="-0.14502" x2="258.803" y2="2411.04" gradientUnits="userSpaceOnUse">
<stop stop-color="#16B0ED" stop-opacity="0.800236" />
<stop offset="1" stop-color="#0F59B2" stop-opacity="0.837" />
</linearGradient>
<linearGradient id="paint1_linear_1012_311" x1="-239.663" y1="-0.14502" x2="-239.663" y2="2411.04" gradientUnits="userSpaceOnUse">
<stop stop-color="#7DB643" />
<stop offset="1" stop-color="#367533" />
</linearGradient>
<linearGradient id="paint2_linear_1012_311" x1="858.022" y1="-0.111816" x2="858.022" y2="2411.08" gradientUnits="userSpaceOnUse">
<stop stop-color="#88C649" stop-opacity="0.8" />
<stop offset="1" stop-color="#439240" stop-opacity="0.84" />
</linearGradient>
<clipPath id="clip0_1012_311">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>;
```

--------------------------------

### Defining External Link Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-visual-studio-code

This JSX component creates a standard external hyperlink. It accepts `text` and `href` props, rendering an `<a>` tag with `rel="noopener noreferrer"` for security best practices, ensuring external links open safely without granting the new page access to the original page's window object.

```JSX
export const ExternalLink = ({text, href}) => <a href={href} rel="noopener noreferrer">
    {text}
  </a>;
```

--------------------------------

### Customizing Vim Keybindings for Augment Completions

Source: https://docs.augmentcode.com/vim/using-augment/vim-completions

This Vimscript snippet illustrates how to remap keys to accept Augment code suggestions. It provides examples for mapping `Ctrl-Y` to accept the current suggestion and `Enter` to accept a suggestion, falling back to a newline if no suggestion is present. This allows users to customize their workflow beyond the default Tab mapping.

```Vimscript
" Use Ctrl-Y to accept a suggestion
inoremap <c-y> <cmd>call augment#Accept()<cr>

" Use enter to accept a suggestion, falling back to a newline if no suggestion
" is available
inoremap <cr> <cmd>call augment#Accept("\n")<cr>
```

--------------------------------

### Implementing User Fetch Function in TypeScript

Source: https://docs.augmentcode.com/using-augment/completions

This TypeScript code snippet provides a full implementation for the 'getUser' function, demonstrating how to fetch user data from an API endpoint and parse the JSON response into a 'User' object. It uses the Fetch API and promises to handle asynchronous operations, converting the incoming JSON to the 'User' type. This example illustrates the complete function after Augment's code completions.

```TypeScript
function getUser(): Promise<User> {
  return fetch("/api/user/1")
    .then((response) => response.json())
    .then((json) => {
      return json as User;
    });
}
```

--------------------------------

### Defining Next Steps Component in JavaScript

Source: https://docs.augmentcode.com/vim/using-augment/vim-chat

This React functional component, `Next`, is designed to wrap and display 'next steps' content. It applies specific styling for a bordered section and renders its children within an `<h3>Next steps</h3>` heading. It's used to guide users to related documentation or actions.

```JavaScript
export const Next = ({children}) => <div className="border-t border-b pb-8 border-gray dark:border-white/10">
    <h3>Next steps</h3>
    {children}
  </div>;
```

--------------------------------

### Configuring .augmentignore for Inclusions and Exclusions - Bash

Source: https://docs.augmentcode.com/jetbrains/setup-augment/workspace-indexing

This snippet demonstrates how to configure the `.augmentignore` file. It shows how to include files that are typically excluded by `.gitignore` using the `!` prefix (e.g., `!node_modules`) and how to exclude other files using standard glob patterns.

```bash
# Include .gitignore excluded files with ! prefix
!node_modules

# Exclude other files with .gitignore syntax
data/test.json
```

--------------------------------

### Defining Slack Logo SVG Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-slack-app

This JSX component renders the official Slack logo using an inline SVG. It's a reusable UI element for displaying the Slack icon within the application.

```JSX
export const SlackLogo = () => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
    <path fill="#E01E5A" d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" />
    <path fill="#36C5F0" d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z" />
    <path fill="#2EB67D" d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z" />
    <path fill="#ECB22E" d="M80.1 99.8c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V99.8h13.2zm0-6.6c-7.3 0-13.2-5.9-13.2-13.2 0-7.3 5.9-13.2 13.2-13.2h33.1c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H80.1z" />
  </svg>;
```

--------------------------------

### Defining an Availability Component in React

Source: https://docs.augmentcode.com/setup-augment/guidelines

This React functional component, `Availability`, displays a list of availability tags, such as 'vscode' or 'jetbrains'. It dynamically applies styling based on predefined tag types stored in `tagTypes` and renders each tag within a styled `<div>` element, indicating where a feature is available.

```JavaScript
export const Availability = ({tags}) => {
  const tagTypes = {
    invite: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    beta: {
      styles: "border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10 text-zinc-900 dark:text-zinc-200"
    },
    vscode: {
      styles: "border border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10 text-sky-900 dark:text-sky-200"
    },
    jetbrains: {
      styles: "border border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200"
    },
    vim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    neovim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    default: {
      styles: "bg-gray-200"
    }
  };
  return <div className="flex items-center space-x-2 border-b pb-4 border-gray-200 dark:border-white/10">
      <span className="text-sm font-medium">Availability</span>
      {tags.map(tag => {
    const tagType = tagTypes[tag] || tagTypes.default;
    return <div key={tag} className={`px-2 py-0.5 rounded-md text-xs font-medium ${tagType.styles}`}>
            {tag}
          </div>;
  })}
    </div>;
};
```

--------------------------------

### Defining GitHub Logo SVG Component in JSX

Source: https://docs.augmentcode.com/setup-augment/install-slack-app

This JSX component renders the GitHub logo using an inline SVG. It's a reusable UI element for displaying the GitHub icon, often used for links or branding.

```JSX
export const GitHubLogo = () => <svg width="24" height="24" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.49933 0.25C3.49635 0.25 0.25 3.49593 0.25 7.50024C0.25 10.703 2.32715 13.4206 5.2081 14.3797C5.57084 14.446 5.70302 14.2222 5.70302 14.0299C5.70302 13.8576 5.69679 13.4019 5.69323 12.797C3.67661 13.235 3.25112 11.825 3.25112 11.825C2.92132 10.9874 2.44599 10.7644 2.44599 10.7644C1.78773 10.3149 2.49584 10.3238 2.49584 10.3238C3.22353 10.375 3.60629 11.0711 3.60629 11.0711C4.25298 12.1788 5.30335 11.8588 5.71638 11.6732C5.78225 11.205 5.96962 10.8854 6.17658 10.7043C4.56675 10.5209 2.87415 9.89918 2.87415 7.12104C2.87415 6.32925 3.15677 5.68257 3.62053 5.17563C3.54576 4.99226 3.29697 4.25521 3.69174 3.25691C3.69174 3.25691 4.30015 3.06196 5.68522 3.99973C6.26337 3.83906 6.8838 3.75895 7.50022 3.75583C8.1162 3.75895 8.73619 3.83906 9.31523 3.99973C10.6994 3.06196 11.3069 3.25691 11.3069 3.25691C11.7026 4.25521 11.4538 4.99226 11.3795 5.17563C11.8441 5.68257 12.1245 6.32925 12.1245 7.12104C12.1245 9.9063 10.4292 10.5192 8.81452 10.6985C9.07444 10.9224 9.30633 11.3648 9.30633 12.0413C9.30633 13.0102 9.29742 13.7922 9.29742 14.0299C9.29742 14.2239 9.42828 14.4496 9.79591 14.3788C12.6746 13.4179 14.75 10.7025 14.75 7.50024C14.75 3.49593 11.5036 0.25 7.49933 0.25Z" fill="currentColor" />
  </svg>;
```

--------------------------------

### Using the Availability Component (React JSX)

Source: https://docs.augmentcode.com/vim/setup-augment/workspace-context-vim

This snippet demonstrates how to use the `Availability` React component, passing an array of tags ('vim', 'neovim') as a prop. This will render the availability display with the specified tags, styled according to the component's internal logic.

```JavaScript
<Availability tags={["vim","neovim"]} />
```

--------------------------------

### Defining a Command Component in React

Source: https://docs.augmentcode.com/setup-augment/guidelines

This React functional component, `Command`, takes a `text` prop and renders it within a `<span>` element with bold styling. It is primarily used to highlight specific commands or terms within the documentation, making them visually distinct.

```JavaScript
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Defining NewChatIcon React Component in JavaScript

Source: https://docs.augmentcode.com/using-augment/chat

This React functional component `NewChatIcon` renders an SVG icon designed to represent starting a new chat. It includes styling for an inline block display and the SVG path for the chat bubble with a plus sign.

```JavaScript
export const NewChatIcon = () => <div className="inline-block w-4 h-4 mr-2">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#5f6368" viewBox="0 -960 960 960">
      <path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z" />
    </svg>
  </div>;
```

--------------------------------

### Creating a Command Text Component in JavaScript

Source: https://docs.augmentcode.com/jetbrains/setup-augment/guidelines

This React functional component, `Command`, renders a `<span>` element with bold styling. It accepts a `text` prop, which is then displayed within the `<span>`. This component is used to highlight specific command names or actions within the documentation, ensuring consistent styling for user interface elements.

```JavaScript
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Defining Command Text Component in JSX

Source: https://docs.augmentcode.com/jetbrains/setup-augment/jetbrains-keyboard-shortcuts

This JSX component `Command` is a simple utility for rendering bold text. It accepts a `text` prop and wraps it in a `<span>` tag with a `font-bold` class, used for highlighting command names or UI elements in documentation for emphasis.

```JSX
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Defining an Availability Tag Display Component (React)

Source: https://docs.augmentcode.com/vim/setup-augment/workspace-context-vim

This React functional component displays a list of availability tags, each styled according to its type (e.g., 'beta', 'vscode', 'jetbrains'). It maps through an array of tags, applying specific Tailwind CSS styles based on predefined tag types, and includes a default style for unrecognized tags.

```JavaScript
export const Availability = ({tags}) => {
  const tagTypes = {
    invite: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    beta: {
      styles: "border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10 text-zinc-900 dark:text-zinc-200"
    },
    vscode: {
      styles: "border border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10 text-sky-900 dark:text-sky-200"
    },
    jetbrains: {
      styles: "border border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200"
    },
    vim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    neovim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    default: {
      styles: "bg-gray-200"
    }
  };
  return <div className="flex items-center space-x-2 border-b pb-4 border-gray-200 dark:border-white/10">
      <span className="text-sm font-medium">Availability</span>
      {tags.map(tag => {
    const tagType = tagTypes[tag] || tagTypes.default;
    return <div key={tag} className={`px-2 py-0.5 rounded-md text-xs font-medium ${tagType.styles}`}>
            {tag}
          </div>;
  })}
    </div>;
};
```

--------------------------------

### Defining Command React Component

Source: https://docs.augmentcode.com/setup-augment/sign-in

This React functional component renders a text string with bold styling. It's used to highlight specific commands or actions within the documentation. It accepts a `text` prop, which is the string to be displayed, and outputs a `<span>` element.

```JSX
export const Command = ({text}) => <span className="font-bold">{text}</span>;
```

--------------------------------

### Defining Availability Component in React/JSX

Source: https://docs.augmentcode.com/setup-augment/workspace-context-vscode

This React functional component, `Availability`, displays a list of tags with specific styling based on their type (e.g., 'vscode', 'beta'). It takes a `tags` array as a prop and renders each tag within a styled `div`. The component dynamically applies CSS classes based on predefined tag type styles.

```jsx
export const Availability = ({tags}) => {
  const tagTypes = {
    invite: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    beta: {
      styles: "border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10 text-zinc-900 dark:text-zinc-200"
    },
    vscode: {
      styles: "border border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10 text-sky-900 dark:text-sky-200"
    },
    jetbrains: {
      styles: "border border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200"
    },
    vim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    neovim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    default: {
      styles: "bg-gray-200"
    }
  };
  return <div className="flex items-center space-x-2 border-b pb-4 border-gray-200 dark:border-white/10">
      <span className="text-sm font-medium">Availability</span>
      {tags.map(tag => {
    const tagType = tagTypes[tag] || tagTypes.default;
    return <div key={tag} className={`px-2 py-0.5 rounded-md text-xs font-medium ${tagType.styles}`}>
            {tag}
          </div>;
  })}
    </div>;
};
```

--------------------------------

### Configuring .augmentignore for Inclusion and Exclusion (Bash)

Source: https://docs.augmentcode.com/vim/setup-augment/workspace-indexing

This snippet demonstrates how to configure an `.augmentignore` file to control Augment's indexing behavior. It shows how to include files typically excluded by `.gitignore` using the `!` prefix (e.g., `!node_modules`) and how to exclude other files using standard glob patterns (e.g., `data/test.json`). This file directly influences what Augment indexes.

```bash
# Include .gitignore excluded files with ! prefix
!node_modules

# Exclude other files with .gitignore syntax
data/test.json
```

--------------------------------

### Configuring .augmentignore for Augment Indexing

Source: https://docs.augmentcode.com/setup-augment/workspace-indexing

This snippet demonstrates how to configure the .augmentignore file to control which files Augment indexes. It shows how to include files typically excluded by .gitignore (like node_modules) using the ! prefix, and how to exclude other specific files or patterns using standard gitignore syntax.

```bash
# Include .gitignore excluded files with ! prefix
!node_modules

# Exclude other files with .gitignore syntax
data/test.json
```

--------------------------------

### Displaying Availability Tags Component in JavaScript

Source: https://docs.augmentcode.com/jetbrains/setup-augment/guidelines

This React functional component, `Availability`, dynamically renders a list of availability tags with distinct styling. It accepts a `tags` array prop, where each tag corresponds to a predefined style. The component iterates through the `tags` array, applying specific Tailwind CSS classes based on the tag type, or a default style if the tag type is not recognized. This ensures visual differentiation for various availability statuses.

```JavaScript
export const Availability = ({tags}) => {
  const tagTypes = {
    invite: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    beta: {
      styles: "border border-zinc-500/20 bg-zinc-50/50 dark:border-zinc-500/30 dark:bg-zinc-500/10 text-zinc-900 dark:text-zinc-200"
    },
    vscode: {
      styles: "border border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10 text-sky-900 dark:text-sky-200"
    },
    jetbrains: {
      styles: "border border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200"
    },
    vim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    neovim: {
      styles: "bg-gray-700 text-white dark:border-gray-50/10"
    },
    default: {
      styles: "bg-gray-200"
    }
  };
  return <div className="flex items-center space-x-2 border-b pb-4 border-gray-200 dark:border-white/10">
      <span className="text-sm font-medium">Availability</span>
      {tags.map(tag => {
    const tagType = tagTypes[tag] || tagTypes.default;
    return <div key={tag} className={`px-2 py-0.5 rounded-md text-xs font-medium ${tagType.styles}`}>
            {tag}
          </div>;
  })}
    </div>;
};
```