神威/KAMUIとRoo-clineとSourceSageMCPでRustバックエンドのシンプルダッシュボードを作ってみた！

AIツール

はじめに 🎯

神威/KAMUIとRoo-clineの最新機能を使って、Rustをバックエンドにしたシンプルなダッシュボードアプリケーションを作成してみました。今回はSourceSage MCPを活用して、プロジェクト構造の分析から実装まで自動化しています。

神威/KAMUIによる設計 🎯

まず、神威/KAMUIを使用してプロジェクトの構造を定義しました。KAMUIはstructure.yamlを生成し、これをもとにRoo-clineが実装を進めていきます。

src:
  structure.yaml:
    content: |-
      Nekoneko Technology Management Dashboard
      - バックエンド: Rust (Axum)
      - フロントエンド: Next.js (TypeScript)
      - データベース: PostgreSQL
      - 状態管理: Zustand
      - UI: Shadcn/ui, Tailwind CSS

      主要機能:
      - ダッシュボード
      - プロジェクト管理
      - リソース追跡
      - ユーザー認証

      agent選定理由: claude-3-5-sonnetは複雑なアーキテクチャの設計と実装に最適
      api選定理由: OpenAI APIを使用し、AIによる高度な分析機能を提供

    dependency: []
    agent: "claude-3-5-sonnet-20241022"
    api: "openai-gpt-4o"

この構造定義により、Roo-clineは必要な依存関係やファイル構造を理解し、効率的に実装を進めることができました。

プロジェクト概要 📋

  • プロジェクト名: nekoneko-technology-management-dashboard
  • フロントエンド: Next.js + TypeScript
  • バックエンド: Rust (Axum)
  • 状態管理: Zustand
  • UIライブラリ: shadcn/ui

実装プロセス 🔄

1. プロジェクト作成とデプロイ

実行されたプロセス:

  1. GitHubリポジトリの作成:

    gh repo create nekoneko-technology-management-dashboard --public --description "ねこねこテクノロジー技術管理ダッシュボード" --confirm

  2. プロジェクト構造の分析（Source Sage MCP使用）:

    generate_structure
Arguments:
{
"path": "C:/Prj/nekoneko-technology-management-dashboard"
}

  3. アセットディレクトリの作成とSVGヘッダー生成

  4. プロジェクトのREADME.md作成

  5. Gitflowの初期化（aira-mcp-server使用）

最初のプロンプト:

nekoneko-technology-management-dashboard というGithubのリポジトリを作成して公開デプロイして

Roo-clineの自動処理:

  • GitHubリポジトリの作成
  • プロジェクトの初期構造の設定
  • README.mdとヘッダー画像の生成
  • Gitの初期化とプッシュ

2. フロントエンド実装

詳細な実行プロセス:

  1. 依存関係のインストール:

    cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer

  2. shadcn/uiの設定:

    npx shadcn-ui@latest init

  3. 必要なコンポーネントの生成:

    cd src/frontend && npm install clsx tailwind-merge tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-slot

  4. TypeScript設定:

    // tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}
// ... その他の設定
}
}

  5. Zustandストアの実装:

    import { create } from 'zustand';
interface Project {
  id: string;
  name: string;
  status: string;
  progress: number;
}

interface ProjectStore {
  projects: Project[];
  fetchProjects: () => Promise<void>;
}

export const useProjectStore = create<ProjectStore>((set) => ({
  projects: [],
  fetchProjects: async () => {
    const response = await fetch('http://localhost:3002/projects');
    const data = await response.json();
    set({ projects: data });
  }
}));

自動実行されたコマンド:

cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer

Roo-clineが自動生成したファイル:

  • components.json (shadcn/ui設定)
  • tailwind.config.js
  • プロジェクトストア (Zustand)
  • UIコンポーネント (Card, Button, Dialog)

3. バックエンド実装 (Rust)

詳細な実行プロセス:

  1. Rustプロジェクトの作成と依存関係の追加:

    cd src && cargo new backend
cd backend && cargo add tokio --features full
cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber
cargo add tower-http --features cors

  2. メインサーバーコードの実装:

    use axum::{
    routing::{get, post},
    Router,
    Json,
};
use serde::{Deserialize, Serialize};
use tower_http::cors::{CorsLayer, Any};

#[derive(Debug, Serialize, Deserialize)]
struct Project {
    id: String,
    name: String,
    status: String,
    progress: f32,
}

#[tokio::main]
async fn main() {
    let cors = CorsLayer::new()
        .allow_origin(Any)
        .allow_methods(Any)
        .allow_headers(Any);

    let app = Router::new()
        .route("/projects", get(get_projects))
        .layer(cors);

    let listener = tokio::net::TcpListener::bind("127.0.0.1:3002")
        .await
        .unwrap();
    println!("Server running on http://localhost:3002");

    axum::serve(listener, app).await.unwrap();
}

  3. CORSの設定とエラーハンドリングの実装

  4. エンドポイントの実装（GET /projects）

自動実行されたコマンド:

cd src && cargo new backend && cd backend && cargo add tokio --features full && cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber

4. エラー対応と解決

発生したエラーと解決プロセス:

  1. idnaクレートの互換性エラー: 
    error[E0658]: use of unstable library feature 'error_in_core'

解決手順:

  • Cargo.tomlの依存関係を調整
  • idnaクレートのバージョンを指定
  • 一時的にデータベース関連の依存関係を削除

  1. フロントエンドのポート競合:

    # バックエンドポートを3002に変更
let listener = tokio::net::TcpListener::bind("127.0.0.1:3002").await.unwrap();

  2. CORSエラーの解決:

    let cors = CorsLayer::new()
.allow_origin(Any)
.allow_methods(Any)
.allow_headers(Any);

  3. TypeScript型エラーの解決:

    • 適切な型定義の追加
    • インターフェースの実装

遭遇したエラー:

error[E0658]: use of unstable library feature 'error_in_core'

Roo-clineによる自動解決:

  • Cargo.tomlの依存関係の調整
  • idnaクレートのバージョン指定
  • データベース関連の依存関係の一時的な削除

コスト分析 💰

フロントエンド実装

  • トークン使用量: 160 / 15.0k
  • キャッシュヒット: +314.8k / 1.5m
  • API費用: $1.8544

バックエンド実装

  • トークン使用量: 112 / 4.3k
  • キャッシュヒット: +71.4k / 992.9k
  • API費用: $0.6307

総費用: $2.4851

まとめ ✨

Roo-clineとSourceSage MCPを使用することで、以下の利点がありました：

  1. プロジェクト構造の自動分析と最適化
  2. フロントエンド・バックエンドの自動実装
  3. エラーの自動検知と解決
  4. GitHubへの自動デプロイ

特に、Rustバックエンドの実装では、依存関係の解決やエラー対応を自動的に行ってくれる点が非常に便利でした。

リポジトリ 🔗

完成したプロジェクトは以下で確認できます：
nekoneko-technology-management-dashboard

使用ツール

GitHub - RooVetGit/Roo-Cline: Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, using the browser, and more with your permission every step of the way.
Autonomous coding agent right in your IDE, capable of creating/editing files, executing commands, using the browser, and more with your permission every step of...
github.com
Babel & Zoltraak
Web site created using create-react-app
www.kamui.ai

コメント

タイトルとURLをコピーしました