Using Bareun in a web browser (connect-web)

To call Bareun from a web browser, use connect-web. connect-web is the web (browser) client for Connect-RPC. It runs on top of standard fetch and calls the Bareun server directly, without a separate proxy. The Bareun server is implemented with connect-go, so it accepts browser requests as they are, and the server also handles CORS itself.

What do you use?

npm install @connectrpc/connect @connectrpc/connect-web @bufbuild/protobuf

How do you get the client code?

You do not need to go through a complicated build process yourself. There are two ways.

• Use the code included in the distribution (recommended): The Bareun distribution ships with TypeScript client code (messages + Connect service stubs) that you can use with connect-web right away. Copy it into your project and import it, and you can make calls without generating anything. (It includes LanguageService, CustomDictionaryService, RevisionService, and each message type.)
• Generate it yourself from the public proto: Bareun's .proto definitions are public, so you can also generate the code yourself to fit your environment. The .proto files are under shared/proto/ in the distribution, and you can build the stubs with buf and @bufbuild/protoc-gen-es.

# Install the connect-web code generation tools
npm install -D @bufbuild/buf @bufbuild/protoc-gen-es

# Generate TypeScript (messages + Connect services) from the public .proto
npx buf generate

Code sample

Pass the API key in the api-key request header. In connect-web, the cleanest way is to attach the header to every request with an interceptor.

import { createConnectTransport } from "@connectrpc/connect-web";
import { createClient } from "@connectrpc/connect";
import { LanguageService } from "./gen/bareun/language_service_pb";
import { EncodingType } from "./gen/bareun/language_service_pb";

// Interceptor that attaches the api-key header to every request
const withApiKey = (next) => async (req) => {
  req.header.set("api-key", "koba-XXXX-...");   // your own API key
  return await next(req);
};

// Transport layer to the Bareun server (fetch-based in the browser).
// Cloud: https://api.bareun.ai, on-premises install: http://localhost:5656
const transport = createConnectTransport({
  baseUrl: "https://api.bareun.ai",
  interceptors: [withApiKey],
});

const client = createClient(LanguageService, transport);

// Call AnalyzeSyntax
const res = await client.analyzeSyntax({
  document: { content: "오늘 날씨가 참 좋네요.", language: "ko_KR" },  // ("The weather is really nice today.")
  encodingType: EncodingType.UTF16,   // UTF-16 is recommended for the browser (JS)
  autoSpacing: true,
});

for (const sent of res.sentences) {
  console.log(sent.refined);          // sentence corrected for word spacing, etc.
  for (const tok of sent.tokens) {
    console.log(tok.tagged);          // morphemes/POS (e.g. 오늘/NNG+...)
  }
}

Where do you connect?

Frequently asked questions

Q. Do I need a proxy such as Envoy to use Bareun from a browser?

No. connect-web calls the Bareun server (connect-go) directly. The server handles connect-web requests and CORS itself, so no separate front proxy is needed.

Q. Where do I get the stubs?

protos/protoc.sh generates the TypeScript stubs into web/utility/src/gen/ with buf generate. @bufbuild/protoc-gen-es generates both the messages and the Connect services.

Q. How do I pass the API key?

Put the key that starts with koba- in the api-key request header. To attach it consistently to every call, we recommend handling it with a connect interceptor.