Skip to Content
DocsSQL Editor ExtensionsExtension - AIWidget

@tidbcloud/codemirror-extension-ai-widget

A codemirror extension provides a widget to chat with AI to help you write or refine SQL. (will support to work with other languages later)

Features

  • Show placeholder when doc is empty or starting write a new SQL statement
  • Show tooltip hint when select content
  • Easy to use prompt input widget to chat with AI
  • Show diff view to compare the result and the original content

Installation

npm install @tidbcloud/codemirror-extension-ai-widget

You need to install its peer dependencies as well:

npm install @codemirror/view @codemirror/state @codemirror/merge @codemirror/lang-sql @tidbcloud/codemirror-extension-sql-parser @tidbcloud/codemirror-extension-cur-sql

Usage

import { sql, MySQL } from '@codemirror/lang-sql' import { sqlParser } from '@tidbcloud/codemirror-extension-sql-parser' import { curSql } from '@tidbcloud/codemirror-extension-cur-sql' import { aiWidget } from '@tidbcloud/codemirror-extension-ai-widget' // add extensions to your editor created by getting started const extensions = [ // ...other extensions, sql({ dialect: MySQL }), sqlParser(), curSql(), aiWidget({ chat: async () => { // replace it by yourself chat to AI api in production await delay(2000) return { status: 'success', message: 'select * from test;' } }, cancelChat: () => {}, getDbList: () => { return ['test1', 'test2'] } }) ]

API

type ChatReq = { prompt: string refContent: string extra?: any } type ChatRes = { status: 'success' | 'error' message: string extra?: any } type AiWidgetOptions = { // hotkey to trigger ai widget, default is 'Mod-i' hotkey?: string // prompt input configuration // default: 'AI results may be incorrect' promptInputTipsNormal?: string // default: 'Fetching results...' promptInputTipsRequesting?: string // default: 'Ask AI to write anything...' promptInputPlaceholderNormal?: string // default: 'Error occurred. Please try to regenerate or input another instruction.' promptInputPlaceholderError?: string // placeholder configuration // default: 'Press 'Command + I' or <span>click here</span> to use AI' placeholderEmptyDocElement?: string // default: 'Press 'Command + I' to use AI' placeholderNormalElement?: string // tooltip hint configuration // default: 'Press <code><b>Command</b> + <b>I</b></code> to rewrite SQL by AI' tooltipHintElement?: string /* chat with AI */ chat: (view: EditorView, chatId: string, req: ChatReq) => Promise<ChatRes> cancelChat: (chatId: string) => void /* event callback, for telemetry if you need */ onEvent?: (view: EditorView, type: EventType, payload?: {}) => void /* for auto add `use {db};` statement if miss it */ getDbList: () => string[] } function aiWidget(options: AiWidgetOptions): Extension /* check whether prompt input widget is active */ function isPromptInputActive(state: EditorState): boolean /* check whether diff view is active */ function isUnifiedMergeViewActive(state: EditorState): boolean /* trigger the prompt input widget to show */ function activePromptInput( view: EditorView, defPrompt?: string, immediate?: boolean, /** Where is this method called from, the value maybe: 'hotkey', 'placeholder', 'fix_sql_button', ... default value is 'hotkey' */ source?: string, pos?: Pos ): void

demo

demo video 

Try it

You can try all the extensions playground at here  & the AI-widget extension at here .


Last updated on