> For the complete documentation index, see [llms.txt](https://datasherlock.gitbook.io/datasherlock/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://datasherlock.gitbook.io/datasherlock/clients/javascript-sdk.md).

# JavaScript SDK

### Installing datasherlock <a href="#installing-datasherlock" id="installing-datasherlock"></a>

You can install datasherlock in your React project with

```bash
npm install datasherlock
```

### Using datasherlock-components in your project <a href="#using-datasherlock-components-in-your-project" id="using-datasherlock-components-in-your-project"></a>

You can import our `Sherlock` component in your React project, using the code below.

```javascript
import { useState } from "react";
import "./App.css";
import DatasherlockAgent from "datasherlock";
import "../datasherlock/dist/style.css";

function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyItems: "center",
        justifyContent: "center",
      }}
    >
      <div style={{ width: "100%" }}>
       <DatasherlockAgent
          agentId="YOUR_AGENT_ID"
          apiKey="YOUR_API_KEY"
          buttonText={"Ask Sherlock"}
          region={"ap-south-1"}
          debugMode={true}
          sqlOnly={false}
          theme="system"
          color="COLOR"
        />
      </div>
    </div>
  );
}

export default App;

```

### Properties <a href="#properties" id="properties"></a>

* `agentID` : Your Agent ID
* `apiKey` : Your Agent API Key
* `debugMode` : If this is true, the SQL query used to get the result will be shown. If it is false, only the data will be shown and the data will be hidden
* `sqlOnly` : If this is true, only the SQL query will be shown and the data will be hidden
* `loadingMessage` : This is the message that comes up while a user is waiting for the results to appear
* `color` : Select your preferred color from the options provided: red, blue, green, or orange. Leave the field empty for the default color.
* `theme` : Choose between a light or dark theme, or opt for the system theme.