@connectrpc/connect-web

Connect is a family of libraries for building and consuming APIs on different languages and platforms. @connectrpc/connect brings type-safe APIs with Protobuf to TypeScript.

@connectrpc/connect-web provides the following adapters for web browsers, and any other platform that has the fetch API on board:

createConnectTransport()

Lets your clients running in the web browser talk to a server with the Connect protocol:

1import { createClient } from "@connectrpc/connect";
2+ import { createConnectTransport } from "@connectrpc/connect-web";
3import { ElizaService } from "./gen/eliza_connect.js";
4
5+ // A transport for clients using the Connect protocol with fetch()
6+ const transport = createConnectTransport({
7+   baseUrl: "https://demo.connectrpc.com",
8+ });
9
10const client = createClient(ElizaService, transport);
11const { sentence } = await client.say({ sentence: "I feel happy." });
12console.log(sentence) // you said: I feel happy.

createGrpcWebTransport()

Lets your clients running in the web browser talk to a server with the gRPC-web protocol:

1import { createClient } from "@connectrpc/connect";
2+ import { createGrpcWebTransport } from "@connectrpc/connect-web";
3import { ElizaService } from "./gen/eliza_connect.js";
4
5+ // A transport for clients using the Connect protocol with fetch()
6+ const transport = createGrpcWebTransport({
7+   baseUrl: "https://demo.connectrpc.com",
8+ });
9
10const client = createClient(ElizaService, transport);
11const { sentence } = await client.say({ sentence: "I feel happy." });
12console.log(sentence) // you said: I feel happy.

Getting started

To get started with Connect, head over to the docs for a tutorial, or take a look at our example.

Connect plays nice with Vue, Svelte, Remix, Next.js, Angular and many others. Take a look at our examples for various frameworks.