# 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.