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

Farah Diana Masri 35 Reputation points
2024-11-22T08:57:15.99+00:00

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.

Azure OpenAI Service
Azure OpenAI Service
An Azure service that provides access to OpenAI’s GPT-3 models with enterprise capabilities.
3,375 questions
{count} votes

Accepted answer
  1. Azar 23,650 Reputation points MVP
    2024-11-22T09:10:31.4433333+00:00

    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.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.