integrating api with ui

Author: jonahjung22

packages/jupyter-ai/src/components/chat-settings.tsx

@@ -8,7 +8,7 @@ import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { IJaiCompletionProvider } from '../tokens';
 import { ModelIdInput } from './settings/model-id-input';
-// import { ModelParametersInput } from './settings/model-parameters-input';
+import { ModelParametersInput } from './settings/model-parameters-input';
 import { SecretsSection } from './settings/secrets-section';
 
 type ChatSettingsProps = {
@@ -22,6 +22,7 @@ type ChatSettingsProps = {
  */
 export function ChatSettings(props: ChatSettingsProps): JSX.Element {
   const [completionModel, setCompletionModel] = useState<string | null>(null);
+  const [chatModel, setChatModel] = useState<string | null>(null);
   const [isCompleterEnabled, setIsCompleterEnabled] = useState(
     props.completionProvider && props.completionProvider.isEnabled()
   );
@@ -60,6 +61,7 @@ export function ChatSettings(props: ChatSettingsProps): JSX.Element {
         modality="chat"
         label="Chat model ID"
         placeholder="e.g. 'anthropic/claude-3-5-haiku-latest'"
+        onModelIdFetch={(modelId) => setChatModel(modelId)}
       />
 
       {/* SECTION: Embedding model */}
@@ -89,9 +91,9 @@ export function ChatSettings(props: ChatSettingsProps): JSX.Element {
       />
 
       {/* Model parameters section */}
-      {/* <h2 className="jp-ai-ChatSettings-header">Model parameters</h2>
+      <h2 className="jp-ai-ChatSettings-header">Model parameters</h2>
       <p>Configure additional parameters for the language model.</p>
-      <ModelParametersInput /> */}
+      <ModelParametersInput modelId={chatModel} />
 
       {/* SECTION: Secrets (and API keys) */}
       <h2 className="jp-ai-ChatSettings-header">Secrets and API keys</h2>

packages/jupyter-ai/src/components/settings/model-id-input.tsx

@@ -49,6 +49,7 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
   const [prevModel, setPrevModel] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [updating, setUpdating] = useState(false);
+  const [modelParameters, setModelParameters] = useState<any>(null);
 
   const [input, setInput] = useState('');
   const alert = useStackingAlert();
@@ -91,6 +92,16 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
     loadData();
   }, []);
 
+  const fetchModelParameters = async (modelId: string) => {
+    try {
+      const parameters = await AiService.getModelParameters(modelId);
+      setModelParameters(parameters);
+    } catch (error) {
+      console.error('Failed to fetch model parameters:', error);
+      setModelParameters(null);
+    }
+  };
+
   const handleUpdateChatModel = async () => {
     setUpdating(true);
     try {
@@ -140,6 +151,12 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
           // ID by accident.
           if (newValue !== null && !newValue.includes(' ')) {
             setInput(newValue);
+            // Fetch parameters when user types a model ID
+            if (newValue.trim()) {
+              fetchModelParameters(newValue.trim());
+            } else {
+              setModelParameters(null);
+            }
           }
         }}
         renderInput={params => (
@@ -162,6 +179,15 @@ export function ModelIdInput(props: ModelIdInputProps): JSX.Element {
           ? `Updating ${props.modality} model...`
           : `Update ${props.modality} model`}
       </Button>
+
+      {/* Display model parameters */}
+      {modelParameters && (
+        <div>
+          <strong>Parameters:</strong>{' '}
+          {JSON.stringify(modelParameters, null, 2)}
+        </div>
+      )}
+
       {alert.jsx}
     </Box>
   );

packages/jupyter-ai/src/components/settings/model-parameters-input.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { Button, TextField, Box, Alert, IconButton } from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { Box, Button, TextField, Alert, IconButton } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import { AiService } from '../../handler';
 
 interface ModelParameter {
   id: string;
@@ -16,17 +17,36 @@ interface StaticParameterDef {
   label: string;
 }
 
-// Add some common fields as static parameters here
-const STATIC_PARAMETERS: StaticParameterDef[] = [
-  { name: 'temperature', type: 'float', label: 'Temperature' },
-  { name: 'api_url', type: 'string', label: 'API URL' },
-  { name: 'max_tokens', type: 'integer', label: 'Max Tokens' }
-];
+export type ModelParametersInputProps = {
+  modelId?: string | null;
+};
 
-export function ModelParametersInput(): JSX.Element {
+export function ModelParametersInput(
+  props: ModelParametersInputProps
+): JSX.Element {
+  const [availableParameters, setAvailableParameters] = useState<any>(null);
   const [parameters, setParameters] = useState<ModelParameter[]>([]);
   const [validationError, setValidationError] = useState<string>('');
 
+  useEffect(() => {
+    async function fetchAvailableParameters() {
+      if (!props.modelId) {
+        setAvailableParameters(null);
+        return;
+      }
+
+      try {
+        const response = await AiService.getModelParameters(props.modelId);
+        setAvailableParameters(response);
+      } catch (error) {
+        console.error('Failed to fetch available parameters:', error);
+        setAvailableParameters(null);
+      }
+    }
+
+    fetchAvailableParameters();
+  }, [props.modelId]);
+
   const handleAddParameter = () => {
     const newParameter: ModelParameter = {
       id: Date.now().toString(),
@@ -108,33 +128,42 @@ export function ModelParametersInput(): JSX.Element {
   };
 
   const showSaveButton = parameters.length > 0;
-  const availableStaticParams = STATIC_PARAMETERS.filter(
-    staticParam =>
-      !parameters.some(
-        param => param.name === staticParam.name && param.isStatic
+
+  // Get available parameters from API that haven't been added yet
+  const availableApiParams = availableParameters?.parameters
+    ? Object.entries(availableParameters.parameters).filter(
+        ([paramName]) =>
+          !parameters.some(param => param.name === paramName && param.isStatic)
       )
-  );
+    : [];
 
   return (
     <Box>
       <Button variant="outlined" onClick={handleAddParameter} sx={{ mb: 2 }}>
         Add a custom model parameter
       </Button>
-      {/* Static parameter buttons */}
-      {availableStaticParams.length > 0 && (
+      {/* Available parameters from API */}
+      {availableApiParams.length > 0 && (
         <Box sx={{ mb: 2 }}>
           <Box sx={{ mb: 1, fontWeight: 'medium', fontSize: '0.875rem' }}>
-            Common parameters:
+            Available parameters for {props.modelId}:
           </Box>
           <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }}>
-            {availableStaticParams.map(staticParam => (
+            {availableApiParams.map(([paramName, schema]: [string, any]) => (
               <Button
-                key={staticParam.name}
+                key={paramName}
                 variant="outlined"
                 size="small"
-                onClick={() => handleAddStaticParameter(staticParam)}
+                onClick={() =>
+                  handleAddStaticParameter({
+                    name: paramName,
+                    type: schema.type,
+                    label: paramName
+                  })
+                }
+                title={schema.description}
               >
-                {staticParam.label}
+                {paramName} ({schema.type})
               </Button>
             ))}
           </Box>

packages/jupyter-ai/src/handler.ts

@@ -219,4 +219,16 @@ export namespace AiService {
       completions_model_provider_id: modelId
     });
   }
+
+  export async function getModelParameters(
+    modelId?: string,
+    provider?: string
+  ): Promise<any> {
+    const params = new URLSearchParams();
+    if (modelId) params.append('model', modelId);
+    if (provider) params.append('provider', provider);
+    
+    const endpoint = `model-parameters${params.toString() ? `?${params.toString()}` : ''}`;
+    return await requestAPI(endpoint);
+  }
 }