Deploy the prompt flow in Azure AI Studio to our own Mobile Application

Question

Hi, I already successfully deploy my prompt flow in Azure AI Studio and the next step is I need to connect it with my own mobile application. I want to seek advice on what is the next step I need to do after the deployment? How to properly connect those deployments with our mobile application? I am using React Native environment in Visual Studio Code? Thanks for the assistance.

Answer 1

Hi there Farah Diana Masri

Thanks for using QandA platform

Firstly you should have an endpoint URL and API key for the service.

In your React Native project, you'll make HTTP requests to the Azure API using libraries, First, install axios - if you are using it.

then create a service to call azure endpoimy like this

import axios from 'axios';

 const endpoint = "https://your-endpoint.azure.com";
const apiKey = "your-api-key";

const callAzurePromptFlow = async (inputText) => {
  try {
    const response = await axios.post(
      `${endpoint}/promptFlowEndpoint`,  // Use your deployed model's endpoint
      {
        prompt: inputText,  // Pass the input text you want to process
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`,  // Use your API key for authentication
        },
      }
    );
    return response.data;
  } catch (error) {
    console.error("Error calling Azure API:", error);
    throw error;
  }
};

export default callAzurePromptFlow;

Now, in your React Native components, you can use this service to send prompts to Azure and get responses.

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';
import callAzurePromptFlow from './azureApi';
const ChatScreen = () => {
  const [inputText, setInputText] = useState('');
  const [response, setResponse] = useState('');
  const handleSubmit = async () => {
    try {
      const result = await callAzurePromptFlow(inputText);
      setResponse(result);  // Display the response from Azure
    } catch (error) {
      setResponse("Error in response");
    }
  };
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Type your prompt"
        value={inputText}
        onChangeText={setInputText}
      />
      <Button title="Submit" onPress={handleSubmit} />
      <Text style={styles.response}>Response: {JSON.stringify(response)}</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingLeft: 8,
  },
  response: {
    marginTop: 20,
    fontSize: 16,
    color: 'blue',
  },
});
export default ChatScreen;

If this helps kindly accept the answer thanks much.