# Deploy on the browser

The goal is to run the skill directly in the browser to achieve a conversational system

1. Type `npx webpack` in the terminal
2. You find the generated file in `dist`
3. Create an `index.html` file:

```markup
<script src="https://unpkg.com/newbot@latest/dist/newbot.min.js"></script>
<script src="path/dist/browser"></script>

<script>
const converse = new NewBot(MainSkill)
converse.exec('Hey', (output, done) => {
    console.log(output)
    done()
})
</script>
```

`MainSkill` is a global variable in the generated file.

> On browser, setting the user ID as the second parameter of the exec () method is optional

### With the native NLP

```markup
<script src="https://unpkg.com/newbot@latest/dist/newbot.with-nlp.min.js"></script>
<script src="skill.js"></script> <!-- you skill -->
<div>
    <input type="text" id="text">
    <button id="submit">Ok</button>
    <pre id="result"></pre>
</div>
<script>
    var converse = new NewBot(MainSkill, {
        model: '/model/model.nlp'
    })
    document.getElementById('submit').addEventListener('click', function() {
        var text = document.getElementById('text').value
        var result = document.getElementById('result')
        converse.exec(text, (output, done) => {
            result.innerText = JSON.stringify(output, null, 2)
            done()
        })
    })
</script>
```

1. Put the `newbot.with-nlp.min.js` file&#x20;
2. Set the path to `model.nlp`

#### NLP in other languages (other than English)

Please, follow this tutorial : [Web NLP](https://github.com/axa-group/nlp.js/blob/master/docs/v4/webandreact.md)

1. Install dependencies

`npm i newbot @nlpjs/lang-fr`

1. Use the `modelLangs` property

```javascript
import { NewBot } from 'newbot/bootstrap/browser-with-nlp'
import MainSkill from '<path to your skill>'
import { LangFr } from '@nlpjs/lang-fr'

const converse = new NewBot(MainSkill, {
    model: '/model/model.nlp',
    modelLangs: [LangFr]
})
```

### On-the-fly training

```javascript
import { NewBot } from 'newbot/bootstrap/browser-with-nlp'
import { train } from 'newbot/packages/train'
import { LangFr } from '@nlpjs/lang-fr'
import MainSkill from '<path to your skill>';

(async function() {
    const converse = new NewBot(MainSkill)
    // second parameter is optional if only english
    const model = await train(converse, [LangFr])
    await converse.setModelNlp(model, [LangFr])
    converse.exec('hey', (output, done) => {
        console.log(output)
        done()
    })
})()
```

> Use a bundler like webpack, parcel, rollup, etc. to read imports and generate a file

### Use the parser

If you want to test uncompiled code directly in the browser, integrate the `newbot.with-parser.min.js` file instead

```markup
<script src="https://unpkg.com/newbot@latest/dist/newbot.with-parser.min.js"></script>

<script>
const converse = new NewBot()

converse.code(`
    @Event('start')
    start() {
        > Hello World
    }
`)

converse.exec('Hey', (output, done) => {
    console.log(output)
    done()
})
</script>
```

> Beware, the `newbot.with-parser.min.js` file is much heavier than the`newbot.min.js` file. Prefer the latter if reading uncompiled code is not necessary.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.newbot.io/use-newbot-framework-js/deploy-on-the-browser.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.