diff --git a/vscode-extension/media/ApiKeys.md b/vscode-extension/media/ApiKeys.md new file mode 100644 index 000000000..495f58827 --- /dev/null +++ b/vscode-extension/media/ApiKeys.md @@ -0,0 +1,7 @@ +## Set API Keys + +Open the Command Palette (CMD+Shift+P) and run the command `AIConfig: Set API Keys` + +This step is needed to access generative AI models via model provider API keys, endpoints, tokens (e.g OpenAI API Key). Read more [here](https://aiconfig.lastmileai.dev/docs/getting-started#setup-your-api-keys) + +![alt](apiKeys.png) diff --git a/vscode-extension/media/CreateAIConfig.md b/vscode-extension/media/CreateAIConfig.md new file mode 100644 index 000000000..2d5699451 --- /dev/null +++ b/vscode-extension/media/CreateAIConfig.md @@ -0,0 +1,5 @@ +## Create New AIConfig + +Open the Command Palette (CMD+Shift+P) and run the command `AIConfig: Create New` + +![alt](create.png) diff --git a/vscode-extension/media/Initialize.png b/vscode-extension/media/Initialize.png new file mode 100644 index 000000000..672fae54a Binary files /dev/null and b/vscode-extension/media/Initialize.png differ diff --git a/vscode-extension/media/InitializeAiConfig.mp4 b/vscode-extension/media/InitializeAiConfig.mp4 new file mode 100644 index 000000000..62cf5273e Binary files /dev/null and b/vscode-extension/media/InitializeAiConfig.mp4 differ diff --git a/vscode-extension/media/InitializeDark.png b/vscode-extension/media/InitializeDark.png new file mode 100644 index 000000000..1539fa9f7 Binary files /dev/null and b/vscode-extension/media/InitializeDark.png differ diff --git a/vscode-extension/media/InitializeExtension.md b/vscode-extension/media/InitializeExtension.md new file mode 100644 index 000000000..32353b0c8 --- /dev/null +++ b/vscode-extension/media/InitializeExtension.md @@ -0,0 +1,5 @@ +## Initialize Extension + +Open the Command Palette (CMD+Shift+P) and run the command `AIConfig: Initialize` + +![alt](Initialize.png) diff --git a/vscode-extension/media/InitializeLight.png b/vscode-extension/media/InitializeLight.png new file mode 100644 index 000000000..5bdcdcc95 Binary files /dev/null and b/vscode-extension/media/InitializeLight.png differ diff --git a/vscode-extension/media/apiKeys.png b/vscode-extension/media/apiKeys.png new file mode 100644 index 000000000..d335bf684 Binary files /dev/null and b/vscode-extension/media/apiKeys.png differ diff --git a/vscode-extension/media/apiKeyslight.png b/vscode-extension/media/apiKeyslight.png new file mode 100644 index 000000000..b1543f5e1 Binary files /dev/null and b/vscode-extension/media/apiKeyslight.png differ diff --git a/vscode-extension/media/create.png b/vscode-extension/media/create.png new file mode 100644 index 000000000..37191d2bf Binary files /dev/null and b/vscode-extension/media/create.png differ diff --git a/vscode-extension/media/more.md b/vscode-extension/media/more.md new file mode 100644 index 000000000..e1ff6afa4 --- /dev/null +++ b/vscode-extension/media/more.md @@ -0,0 +1,10 @@ +## Find out more! + +Explore all the features of AIConfig Editor by looking for “AIConfig” in the Command Palette (CMD+Shift+P). + +Learn more about building with generative AI models with AIConfig:\ +[Docs](https://aiconfig.lastmileai.dev/)\ +[Cookbooks](https://github.com/lastmile-ai/aiconfig/tree/main/cookbooks)\ +[Discord](https://discord.com/invite/xBhNKTetGx) + +![alt](more.png) diff --git a/vscode-extension/media/more.png b/vscode-extension/media/more.png new file mode 100644 index 000000000..d75bdb057 Binary files /dev/null and b/vscode-extension/media/more.png differ diff --git a/vscode-extension/media/welcomePage.md b/vscode-extension/media/welcomePage.md deleted file mode 100644 index 01eb23362..000000000 --- a/vscode-extension/media/welcomePage.md +++ /dev/null @@ -1,74 +0,0 @@ -# Welcome to AIConfig Editor! - -AIConfig Editor is a tool that allows you to **create, edit, and manage AIConfig files**. This acts as an open-source playground that supports local and remote models from OpenAI, Anthropic, Meta, Google, HuggingFace, Anyscale, and more. -**Tip:** To learn more about AIConfigs and why they're useful, check out the FAQ section at the bottom of this page. - -![Playing around with the editor](https://s3.amazonaws.com/lastmileai.aiconfig.public/playing_around_with_editor.png) - -## Commands - -Get started by trying out some of these commands! Press ("CMD" + "SHIFT" + P) to open the command palette and type in "AIConfig": - - - - -- `AIConfig: Create New` -> Creates a new file (in JSON or YAML format) -- `AIConfig: Share (get permalink)` -> Creates a link to read-only state of your AIConfig file. Use this to share with others :D -- `AIConfig: Welcome` -> Opens this window that you can refer to again! - -You can also open existing files that end in ".aiconfig.json" or ".aiconfig.yaml" (note that there are two periods in the filename!). -Example: "my_cool_file.aiconfig.json" - -## API Keys - -Some models require API keys in order to run them. If you want to run any of the models below, please create a ".env" file in the root of your project and add the following keys: - -- [GOOGLE_API_KEY](https://ai.google.dev/tutorials/setup)\=your_key_here - - Used for Gemini -- [OPENAI_API_KEY](https://platform.openai.com/api-keys)\=your_key_here - - Used for OpenAI models like ChatGPT and Dall-E -- [HUGGING_FACE_API_TOKEN](https://huggingface.co/settings/tokens)\=your_token_here - - Used for any models [hosted on Hugging Face](https://huggingface.co/models) - -For example, your .env file should look similar to this: ![Example .env file](https://s3.amazonaws.com/lastmileai.aiconfig.public/api_key_example.png) - -# FAQ / Troubleshooting - -Whenever you encounter errors, they should show up in the Output channel. Access it by following these steps: - -1. Press keys "CMD" + "Shift" + P -2. Type and enter "Output: Show Output Channels" -3. Type and enter "AIConfig" - -**Q: I'm seeing a blank page when I run "AIConfig: Create New"** -A: This likely means either: - -1. Missing or outdated python modules - - Make sure you're on version >= 0.0.6 for AIConfig Editor extension - - Type `pip3 list | grep aiconfig` in terminal and make sure you have `python-aiconfig` >= 1.1.22. If it's not on >=1.1.22, run `pip3 install python-aiconfig --force-reinstall` - - Check the output channel for more info (see instructions at beginning of "FAQ / Troubleshooting") -2. You are running AIConfig Editor with the wrong Python interpreter - - Make sure you have Python >=3.10 installed - - After you try to create a new file, and viewing blank screen, open command palette ("CMD" + "SHIFT" + P) and run the command `AIConfig: Initialize Extension` to ensure everything is properly configured - -**Q: Got this error: "Failed to start aiconfig server. You can view the aiconfig but cannot modify it."** -A: This can happen when trying to open a config file. You can usually fix this by: - -1. Re-opening the file - - If you still see this error but the file opens and works, you can ignore this for now -2. Running the steps to make sure your Python pacakges are properly initialized and up-to-date - - Follow instructions for "I'm seeing a blank page" issue from above - -**Q: What is AIConfig?** -A: AIConfig files are files in JSON or YAML format where you can define the structure of generative AI workflows. Each AIConfig file contains a set of prompts which define what AI model to use and what data (ex: input settings, prompt parameters) to pass into the model when calling it. It also contains the output for that call if it exists. AIConfigs are pretty gnarley because they let you: - -1. Use any model - - OpenAI: ChatGPT and Dall-E - - Google: Gemini - - Anthropic: Claude - - HuggingFace: Text-to-Image, Image-to-Text, Automatic Speech Recognition, Text-to-Speech, etc. - - and many more! -2. Chain prompts together - - You can use the output of one prompt as the input to another -3. Decouple AI configuration from application code - - Normally if you want to use AI model APIs in code, you need to call into them directly. But with AIConfig, that's all handled for you, so you only need to use [2 lines in your application code](https://aiconfig.lastmileai.dev/docs/gradio-workbook#build-apps-inspired-by-spaces) to get the results you need diff --git a/vscode-extension/package.json b/vscode-extension/package.json index 950863866..a5b0e6912 100644 --- a/vscode-extension/package.json +++ b/vscode-extension/package.json @@ -105,50 +105,42 @@ "walkthroughs": [ { "id": "vscode-aiconfig.welcomeWalkthrough", - "title": "Getting Started with AIConfig Editor", - "description": "Get started with some basic commands!", + "title": "AIConfig Editor Getting Started", + "description": "Your first steps to using AIConfig Editor - the generative AI studio for VS Code!", "steps": [ { - "id": "selectInterpreter", - "title": "Select your Python Interpreter", - "description": "This defines the Python environment that you will use in your VS Code session. It keeps track of which modules you've installed", + "id": "InitializeExtension", + "title": "Initialize Extension", + "description": "Open the Command Palette (CMD+Shift+P) and run the command `AIConfig: Initialize Extension`", "media": { - "markdown": "media/welcomePage.md" + "markdown": "media/InitializeExtension.md" } }, { - "id": "installDependencies", - "title": "Install dependencies", - "description": "This installs the Python libraries required to use the AIConfig editor and SDK", + "id": "ApiKeys", + "title": "Set API Keys", + "description": "This step is needed to access generative AI models via model provider API keys, endpoints, tokens (e.g OpenAI API Key)", "media": { - "markdown": "media/welcomePage.md" + "markdown": "media/ApiKeys.md" } }, { - "id": "setupEnvironmentVariables", - "title": "Setup Environment Variables", - "description": "This creates an .env file (or uses it if it already exists) to define environment varialbes needed to run AI models. Ex: OpenAI models read from the `OPENAI_API_KEY` variable\n[Setup Environment Variables](command:vscode-aiconfig.setupEnvironmentVariables)", + "id": "CreateAIConfig", + "title": "Create your first AIConfig", + "description": "Open the Command Palette (CMD+Shift+P) and run the command `AIConfig: Create New (JSON)` or `AIConfig: Create New (YAML)`", "media": { - "markdown": "media/welcomePage.md" + "markdown": "media/CreateAIConfig.md" }, "completionEvents": [ "onCommand:vscode-aiconfig.setupEnvironmentVariables" ] }, { - "id": "createAIConfig", - "title": "Create your first AIConfig", - "description": "You can do this either in JSON or YAML format. This file defines the AI models and workflow you want to use in your project.\n[Create .aiconfig.yaml](command:vscode-aiconfig.createAIConfigYAML)\nIf you prefer JSON:\n[Create .aiconfig.json](command:vscode-aiconfig.createAIConfigJSON)", - "media": { - "markdown": "media/welcomePage.md" - } - }, - { - "id": "showWelcome", - "title": "[Optional] Read full tutorial", - "description": "Read the full tutorial on the [Welcome page](command:vscode-aiconfig.showWelcome) to learn about all the things you can do with AIConfig!", + "id": "more", + "title": "Find out more", + "description": "Explore all the features of AIConfig Editor by looking for “AIConfig” in the Command Palette (CMD+Shift+P)", "media": { - "markdown": "media/welcomePage.md" + "markdown": "media/more.md" } } ]