From 860845b121f215aff2d1b0d91357e41fa2db82ce Mon Sep 17 00:00:00 2001
From: Jarad DeLorenzo <jaradd@gmail.com>
Date: Fri, 3 Jan 2025 16:43:01 -0500
Subject: [PATCH 1/2] Add .env file import functionality and update README

- Implement .env file import feature in Sidebar component
- Add "Import" button next to Environment Variables section
- Update README with information on importing environment variables
- Improve layout of Environment Variables section in Sidebar
---
 README.md                         |  9 +++++
 client/src/components/Sidebar.tsx | 56 ++++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index b02f1b110..e28d7af21 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,15 @@ The inspector runs both a client UI (default port 5173) and an MCP proxy server
 CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector build/index.js
 ```
 
+### Environment Variables
+
+You can import environment variables from a .env file using the import button in the UI. The .env file should follow the standard format:
+
+```
+KEY1=value1
+KEY2=value2
+```
+
 For more details on ways to use the inspector, see the [Inspector section of the MCP docs site](https://modelcontextprotocol.io/docs/tools/inspector). For help with debugging, see the [Debugging guide](https://modelcontextprotocol.io/docs/tools/debugging).
 
 ### From this repository
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index c716bd2ce..5c8682584 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -112,18 +112,50 @@ const Sidebar = ({
           )}
           {transportType === "stdio" && (
             <div className="space-y-2">
-              <Button
-                variant="outline"
-                onClick={() => setShowEnvVars(!showEnvVars)}
-                className="flex items-center w-full"
-              >
-                {showEnvVars ? (
-                  <ChevronDown className="w-4 h-4 mr-2" />
-                ) : (
-                  <ChevronRight className="w-4 h-4 mr-2" />
-                )}
-                Environment Variables
-              </Button>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowEnvVars(!showEnvVars)}
+                  className="flex items-center flex-1"
+                >
+                  {showEnvVars ? (
+                    <ChevronDown className="w-4 h-4 mr-2" />
+                  ) : (
+                    <ChevronRight className="w-4 h-4 mr-2" />
+                  )}
+                  Environment Variables
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={async () => {
+                    const input = document.createElement('input');
+                    input.type = 'file';
+                    input.accept = '.env';
+                    input.onchange = async (e) => {
+                      const file = (e.target as HTMLInputElement).files?.[0];
+                      if (file) {
+                        try {
+                          const text = await file.text();
+                          const newEnv = text.split('\n').reduce((acc, line) => {
+                            const [key, value] = line.split('=');
+                            if (key && value) {
+                              acc[key.trim()] = value.trim();
+                            }
+                            return acc;
+                          }, {} as Record<string, string>);
+                          setEnv(newEnv);
+                        } catch (error) {
+                          console.error('Error importing .env file:', error);
+                        }
+                      }
+                    };
+                    input.click();
+                  }}
+                  title="Import .env file"
+                >
+                  Import
+                </Button>
+              </div>
               {showEnvVars && (
                 <div className="space-y-2">
                   {Object.entries(env).map(([key, value], idx) => (

From 7e2118793f65da8a9fd0f61b770f2225aac70c9f Mon Sep 17 00:00:00 2001
From: Jarad DeLorenzo <jaradd@gmail.com>
Date: Fri, 3 Jan 2025 16:45:45 -0500
Subject: [PATCH 2/2] Update .gitignore to exclude additional files

- Add .git-commit-message-generator-config.json to ignored files
- Add .vscode/ directory to ignored files

Update .gitignore to exclude VSCode config and commit message generator
---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 0f4928e80..872c0ac02 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@ server/build
 client/dist
 client/tsconfig.app.tsbuildinfo
 client/tsconfig.node.tsbuildinfo
+.git-commit-message-generator-config.json
+.vscode/