Integrate SiliconFlow API using JavaScript

Offical Doc:
https://docs.siliconflow.cn/cn/api-reference/chat-completions/chat-completions

1. Get API Key

https://cloud.siliconflow.cn/account/ak

Create and copy your API key

API key looks like sk-XXXXXXXXX.

2. Use tools to test API interfaces

Use Plugin Thunder Client in VS Code.

The URL is https://api.siliconflow.cn/v1/chat/completions.
Select POST as the request method.
Add in Headers:
Key: Authorization,
Value: Bearer sk-XXXXXXXXX.

Add Body Content

{
  "model": "deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B",
  "stream": false,
  "max_tokens": 512,
  "temperature": 0.7,
  "top_p": 0.7,
  "top_k": 50,
  "frequency_penalty": 0.5,
  "n": 1,
  "stop": [],
  "messages": [
    {
      "role": "user",
      "content": "What is your Model?"
    }
  ]
}

Click Send Button.

3. Use JavaScript

3.1 Fetch API

const url = 'https://api.siliconflow.cn/v1/chat/completions';
const data = {
    "model": "deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B",
    "stream": false,
    "max_tokens": 512,
    "temperature": 0.7,
    "top_p": 0.7,
    "top_k": 50,
    "frequency_penalty": 0.5,
    "n": 1,
    "stop": [],
    "messages": [
        {
            "role": "user",
            "content": "What is your Model?"
        }
    ]
};

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer sk-XXXXXXXXX'
    },
    body: JSON.stringify(data)
})
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

3.2 Axios lib

import axios from 'axios';

axios.post('https://api.siliconflow.cn/v1/chat/completions',
    // Body
    {
        "model": "deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B",
        "stream": false,
        "max_tokens": 512,
        "temperature": 0.7,
        "top_p": 0.7,
        "top_k": 50,
        "frequency_penalty": 0.5,
        "n": 1,
        "stop": [],
        "messages": [
            {
                "role": "user",
                "content": "What is your Model?"
            }
        ]
    },
    // Headers
    {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer sk-XXXXXXXXX',
        }
    }
)
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error(error);
    });

You can use response.data['choices'][0]['message']['content'] get content.

4. React Simple Example