Convert Figma logo to code with AI

fullstorydev logogrpcui

An interactive web UI for gRPC, along the lines of postman

5,133
383
5,133
65

Top Related Projects

gRPC to JSON proxy generator following the gRPC HTTP spec

10,788

Like cURL, but for gRPC: Command-line tool for interacting with gRPC servers

4,254

Evans: more expressive universal gRPC client

The TypeScript implementation of Connect: Protobuf RPC that works.

gRPC for Web Clients

Quick Overview

gRPCui is an interactive web UI for gRPC, similar to Postman for REST APIs. It allows users to interact with gRPC services through a user-friendly interface, making it easier to explore and test gRPC APIs without writing code.

Pros

  • Provides a visual interface for interacting with gRPC services
  • Supports both unary and streaming gRPC methods
  • Automatically generates input forms based on protobuf definitions
  • Offers a standalone binary for easy deployment and usage

Cons

  • Requires access to the gRPC server's reflection service
  • May not support all advanced gRPC features or complex use cases
  • Limited customization options compared to writing custom gRPC clients
  • Potential security concerns when used in production environments

Code Examples

As gRPCui is primarily a standalone tool and not a code library, there are no code examples to provide. The tool is used through its web interface or command-line interface.

Getting Started

To get started with gRPCui:

  1. Download the latest release from the GitHub repository.
  2. Run the binary with the address of your gRPC server:
