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/
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) => (