Introduction


### 1. Install

Click the Install button on our [Website](https://codesnippets.ai/) to install.

<Image
  src="/assets/images/posts/installation/click-install.png"
  width={1200}
  height={1000}
  alt="click-install"
/>

### 2. Create Account

[Create a Free account or subscribe to a plan](https://codesnippets.ai/pricing).

### 3. Sign In

Sign in to the Desktop application.

<Image
  src="/assets/images/posts/installation/sign-in.png"
  width={1200}
  height={1000}
  alt="sign-in"
/>

### 4. Get API Key

Get your OpenRouter key from [API Keys](https://openrouter.ai/).

<Image
  src="/assets/images/posts/installation/create-api-key.png"
  width={800}
  height={500}
  alt="create-api-key"
/>

### 5. Insert API Key

Paste your Open Router API key into the API Keys page.

<Image
  src="/assets/images/posts/installation/insert-key.png"
  width={1200}
  height={1000}
  alt="insert-key"
/>

> Ensure you have selected the Default AI model to use for snippets. Without this, snippet AI features will not work properly.

<Image
  src="/assets/images/posts/installation/select-model.png"
  width={1200}
  height={1000}
  alt="select-model"
/>

### 6. Start Chatting

Navigate to the Chat Screen, and start chatting!

<Image
  src="/assets/images/posts/installation/start-chatting.png"
  width={1200}
  height={1000}
  alt="start-chatting"
/>


A quick tutorial on how to install the Code Snippets AI VSCode Extension

Installation


### Why use snippets?

> Time-Saver: They reduce repetitive coding, letting you tackle tougher problems.

> Error Reduction: Snippets help avoid syntax errors, keeping your code clean.

> Consistency: They keep your coding style uniform across projects.

Coding snippets boost your efficiency. They streamline your workflow, no matter your skill level.

They're key for managing code well.

Using snippets will make you more productive and improve your coding.

### Creating and Customizing Snippets

Creating and customizing snippets is easier than you might think. Here’s a quick guide to get you started on making your own.

#### 1. Open the User Snippets Interface

In the Code Snippets Desktop app, find the Snippets section.
This is where you’ll manage your snippets.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/snippets-library.png"
  width={1200}
  height={1000}
  alt="Snippets Library"
/>

#### 2. Create Snippet

Click the "Create Snippet" button.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/create-snippet.png"
  width={1200}
  height={1000}
  alt="create snippet"
/>

#### 3. Enter a name for your snippet

This can be anything! Try using the function, or usage of the snippet here.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/name-snippet.png"
  width={1200}
  height={1000}
  alt="name snippet"
/>

#### 4. Select the Language

Choose which programming language your snippet will be in.
This helps the editor apply the right syntax highlighting.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/select-language.png"
  width={1200}
  height={1000}
  alt="select-language"
/>

#### 5. Define the Snippet Folder

Select the folder to save the snippet in, or create a new folder.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/select-folder.png"
  width={1200}
  height={1000}
  alt="select-folder"
/>

#### 6. Insert Snippet Content

Insert or paste the Code Snippet content and click Save!

<Image
  src="/assets/images/posts/guide-to-coding-snippets/enter-content.png"
  width={1200}
  height={1000}
  alt="enter-content"
/>

#### 7. Generate Context

Your chosen AI model will generate context for you in the 'Additional Context' Section.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/generate-context.png"
  width={1200}
  height={1000}
  alt="generate-context"
/>

#### 8. Expand Context

This additional context can be further edited by you, or your team, for extra readability.

<Image
  src="/assets/images/posts/guide-to-coding-snippets/inspect-context.png"
  width={998}
  height={1000}
  alt="inspect-context"
/>

Customization is where snippets really shine. Tailor them to fit your specific needs. Adjust the content to handle different scenarios or add extra context for clarity.

> For a deeper understanding of how code snippets can improve your workflow, explore our [comprehensive guide on code snippets](https://codesnippets.ai/blog/latest/understanding-code-snippets), which provides valuable insights for both beginners and experienced developers.

By creating and customizing snippets, you’ll save time and make your coding process more efficient. Enjoy the benefits of having your own set of tailored coding shortcuts.


A quick tutorial on how to use the Code Snippets AI Desktop Apps

How to use the desktop apps

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = {
    a: "a",
    blockquote: "blockquote",
    h3: "h3",
    p: "p",
    span: "span",
    ...props.components
  }, {Image} = _components;
  if (!Image) _missingMdxReference("Image", true);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.h3, {
      id: "1-install",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#1-install",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "1. Install"]
    }), "\n", _jsxs(_components.p, {
      children: ["Click the Install button on our ", _jsx(_components.a, {
        href: "https://codesnippets.ai/",
        children: "Website"
      }), " to install."]
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/installation/click-install.png",
      width: 1200,
      height: 1000,
      alt: "click-install"
    }), "\n", _jsxs(_components.h3, {
      id: "2-create-account",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#2-create-account",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "2. Create Account"]
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "https://codesnippets.ai/pricing",
        children: "Create a Free account or subscribe to a plan"
      }), "."]
    }), "\n", _jsxs(_components.h3, {
      id: "3-sign-in",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#3-sign-in",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "3. Sign In"]
    }), "\n", _jsx(_components.p, {
      children: "Sign in to the Desktop application."
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/installation/sign-in.png",
      width: 1200,
      height: 1000,
      alt: "sign-in"
    }), "\n", _jsxs(_components.h3, {
      id: "4-get-api-key",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#4-get-api-key",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "4. Get API Key"]
    }), "\n", _jsxs(_components.p, {
      children: ["Get your OpenRouter key from ", _jsx(_components.a, {
        href: "https://openrouter.ai/",
        children: "API Keys"
      }), "."]
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/installation/create-api-key.png",
      width: 800,
      height: 500,
      alt: "create-api-key"
    }), "\n", _jsxs(_components.h3, {
      id: "5-insert-api-key",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#5-insert-api-key",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "5. Insert API Key"]
    }), "\n", _jsx(_components.p, {
      children: "Paste your Open Router API key into the API Keys page."
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/installation/insert-key.png",
      width: 1200,
      height: 1000,
      alt: "insert-key"
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Ensure you have selected the Default AI model to use for snippets. Without this, snippet AI features will not work properly."
      }), "\n"]
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/installation/select-model.png",
      width: 1200,
      height: 1000,
      alt: "select-model"
    }), "\n", _jsxs(_components.h3, {
      id: "6-start-chatting",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#6-start-chatting",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "6. Start Chatting"]
    }), "\n", _jsx(_components.p, {
      children: "Navigate to the Chat Screen, and start chatting!"
    }), "\n", _jsx(Image, {
      src: "/assets/images/posts/installation/start-chatting.png",
      width: 1200,
      height: 1000,
      alt: "start-chatting"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Category

Installation

A quick tutorial on how to install the Code Snippets AI VSCode Extension

1. Install

2. Create Account

4. Get API Key

5. Insert API Key

6. Start Chatting

Table of Contents