grpcui -plaintext localhost:8080
  1. Open the provided URL in your web browser (usually http://localhost:8080).
  2. Use the web interface to interact with your gRPC services.

For more advanced usage, refer to the project's documentation on GitHub.

Competitor Comparisons

gRPC to JSON proxy generator following the gRPC HTTP spec

Pros of grpc-gateway

  • Generates RESTful API endpoints from gRPC service definitions
  • Supports automatic OpenAPI (Swagger) documentation generation
  • Allows for seamless integration of gRPC services with existing REST ecosystems

Cons of grpc-gateway

  • Requires additional configuration and setup compared to grpcui
  • May introduce performance overhead due to protocol translation
  • Limited to HTTP/1.1 and doesn't support HTTP/2 streaming

Code Comparison

grpc-gateway:

service YourService {
  rpc GetUser(GetUserRequest) returns (User) {
    option (google.api.http) = {
      get: "/v1/users/{user_id}"
    };
  }
}

grpcui:

import "github.com/fullstorydev/grpcui/standalone"

handler := standalone.Handler(grpcServer)
http.ListenAndServe(":8080", handler)

grpc-gateway focuses on generating RESTful APIs from gRPC services, while grpcui provides an interactive web UI for exploring and testing gRPC services directly. grpc-gateway is better suited for projects requiring REST compatibility, while grpcui excels in development and debugging scenarios.

10,788

Like cURL, but for gRPC: Command-line tool for interacting with gRPC servers

Pros of grpcurl

  • Lightweight command-line tool, ideal for scripting and automation
  • Supports both binary and JSON formats for request/response data
  • Can be easily integrated into CI/CD pipelines

Cons of grpcurl

  • Lacks a graphical interface, which may be less intuitive for some users
  • Requires more manual input for complex gRPC operations
  • Limited visualization options for response data

Code Comparison

grpcurl:

grpcurl -plaintext -d '{"name": "World"}' localhost:50051 helloworld.Greeter/SayHello

grpcui:

grpcui -plaintext localhost:50051
# Opens a web interface for interacting with gRPC services

Key Differences

grpcurl is a command-line tool focused on simplicity and automation, while grpcui provides a web-based graphical interface for exploring and interacting with gRPC services. grpcurl is better suited for scripting and CI/CD integration, whereas grpcui offers a more user-friendly experience for manual testing and exploration of gRPC APIs.

Both tools serve different use cases and can be complementary in a developer's toolkit. grpcurl excels in quick, scriptable interactions, while grpcui shines in scenarios where visual exploration and ease of use are prioritized.

4,254

Evans: more expressive universal gRPC client

Pros of Evans

  • Offers both CLI and REPL modes, providing more flexibility in usage
  • Supports gRPC reflection, allowing interaction with servers without proto files
  • Provides auto-completion features for easier command input

Cons of Evans

  • Less user-friendly for those who prefer a graphical interface
  • May require more setup and configuration compared to grpcui
  • Limited built-in documentation and examples

Code Comparison

Evans:

evans -r -p 50051

grpcui:

grpcui -plaintext localhost:50051

Evans focuses on command-line interaction, while grpcui provides a web-based interface. Evans offers more advanced features for power users, such as REPL mode and reflection support. However, grpcui's graphical interface may be more intuitive for beginners or those who prefer visual interaction.

Evans is better suited for users comfortable with command-line tools and those who need to work with servers that support reflection. grpcui is ideal for users who prefer a point-and-click interface or need to quickly test gRPC services without extensive setup.

Both tools serve the purpose of interacting with gRPC services, but cater to different user preferences and use cases. The choice between them depends on the specific requirements of the project and the user's familiarity with command-line tools.

The TypeScript implementation of Connect: Protobuf RPC that works.

Pros of connect-es

  • Designed specifically for TypeScript and JavaScript, offering better integration with modern web development workflows
  • Supports both gRPC and REST APIs, providing more flexibility in communication protocols
  • Lightweight and optimized for browser environments, potentially offering better performance

Cons of connect-es

  • Less mature compared to grpcui, which may result in fewer community resources and potential stability issues
  • Focused on client-side implementations, while grpcui offers both client and server-side tooling
  • May have a steeper learning curve for developers not familiar with gRPC concepts

Code Comparison

grpcui example:

const client = new GrpcWebClientBase();
const request = new EchoRequest();
request.setMessage('Hello, World!');
client.rpcCall('/echo.Echo/Echo', request, {}, {}, (err, response) => {
  console.log(response.getMessage());
});

connect-es example:

import { createPromiseClient } from "@connectrpc/connect";
import { createGrpcWebTransport } from "@connectrpc/connect-web";
import { EchoService } from "./gen/echo_connectweb";

const transport = createGrpcWebTransport({ baseUrl: "https://example.com" });
const client = createPromiseClient(EchoService, transport);
const response = await client.echo({ message: "Hello, World!" });
console.log(response.message);

Both examples demonstrate basic client usage, but connect-es offers a more modern, Promise-based API and TypeScript support out of the box.

gRPC for Web Clients

Pros of grpc-web

  • Enables direct gRPC calls from web browsers to gRPC servers
  • Supports both unary and server streaming RPCs
  • Provides automatic code generation for client-side stubs

Cons of grpc-web

  • Requires a proxy or special server-side support for browser compatibility
  • Limited support for client streaming and bidirectional streaming
  • May have performance overhead due to protocol translation

Code Comparison

grpc-web client-side code:

const { HelloRequest } = require('./helloworld_pb.js');
const { GreeterClient } = require('./helloworld_grpc_web_pb.js');

const client = new GreeterClient('http://localhost:8080');
const request = new HelloRequest();
request.setName('World');

client.sayHello(request, {}, (err, response) => {
  console.log(response.getMessage());
});

grpcui doesn't have client-side code as it's a web-based UI for interacting with gRPC services. Instead, it provides a user interface for sending requests and viewing responses.

Key Differences

  • grpc-web is a library for building gRPC-web clients, while grpcui is a tool for exploring and testing gRPC services
  • grpc-web is integrated into application code, whereas grpcui is a standalone application
  • grpc-web requires code generation, while grpcui dynamically introspects services
  • grpc-web is suitable for production use in web applications, while grpcui is primarily for development and testing purposes

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

gRPC UI

Build Status Go Report Card

grpcui is a command-line tool that lets you interact with gRPC servers via a browser. It's sort of like Postman, but for gRPC APIs instead of REST.

In some ways, this is like an extension to grpcurl. Whereas grpcurl is a command-line interface, grpcui provides a web/browser-based GUI. This lets you interactively construct requests to send to a gRPC server.

With this tool you can also browse the schema for gRPC services, which is presented as a list of available endpoints. This is enabled either by querying a server that supports server reflection, by reading proto source files, or by loading in compiled "protoset" files (files that contain encoded file descriptor protos). In fact, the way the tool transforms JSON request data into a binary encoded protobuf is using that very same schema. So, if the server you interact with does not support reflection, you will either need the proto source files that define the service or need protoset files that grpcui can use.

This repo also provides two library packages

  1. github.com/fullstorydev/grpcui: This package contains the building blocks for embedding a gRPC web form into any Go HTTP server. It has functions for accessing the HTML form, the JavaScript code that powers it, as well as a sample CSS file, for styling the form.
  2. github.com/fullstorydev/grpcui/standalone: This package goes a step further and supplies a single, simple HTTP handler that provides the entire gRPC web UI. You can just wire this handler into your HTTP server to embed a gRPC web page that looks exactly like the one you see when you use the grpcui command-line program. This single handler uses the above package but also supplies the enclosing HTML page, some other script dependencies (jQuery and jQuery-UI), and additional CSS and image resources.

Features

grpcui supports all kinds of RPC methods, including streaming methods. However, it requires you to construct the entire stream of request messages all at once and then renders the entire resulting stream of response messages all at once (so you can't interact with bidirectional streams the way that grpcurl can).

grpcui supports both plain-text and TLS servers and has numerous options for TLS configuration. It also supports mutual TLS, where the client is required to present a client certificate.

As mentioned above, grpcui works seamlessly if the server supports the reflection service. If not, you can supply the .proto source files or you can supply protoset files (containing compiled descriptors, produced by protoc) to grpcui.

The web UI allows you to set request metadata in addition to defining the request message data. When defining request message data, it uses a dynamic HTML form that supports data entry for all possible kinds of protobuf messages, including rich support for well-known types (such as google.protobuf.Timestamp), one ofs, and maps.

In addition to entering the data via HTML form, you can also enter the data in JSON format, by typing or pasting the entire JSON request body into a text form.

Upon issuing an RPC, the web UI shows all gRPC response metadata, including both headers and trailers sent by the server. And, of course, it shows a human-comprehensible response body, in the form of an HTML table.

Installation

Homebrew (MacOS or Linux)

Install with homebrew:

brew install grpcui

From Source

You can use the go tool to install grpcui:

go install github.com/fullstorydev/grpcui/cmd/grpcui@latest

This installs the command into the bin sub-folder of wherever your $GOPATH environment variable points. If this directory is already in your $PATH, then you should be good to go.

If you have already pulled down this repo to a location that is not in your $GOPATH and want to build from the sources, you can cd into the repo and then run make install.

If you encounter compile errors, you could have out-dated versions of grpcui's dependencies. You can update the dependencies by running make updatedeps.

Running without install

go run ./cmd/grpcui/grpcui.go -plaintext localhost:9019

Usage

The usage doc for the tool explains the numerous options:

grpcui -help

Most of the flags control how the program connects to the gRPC server that to which requests will be sent. However, there is one flag that controls grpcui itself: the -port flag controls what port the HTTP server should use to expose the web UI. If no port is specified, an ephemeral port will be used (so likely a different port each time it is run, allocated by the operating system).

Web Form

When you run grpcui, it will show you a URL to put into a browser in order to access the web UI.

$ grpcui -plaintext localhost:12345
gRPC Web UI available at http://127.0.0.1:60551/...

When you navigate to this URL, you are presented with the user interface:

web UI screenshots

The top two listboxes allow you to select the service and method of the RPC to issue. Once a selection is made, the panel below will show a form that allows you to define an RPC request. The form is constructed, dynamically, based on the actual request message structure of the selected RPC.

You'll notice a second tab that lets you view (and edit) the raw JSON value for the request data. This can be useful to copy+paste a large request message, without having to point-and-click to define each field value, one at a time.

The third tab shows the response data. This tab is grayed out and disabled until you actually click the "Invoke" button, which can be found at the bottom of the page.

Request Form

The first thing to note about the form is that it will generally be a table, where each row is a field. The table has three important columns:

  1. The first column shows the name and type of the field.
  2. The second columns indicates the "cardinality" of the field. Typical fields are optional. The second column for optional fields is a checkbox indicating whether the field is present or not. If the field is not present, its default value is assumed. Repeated fields show buttons in this column for adding and deletig values. The green "+" allows you to add values to the repeated field. The red "x" next to a value will remove that value. Finally, if the field is required (only supported in syntax "proto2"), the column will contain only an asterisk.
  3. The third column shows the value of the field. If the field is absent, this will show the default value for the field. Fields that are nested messages show "unset", but scalar types show their default (usually the type's zero value, but default values are configurable when using syntax "proto2"). Absent fields are also not editable -- you must first check the box in column two to make the field present before editing its value. Repeated fields show a nested table that occupies columns two and three and allows for adding and removing values.

Fields whose type is a nested message will include a nested table in column three. This nested table has its own three columns and one row per field therein.

One-ofs are rendered a little differently. Instead of two columns indicating the presence and value of the field, they include a nested table showing all of the possible fields in the one-of. However, the middle column is a radio button instead of a checkbox, so that only one of the fields can be present at any given time. In addition to a row for each field in the one-of, there is also an option named None, which indicates a one-of where no value is set.

Here's an example form for a message that has two required fields (id and name), one repeated field (labels), a handful of normal optional fields, and a single one-of that has four options. In the first image, no values are present (except, of course, for the required fields at the top). In the second, several field values are present.

web UI message fields web UI message fields, with some values

For RPCs that accept a stream of requests, the web form allows the user to define multiple messages in the stream. It defaults to a single request, but the user can remove it to send none or can send many. A stream resembles a repeated field, but the repeated "thing" is the entire request:

web UI request stream

That last example also shows how well-known message types get special treatment. In that example, the request type is google.protobuf.StringValue. Instead of showing a form for a message with a single field named value with type string, the UI is simple and the "boxing" ceremony is elided. It instead just shows a simple textbox for entering the string value.

A more interesting example of how well-known message types are treated is google.protobuf.Timestamp, where a date picker is shown:

web UI request stream

Raw Request JSON

The second tab lets you view the JSON representation of the request data you have defined on the first tab. You can also directly edit the JSON data -- including pasting in an entire JSON message.

The JSON representation uses the standard JSON mapping for Protocol Buffers.

web UI request JSON

When working with an RPC that has a streaming request, the JSON data will be a JSON array, where each element is a single message in the stream.

Responses

When the "Invoke" button is pressed, the request data is sent to the server and the selected RPC method is invoked. The web form will then navigate to the third tab to show the server's response.

The response tab has three sections:

  1. Response Headers: Any response header metadata is shown here.
  2. Response Data: Any response messages are shown here as are any error messages. RPC methods with a streaming response may show both message data and an error. Error messages show the gRPC status code and the server-defined message text.
  3. Response Trailers: Finally, any response trailer metadata is shown.

web UI response

Each of these three sections is a table of data. Response messages are the most interesting, and their structure closely resembles how messages are structured on the "Request Form" tab. Fields that have nested messages will include a nested table.

Descriptor Sources

The grpcui tool can operate on a variety of sources for descriptors. The descriptors are required, in order for grpcui to understand the RPC schema, translate inputs into the protobuf binary format as well as translate responses from the binary format into text. The sections below document the supported sources and what command-line flags are needed to use them.

Server Reflection

Without any additional command-line flags, grpcui will try to use server reflection.

Examples for how to set up server reflection can be found here.

Proto Source Files

To use grpcui on servers that do not support reflection, you can use .proto source files.

In addition to using -proto flags to point grpcui at the relevant proto source file(s), you may also need to supply -import-path flags to tell grpcui the folders from which dependencies can be imported.

Just like when compiling with protoc, you do not need to provide an import path for the location of the standard protos included with protoc (which contain various "well-known types" with a package definition of google.protobuf). These files are "known" by grpcui as a snapshot of their descriptors is built into the grpcui binary.

Protoset Files

You can also use compiled protoset files with grpcui. Protoset files contain binary encoded google.protobuf.FileDescriptorSet protos. To create a protoset file, invoke protoc with the *.proto files that define the service:

protoc --proto_path=. \
    --descriptor_set_out=myservice.protoset \
    --include_imports \
    my/custom/server/service.proto

The --descriptor_set_out argument is what tells protoc to produce a protoset, and the --include_imports argument is necessary for the protoset to contain everything that grpcui needs to process and understand the schema.