Skip to main content

Integrating AI APIs (OpenAI, Claude) into applications

nGK1wiXrSl6LB1xvj9VhSg.webp
To integrate AI APIs like OpenAI or Claude, you first need to obtain an API key and securely store it, then make HTTP requests to the respective API endpoints from your application's backend. The request should include your API key, headers, and a JSON body containing the model you want to use (e.g., gpt-3.5-turbo or claude-3-haiku-20240307), along with the user's prompt and other parameters like max_tokens. Finally, handle the API's response in your application to display the AI's output. 

1. Obtain and secure API keys 
  • Sign up for an account on the OpenAI or Anthropic platforms.
  • Generate an API key from your account's API key or credentials section.
  • Store the key securely using environment variables or a configuration file, rather than hardcoding it into your source code. 

2. Set up your application
  • Backend: Create a service or class to manage API interactions. This keeps your code organized.
  • Use SDKs or direct HTTP requests: You can use official libraries (like the openai library for Python) or make direct HTTP requests to the API endpoints.
  • Define endpoints: For a web application, create a new endpoint (e.g., a POST request) that will handle communication with the AI API. 
This video demonstrates how to integrate OpenAI and Claude APIs into a Rails app:

3. Make the API request 
  • Construct the request body: Format a JSON payload with the required parameters. Key parameters include:
    • model: The specific model you want to use (e.g., "claude-3-haiku-20240307").
    • messages (for OpenAI) or messages (for Claude): A list containing the conversation history, including the user's latest prompt with the role set to "user".
    • max_tokens: The maximum number of tokens to generate.
    • temperature: Controls the randomness of the output.
  • Send the request:
    • In Python with Flask/Django, use the openai library: openai.api_key = os.getenv("OPENAI_KEY").
    • In Swift, use URLSession or async/await to send the request to the API endpoint.
    • In the example below for Claude, you can see how to send a POST request with the appropriate headers and JSON data.
  • Include headers: Ensure your request includes necessary headers, such as x-api-key for the Claude API. 
This video demonstrates a developer workflow for integrating AI agents into a cloud IDE:

4. Process the response
  • The API will return a response, typically a JSON object containing the AI's generated text.
  • Extract the relevant content from the response.
  • Display the AI's output to the user in the appropriate part of your application, such as a chat window or a content block.
  • For a better user experience, consider implementing streaming responses for longer content generation, as shown in this Medium article. 
This video provides a tutorial on using the Responses API with AI agents:
Back to top