Generating a chatbot client with TypeSpec TypeScript client emitter

Overview | Getting started | Usage | More Resources

Overview

TypeSpec is a tool to describe your data up front and generate schemas, API specifications, client / server code, docs, and more. This sample shows how to create and use an emitted client

Getting started

To get started fork and install the package with your favorite package manager. For example

pnpm i

The package also has a local Azure Function. To start the api

cd chatbot-api && npm i && func start

You will need to meet these pre-requirements

Getting started with Azure Functions in VSCode

Usage

After installing all dependencies, go to the chatbot-client folder and take a look at the main.tsp file, where the service is described

import "@typespec/http";
import "@azure-tools/typespec-ts";

using TypeSpec.Http;

@service({ 
  title: "Chatbot Client",
})
namespace ChatbotAPI;
  
model Message {
  id: string;
  content: string;
  sender: string;
  timestamp: utcDateTime;
}
@error
model Error {
  code: int32;
  message: string;
}

@route("/history")
@tag("MessageHistory")
interface Messages {
  @get listMessages(): Message[] | Error;
  @post sendMessage(@body content: { text: string }): Message | Error;
  @delete delete(@path id: string): void | Error;
}

Learn more about TypeSpec for REST

Compile the client

Now take a look at the TypeSpec config file where the emitters are configured. As you can see, we have two

• the typescript emitter
• the openapi3 emitter

emit:
  - "@azure-tools/typespec-ts"
  - "@typespec/openapi3"
options:
  "@azure-tools/typespec-ts":
    package-name: chatbot-client

To compile, and get the output, we can now run

cd packages/chatbot-client
tsp compile .

🚀 Both the client and the API spec are now generated under ./packages/chatbot-client/tsp-output

Running the server

You will now need to install ChatbotClient as a dependency to the server found under chat-server. Please note that I'm referring to the package generated, that has it's own package.json file.

Now you can start the server, running

cd packages/chatbot-server
pnpm serve

And if you start the local Azure Function emulator, by going to the

cd chatbot-api 
func start

You could make a request to the chatbot service to get a ficticious list of message history with

curl -X "localhost:3010/history" 

That should respond with

[{"id":1,"text":"Hello! How can I help you?","sender":"bot"},{"id":2,"text":"What’s the weather like today?","sender":"user"},{"id":3,"text":"It’s sunny with a high of 25°C!","sender":"bot"}]%

More resources

Get the slides for this talk as presented in LaConf' Paris